feat(shape-indicator): new component (#18483)

* feat(shape-indicator): new component

* fix(style): tests

* fix(tests): add aria-hidden

* feat: shape indicator wc

* fix: fixed alignments and incomplete icon colors

* fix: added overview.mdx

* fix(wc): minor cleanup

* fix(shape-indicator): size to text-size prop and cleanup

* fix(shape-indicator): api

* fix(indicator-stories): remove playground

* fix(shape): avt test

---------

Co-authored-by: Gururajj77 <gururajtakeshi@gmail.com>

Author: ariellalgilmore

e2e/components/IconIndicator/IconIndicator-test.e2e.js

@@ -8,7 +8,8 @@
 'use strict';
 const { test } = require('@playwright/test');
 const { themes } = require('../../test-utils/env');
-const { snapshotStory } = require('../../test-utils/storybook');
+const { snapshot } = require('../../test-utils/snapshot');
+const { snapshotStory, visitStory } = require('../../test-utils/storybook');
 
 test.describe('IconIndicator', () => {
   themes.forEach((theme) => {
@@ -20,6 +21,22 @@ test.describe('IconIndicator', () => {
           theme,
         });
       });
+
+      test('icon indicator size 20 @vrt', async ({ page }) => {
+        await visitStory(page, {
+          component: 'IconIndicator',
+          id: 'experimental-statusindicators-unstable-iconindicator--default',
+          theme,
+          args: {
+            size: '20',
+          },
+        });
+        await snapshot(page, {
+          component: 'IconIndicator',
+          id: 'experimental-statusindicators-unstable-iconindicator--default',
+          theme,
+        });
+      });
     });
   });
 });

e2e/components/ShapeIndicator/ShapeIndicator-test.avt.e2e.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+import { expect, test } from '@playwright/test';
+import { visitStory } from '../../test-utils/storybook';
+
+test.describe('@avt ShapeIndicator', () => {
+  test('@avt-default-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ShapeIndicator',
+      id: 'experimental-statusindicators-unstable-shapeindicator--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('ShapeIndicator');
+  });
+});

e2e/components/ShapeIndicator/ShapeIndicator-test.e2e.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+const { test } = require('@playwright/test');
+const { themes } = require('../../test-utils/env');
+const { snapshot } = require('../../test-utils/snapshot');
+const { snapshotStory, visitStory } = require('../../test-utils/storybook');
+
+test.describe('ShapeIndicator', () => {
+  themes.forEach((theme) => {
+    test.describe(theme, () => {
+      test('shape indicator @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'ShapeIndicator',
+          id: 'experimental-statusindicators-unstable-shapeindicator--default',
+          theme,
+        });
+      });
+
+      test('shape indicator text size 14 @vrt', async ({ page }) => {
+        await visitStory(page, {
+          component: 'ShapeIndicator',
+          id: 'experimental-statusindicators-unstable-shapeindicator--default',
+          theme,
+          args: {
+            textSize: '14',
+          },
+        });
+        await snapshot(page, {
+          component: 'ShapeIndicator',
+          id: 'experimental-statusindicators-unstable-shapeindicator--default',
+          theme,
+        });
+      });
+    });
+  });
+});

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -11078,6 +11078,47 @@ Map {
     },
     "render": [Function],
   },
