feat(BreadcrumbSkeleton): added new props items, size, and noTrailingSlash (#20448)

maradwan26 · web-flow · commit 9888f70837f4 · 2025-09-10T14:59:39.000Z
* feat(react): add new props and story

* fix(breadcrumb): fix proptypes typo

* feat(wc): add new props and story

* test(react): add test cases

* fix: remove aria-label prop

* test(wc): add cds-breadcrumb-skeleton test file

* chore: update date

* fix: pass ci
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -469,6 +469,21 @@ Map {
       "className": {
         "type": "string",
       },
+      "items": {
+        "type": "number",
+      },
+      "noTrailingSlash": {
+        "type": "bool",
+      },
+      "size": {
+        "args": [
+          [
+            "sm",
+            "md",
+          ],
+        ],
+        "type": "oneOf",
+      },
     },
   },
   "Button" => {
diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.Skeleton.tsx b/packages/react/src/components/Breadcrumb/Breadcrumb.Skeleton.tsx
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -16,6 +16,22 @@ export interface BreadcrumbSkeletonProps
    * Specify an optional className to add.
    */
   className?: string;
+
+  /**
+   * Specify the number of items
+   */
+  items?: number;
+
+  /**
+   * Optional prop to omit the trailing slash for the breadcrumbs
+   */
+  noTrailingSlash?: boolean;
+
+  /**
+   * Specify the size of the Breadcrumb. Currently
+   * supports the following: `sm` & `md` (default: 'md')
+   */
+  size?: 'sm' | 'md';
 }
 
 function Item() {
@@ -28,15 +44,29 @@ function Item() {
   );
 }
 
