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/__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);
});
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..323234a5259 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(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`
+
+
+ `;
+ }
+
+ /**
+ * 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;