diff --git a/src/components/entity/state-info.html b/src/components/entity/state-info.html
index c181c1c827..634ed47e76 100644
--- a/src/components/entity/state-info.html
+++ b/src/components/entity/state-info.html
@@ -27,11 +27,11 @@
line-height: 40px;
}
- .name[in-dialog] {
+ .name[in-dialog], :host([secondary-line]) .name {
line-height: 20px;
}
- .time-ago {
+ .time-ago, ::slotted(*) {
@apply(--paper-font-common-nowrap);
color: var(--secondary-text-color);
}
@@ -48,7 +48,9 @@
-
+
+
+
diff --git a/test/state-info-test.html b/test/state-info-test.html
index 7846286ce4..6319d39bef 100644
--- a/test/state-info-test.html
+++ b/test/state-info-test.html
@@ -6,6 +6,11 @@
+
+
+ text
+
+
@@ -49,6 +54,7 @@
var name = lightOrShadow(si, '.name');
assert.isOk(name, '.name missing');
assert.equal(name.textContent, 'Name');
+ assert.equal(getComputedStyle(name).lineHeight, '40px');
assert.isNotOk(lightOrShadow(si, 'ha-relative-time'));
done();
@@ -60,10 +66,15 @@
si.inDialog = true;
flush(function() {
var relativeTime = lightOrShadow(si, 'ha-relative-time');
+ var name = lightOrShadow(si, '.name');
+
assert.isOk(relativeTime);
assert.notEqual(relativeTime.textContent, 'never');
assert.notEqual(relativeTime.textContent, '');
+ assert.isOk(name);
+ assert.equal(getComputedStyle(name).lineHeight, '20px');
+
si.stateObj = {entity_id: 'light.demo', state: 'off', attributes: {friendly_name: 'Name'}};
flush(function() {
assert.equal(relativeTime.textContent, 'never');
@@ -71,6 +82,21 @@
});
});
});
+
+ test('secondary line', function(done) {
+ si = fixture('state-info-secondary-line');
+ si.stateObj = {entity_id: 'light.demo', last_changed: '2017-01-01T00:00:00+00:00', state: 'off', attributes: {friendly_name: 'Name'}};
+ si.inDialog = false;
+ flush(function() {
+ var name = lightOrShadow(si, '.name');
+ assert.isOk(name);
+ assert.equal(getComputedStyle(name).lineHeight, '20px');
+ var content = si.queryEffectiveChildren('my-elem');
+ assert.isOk(content);
+ assert.equal(content.textContent, 'text');
+ done();
+ });
+ });
});