-function BreadcrumbSkeleton({ className, ...rest }: BreadcrumbSkeletonProps) {
+function BreadcrumbSkeleton({
+  className,
+  items = 3,
+  noTrailingSlash,
+  size,
+  ...rest
+}: BreadcrumbSkeletonProps) {
   const prefix = usePrefix();
-  const classes = cx(`${prefix}--breadcrumb`, `${prefix}--skeleton`, className);
+  const classes = cx(
+    {
+      [`${prefix}--breadcrumb`]: true,
+      [`${prefix}--skeleton`]: true,
+      [`${prefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash,
+      [`${prefix}--breadcrumb--sm`]: size === 'sm',
+    },
+    className
+  );
 
   return (
     <div className={classes} {...rest}>
-      <Item />
-      <Item />
-      <Item />
+      {Array.from({ length: items }, (_, i) => (
+        <Item key={i} />
+      ))}
     </div>
   );
 }
@@ -46,6 +76,21 @@ BreadcrumbSkeleton.propTypes = {
    * Specify an optional className to add.
    */
   className: PropTypes.string,
+
+  /**
+   * Specify the number of items
+   */
+  items: PropTypes.number,
+
+  /**
+   * Optional prop to omit the trailing slash for the breadcrumbs
+   */
+  noTrailingSlash: PropTypes.bool,
+
+  /**
+   * Specify the size of the Breadcrumb. Currently supports the following: `sm` & `md` (default: 'md')
+   */
+  size: PropTypes.oneOf(['sm', 'md']),
 };
 
 export default BreadcrumbSkeleton;
diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js b/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -108,8 +108,26 @@ BreadcrumbWithOverflowMenuSizeSmall.args = {
   size: 'sm',
 };
 
-export const Skeleton = () => {
-  return <BreadcrumbSkeleton />;
+export const Skeleton = (args) => {
+  return <BreadcrumbSkeleton {...args} />;
+};
+
+Skeleton.args = {
+  items: 3,
+};
+
+Skeleton.parameters = {
+  controls: { exclude: ['aria-label'] },
+};
+
+Skeleton.argTypes = {
+  ...sharedArgTypes,
+  items: {
+    description: 'Specify the number of items',
+    table: {
+      defaultValue: { summary: 3 },
+    },
+  },
 };
 
 export const BreadcrumbWithOverflowVisualSnapshots = (args) => (
diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.tsx b/packages/react/src/components/Breadcrumb/Breadcrumb.tsx
@@ -83,7 +83,8 @@ Breadcrumb.propTypes = {
   noTrailingSlash: PropTypes.bool,
 
   /**
-   * Specify the size of the Breadcrumb. Currently supports the following:
+   * Specify the size of the Breadcrumb. Currently
+   * supports the following: `sm` & `md` (default: 'md')
    */
   size: PropTypes.oneOf(['sm', 'md']),
 };
diff --git a/packages/react/src/components/Breadcrumb/__tests__/Breadcrumb.Skeleton-test.js b/packages/react/src/components/Breadcrumb/__tests__/Breadcrumb.Skeleton-test.js
@@ -1,13 +1,15 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import React from 'react';
 import { BreadcrumbSkeleton } from '../';
-import { render } from '@testing-library/react';
+import { screen, render } from '@testing-library/react';
+
+const prefix = 'cds';
 
 describe('BreadcrumbSkeleton', () => {
   it('should support a custom `className` prop on the outermost element', () => {
@@ -19,4 +21,28 @@ describe('BreadcrumbSkeleton', () => {
     const { container } = render(<BreadcrumbSkeleton data-testid="test" />);
     expect(container.firstChild).toHaveAttribute('data-testid', 'test');
   });
+
+  it('should render the specified number of skeleton items', () => {
+    const { container } = render(<BreadcrumbSkeleton items={5} />);
+    const items = container.querySelectorAll(`.${prefix}--breadcrumb-item`);
+    expect(items).toHaveLength(5);
+  });
+
+  it('should respect size prop', () => {
+    const { container } = render(<BreadcrumbSkeleton size="sm" />);
+    expect(container.firstChild).toHaveClass(`${prefix}--breadcrumb--sm`);
+  });
+
+  it('should accept a `noTrailingSlash` and omit the trailing slash', () => {
+    const { container } = render(<BreadcrumbSkeleton noTrailingSlash />);
+
+    // The slashes are implemented with pseudo elements that can't be detected in jsdom.
+    // So we have to settle here for just validating against the class. Pseudo elements
+    // should be tested in the browser/e2e tests.
+    // https://testing-library.com/docs/dom-testing-library/api-configuration/#computedstylesupportspseudoelements
+    // https://github.com/jsdom/jsdom/issues/1928
+    expect(container.firstChild).toHaveClass(
+      `${prefix}--breadcrumb--no-trailing-slash`
+    );
+  });
 });
diff --git a/packages/web-components/src/components/breadcrumb/__tests__/breadcrumb-skeleton-test.js b/packages/web-components/src/components/breadcrumb/__tests__/breadcrumb-skeleton-test.js
@@ -0,0 +1,62 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import '@carbon/web-components/es/components/breadcrumb/breadcrumb-skeleton.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('cds-toggle', () => {
+  it('should support a custom class on the host', async () => {
+    const el = await fixture(
+      html`<cds-breadcrumb-skeleton
+        class="custom-class"></cds-breadcrumb-skeleton>`
+    );
+    expect(el.classList.contains('custom-class')).to.be.true;
+  });
+
+  it('should spread additional attributes on the host element', async () => {
+    const el = await fixture(
+      html`<cds-breadcrumb-skeleton
+        data-testid="skeleton"></cds-breadcrumb-skeleton>`
+    );
+    expect(el.getAttribute('data-testid')).to.equal('skeleton');
+  });
+
+  it('should render the specified number of skeleton items', async () => {
+    const el = await fixture(
+      html`<cds-breadcrumb-skeleton items="5"></cds-breadcrumb-skeleton>`
+    );
+    const items = el.shadowRoot?.querySelectorAll('.cds--breadcrumb-item');
+    expect(items.length).to.equal(5);
+  });
+
+  it('should respect the `size` attribute', async () => {
+    const el = await fixture(
+      html`<cds-breadcrumb-skeleton size="sm"> </cds-breadcrumb-skeleton>`
+    );
+
+    const container = el.shadowRoot?.querySelector('.cds--breadcrumb');
+    const classList = container?.classList || [];
+    expect(
+      Array.from(classList).some((cls) => cls.includes('--breadcrumb--sm'))
+    ).to.be.true;
+  });
+
+  it('should accept a `no-trailing-slash` and omit the trailing slash', async () => {
+    const el = await fixture(html`
+      <cds-breadcrumb-skeleton no-trailing-slash> </cds-breadcrumb-skeleton>
+    `);
+
+    const container = el.shadowRoot?.querySelector('.cds--breadcrumb');
+    const items = container.querySelectorAll('.cds--breadcrumb-item');
+    expect(items.length).to.be.greaterThan(0);
+
+    const lastItem = items[items.length - 1];
+
+    const lastItemStyle = window.getComputedStyle(lastItem, ':after');
+    expect(lastItemStyle.content).to.equal('""');
+  });
+});
diff --git a/packages/web-components/src/components/breadcrumb/breadcrumb-skeleton.ts b/packages/web-components/src/components/breadcrumb/breadcrumb-skeleton.ts
@@ -1,12 +1,15 @@
 /**
- * Copyright IBM Corp. 2019, 2024
+ * Copyright IBM Corp. 2019, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
+import { classMap } from 'lit/directives/class-map.js';
 import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
+import { BREADCRUMB_SIZE } from './defs';
 import styles from './breadcrumb.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
@@ -23,10 +26,35 @@ const renderItem = () => {
  */
 @customElement(`${prefix}-breadcrumb-skeleton`)
 class CDSBreadcrumbSkeleton extends LitElement {
+  /**
+   * Specify the number of items
+   */
+  @property({ type: Number, reflect: true })
+  items = 3;
+
+  /**
+   * Optional prop to omit the trailing slash for the breadcrumbs
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'no-trailing-slash' })
+  noTrailingSlash = false;
+
+  /**
+   * Specify the size of the Breadcrumb. Currently
+   * supports the following: `sm` & `md` (default: 'md')
+   */
+  @property({ type: BREADCRUMB_SIZE, reflect: true })
+  size = BREADCRUMB_SIZE.MEDIUM;
+
   render() {
+    const classes = classMap({
+      [`${prefix}--breadcrumb`]: true,
+      [`${prefix}--skeleton`]: true,
+      [`${prefix}--breadcrumb--no-trailing-slash`]: this.noTrailingSlash,
+      [`${prefix}--breadcrumb--sm`]: this.size === BREADCRUMB_SIZE.SMALL,
+    });
     return html`
-      <div class="${prefix}--breadcrumb ${prefix}--skeleton">
-        ${renderItem()} ${renderItem()} ${renderItem()}
+      <div class="${classes}">
+        ${[...Array(this.items)].map(() => renderItem())}
       </div>
     `;
   }
diff --git a/packages/web-components/src/components/breadcrumb/breadcrumb.stories.ts b/packages/web-components/src/components/breadcrumb/breadcrumb.stories.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2019, 2024
+ * Copyright IBM Corp. 2019, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -123,22 +123,32 @@ export const BreadcrumbWithOverflowMenu = {
     `;
   },
 };
-const skeletonArgs = { className: '' };
+const skeletonArgs = { items: 3, ...args };
 const skeletonArgTypes = {
-  className: {
-    control: 'text',
-    description:
-      'Specify an optional className to be applied to the container node.',
+  items: {
+    control: 'number',
+    description: 'Specify the number of items',
   },
+  ...argTypes,
 };
 
 export const Skeleton = {
   args: skeletonArgs,
   argTypes: skeletonArgTypes,
+  parameters: {
+    controls: {
+      exclude: ['aria-label'],
+    },
+  },
   render: (args) => {
-    const { className } = args ?? {};
+    const { className, noTrailingSlash, size, items } = args ?? {};
     return html`
-      <cds-breadcrumb-skeleton .class="${className}"> </cds-breadcrumb-skeleton>
+      <cds-breadcrumb-skeleton
+        .size="${size}"
+        .class="${className}"
+        ?no-trailing-slash="${noTrailingSlash}"
+        items="${items}">
+      </cds-breadcrumb-skeleton>
     `;
   },
 };
