chore(components): unify static property for CSS selectors (#4660)

### Related Ticket(s) Refs #4193. Refs #4144. ### Description Change the static properties for the CSS selectors, so it aligns to the rest of the codebase (except `stableSelector` for name-compatibility reasons with React). Also removes `sameHeight()` JavaScript code as it'll be replaced with #4657. ### Changelog **Changed** - Change the static properties for the CSS selectors, so it aligns to the rest of the codebase (except `stableSelector` for name-compatibility reasons with React). **Removed** - `sameHeight()` JavaScript code as it'll be replaced with #4657.
carbon-design-system · Dec 9, 2020 · 747d923 · 747d923
1 parent 468e9aa
commit 747d923
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 90 deletions.
diff --git a/packages/web-components/src/components/button-group/button-group.ts b/packages/web-components/src/components/button-group/button-group.ts
@@ -32,25 +32,6 @@ export enum BUTTON_TYPES {
  */
 @customElement(`${ddsPrefix}-button-group`)
 class DDSButtonGroup extends LitElement {
-  static get stableSelector() {
-    return `${ddsPrefix}--button-group`;
-  }
-
-  static get buttonGroupItemSelector() {
-    return `${ddsPrefix}-button-group-item`;
-  }
-
-  render() {
-    return html`
-      <slot @slotchange="${this._handleSlotChange}"></slot>
-    `;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute('role', 'list');
-  }
-
   /**
    * Handler for @slotchange, set the first button-group-item to kind tertiary and primary for the remaining ones
    *
@@ -61,7 +42,7 @@ class DDSButtonGroup extends LitElement {
       .assignedNodes()
       .filter(elem =>
         (elem as HTMLElement).matches !== undefined
-          ? (elem as HTMLElement).matches((this.constructor as typeof DDSButtonGroup).buttonGroupItemSelector)
+          ? (elem as HTMLElement).matches((this.constructor as typeof DDSButtonGroup).selectorItem)
           : false
       );
 
@@ -74,6 +55,28 @@ class DDSButtonGroup extends LitElement {
     });
   }
 
+  render() {
+    return html`
+      <slot @slotchange="${this._handleSlotChange}"></slot>
+    `;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'list');
+  }
+
+  /**
+   * A selector that will return the child items.
+   */
+  static get selectorItem() {
+    return `${ddsPrefix}-button-group-item`;
+  }
+
+  static get stableSelector() {
+    return `${ddsPrefix}--button-group`;
+  }
+
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 

diff --git a/packages/web-components/src/components/card-group/card-group.ts b/packages/web-components/src/components/card-group/card-group.ts
@@ -26,13 +26,6 @@ class DDSCardGroup extends LitElement {
     `;
   }
 
-  /**
-   * A selector that will return card group items.
-   */
-  static get cardGroupItemSelector() {
-    return `${ddsPrefix}-card-group-item`;
-  }
-
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 

diff --git a/packages/web-components/src/components/link-list/__tests__/link-list.test.ts b/packages/web-components/src/components/link-list/__tests__/link-list.test.ts
@@ -8,7 +8,6 @@
  */
 
 import { render } from 'lit-html';
-import DDSLinkList from '../link-list';
 import { Default, Horizontal, Vertical, VerticalWithCards, EndOfSection } from '../__stories__/link-list.stories';
 
 describe('dds-link-list', function() {
@@ -75,12 +74,6 @@ describe('dds-link-list', function() {
     expect(document.body.querySelector('dds-link-list')).toMatchSnapshot({ mode: 'shadow' });
   });
 
-  it('Tests the get methods', function() {
-    expect((DDSLinkList as typeof DDSLinkList).stableSelector).toBe('dds--link-list');
-    expect((DDSLinkList as typeof DDSLinkList).splitLayoutClass).toBe('bx--link-list__split');
-    expect((DDSLinkList as typeof DDSLinkList).linkListItemSelector).toBe('dds-link-list-item');
-  });
-
   afterEach(async function() {
     await render(undefined!, document.body);
   });

diff --git a/packages/web-components/src/components/link-list/link-list.ts b/packages/web-components/src/components/link-list/link-list.ts
@@ -9,7 +9,6 @@
 import { 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 sameHeight from '@carbon/ibmdotcom-utilities/es/utilities/sameHeight/sameHeight';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './link-list.scss';
 
@@ -49,59 +48,10 @@ export enum LINK_LIST_TYPE {
  */
 @customElement(`${ddsPrefix}-link-list`)
 class DDSLinkList extends StableSelectorMixin(LitElement) {
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-
-  private childItems;
-
-  @property({ reflect: true })
-  type = LINK_LIST_TYPE.DEFAULT;
-
-  static get splitLayoutClass() {
-    return `${prefix}--link-list__split`;
-  }
-
-  static get linkListItemSelector() {
-    return `${ddsPrefix}-link-list-item`;
-  }
-
-  static get stableSelector() {
-    return `${ddsPrefix}--link-list`;
-  }
-
-  protected render() {
-    return html`
-      <h4 class="${prefix}--link-list__heading"><slot name="heading"></h4>
-      <ul name="list" class="${prefix}--link-list__list ${this.ulClasses()}">
-        <slot @slotchange="${this._handleSlotChange}"></slot>
-      </ul>
-    `;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener('resize', this._handleResize);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener('resize', this._handleResize);
-  }
-
-  /**
-   * Method called on resize, triggers the sameHeight utility
-   *
-   * @private
-   */
-  private _handleResize() {
-    if (this.childItems) window.requestAnimationFrame(() => sameHeight(this.childItems, 'md'));
-  }
-
   /**
    * Returns a class-name based on the parameter type
-   *
-   * @protected
    */
-  protected ulClasses() {
+  private ulClasses() {
     switch (this.type) {
       case LINK_LIST_TYPE.HORIZONTAL:
         return `${prefix}--link-list__list--horizontal`;
@@ -120,14 +70,49 @@ class DDSLinkList extends StableSelectorMixin(LitElement) {
    * @private
    */
   private _handleSlotChange(event: Event) {
-    this.childItems = (event.target as HTMLSlotElement)
+    const { selectorItem } = this.constructor as typeof DDSLinkList;
+    const childItems = (event.target as HTMLSlotElement)
       .assignedNodes({ flatten: true })
-      .filter(elem => (elem as HTMLElement).localName === (this.constructor as typeof DDSLinkList).linkListItemSelector);
-    if (this.childItems.length > 3 && this.type === LINK_LIST_TYPE.END) {
-      this.classList.add((this.constructor as typeof DDSLinkList).splitLayoutClass);
+      .filter(node => node.nodeType === Node.ELEMENT_NODE && (node as Element)?.matches(selectorItem)) as Element[];
+    if (childItems.length > 3 && this.type === LINK_LIST_TYPE.END) {
+      this.classList.add((this.constructor as typeof DDSLinkList).classSplitLayout);
     }
-    sameHeight(this.childItems, 'md');
   }
+
+  /**
+   * The link list type.
+   */
+  @property({ reflect: true })
+  type = LINK_LIST_TYPE.DEFAULT;
+
+  render() {
+    return html`
+      <h4 class="${prefix}--link-list__heading"><slot name="heading"></slot></h4>
+      <ul name="list" class="${prefix}--link-list__list ${this.ulClasses()}">
+        <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.
+   */
+  static get selectorItem() {
+    return `${ddsPrefix}-link-list-item`;
+  }
+
+  static get stableSelector() {
+    return `${ddsPrefix}--link-list`;
+  }
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 export default DDSLinkList;