From b2cbe382ed754db93d54126b08b33b1991076bd5 Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Tue, 8 Dec 2020 18:22:37 +0900 Subject: [PATCH 1/3] chore(components): unify static property for CSS selectors 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 Refs #4193. Refs #4144. --- .../components/button-group/button-group.ts | 43 ++++---- .../src/components/card-group/card-group.ts | 7 -- .../src/components/link-list/link-list.ts | 97 ++++++++----------- 3 files changed, 64 insertions(+), 83 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 index e1453ce75c5..5a42708250c 100644 --- 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` - - `; - } - - 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` + + `; + } + + 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 index 74a9539ab55..d0ada84a85e 100644 --- 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/link-list.ts b/packages/web-components/src/components/link-list/link-list.ts index 19c18b2abf6..8ef05cd88a4 100644 --- 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` -

- - `; - } - - 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(elem => (elem 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` +

+ + `; + } + + /** + * 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; From 12177b0f7658ea16924d60b8bf3d385f5e00b257 Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Tue, 8 Dec 2020 21:08:33 +0900 Subject: [PATCH 2/3] test(link-list): remove redundant test --- .../src/components/link-list/__tests__/link-list.test.ts | 7 ------- 1 file changed, 7 deletions(-) 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 index ccbbd41fc2c..5dd835a2eac 100644 --- 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); }); From 93745a0fc32248d33eb5625cbbe8facccd123352 Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Tue, 8 Dec 2020 22:51:27 +0900 Subject: [PATCH 3/3] fix(link-list): fix JS error --- packages/web-components/src/components/link-list/link-list.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web-components/src/components/link-list/link-list.ts b/packages/web-components/src/components/link-list/link-list.ts index 8ef05cd88a4..323234a5259 100644 --- a/packages/web-components/src/components/link-list/link-list.ts +++ b/packages/web-components/src/components/link-list/link-list.ts @@ -73,7 +73,7 @@ class DDSLinkList extends StableSelectorMixin(LitElement) { const { selectorItem } = this.constructor as typeof DDSLinkList; const childItems = (event.target as HTMLSlotElement) .assignedNodes({ flatten: true }) - .filter(elem => (elem as Element)?.matches(selectorItem)) as Element[]; + .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); }