From 97228eb93caa2c44a3419f207431df548d258c1f Mon Sep 17 00:00:00 2001
From: Steve Brush <steve.brush@blackbaud.com>
Date: Mon, 16 Oct 2017 09:39:18 -0400
Subject: [PATCH] Fixed definition list wrapping to new row (#1194)

---
 .../definition-list-visual.component.html         | 15 +++++++++++++++
 .../definition-list.visual-spec.ts                | 11 +++++++++++
 .../definition-list-heading.component.scss        |  2 +-
 .../definition-list-label.component.scss          |  5 ++++-
 .../definition-list-value.component.scss          |  3 +--
 5 files changed, 32 insertions(+), 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
index 1ef1cc7d2..d1ebb1397 100644
--- 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
index b7db7e53c..812f2fa98 100644
--- 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
index e331df759..be05ad91f 100644
--- 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
index 1a5bf6c21..4def5e27f 100644
--- 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
index 91756cb5a..28a2d0996 100644
--- 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;
 }