fix(components/layout): remove bottom margin from description lists (#767)

Author: Blackbaud-ErikaMcVey

libs/components/layout/src/lib/modules/description-list/description-list.component.scss

@@ -1,6 +1,10 @@
 @use 'libs/components/theme/src/lib/styles/mixins' as mixins;
 @use 'libs/components/theme/src/lib/styles/variables' as *;
 
+:host {
+  display: block;
+}
+
 .sky-description-list {
   margin: 0;
   padding: 0;
@@ -21,15 +25,20 @@
   // Vertical mode
   &.sky-description-list-vertical-mode {
     .sky-description-list-content {
-      margin: 0 0 $sky-space-lg;
       width: auto;
+
+      &:not(:last-child) {
+        margin: 0 0 $sky-space-lg;
+      }
     }
   }
 
   // Horizontal mode
   &.sky-description-list-horizontal-mode {
     display: flex;
     flex-wrap: wrap;
+    margin: 0 0 var(--sky-compat-description-list-margin-bottom, -$sky-space-lg)
+      0;
 
     .sky-description-list-content {
       margin: 0 0 $sky-space-lg 0;
@@ -90,7 +99,7 @@
 @include mixins.sky-theme-modern {
   .sky-description-list {
     &.sky-description-list-vertical-mode {
-      .sky-description-list-content {
+      .sky-description-list-content:not(:last-child) {
         margin: 0 0 $sky-theme-modern-margin-stacked-lg;
       }
 

libs/components/packages/src/schematics/migrations/update-7/add-compat-stylesheets.spec.ts

@@ -32,6 +32,43 @@ describe('Migrations > Add compat stylesheets', () => {
 .sky-alert {
   margin-bottom: 20px;
 }
+`;
+
+  const descriptionListContents = `/*******************************************************************************
+ * TODO: The following component libraries introduced visual breaking changes
+ * in SKY UX 7. Each block of CSS reintroduces the styles that were changed or
+ * removed for backwards compatibility. You will need to do the following
+ * before migrating to the next major version of SKY UX:
+ * - Address each of the changes by following the instructions
+ *   in each block of CSS, then remove the block.
+ * - Delete this file after all blocks have been addressed.
+ * - Remove each occurrence of this file in your project's
+ *   angular.json file.
+ *******************************************************************************/
+
+/*******************************************************************************
+ * COMPONENT: DESCRIPTION LIST
+ *******************************************************************************/
+
+/*******************************************************************************
+ * The preset bottom margin has been removed from description list components
+ * in horizontal and vertical modes in default theme and vertical mode in
+ * modern. To implement the newly-recommended spacing, add the
+ * \`sky-margin-stacked-lg\` CSS class to each \`sky-description-list\` component
+ * in your application, then remove this block.
+ *******************************************************************************/
+
+.sky-description-list-vertical-mode .sky-description-list-content:last-child {
+  margin-bottom: 15px;
+}
+
+.sky-theme-modern .sky-description-list-vertical-mode .sky-description-list-content:last-child {
+  margin-bottom: 20px;
+}
+
+:root {
+  --sky-compat-description-list-margin-bottom: 0;
+}
 `;
 
   const runner = new SchematicTestRunner(
@@ -125,6 +162,18 @@ describe('Migrations > Add compat stylesheets', () => {
     );
   });
 
+  it('should add a compat stylesheet for the layout library', async () => {
+    await validateCompatStylesheet(
+      JSON.stringify({
+        dependencies: {
+          '@skyux/layout': '6.0.0',
+        },
+      }),
+      descriptionListContents,
+      []
+    );
+  });
+
   it('should add a compat stylesheet for libraries in devDependencies', async () => {
     await validateCompatStylesheet(
       JSON.stringify({

libs/components/packages/src/schematics/migrations/update-7/add-compat-stylesheets.ts

@@ -26,6 +26,33 @@ The preset bottom margin has been removed from alert components. To implement th
         },
       ],
     },
+    {
+      name: '@skyux/layout',
+      components: [
+        {
+          name: 'description list',
+          styles: [
+            {
+              css: `
+.sky-description-list-vertical-mode .sky-description-list-content:last-child {
+  margin-bottom: 15px;
+}
+
+.sky-theme-modern .sky-description-list-vertical-mode .sky-description-list-content:last-child {
+  margin-bottom: 20px;
+}
+
+:root {
+  --sky-compat-description-list-margin-bottom: 0;
+}
+`,
+              instructions: `
+The preset bottom margin has been removed from description list components in horizontal and vertical modes in default theme and vertical mode in modern. To implement the newly-recommended spacing, add the \`sky-margin-stacked-lg\` CSS class to each \`sky-description-list\` component in your application, then remove this block.`,
+            },
+          ],
+        },
+      ],
+    },
   ],
 };