chore(link-list): clean-up CSS classes (carbon-design-system#4885)

Removes support for `bx--link-list__split` class in `<dds-link-list>` and `bx--link-list-item__end` class in `<dds-link-list-item>`, for the sake of `type` attribute in `<dds-link-list>`. Refs carbon-design-system#4863.
IgnacioBecerra · Feb 22, 2021 · 783fca2 · 783fca2
1 parent 80de64d
commit 783fca2
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 90 deletions.
diff --git a/packages/styles/scss/components/link-list/_link-list.scss b/packages/styles/scss/components/link-list/_link-list.scss
@@ -183,34 +183,6 @@
       }
     }
   }
-
-  :host(#{$dds-prefix}-link-list-item).#{$prefix}--link-list-item__end {
-    .#{$prefix}--link-with-icon {
-      outline: none;
-    }
-  }
-
-  .#{$dds-prefix}-ce--link-list__list--end {
-    ::slotted(#{$dds-prefix}-link-list-item),
-    ::slotted(#{$dds-prefix}-link-list-item-cta) {
-      padding: $carbon--layout-01;
-      border-top: 1px solid $ui-03;
-      border-bottom: 1px solid $ui-03;
-      margin-top: -1px;
-      margin-left: -$carbon--layout-01;
-
-      .#{$prefix}--link {
-        &:focus {
-          outline: none;
-        }
-      }
-    }
-
-    ::slotted(#{$dds-prefix}-link-list-item:focus) {
-      outline: 2px solid $focus;
-      outline-offset: -2px;
-    }
-  }
 }
 
 @include exports('link-list') {

diff --git a/packages/web-components/src/components/link-list/link-list.scss b/packages/web-components/src/components/link-list/link-list.scss
@@ -20,17 +20,18 @@
   .#{$prefix}--link {
     cursor: pointer;
   }
-
-  &:focus {
-    outline: none;
-  }
 }
 
 :host(#{$dds-prefix}-link-list-item) {
+  outline: none;
+
   .#{$prefix}--link {
     > span {
       flex: 1;
     }
+
+    // TODO: See if there is a better solution than an internal custom property
+    padding: var(--#{$dds-prefix}--link-list-item--anchor-padding, 0);
   }
 }
 
@@ -56,39 +57,41 @@
   .#{$dds-prefix}-ce--link-list__list--end {
     ::slotted(#{$dds-prefix}-link-list-item),
     ::slotted(#{$dds-prefix}-link-list-item-cta) {
-      padding: $carbon--layout-01;
       border-top: 1px solid $ui-03;
       border-bottom: 1px solid $ui-03;
       margin-top: -1px;
       margin-left: -$carbon--layout-01;
+      --#{$dds-prefix}--link-list-item--anchor-padding: #{$carbon--spacing-05};
+    }
+  }
+
+  .#{$dds-prefix}-ce--link-list__heading__wrapper {
+    display: contents;
+  }
+
+  @include carbon--breakpoint('md') {
+    .#{$dds-prefix}-ce--link-list__heading--split ::slotted(#{$dds-prefix}-link-list-heading) {
+      width: 33.3%;
+      padding-right: 10%;
     }
   }
 
-  &.#{$prefix}--link-list__split {
+  .#{$dds-prefix}-ce--link-list__list--split {
     @include carbon--breakpoint('sm') {
       ::slotted(#{$dds-prefix}-link-list-item) {
         margin-right: -$carbon--layout-01;
       }
     }
-    @include carbon--breakpoint('md') {
-      ul {
-        ::slotted(#{$dds-prefix}-link-list-item) {
-          margin-left: -$carbon--layout-01;
-          margin-right: 0;
-        }
-
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-column-gap: 2rem;
-      }
 
-      .#{$prefix}--link-list__heading {
-        width: 33.3%;
-        padding-right: 10%;
-      }
+    @include carbon--breakpoint('md') {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-column-gap: 2rem;
 
       ::slotted(#{$dds-prefix}-link-list-item) {
         display: block;
+        margin-left: -$carbon--layout-01;
+        margin-right: 0;
       }
     }
   }

diff --git a/packages/web-components/src/components/link-list/link-list.ts b/packages/web-components/src/components/link-list/link-list.ts
@@ -6,7 +6,9 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { customElement, html, LitElement, property } from 'lit-element';
+
+import { classMap } from 'lit-html/directives/class-map';
+import { internalProperty, customElement, html, LitElement, property } from 'lit-element';
 import settings from 'carbon-components/es/globals/js/settings';
 import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
