fix(link-list): add missing mixin (#4632)

* fix(link-list): add missing mixin Ensures `<dds-link-list>` extends `StableSelectorMixin` so the static property that defines that stable selector works. Refs #4366. * docs(link-list): unify the format
carbon-design-system · Dec 7, 2020 · 058e7b8 · 058e7b8
1 parent d5c3d40
commit 058e7b8
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/packages/web-components/src/components/link-list/__stories__/README.stories.mdx b/packages/web-components/src/components/link-list/__stories__/README.stories.mdx
@@ -26,12 +26,20 @@ import '@carbon/ibmdotcom-web-components/es/components/card-link/card-link.js';
 
 ```html
 <dds-link-list>
-  <dds-link-list-item>
-
-  </dds-link-list-item>
+  <dds-link-list-item></dds-link-list-item>
   <dds-card-link href="https://example.com">
     <p>Copy text</p>
-    <svg slot="footer" focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20">
+    <svg
+      slot="footer"
+      focusable="false"
+      preserveAspectRatio="xMidYMid meet"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      aria-hidden="true"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+    >
       <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
     </svg>
   </dds-card-link>
@@ -42,4 +50,12 @@ import '@carbon/ibmdotcom-web-components/es/components/card-link/card-link.js';
 
 <Props of="dds-link-list" />
 
+## Stable selectors
+
+See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+
+| Web Components selector | Compatibility selector       | Description |
+| ----------------------- | ---------------------------- | ----------- |
+| `<dds-link-list>`       | data-autoid="dds--link-list" | Component   |
+
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/link-list/link-list.ts b/packages/web-components/src/components/link-list/link-list.ts
@@ -10,6 +10,7 @@ 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';
 
 const { prefix } = settings;
@@ -47,7 +48,7 @@ export enum LINK_LIST_TYPE {
  * @slot heading - The heading content.
  */
 @customElement(`${ddsPrefix}-link-list`)
-class DDSLinkList extends LitElement {
+class DDSLinkList extends StableSelectorMixin(LitElement) {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 
   private childItems;