Merge branch 'main' into 19228-controlled-tag

Author: sojinantony01

packages/react/src/components/ShapeIndicator/ShapeIndicator.mdx

@@ -1,4 +1,6 @@
-import { ArgTypes, Meta } from '@storybook/blocks';
+import { ArgTypes, Meta, Canvas } from '@storybook/blocks';
+import * as ShapeIndicatorStories from './ShapeIndicator.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -12,6 +14,9 @@ import { ArgTypes, Meta } from '@storybook/blocks';
 ## Table of Contents
 
 - [Overview](#overview)
+  - [Kind](#kind)
+  - [Size](#size)
+  - [Customizing the label](#customizing-the-label)
 - [Component API](#component-api)
 - [Feedback](#feedback)
 
@@ -31,9 +36,20 @@ function ExampleComponent() {
 }
 ```
 
+<Canvas
+  of={ShapeIndicatorStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(ShapeIndicatorStories.Default),
+    },
+  ]}
+/>
+
 ## Kind
 
-Shape indicators can take the form of failed, critical, high, medium, low, cautious, undefined, stable, informative, incomplete, and draft.
+Shape indicators can take the form of failed, critical, high, medium, low,
+cautious, undefined, stable, informative, incomplete, and draft.
 
 ## Text Size
 

packages/react/src/components/UnorderedList/UnorderedList-test.js

@@ -46,4 +46,15 @@ describe('UnorderedList', () => {
 
     expect(screen.getByTestId('list')).toHaveClass('some-class');
   });
+
+  it('should render expressive lists', () => {
+    const { container } = render(
+      <UnorderedList isExpressive>
+        <ListItem>Item</ListItem>
+      </UnorderedList>
+    );
+
+    expect(container.firstChild).toHaveClass(`${prefix}--list--unordered`);
+    expect(container.firstChild).toHaveClass(`${prefix}--list--expressive`);
+  });
 });

packages/web-components/src/components/accordion/__tests__/accordion-test.js

@@ -27,7 +27,7 @@ describe('cds-accordion', function () {
   it('should render', async () => {
     const el = await fixture(accordion);
 
-    expect(el).dom.to.equalSnapshot();
+    await expect(el).dom.to.equalSnapshot();
   });
 
   describe('automated verification testing', () => {

packages/web-components/src/components/ai-skeleton/ai-skeleton-icon.stories.ts

@@ -30,7 +30,7 @@ export const AISkeletonIcon = {
 };
 
 const meta = {
-  title: 'Components/Skeleton/AISkeleton',
+  title: 'Components/Skeleton/AI Skeleton',
 };
 
 export default meta;

packages/web-components/src/components/badge-indicator/__tests__/badge-indicator-test.js

@@ -15,7 +15,7 @@ describe('cds-badge-indicator', function () {
 
   it('should render', async () => {
     const el = await fixture(basicBadgeIndicator);
-    expect(el).dom.to.equalSnapshot();
+    await expect(el).dom.to.equalSnapshot();
   });
 
   it('should set a count', async () => {

packages/web-components/src/components/chat-button/chat-button.mdx

@@ -1,42 +1,27 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs } from '../../globals/internal/storybook-cdn';
 import * as ChatButtonStories from './chat-button.stories';
 
 <Meta of={ChatButtonStories} />
 
-# Chat Button
+# Chat button
 
-> 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/chat-button)
-> example implementation.
+## Table of Contents
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/chat-button)
+- [Component API](#component-api)
+- [CDN](#cdn)
+- [Feedback](#feedback)
 
-## Getting started
+<Canvas of={ChatButtonStories.Default} />
 
-Here's a quick example to get you started.
+## Component API
 
-### JS (via import)
-
-```javascript
-import '@carbon/web-components/es/components/chat-button/index.js';
-```
+<ArgTypes of="cds-chat-button" />
 
 <Markdown>{`${cdnJs({ components: ['chat-button'] })}`}</Markdown>
-<Markdown>{`${cdnCss()}`}</Markdown>
-
-```javascript
-import '@carbon/web-components/es/components/chat-button/index.js';
-import Add16 from '@carbon/icons/lib/add/16.js';
 
-function App() {
-  return html`<cds-chat-button>
-    Primary ${Add16({ slot: 'icon' })}
-  </cds-chat-button>`;
-}
-```
+## Feedback
 
-## `<cds-chat-button>` attributes and properties
-
-<ArgTypes of="cds-chat-button" />
-````
+Help us improve this component by providing feedback, asking questions on Slack,
+or updating this file on
+[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/web-components/src/components/chat-button/chat-button.mdx).

packages/web-components/src/components/chat-button/chat-button.ts

@@ -16,7 +16,9 @@ import styles from './chat-button.scss?lit';
 export { CHAT_BUTTON_SIZE, CHAT_BUTTON_KIND };
 
 /**
- * Icon Button
+ * Chat Button
+ *
+ * @element cds-chat-button
  *
  */
 @customElement(`${prefix}-chat-button`)

packages/web-components/src/components/checkbox/__tests__/__snapshots__/checkbox-skeleton-test.snap.js

@@ -0,0 +1,7 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots['cds-checkbox-skeleton should render'] = `<cds-checkbox-skeleton>
+</cds-checkbox-skeleton>
+`;
+/* end snapshot cds-checkbox-skeleton should render */

packages/web-components/src/components/checkbox/__tests__/checkbox-group-test.js

@@ -12,7 +12,7 @@ describe('cds-checkbox-group', function () {
     const group = html`<cds-checkbox-group
       legend-text="Checkbox heading"></cds-checkbox-group>`;
     const el = await fixture(group);
-    expect(el).dom.to.equalSnapshot();
+    await expect(el).dom.to.equalSnapshot();
   });
 
   it('should render helper-text', async () => {

packages/web-components/src/components/checkbox/__tests__/checkbox-skeleton-test.js

@@ -11,6 +11,6 @@ describe('cds-checkbox-skeleton', function () {
   it('should render', async () => {
     const skeleton = html`<cds-checkbox-skeleton></cds-checkbox-skeleton>`;
     const el = await fixture(skeleton);
-    expect(el).dom.to.equalSnapshot();
+    await expect(el).dom.to.equalSnapshot();
   });
 });

packages/web-components/src/components/checkbox/__tests__/checkbox-test.js

@@ -11,7 +11,7 @@ describe('cds-checkbox', function () {
   it('should render', async () => {
     const checkbox = html`<cds-checkbox>Checkbox Label</cds-checkbox>`;
     const el = await fixture(checkbox);
-    expect(el).dom.to.equalSnapshot();
+    await expect(el).dom.to.equalSnapshot();
   });
 
   it('should set the `id` on the <input> element', async () => {

packages/web-components/src/components/copy-button/__tests__/__snapshots__/copy-button-test.snap.js

@@ -9,6 +9,7 @@ snapshots['CopyButton should set tabIndex if one is passed via props'] =
   feedback-timeout="2000"
   kind="primary"
   size="md"
+  tab-index="0"
   tooltip-alignment=""
   tooltip-position="top"
   type="button"
@@ -19,13 +20,15 @@ snapshots['CopyButton should set tabIndex if one is passed via props'] =
 `;
 /* end snapshot CopyButton should set tabIndex if one is passed via props */
 
-snapshots['Button props should call the click handler'] = `<cds-copy
+snapshots['CopyButton should add extra classes via passed button-class-name'] =
+  `<cds-copy
   align="bottom"
-  button-class-name="cds--copy-btn"
+  button-class-name="cds--copy-btn extra-class"
   feedback="Copied!"
   feedback-timeout="2000"
   kind="primary"
   size="md"
+  tab-index="0"
   tooltip-alignment=""
   tooltip-position="top"
   type="button"
@@ -34,7 +37,7 @@ snapshots['Button props should call the click handler'] = `<cds-copy
   </slot>
 </cds-copy>
 `;
-/* end snapshot Button props should call the click handler */
+/* end snapshot CopyButton should add extra classes via passed button-class-name */
 
 snapshots['Button props should disable button if disabled prop is passed'] =
   `<cds-copy
@@ -45,6 +48,7 @@ snapshots['Button props should disable button if disabled prop is passed'] =
   feedback-timeout="2000"
   kind="primary"
   size="md"
+  tab-index="0"
   tooltip-alignment=""
   tooltip-position="top"
   type="button"
@@ -55,6 +59,24 @@ snapshots['Button props should disable button if disabled prop is passed'] =
 `;
 /* end snapshot Button props should disable button if disabled prop is passed */
 
+snapshots['Button props should call the click handler'] = `<cds-copy
+  align="bottom"
+  button-class-name="cds--copy-btn"
+  feedback="Copied!"
+  feedback-timeout="2000"
+  kind="primary"
+  size="md"
+  tab-index="0"
+  tooltip-alignment=""
+  tooltip-position="top"
+  type="button"
+>
+  <slot slot="tooltip-content">
+  </slot>
+</cds-copy>
+`;
+/* end snapshot Button props should call the click handler */
+
 snapshots[
   'Feedback should make the feedback visible for a limited amount of time'
 ] = `<cds-copy
@@ -64,6 +86,7 @@ snapshots[
   feedback-timeout="500"
   kind="primary"
   size="md"
+  tab-index="0"
   tooltip-alignment=""
   tooltip-position="top"
   type="button"
@@ -82,6 +105,7 @@ snapshots['Feedback should be able to specify the feedback message'] =
   feedback-timeout="200"
   kind="primary"
   size="md"
+  tab-index="0"
   tooltip-alignment=""
   tooltip-position="top"
   type="button"
@@ -101,6 +125,7 @@ snapshots[
   feedback-timeout="100"
   kind="primary"
   size="md"
+  tab-index="0"
   tooltip-alignment=""
   tooltip-position="top"
   type="button"
@@ -110,21 +135,3 @@ snapshots[
 </cds-copy>
 `;
 /* end snapshot Feedback should allow users to override default feedback timeout via prop */
-
-snapshots['CopyButton should add extra classes via passed button-class-name'] =
-  `<cds-copy
-  align="bottom"
-  button-class-name="cds--copy-btn extra-class"
-  feedback="Copied!"
-  feedback-timeout="2000"
-  kind="primary"
-  size="md"
-  tooltip-alignment=""
-  tooltip-position="top"
-  type="button"
->
-  <slot slot="tooltip-content">
-  </slot>
-</cds-copy>
-`;
-/* end snapshot CopyButton should add extra classes via passed button-class-name */

packages/web-components/src/components/copy-button/__tests__/copy-button-test.js

@@ -15,7 +15,7 @@ describe('CopyButton', () => {
       </cds-copy-button>
     `);
     expect(el.getAttribute('tabindex')).to.equal('2');
-    expect(el).shadowDom.to.equalSnapshot();
+    await expect(el).shadowDom.to.equalSnapshot();
   });
 
   it('should add extra classes via passed button-class-name', async () => {
@@ -30,7 +30,7 @@ describe('CopyButton', () => {
       ?.querySelector('cds-copy')
       ?.shadowRoot?.querySelector('button');
     expect(button).to.have.class('extra-class');
-    expect(el).shadowDom.to.equalSnapshot();
+    await expect(el).shadowDom.to.equalSnapshot();
   });
 });
 
@@ -45,7 +45,7 @@ describe('Button props', () => {
       ?.querySelector('cds-copy')
       ?.shadowRoot?.querySelector('button');
     expect(button).to.have.attribute('disabled');
-    expect(el).shadowDom.to.equalSnapshot();
+    await expect(el).shadowDom.to.equalSnapshot();
   });
 
   it('should call the click handler', async () => {
@@ -64,7 +64,7 @@ describe('Button props', () => {
       ?.shadowRoot?.querySelector('button');
     button?.click();
     expect(clicked).to.be.true;
-    expect(el).shadowDom.to.equalSnapshot();
+    await expect(el).shadowDom.to.equalSnapshot();
   });
 });
 
@@ -95,7 +95,7 @@ describe('Feedback', () => {
       'Expected feedback to disappear',
       { timeout: 3000 }
     );
-    expect(el).shadowDom.to.equalSnapshot();
+    await expect(el).shadowDom.to.equalSnapshot();
   });
 
   it('should be able to specify the feedback message', async () => {
@@ -141,7 +141,7 @@ describe('Feedback', () => {
         ?.querySelector('cds-tooltip-content')
         ?.textContent?.trim()
     ).to.not.equal(customFeedback);
-    expect(el).shadowDom.to.equalSnapshot();
+    await expect(el).shadowDom.to.equalSnapshot();
   });
 
   it('should allow users to override default feedback timeout via prop', async () => {
@@ -182,6 +182,6 @@ describe('Feedback', () => {
         timeout: customTimeout + 300,
       }
     );
-    expect(el).shadowDom.to.equalSnapshot();
+    await expect(el).shadowDom.to.equalSnapshot();
   });
 });