fix(link-list): v2 style regressions (#12125)

* fix(link-list): v2 style regressions * feat(link-list): yarn format * fix(link-list): undo temp styles change * fix(link-list): mirror link-list-item styles to link-list-item-cta * fix(link-list): simplify stories * yarn format * fix(link-list): update expected icon in tests * fix(link-list): fix spacing * fix(link-list): yarn format * fix(link-list): testing failures * fix(link-list): skip e2e test covered by percy --------- Co-authored-by: Matthew Oliveira <m4olivei@gmail.com>
carbon-design-system · Dec 7, 2024 · b400091 · b400091
1 parent e817962
commit b400091
Show file tree

Hide file tree

Showing 5 changed files with 159 additions and 221 deletions.
diff --git a/packages/styles/scss/components/link-list/_link-list.scss b/packages/styles/scss/components/link-list/_link-list.scss
@@ -27,7 +27,6 @@
     .#{$c4d-prefix}--link-list__list--vertical,
     .#{$c4d-prefix}-ce--link-list__list--end {
       display: grid;
-      grid-auto-rows: 1fr;
 
       ::slotted(#{$c4d-prefix}-link-list-item),
       ::slotted(#{$c4d-prefix}-link-list-item-cta) {
@@ -36,7 +35,9 @@
     }
 
     .#{$c4d-prefix}--link-list__list--vertical
-      ::slotted(#{$c4d-prefix}-link-list-item) {
+      ::slotted(#{$c4d-prefix}-link-list-item),
+    .#{$c4d-prefix}--link-list__list--vertical
+      ::slotted(#{$c4d-prefix}-link-list-item-cta) {
       display: flex;
     }
 
@@ -54,7 +55,8 @@
 
     .#{$c4d-prefix}-ce--link-list__list--split,
     .#{$c4d-prefix}-ce--link-list__list--three-columns {
-      ::slotted(#{$c4d-prefix}-link-list-item) {
+      ::slotted(#{$c4d-prefix}-link-list-item),
+      ::slotted(#{$c4d-prefix}-link-list-item-cta) {
         display: grid;
         align-items: stretch;
         // margin-right: -$spacing-05;
@@ -63,10 +65,6 @@
       @include breakpoint(md) {
         display: grid;
         grid-column-gap: $spacing-07;
-
-        ::slotted(#{$c4d-prefix}-link-list-item) {
-          margin-inline: -$spacing-05 0;
-        }
       }
     }
 
@@ -83,9 +81,14 @@
     }
   }
 
-  :host(#{$c4d-prefix}-link-list-item) {
+  :host(#{$c4d-prefix}-link-list-item),
+  :host(#{$c4d-prefix}-link-list-item-cta) {
     .#{$prefix}--link {
+      display: flex;
       align-content: flex-start;
+      padding: $spacing-04 0;
+      gap: $spacing-03;
+      inline-size: 100%;
 
       span,
       ::slotted(svg[slot='icon']) {
@@ -106,16 +109,6 @@
     @include type-style('heading-02');
   }
 
-  :host(#{$c4d-prefix}-link-list-item)[type='default'],
-  :host(#{$c4d-prefix}-link-list-item-cta)[type='default'],
-  :host(#{$c4d-prefix}-link-list-item)[type='end'] {
-    .#{$prefix}--link {
-      display: flex;
-      padding: $spacing-05 0;
-      inline-size: 100%;
-    }
-  }
-
   .#{$c4d-prefix}--link-list__list {
     ::slotted(#{$c4d-prefix}-link-list-item),
     ::slotted(#{$c4d-prefix}-link-list-item-cta) {
@@ -134,10 +127,6 @@
       border-block-end: 1px solid $border-subtle-01;
       border-block-start: 1px solid $border-subtle-01;
       margin-block-start: -1px;
-
-      @include breakpoint(lg) {
-        margin-inline: -$spacing-05;
-      }
     }
   }
 
@@ -156,7 +145,7 @@
 
   .#{$c4d-prefix}--link-list__list--vertical {
     ::slotted(*) {
-      margin-block-end: $spacing-05;
+      margin-block-end: 0;
     }
   }