@@ -27,20 +29,11 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
 @customElement(`${ddsPrefix}-link-list`)
 class DDSLinkList extends StableSelectorMixin(LitElement) {
   /**
-   * Returns a class-name based on the parameter type
+   * `true` to use "split mode" layout for `type="end"`.
+   * Should happen if there are more than three child items slotted in.
    */
-  private ulClasses() {
-    switch (this.type) {
-      case LINK_LIST_TYPE.HORIZONTAL:
-        return `${prefix}--link-list__list--horizontal`;
-      case LINK_LIST_TYPE.VERTICAL:
-        return `${prefix}--link-list__list--vertical`;
-      case LINK_LIST_TYPE.END:
-        return `${ddsPrefix}-ce--link-list__list--end`;
-      default:
-        return `${prefix}--link-list__list--card`;
-    }
-  }
+  @internalProperty()
+  private _useSplitLayoutForEndType = false;
 
   /**
    * Handler for @slotChange, toggles the split layout class and set the children link-list-item to the same height
@@ -52,14 +45,7 @@ class DDSLinkList extends StableSelectorMixin(LitElement) {
     const childItems = (event.target as HTMLSlotElement)
       .assignedNodes({ flatten: true })
       .filter(node => node.nodeType === Node.ELEMENT_NODE && (node as Element)?.matches(selectorItem)) as Element[];
-
-    if (this.type === LINK_LIST_TYPE.END) {
-      childItems.forEach(item => item.classList.add(`${prefix}--link-list-item__end`));
-
-      if (childItems.length > 3) {
-        this.classList.add((this.constructor as typeof DDSLinkList).classSplitLayout);
-      }
-    }
+    this._useSplitLayoutForEndType = childItems.length > 3;
   }
 
   /**
@@ -69,21 +55,30 @@ class DDSLinkList extends StableSelectorMixin(LitElement) {
   type = LINK_LIST_TYPE.DEFAULT;
 
   render() {
+    const { type, _useSplitLayoutForEndType: useSplitLayoutForEndType } = this;
+    const headingClasses = classMap({
+      [`${ddsPrefix}-ce--link-list__heading__wrapper`]: true,
+      [`${ddsPrefix}-ce--link-list__heading--split`]: type === LINK_LIST_TYPE.END && useSplitLayoutForEndType,
+    });
+    const listTypeClasses =
+      {
+        [LINK_LIST_TYPE.HORIZONTAL]: `${prefix}--link-list__list--horizontal`,
+        [LINK_LIST_TYPE.VERTICAL]: `${prefix}--link-list__list--vertical`,
+        [LINK_LIST_TYPE.END]: `${ddsPrefix}-ce--link-list__list--end`,
+      }[type] ?? `${prefix}--link-list__list--card`;
+    const listClasses = classMap({
+      [`${prefix}--link-list__list`]: true,
+      [listTypeClasses]: true,
+      [`${ddsPrefix}-ce--link-list__list--split`]: type === LINK_LIST_TYPE.END && useSplitLayoutForEndType,
+    });
     return html`
-      <slot name="heading"></slot>
-      <ul name="list" class="${prefix}--link-list__list ${this.ulClasses()}">
+      <div class="${headingClasses}"><slot name="heading"></slot></div>
+      <ul name="list" class="${listClasses}">
         <slot @slotchange="${this._handleSlotChange}"></slot>
       </ul>
     `;
   }
 
-  /**
-   * The CSS class for the "split layout".
-   */
-  static get classSplitLayout() {
-    return `${prefix}--link-list__split`;
-  }
-
   /**
    * A selector selecting the child items.
    */

diff --git a/packages/web-components/tests/snapshots/dds-link-list.md b/packages/web-components/tests/snapshots/dds-link-list.md
@@ -3,8 +3,10 @@
 #### `Renders Default`
 
 ```
-<slot name="heading">
-</slot>
+<div class="dds-ce--link-list__heading__wrapper">
+  <slot name="heading">
+  </slot>
+</div>
 <ul
   class="bx--link-list__list bx--link-list__list--card"
   name="list"
@@ -18,8 +20,10 @@
 #### `Renders Horizontal`
 
 ```
-<slot name="heading">
-</slot>
+<div class="dds-ce--link-list__heading__wrapper">
+  <slot name="heading">
+  </slot>
+</div>
 <ul
   class="bx--link-list__list bx--link-list__list--horizontal"
   name="list"
@@ -33,8 +37,10 @@
 #### `Renders Vertical`
 
 ```
-<slot name="heading">
-</slot>
+<div class="dds-ce--link-list__heading__wrapper">
+  <slot name="heading">
+  </slot>
+</div>
 <ul
   class="bx--link-list__list bx--link-list__list--vertical"
   name="list"
@@ -48,8 +54,10 @@
 #### `Renders Vertical with cards`
 
 ```
-<slot name="heading">
-</slot>
+<div class="dds-ce--link-list__heading__wrapper">
+  <slot name="heading">
+  </slot>
+</div>
 <ul
   class="bx--link-list__list bx--link-list__list--vertical"
   name="list"
@@ -63,8 +71,10 @@
 #### `Renders End of section`
 
 ```
-<slot name="heading">
-</slot>
+<div class="dds-ce--link-list__heading__wrapper">
+  <slot name="heading">
+  </slot>
+</div>
 <ul
   class="bx--link-list__list dds-ce--link-list__list--end"
   name="list"