Fixed definition list wrapping to new row (#1194)

blackbaud · Oct 16, 2017 · 97228eb · 97228eb
1 parent fdbfcef
commit 97228eb
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 4 deletions.
diff --git a/skyux-spa-visual-tests/src/app/definition-list/definition-list-visual.component.html b/skyux-spa-visual-tests/src/app/definition-list/definition-list-visual.component.html
@@ -28,3 +28,18 @@
     </sky-definition-list-content>
   </sky-definition-list>
 </div>
+<div id="screenshot-definition-list-3">
+  <sky-definition-list labelWidth="150px" defaultValue="No information found">
+    <sky-definition-list-heading>
+      A definition list with long text
+    </sky-definition-list-heading>
+    <sky-definition-list-content>
+      <sky-definition-list-label>
+        Label
+      </sky-definition-list-label>
+      <sky-definition-list-value>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor leo at lectus fringilla lobortis. Donec ullamcorper sed dolor eget posuere. Phasellus aliquet, neque in cursus commodo, libero turpis rhoncus purus, vel gravida quam risus et arcu. Quisque auctor risus tristique ligula pretium commodo. Aenean viverra mi vel lectus rutrum pretium. Duis condimentum dolor justo, sit amet lobortis turpis pharetra et. Integer tempor faucibus risus quis semper. Praesent in lacinia justo. Sed posuere porta ex nec aliquet.
+      </sky-definition-list-value>
+    </sky-definition-list-content>
+  </sky-definition-list>
+</div>
diff --git a/skyux-spa-visual-tests/src/app/definition-list/definition-list.visual-spec.ts b/skyux-spa-visual-tests/src/app/definition-list/definition-list.visual-spec.ts
@@ -24,4 +24,15 @@ describe('Definition list', () => {
 
   });
 
+  it('should match definition list screenshot with long text', () => {
+    return SkyVisualTest
+      .setupTest('definition-list')
+      .then(() => {
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'definition-list-long-text',
+          selector: '#screenshot-definition-list-3'
+        });
+      });
+  });
+
 });
diff --git a/src/modules/definition-list/definition-list-heading.component.scss b/src/modules/definition-list/definition-list-heading.component.scss
@@ -1,5 +1,5 @@
 @import "../../scss/mixins";
 
 .sky-definition-list-heading {
-    margin-bottom: $sky-margin-half;
+  margin-bottom: $sky-margin-half;
 }
diff --git a/src/modules/definition-list/definition-list-label.component.scss b/src/modules/definition-list/definition-list-label.component.scss
@@ -1,7 +1,10 @@
 @import "../../scss/mixins";
 
+:host {
+  flex: 0 0 90px;
+}
+
 .sky-definition-list-label {
   margin-right: $sky-margin;
-  width: 90px;
   word-wrap: break-word;
 }
diff --git a/src/modules/definition-list/definition-list-value.component.scss b/src/modules/definition-list/definition-list-value.component.scss
@@ -1,6 +1,5 @@
 @import "../../scss/mixins";
 
-.sky-definition-list-no-value,
-.sky-definition-list-value {
+:host {
   flex: 1;
 }