+  "unstable__ShapeIndicator" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+      "kind": Object {
+        "args": Array [
+          Array [
+            "failed",
+            "critical",
+            "high",
+            "medium",
+            "low",
+            "cautious",
+            "undefined",
+            "stable",
+            "informative",
+            "incomplete",
+            "draft",
+          ],
+        ],
+        "isRequired": true,
+        "type": "oneOf",
+      },
+      "label": Object {
+        "isRequired": true,
+        "type": "string",
+      },
+      "textSize": Object {
+        "args": Array [
+          Array [
+            12,
+            14,
+          ],
+        ],
+        "type": "oneOf",
+      },
+    },
+    "render": [Function],
+  },
   "unstable__Slug" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {

packages/react/src/__tests__/index-test.js

@@ -285,6 +285,7 @@ describe('Carbon Components React', () => {
         "unstable__FluidTimePickerSelect",
         "unstable__FluidTimePickerSkeleton",
         "unstable__IconIndicator",
+        "unstable__ShapeIndicator",
         "unstable__Slug",
         "unstable__SlugActions",
         "unstable__SlugContent",

packages/react/src/components/IconIndicator/IconIndicator.stories.js

@@ -20,49 +20,42 @@ export default {
   },
 };
 
-export const Default = () => {
+export const Default = (props) => {
   return (
     <div
       style={{
-        display: 'grid',
-        gridTemplateColumns: 'auto auto',
-        columnGap: '1rem',
-        rowGap: '0.5rem',
-        width: 'fit-content',
+        display: 'flex',
+        flexFlow: 'column',
+        rowGap: '.5rem',
       }}>
-      {IconIndicatorKinds.map((type) => (
-        <>
-          <IconIndicator kind={type} label={type} />
-          <IconIndicator kind={type} label={type} size={20} />
-        </>
-      ))}
+      <IconIndicator kind="failed" label="Failed" {...props} />
+      <IconIndicator kind="caution-major" label="Caution major" {...props} />
+      <IconIndicator kind="caution-minor" label="Caution minor" {...props} />
+      <IconIndicator kind="undefined" label="Undefined" {...props} />
+      <IconIndicator kind="succeeded" label="Succeeded" {...props} />
+      <IconIndicator kind="normal" label="Normal" {...props} />
+      <IconIndicator kind="in-progress" label="In progress" {...props} />
+      <IconIndicator kind="incomplete" label="Incomplete" {...props} />
+      <IconIndicator kind="not-started" label="Not started" {...props} />
+      <IconIndicator kind="pending" label="Pending" {...props} />
+      <IconIndicator kind="unknown" label="Unknown" {...props} />
+      <IconIndicator kind="informative" label="Informative" {...props} />
     </div>
   );
 };
 
-const PlaygroundStory = (props) => {
-  return <IconIndicator {...props} />;
-};
-
-export const Playground = PlaygroundStory.bind({});
-
-Playground.args = {
-  label: 'Custom label',
-  kind: 'failed',
+Default.args = {
   size: 16,
 };
 
-Playground.argTypes = {
+Default.argTypes = {
   label: {
     control: {
       type: 'text',
     },
   },
   kind: {
-    control: {
-      type: 'select',
-    },
-    options: IconIndicatorKinds,
+    control: false,
   },
   size: {
     control: {

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

@@ -0,0 +1,54 @@
+import { ArgTypes, Meta } from '@storybook/blocks';
+
+<Meta isTemplate />
+
+# ShapeIndicator
+
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/ShapeIndicator)
+&nbsp;
+
+{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component API](#component-api)
+- [Feedback](#feedback)
+
+{/* <!-- END doctoc generated TOC please keep comment here to allow auto update --> */}
+
+## Overview
+
+`ShapeIndicator`
+
+```jsx
+import { ShapeIndicator as unstable__ShapeIndicator } from '@carbon/react';
+
+function ExampleComponent() {
+  return (
+    <ShapeIndicator kind="failed" label="Failed">
+  );
+}
+```
+
+## Kind
+
+Shape indicators can take the form of failed, critical, high, medium, low, cautious, undefined, stable, informative, incomplete, and draft.
+
+## Text Size
+
+Shape indicators have two text size options 12 and 14. The default is 12.
+
+## Customizing the label
+
+You can set a string to customize the label of the Shape indicator.
+
+## Component API
+
+<ArgTypes />
+
+## Feedback
+
+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/react/src/components/ShapeIndicator/ShapeIndicator.mdx).

packages/react/src/components/ShapeIndicator/ShapeIndicator.stories.js

@@ -0,0 +1,64 @@
+/**
+ * Copyright IBM Corp. 2025, 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 ShapeIndicator from '.';
+import mdx from './ShapeIndicator.mdx';
+
+export default {
+  title: 'Experimental/StatusIndicators/unstable__ShapeIndicator',
+  component: ShapeIndicator,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const Default = (props) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexFlow: 'column',
+        rowGap: '.5rem',
+      }}>
+      <ShapeIndicator kind="failed" label="Failed" {...props} />
+      <ShapeIndicator kind="critical" label="Critical" {...props} />
+      <ShapeIndicator kind="high" label="High" {...props} />
+      <ShapeIndicator kind="medium" label="Medium" {...props} />
+      <ShapeIndicator kind="low" label="Low" {...props} />
+      <ShapeIndicator kind="cautious" label="Cautious" {...props} />
+      <ShapeIndicator kind="undefined" label="Undefined" {...props} />
+      <ShapeIndicator kind="stable" label="Stable" {...props} />
+      <ShapeIndicator kind="informative" label="Informative" {...props} />
+      <ShapeIndicator kind="incomplete" label="Incomplete" {...props} />
+      <ShapeIndicator kind="draft" label="Draft" {...props} />
+    </div>
+  );
+};
+
+Default.args = {
+  textSize: 12,
+};
+
+Default.argTypes = {
+  label: {
+    control: {
+      type: 'text',
+    },
+  },
+  kind: {
+    control: false,
+  },
+  textSize: {
+    control: {
+      type: 'select',
+    },
+    options: [12, 14],
+  },
+};

packages/react/src/components/ShapeIndicator/__tests__/ShapeIndicator-test.js

@@ -0,0 +1,44 @@
+/**
+ * Copyright IBM Corp. 2025, 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 { render, screen } from '@testing-library/react';
+import React from 'react';
+import ShapeIndicator from '../index';
+
+describe('ShapeIndicator', () => {
+  it('should use a custom label', () => {
+    render(<ShapeIndicator kind="failed" label="label" />);
+    expect(screen.getByText('label')).toBeInTheDocument();
+  });
+
+  it('should update with textSize prop', () => {
+    render(<ShapeIndicator kind="failed" label="label" textSize={14} />);
+    expect(screen.getByText('label')).toHaveClass('cds--shape-indicator--14');
+  });
+
+  it('should update with kind prop', () => {
+    render(<ShapeIndicator kind="critical" label="label" size={14} />);
+    expect(document.querySelector('svg')).toHaveClass(
+      'cds--shape-indicator--critical'
+    );
+  });
+
+  it('should support a custom class name on the outermost element', () => {
+    const { container } = render(
+      <ShapeIndicator kind="failed" label="label" className="custom-class" />
+    );
+    expect(container.firstChild).toHaveClass('custom-class');
+  });
+
+  it('should support a ref on the outermost element', () => {
+    const ref = jest.fn();
+    const { container } = render(
+      <ShapeIndicator kind="failed" label="label" ref={ref} />
+    );
+    expect(ref).toHaveBeenCalledWith(container.firstChild);
+  });
+});