@@ -449,4 +457,34 @@ Playground.argTypes = {
],
control: { type: 'select' },
},
+ AILabelContent: {
+ table: {
+ disable: true,
+ },
+ },
+ children: {
+ table: {
+ disable: true,
+ },
+ },
+ className: {
+ table: {
+ disable: true,
+ },
+ },
+ onRevertClick: {
+ table: {
+ disable: true,
+ },
+ },
+ revertActive: {
+ table: {
+ disable: true,
+ },
+ },
+ revertLabel: {
+ table: {
+ disable: true,
+ },
+ },
};
diff --git a/packages/react/src/components/Slug/SlugDatatable.mdx b/packages/react/src/components/AILabel/AILabelDatatable.mdx
similarity index 62%
rename from packages/react/src/components/Slug/SlugDatatable.mdx
rename to packages/react/src/components/AILabel/AILabelDatatable.mdx
index fe6a4551d06c..0fb68621debd 100644
--- a/packages/react/src/components/Slug/SlugDatatable.mdx
+++ b/packages/react/src/components/AILabel/AILabelDatatable.mdx
@@ -1,20 +1,20 @@
-import { ArgsTable, Canvas, Story } from '@storybook/blocks';
-import { Slug, SlugContent, SlugActions } from '.';
-import * as SlugStories from '../DataTable/stories/DataTable-slug.stories';
+import { Story, ArgsTable, Canvas, Meta } from '@storybook/blocks';
+import { AILabel, AILabelContent, AILabelActions } from '.';
+import * as AILabelStories from '../DataTable/stories/DataTable-ai-label.stories';
-# Slug
+# AILabel
[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Slug)
|
-[Slug release status](https://airtable.com/appCAqlGVN8tRUbAp/shr71ZyLlIGORz3Vh/tblHqPusgkK8hIeHo)
+[AILabel release status](https://airtable.com/appCAqlGVN8tRUbAp/shr71ZyLlIGORz3Vh/tblHqPusgkK8hIeHo)
|
[Using AI-enhanced components in V10](https://github.com/carbon-design-system/carbon-for-ai/blob/main/docs/support-for-carbon-v10.md)
## Table of Contents
- [Overview](#overview)
-- [Slug anatomy](#slug-anatomy)
-- [Using Slug in DataTable](#using-slug-in-datatable)
+- [AILabel anatomy](#ailabel-anatomy)
+- [Using AILabel in DataTable](#using-ailabel-in-datatable)
- [Using as a column header](#using-as-a-column-header)
- [Using in a row](#using-in-a-row)
- [Feedback](#feedback)
@@ -24,34 +24,37 @@ import * as SlugStories from '../DataTable/stories/DataTable-slug.stories';
The `DataTable` supports placing a `slug` in both the column header and row.
-## Slug anatomy
+
+
+## AILabel anatomy
-The `Slug` itself is a button that acts as a `Toggletip` trigger. To construct
-the contents of the `Slug` callout, you can place the desired elements as a
-child of `Slug` in `SlugContent`, like so:
+The `AILabel` itself is a button that acts as a `Toggletip` trigger. To
+construct the contents of the `AILabel` callout, you can place the desired
+elements as a child of `AILabel` in `AILabelContent`, like so:
```jsx
-
-
+
+
{Content Here}
-
-
+
+
```
-The `Slug` also supports the rendering of an action bar at the bottom of the
-callout. To achieve this, you can pass in `SlugActions` as a child of `Slug`,
-placed inside the `SlugContent`
+The `AILabel` also supports the rendering of an action bar at the bottom of the
+callout. To achieve this, you can pass in `AILabelActions` as a child of
+`AILabel`, placed inside the `AILabelContent`
```jsx
-
-
+
+
{Content Here}
{Optional Slug action bar}
-
+
@@ -62,20 +65,20 @@ placed inside the `SlugContent`
-
-
-
+
+
+
```
-## Using `slug` in `DataTable`
+## Using `AILabel` in `DataTable`
### Using as a column header
-To use a `Slug` inside a column header, you'll need to add a `slug` to the
+To use an `AILabel` inside a column header, you'll need to add a `slug` to the
appropriate column data.
```jsx
-const columnSlugHeaders = [
+const columnAILabelHeaders = [
{
key: 'name',
header: 'Name',
@@ -84,8 +87,11 @@ const columnSlugHeaders = [
key: 'attached_groups',
header: 'Attached groups',
slug: (
-
-
+
+
AI Explained
84%
@@ -99,7 +105,7 @@ const columnSlugHeaders = [
Model type
Foundation model
-
+
@@ -110,9 +116,9 @@ const columnSlugHeaders = [
-
-
-
+
+
+
),
},
];
@@ -129,8 +135,8 @@ To ensure the table cells are styled appropriately, you'll need to use the new
### Using in a row
-To use a `Slug` inside a `DataTable` row, you'll need to pass in your `Slug`
-component to `TableSlugRow`:
+To use an `AILabel` inside a `DataTable` row, you'll need to pass in your
+`AILabel` component to `TableSlugRow`:
```jsx
diff --git a/packages/react/src/components/Slug/__tests__/Slug-test.js b/packages/react/src/components/AILabel/__tests__/AILabel-test.js
similarity index 61%
rename from packages/react/src/components/Slug/__tests__/Slug-test.js
rename to packages/react/src/components/AILabel/__tests__/AILabel-test.js
index 7b8fd1d7d137..43d24cb46d6b 100644
--- a/packages/react/src/components/Slug/__tests__/Slug-test.js
+++ b/packages/react/src/components/AILabel/__tests__/AILabel-test.js
@@ -1,20 +1,20 @@
/**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
*
* 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 { Slug } from '../../Slug';
+import { AILabel } from '../';
import { render, screen } from '@testing-library/react';
const prefix = 'cds';
-describe('Slug', () => {
+describe('AILabel', () => {
describe('renders as expected - Component API', () => {
it('should spread extra props onto the popover element', () => {
- const { container } = render();
+ const { container } = render();
expect(container.firstChild.firstChild).toHaveAttribute(
'data-testid',
@@ -23,32 +23,45 @@ describe('Slug', () => {
});
it('should render children as expected', () => {
- render(Children test);
+ render(Children test);
expect(screen.getByText('Children test')).toBeInTheDocument();
});
it('should support a custom `className` prop on the outermost element', () => {
- const { container } = render();
+ const { container } = render();
expect(container.firstChild).toHaveClass('custom-class');
});
it('should respect aiText prop', () => {
- render();
+ render();
expect(screen.getByText('IA')).toBeInTheDocument();
});
- it('should respect aiTextLabel prop', () => {
- render();
+ it('should respect textLabel prop when kind is inline', () => {
+ const wrapper = render();
- expect(screen.getByText('Test text')).toBeInTheDocument();
+ const additionalTextSpan = wrapper.container.querySelector(
+ `.${prefix}--slug__additional-text`
+ );
+ expect(additionalTextSpan).toBeInTheDocument();
+ expect(additionalTextSpan).toHaveTextContent('Test text');
+ });
+
+ it('should not populate textLabel prop when kind is not inline', () => {
+ const wrapper = render();
+
+ const additionalTextSpan = wrapper.container.querySelector(
+ `.${prefix}--slug__additional-text`
+ );
+ expect(additionalTextSpan).not.toBeInTheDocument();
});
it('should respect align prop when autoAlign is false', () => {
render(
-
+
);
expect(screen.getByTestId('test')).not.toHaveClass(
@@ -60,7 +73,7 @@ describe('Slug', () => {
});
it('should apply align prop classes even when autoAlign is true', () => {
- render();
+ render();
expect(screen.getByTestId('test')).toHaveClass(
`${prefix}--popover--auto-align`
@@ -71,7 +84,7 @@ describe('Slug', () => {
});
it('should respect kind prop', () => {
- render();
+ render();
expect(screen.getByRole('button')).toHaveClass(
`${prefix}--slug__button--inline`
@@ -79,7 +92,7 @@ describe('Slug', () => {
});
it('should respect revertActive prop', () => {
- const { container } = render();
+ const { container } = render();
expect(container.firstChild).toHaveClass(`${prefix}--slug--revert`);
expect(container.firstChild.firstChild).toHaveClass(
@@ -88,13 +101,13 @@ describe('Slug', () => {
});
it('should respect revertLabel prop', () => {
- render();
+ render();
expect(screen.getByText('Test revert label')).toBeInTheDocument();
});
it('should respect size prop', () => {
- render();
+ render();
expect(screen.getByRole('button')).toHaveClass(
`${prefix}--slug__button--xl`
diff --git a/packages/react/src/components/Slug/slug-story.scss b/packages/react/src/components/AILabel/ailabel-story.scss
similarity index 95%
rename from packages/react/src/components/Slug/slug-story.scss
rename to packages/react/src/components/AILabel/ailabel-story.scss
index 6af2dee0b80d..181c2edd6123 100644
--- a/packages/react/src/components/Slug/slug-story.scss
+++ b/packages/react/src/components/AILabel/ailabel-story.scss
@@ -1,3 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * 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 '@carbon/styles/scss/type';
@use '@carbon/styles/scss/theme';
@use '@carbon/react/scss/components/tile';
diff --git a/packages/react/src/components/Slug/index.js b/packages/react/src/components/AILabel/index.js
similarity index 64%
rename from packages/react/src/components/Slug/index.js
rename to packages/react/src/components/AILabel/index.js
index 8a87f418bc46..0ef644a03c3e 100644
--- a/packages/react/src/components/Slug/index.js
+++ b/packages/react/src/components/AILabel/index.js
@@ -1,5 +1,5 @@
/**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
@@ -19,31 +19,32 @@ import {
import { IconButton } from '../IconButton';
import { Undo } from '@carbon/icons-react';
import { useId } from '../../internal/useId';
+import deprecate from '../../prop-types/deprecate';
-export const SlugContent = React.forwardRef(function SlugContent(
+export const AILabelContent = React.forwardRef(function AILabelContent(
{ children, className },
ref
) {
const prefix = usePrefix();
- const hasSlugActions = React.Children.toArray(children).some(
- (child) => child.type?.displayName === 'SlugActions'
+ const hasAILabelActions = React.Children.toArray(children).some(
+ (child) => child.type?.displayName === 'AILabelActions'
);
- const slugContentClasses = cx(className, {
+ const aiLabelContentClasses = cx(className, {
[`${prefix}--slug-content`]: true,
- [`${prefix}--slug-content--with-actions`]: hasSlugActions,
+ [`${prefix}--slug-content--with-actions`]: hasAILabelActions,
});
return (
-
+
{children}
);
});
-SlugContent.displayName = 'SlugContent';
-SlugContent.propTypes = {
+AILabelContent.displayName = 'AILabelContent';
+AILabelContent.propTypes = {
/**
* Specify the content you want rendered inside the slug ToggleTip
*/
@@ -55,25 +56,25 @@ SlugContent.propTypes = {
className: PropTypes.string,
};
-export const SlugActions = React.forwardRef(function SlugActions(
+export const AILabelActions = React.forwardRef(function AILabelActions(
{ children, className },
ref
) {
const prefix = usePrefix();
- const slugActionBarClasses = cx(className, {
+ const aiLabelActionsClasses = cx(className, {
[`${prefix}--slug-actions`]: true,
});
return (
-
+
{children}
);
});
-SlugActions.displayName = 'SlugActions';
-SlugActions.propTypes = {
+AILabelActions.displayName = 'AILabelActions';
+AILabelActions.propTypes = {
/**
* Specify the content you want rendered inside the slug callout toolbar
*/
@@ -85,10 +86,11 @@ SlugActions.propTypes = {
className: PropTypes.string,
};
-export const Slug = React.forwardRef(function Slug(
+export const AILabel = React.forwardRef(function AILabel(
{
aiText = 'AI',
aiTextLabel,
+ textLabel,
align,
autoAlign = true,
children,
@@ -98,25 +100,26 @@ export const Slug = React.forwardRef(function Slug(
revertActive,
revertLabel = 'Revert to AI input',
slugLabel = 'Show information',
+ ['aria-label']: ariaLabel = 'Show information',
size = 'xs',
...rest
},
ref
) {
const prefix = usePrefix();
- const id = useId('slug');
+ const id = useId('AILabel');
- const slugClasses = cx(className, {
+ const aiLabelClasses = cx(className, {
[`${prefix}--slug`]: true,
[`${prefix}--slug--revert`]: revertActive,
});
- const slugButtonClasses = cx({
+ const aiLabelButtonClasses = cx({
[`${prefix}--slug__button`]: true,
[`${prefix}--slug__button--${size}`]: size,
[`${prefix}--slug__button--${kind}`]: kind,
[`${prefix}--slug__button--inline-with-content`]:
- kind === 'inline' && aiTextLabel,
+ kind === 'inline' && (aiTextLabel || textLabel),
});
const handleOnRevertClick = (evt) => {
@@ -125,12 +128,13 @@ export const Slug = React.forwardRef(function Slug(
}
};
- const ariaLabel = !aiTextLabel
- ? `${aiText} - ${slugLabel}`
- : `${aiText} - ${aiTextLabel}`;
+ const ariaLabelText =
+ !aiTextLabel && !textLabel
+ ? `${aiText} - ${slugLabel || ariaLabel}`
+ : `${aiText} - ${aiTextLabel || textLabel}`;
return (
-
+
{revertActive ? (
) : (
-
+ {aiText}
- {aiTextLabel && (
+ {kind === 'inline' && (aiTextLabel || textLabel) && (
- {aiTextLabel}
+ {aiTextLabel || textLabel}
)}
@@ -157,17 +163,26 @@ export const Slug = React.forwardRef(function Slug(
);
});
-Slug.displayName = 'Slug';
-Slug.propTypes = {
+AILabel.displayName = 'AILabel';
+AILabel.propTypes = {
+ /**
+ * Specify the content you want rendered inside the `AILabel` ToggleTip
+ */
+ AILabelContent: PropTypes.node,
+
/**
* Specify the correct translation of the AI text
*/
aiText: PropTypes.string,
/**
+ * @deprecated
* Specify additional text to be rendered next to the AI label in the inline variant
*/
- aiTextLabel: PropTypes.string,
+ aiTextLabel: deprecate(
+ PropTypes.string,
+ '`aiTextLabel` on `AILabel` has been deprecated - Please use the `textLabel` prop instead'
+ ),
/**
* Specify how the popover should align with the button
@@ -198,23 +213,28 @@ Slug.propTypes = {
'right-start',
]),
+ /**
+ * Specify the text that will be provided to the aria-label of the `AILabel` button
+ */
+ 'aria-label': PropTypes.string,
+
/**
* Will auto-align the popover. This prop is currently experimental and is subject to future changes.
*/
autoAlign: PropTypes.bool,
/**
- * Specify the content you want rendered inside the slug ToggleTip
+ * Specify the content you want rendered inside the `AILabel` ToggleTip
*/
children: PropTypes.node,
/**
- * Specify an optional className to be added to the AI slug
+ * Specify an optional className to be added to the `AILabel`
*/
className: PropTypes.string,
/**
- * Specify the type of Slug, from the following list of types:
+ * Specify the type of `AILabel`, from the following list of types:
*/
kind: PropTypes.oneOf(['default', 'inline']),
@@ -239,12 +259,16 @@ Slug.propTypes = {
size: PropTypes.oneOf(['mini', '2xs', 'xs', 'sm', 'md', 'lg', 'xl']),
/**
- * Specify the content you want rendered inside the slug ToggleTip
+ * @deprecated
+ * Specify the text that will be provided to the aria-label of the `AILabel` button
*/
- slugContent: PropTypes.node,
+ slugLabel: deprecate(
+ PropTypes.string,
+ '`slugLabel` on `AILabel` has been deprecated - Please use the `ariaLabel` prop instead'
+ ),
/**
- * Specify the text that will be provided to the aria-label of the `Slug` button
+ * Specify additional text to be rendered next to the AI label in the inline variant
*/
- slugLabel: PropTypes.string,
+ textLabel: PropTypes.string,
};
diff --git a/packages/react/src/components/AiSkeleton/AiSkeletonIcon.stories.js b/packages/react/src/components/AISkeleton/AISkeletonIcon.stories.js
similarity index 63%
rename from packages/react/src/components/AiSkeleton/AiSkeletonIcon.stories.js
rename to packages/react/src/components/AISkeleton/AISkeletonIcon.stories.js
index 0c435924623e..1d7b7ab68fad 100644
--- a/packages/react/src/components/AiSkeleton/AiSkeletonIcon.stories.js
+++ b/packages/react/src/components/AISkeleton/AISkeletonIcon.stories.js
@@ -9,11 +9,11 @@
import React from 'react';
-import AiSkeletonIcon from './AiSkeletonIcon';
+import AISkeletonIcon from './AISkeletonIcon';
export default {
- title: 'Experimental/unstable__AiSkeleton/AiSkeletonIcon',
- component: AiSkeletonIcon,
+ title: 'Components/Skeleton/AISkeleton',
+ component: AISkeletonIcon,
};
const propsSkeleton = {
@@ -30,9 +30,9 @@ const propsSkeleton2 = {
},
};
-export const Default = () => (
+export const _AISkeletonIcon = () => (
<>
-
-
+
+
);
diff --git a/packages/react/src/components/AiSkeleton/AiSkeletonIcon.tsx b/packages/react/src/components/AISkeleton/AISkeletonIcon.tsx
similarity index 73%
rename from packages/react/src/components/AiSkeleton/AiSkeletonIcon.tsx
rename to packages/react/src/components/AISkeleton/AISkeletonIcon.tsx
index e85843607273..7fc8a43cdba3 100644
--- a/packages/react/src/components/AiSkeleton/AiSkeletonIcon.tsx
+++ b/packages/react/src/components/AISkeleton/AISkeletonIcon.tsx
@@ -11,7 +11,7 @@ import classNames from 'classnames';
import { usePrefix } from '../../internal/usePrefix';
import { SkeletonIcon } from '../SkeletonIcon';
-interface AiSkeletonIconProps {
+interface AISkeletonIconProps {
/**
* Specify an optional className to add.
*/
@@ -23,16 +23,16 @@ interface AiSkeletonIconProps {
style?: React.CSSProperties;
}
-const AiSkeletonIcon = ({ className, ...rest }: AiSkeletonIconProps) => {
+const AISkeletonIcon = ({ className, ...rest }: AISkeletonIconProps) => {
const prefix = usePrefix();
- const AiSkeletonIconClasses = classNames(className, {
+ const AISkeletonIconClasses = classNames(className, {
[`${prefix}--skeleton__icon--ai`]: true,
});
- return ;
+ return ;
};
-AiSkeletonIcon.propTypes = {
+AISkeletonIcon.propTypes = {
/**
* Specify an optional className to add.
*/
@@ -44,4 +44,4 @@ AiSkeletonIcon.propTypes = {
style: PropTypes.object,
};
-export default AiSkeletonIcon;
+export default AISkeletonIcon;
diff --git a/packages/react/src/components/AiSkeleton/AiSkeletonPlaceholder.stories.js b/packages/react/src/components/AISkeleton/AISkeletonPlaceholder.stories.js
similarity index 52%
rename from packages/react/src/components/AiSkeleton/AiSkeletonPlaceholder.stories.js
rename to packages/react/src/components/AISkeleton/AISkeletonPlaceholder.stories.js
index 5a6b323c50bf..1ff7389fd211 100644
--- a/packages/react/src/components/AiSkeleton/AiSkeletonPlaceholder.stories.js
+++ b/packages/react/src/components/AISkeleton/AISkeletonPlaceholder.stories.js
@@ -9,11 +9,13 @@
import React from 'react';
-import AiSkeletonPlaceholder from './AiSkeletonPlaceholder';
+import AISkeletonPlaceholder from './AISkeletonPlaceholder';
export default {
- title: 'Experimental/unstable__AiSkeleton/AiSkeletonPlaceholder',
- component: AiSkeletonPlaceholder,
+ title: 'Components/Skeleton/AISkeleton',
+ component: AISkeletonPlaceholder,
};
-export const Default = () => ;
+export const _AISkeletonPlaceholder = () => (
+
+);
diff --git a/packages/react/src/components/AiSkeleton/AiSkeletonPlaceholder.tsx b/packages/react/src/components/AISkeleton/AISkeletonPlaceholder.tsx
similarity index 72%
rename from packages/react/src/components/AiSkeleton/AiSkeletonPlaceholder.tsx
rename to packages/react/src/components/AISkeleton/AISkeletonPlaceholder.tsx
index cc5e849a4fb9..300c76a36b16 100644
--- a/packages/react/src/components/AiSkeleton/AiSkeletonPlaceholder.tsx
+++ b/packages/react/src/components/AISkeleton/AISkeletonPlaceholder.tsx
@@ -11,29 +11,29 @@ import classNames from 'classnames';
import { usePrefix } from '../../internal/usePrefix';
import { SkeletonPlaceholder } from '../SkeletonPlaceholder';
-export interface AiSkeletonPlaceholderProps {
+export interface AISkeletonPlaceholderProps {
/**
* Add a custom class to the component to set the height and width
*/
className?: string;
}
-const AiSkeletonPlaceholder = ({
+const AISkeletonPlaceholder = ({
className,
...other
-}: AiSkeletonPlaceholderProps) => {
+}: AISkeletonPlaceholderProps) => {
const prefix = usePrefix();
- const AiSkeletonPlaceholderClasses = classNames(
+ const AISkeletonPlaceholderClasses = classNames(
{ className, [`${prefix}--skeleton__placeholder--ai`]: true },
className
);
return (
-
+
);
};
-AiSkeletonPlaceholder.propTypes = {
+AISkeletonPlaceholder.propTypes = {
/**
* Add a custom class to the component
* to set the height and width
@@ -41,4 +41,4 @@ AiSkeletonPlaceholder.propTypes = {
className: PropTypes.string,
};
-export default AiSkeletonPlaceholder;
+export default AISkeletonPlaceholder;
diff --git a/packages/react/src/components/AISkeleton/AISkeletonText.stories.js b/packages/react/src/components/AISkeleton/AISkeletonText.stories.js
new file mode 100644
index 000000000000..972200aeab5a
--- /dev/null
+++ b/packages/react/src/components/AISkeleton/AISkeletonText.stories.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable no-console */
+
+import React from 'react';
+
+import AISkeletonText from './AISkeletonText';
+
+export default {
+ title: 'Components/Skeleton/AISkeleton',
+ component: AISkeletonText,
+};
+
+export const _AISkeletonText = () => ;
diff --git a/packages/react/src/components/AiSkeleton/AiSkeletonText.tsx b/packages/react/src/components/AISkeleton/AISkeletonText.tsx
similarity index 91%
rename from packages/react/src/components/AiSkeleton/AiSkeletonText.tsx
rename to packages/react/src/components/AISkeleton/AISkeletonText.tsx
index 69a1b3a085e1..c17fb6030b48 100644
--- a/packages/react/src/components/AiSkeleton/AiSkeletonText.tsx
+++ b/packages/react/src/components/AISkeleton/AISkeletonText.tsx
@@ -11,7 +11,7 @@ import classNames from 'classnames';
import { usePrefix } from '../../internal/usePrefix';
import { SkeletonText } from '../SkeletonText';
-interface AiSkeletonTextProps {
+interface AISkeletonTextProps {
/**
* Specify an optional className to be applied to the container node.
*/
@@ -38,7 +38,7 @@ interface AiSkeletonTextProps {
width?: string;
}
-const AiSkeletonText = ({ className, ...rest }: AiSkeletonTextProps) => {
+const AISkeletonText = ({ className, ...rest }: AISkeletonTextProps) => {
const prefix = usePrefix();
const aiSkeletonTextClasses = classNames(className, {
[`${prefix}--skeleton__text--ai`]: true,
@@ -47,7 +47,7 @@ const AiSkeletonText = ({ className, ...rest }: AiSkeletonTextProps) => {
return ;
};
-AiSkeletonText.propTypes = {
+AISkeletonText.propTypes = {
/**
* Specify an optional className to be applied to the container node
*/
@@ -70,4 +70,4 @@ AiSkeletonText.propTypes = {
width: PropTypes.string,
};
-export default AiSkeletonText;
+export default AISkeletonText;
diff --git a/packages/react/src/components/AISkeleton/index.tsx b/packages/react/src/components/AISkeleton/index.tsx
new file mode 100644
index 000000000000..14a464b122be
--- /dev/null
+++ b/packages/react/src/components/AISkeleton/index.tsx
@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * 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 AISkeletonPlaceholder from './AISkeletonPlaceholder';
+import AISkeletonIcon from './AISkeletonIcon';
+import AISkeletonText from './AISkeletonText';
+
+export { AISkeletonText, AISkeletonIcon, AISkeletonPlaceholder };
diff --git a/packages/react/src/components/AiSkeleton/AiSkeletonText.stories.js b/packages/react/src/components/AiSkeleton/AiSkeletonText.stories.js
deleted file mode 100644
index 5f75ea23a228..000000000000
--- a/packages/react/src/components/AiSkeleton/AiSkeletonText.stories.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2024
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/* eslint-disable no-console */
-
-import React from 'react';
-
-import AiSkeletonText from './AiSkeletonText';
-
-export default {
- title: 'Experimental/unstable__AiSkeleton/AiSkeletonText',
- component: AiSkeletonText,
-};
-
-export const Default = () => ;
-
-export const Playground = (args) => ;
-
-Playground.args = {
- heading: false,
- paragraph: false,
- width: '100%',
- lineCount: 3,
-};
-
-Playground.argTypes = {
- className: {
- control: false,
- },
- heading: {
- control: {
- type: 'boolean',
- },
- },
- paragraph: {
- control: {
- type: 'boolean',
- },
- },
- width: {
- control: {
- type: 'text',
- },
- },
- lineCount: {
- control: {
- type: 'number',
- },
- },
-};
diff --git a/packages/react/src/components/AiSkeleton/index.tsx b/packages/react/src/components/AiSkeleton/index.tsx
deleted file mode 100644
index 439f4ce25736..000000000000
--- a/packages/react/src/components/AiSkeleton/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2024
- *
- * 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 AiSkeletonPlaceholder from './AiSkeletonPlaceholder';
-import AiSkeletonIcon from './AiSkeletonIcon';
-import AiSkeletonText from './AiSkeletonText';
-
-export { AiSkeletonText, AiSkeletonIcon, AiSkeletonPlaceholder };
diff --git a/packages/react/src/components/Checkbox/Checkbox.stories.js b/packages/react/src/components/Checkbox/Checkbox.stories.js
index c556daff677b..40cd2e5bea5e 100644
--- a/packages/react/src/components/Checkbox/Checkbox.stories.js
+++ b/packages/react/src/components/Checkbox/Checkbox.stories.js
@@ -6,9 +6,14 @@
*/
import React from 'react';
+import '../AILabel/ailabel-story.scss';
import { default as Checkbox, CheckboxSkeleton } from './';
import mdx from './Checkbox.mdx';
import CheckboxGroup from '../CheckboxGroup';
+import Button from '../Button';
+import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
+import { IconButton } from '../IconButton';
+import { View, FolderOpen, Folders } from '@carbon/icons-react';
const checkboxEvents = {
className: 'some-class',
@@ -86,6 +91,75 @@ export const Single = () => {
export const Skeleton = () => ;
+const slugFunc = (kind) => (
+
+
+
+
AI Explained
+
84%
+
Confidence score
+
+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+
+ Custom domains direct requests for your apps in this Cloud Foundry
+ organization to a URL that you own. A custom domain can be a
+ shared domain, a shared subdomain, or a shared domain and host.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
+ eu nibh odio. Nunc a consequat est, id porttitor sapien. Proin
+ vitae leo vitae orci tincidunt auctor eget eget libero. Ut
+ tincidunt ultricies fringilla. Aliquam erat volutpat. Aenean arcu
+ odio, elementum vel vehicula vitae, porttitor ac lorem. Sed
+ viverra elit ac risus tincidunt fermentum. Ut sollicitudin nibh id
+ risus ornare ornare. Etiam gravida orci ut lectus dictum, quis
+ ultricies felis mollis. Mauris nec commodo est, nec faucibus nibh.
+ Nunc commodo ante quis pretium consectetur. Ut ac nisl vitae mi
+ mattis vulputate a at elit. Nullam porttitor ex eget mi feugiat
+ mattis. Nunc non sodales magna. Proin ornare tellus quis hendrerit
+ egestas. Donec pharetra leo nec molestie sollicitudin.
+
+
+
+
+
+ Custom domains direct requests for your apps in this Cloud Foundry
+ organization to a URL that you own. A custom domain can be a
+ shared domain, a shared subdomain, or a shared domain and host.
+
+ Custom domains direct requests for your apps in this Cloud Foundry
+ organization to a URL that you own. A custom domain can be a shared
+ domain, a shared subdomain, or a shared domain and host.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
+ eu nibh odio. Nunc a consequat est, id porttitor sapien. Proin vitae
+ leo vitae orci tincidunt auctor eget eget libero. Ut tincidunt
+ ultricies fringilla. Aliquam erat volutpat. Aenean arcu odio,
+ elementum vel vehicula vitae, porttitor ac lorem. Sed viverra elit
+ ac risus tincidunt fermentum. Ut sollicitudin nibh id risus ornare
+ ornare. Etiam gravida orci ut lectus dictum, quis ultricies felis
+ mollis. Mauris nec commodo est, nec faucibus nibh. Nunc commodo ante
+ quis pretium consectetur. Ut ac nisl vitae mi mattis vulputate a at
+ elit. Nullam porttitor ex eget mi feugiat mattis. Nunc non sodales
+ magna. Proin ornare tellus quis hendrerit egestas. Donec pharetra
+ leo nec molestie sollicitudin.
+
+
+
+
+
+
+ );
+ },
+};
diff --git a/packages/react/src/components/Modal/Modal.tsx b/packages/react/src/components/Modal/Modal.tsx
index 4dcdbfad26b1..247d635595fb 100644
--- a/packages/react/src/components/Modal/Modal.tsx
+++ b/packages/react/src/components/Modal/Modal.tsx
@@ -475,7 +475,7 @@ const Modal = React.forwardRef(function Modal(
// Slug is always size `sm`
let normalizedSlug;
- if (slug && slug['type']?.displayName === 'Slug') {
+ if (slug && slug['type']?.displayName === 'AILabel') {
normalizedSlug = React.cloneElement(slug as React.ReactElement, {
size: 'sm',
});
diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
index 28e3e1135ca3..9c94361f86e7 100644
--- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
@@ -629,7 +629,7 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
// Slug is always size `mini`
let normalizedSlug;
- if (slug && slug['type']?.displayName === 'Slug') {
+ if (slug && slug['type']?.displayName === 'AILabel') {
normalizedSlug = React.cloneElement(slug as React.ReactElement, {
size: 'mini',
});
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
index aee3090af0c5..7d01682e7d54 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.stories.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
@@ -15,6 +15,9 @@ import MultiSelect from '.';
import FilterableMultiSelect from './FilterableMultiSelect';
import Button from '../Button';
import ButtonSet from '../ButtonSet';
+import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
+import { IconButton } from '../IconButton';
+import { View, FolderOpen, Folders } from '@carbon/icons-react';
import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
export default {
@@ -380,6 +383,67 @@ export const _Controlled = () => {
);
};
+const aiLabel = (
+
+
+
+
AI Explained
+
84%
+
Confidence score
+
+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+
- Custom domains direct requests for your apps in this Cloud Foundry
- organization to a URL that you own. A custom domain can be a
- shared domain, a shared subdomain, or a shared domain and host.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
- eu nibh odio. Nunc a consequat est, id porttitor sapien. Proin
- vitae leo vitae orci tincidunt auctor eget eget libero. Ut
- tincidunt ultricies fringilla. Aliquam erat volutpat. Aenean arcu
- odio, elementum vel vehicula vitae, porttitor ac lorem. Sed
- viverra elit ac risus tincidunt fermentum. Ut sollicitudin nibh id
- risus ornare ornare. Etiam gravida orci ut lectus dictum, quis
- ultricies felis mollis. Mauris nec commodo est, nec faucibus nibh.
- Nunc commodo ante quis pretium consectetur. Ut ac nisl vitae mi
- mattis vulputate a at elit. Nullam porttitor ex eget mi feugiat
- mattis. Nunc non sodales magna. Proin ornare tellus quis hendrerit
- egestas. Donec pharetra leo nec molestie sollicitudin.
-
-
-
-
-
- Custom domains direct requests for your apps in this Cloud Foundry
- organization to a URL that you own. A custom domain can be a
- shared domain, a shared subdomain, or a shared domain and host.
-
- Custom domains direct requests for your apps in this Cloud Foundry
- organization to a URL that you own. A custom domain can be a shared
- domain, a shared subdomain, or a shared domain and host.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
- eu nibh odio. Nunc a consequat est, id porttitor sapien. Proin vitae
- leo vitae orci tincidunt auctor eget eget libero. Ut tincidunt
- ultricies fringilla. Aliquam erat volutpat. Aenean arcu odio,
- elementum vel vehicula vitae, porttitor ac lorem. Sed viverra elit
- ac risus tincidunt fermentum. Ut sollicitudin nibh id risus ornare
- ornare. Etiam gravida orci ut lectus dictum, quis ultricies felis
- mollis. Mauris nec commodo est, nec faucibus nibh. Nunc commodo ante
- quis pretium consectetur. Ut ac nisl vitae mi mattis vulputate a at
- elit. Nullam porttitor ex eget mi feugiat mattis. Nunc non sodales
- magna. Proin ornare tellus quis hendrerit egestas. Donec pharetra
- leo nec molestie sollicitudin.
-
-
-
-
- );
-};
-
-_FormExample.args = {
- revertActive: false,
- invalid: false,
- invalidText:
- 'Error message that is really long can wrap to more lines but should not be excessively long.',
- disabled: false,
- warn: false,
- warnText:
- 'Warning message that is really long can wrap to more lines but should not be excessively long.',
-};
-
-_FormExample.argTypes = {
- children: {
- table: {
- disable: true,
- },
- },
- className: {
- table: {
- disable: true,
- },
- },
- disabled: {
- control: {
- type: 'boolean',
- },
- },
- invalid: {
- control: {
- type: 'boolean',
- },
- },
- invalidText: {
- control: {
- type: 'text',
- },
- },
- warn: {
- control: {
- type: 'boolean',
- },
- },
- warnText: {
- control: {
- type: 'text',
- },
- },
- revertActive: {
- control: {
- type: 'boolean',
- },
- table: {
- category: 'Slug',
- },
- },
-};
diff --git a/packages/react/src/components/Slug/Slug.mdx b/packages/react/src/components/Slug/Slug.mdx
deleted file mode 100644
index 25cc8a4e64e1..000000000000
--- a/packages/react/src/components/Slug/Slug.mdx
+++ /dev/null
@@ -1,158 +0,0 @@
-import { ArgsTable, Canvas, Story } from '@storybook/blocks';
-import { Slug, SlugContent, SlugActions } from '../Slug';
-import * as SlugStories from './Slug.stories';
-
-# Slug
-
-[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Slug)
-|
-[Slug release status](https://airtable.com/appCAqlGVN8tRUbAp/shr71ZyLlIGORz3Vh/tblHqPusgkK8hIeHo)
-|
-[Using AI-enhanced components in V10](https://github.com/carbon-design-system/carbon-for-ai/blob/main/docs/support-for-carbon-v10.md)
-
-## Table of Contents
-
-- [Overview](#overview)
-- [Slug anatomy](#slug-anatomy)
-- [Component API](#component-api)
- - [Slug `aiText`](#slug-aitext)
- - [Slug `aiTextLabel`](#slug-aitextlabel)
- - [Slug `kind`](#slug-kind)
- - [Slug `revertActive` and `onRevertClick`](#slug-revertactive-and-onrevertclick)
-- [Feedback](#feedback)
-
-## Overview
-
-The AI slug is intended for any scenario where something is being generated by
-(or with) AI to reinforce AI transparency, accountability, and explainability at
-any interface level. This also enables more effective recognition and recall of
-AI instances in a way that is identifiable across any IBM product.
-
-
-
-## Slug anatomy
-
-The `Slug` itself is a button that acts as a `Toggletip` trigger. To construct
-the contents of the `Slug` callout, you can place the desired elements as a
-child of `Slug` in `SlugContent`, like so:
-
-```jsx
-
-
- {Content Here}
-
-
-```
-
-The `Slug` also supports the rendering of an action bar at the bottom of the
-callout. To achieve this, you can pass in `SlugActions` as a child of `Slug`,
-placed inside the `SlugContent`
-
-```jsx
-
-
- {Content Here}
- {Optional Slug action bar}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-## Component API
-
-
-
-### Slug `aiText`
-
-If needed, you can change the text inside the `Slug` when translating to
-different languages.
-
-
- Explanation of AI generated content
-
-
-```jsx
-
- Explanation of AI-generated content
-
-```
-
-### Slug `aiTextLabel`
-
-When using the `inline` variant, you can add text adjacent to the AI label with
-the `aiTextLabel` prop.
-
-
- Explanation of AI generated content
-
-
-
- Explanation of AI generated content
-
-
-```jsx
-
- Explanation of AI generated content
-
-
-
- Explanation of AI generated content
-
-```
-
-### Slug `kind`
-
-The `Slug` component has two variants, `default` and `inline`.
-
-
- AI was used to generate this content
-
-
-```jsx
-
- AI was used to generate this content
-
-```
-
-The `inline` `Slug` with the standard icon can also trigger the AI
-explainability callout.
-
-
- Explanation of AI generated content
-
-
-```jsx
-
- Explanation of AI-generated content
-
-```
-
-### Slug `revertActive` and `onRevertClick`
-
-`revertActive` is a boolean prop that can be set on `Slug` that transforms the
-`Slug` into a revert action button. This is useful if a user edits an
-AI-generated input to show that the element has been modified. This can be used
-in conjunction with the `onRevertClick` callback to handle restoring the element
-to the AI-generated state. For an example, please take a look at the
-[Revert Test story](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-form--revert-test)
-or take a look at the example story
-[source code](https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Slug/Slug-form.stories.js#L96).
-
-## 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/Slug/Slug.mdx).
diff --git a/packages/react/src/components/Slug/SlugExamples.mdx b/packages/react/src/components/Slug/SlugExamples.mdx
deleted file mode 100644
index 4cee99885b89..000000000000
--- a/packages/react/src/components/Slug/SlugExamples.mdx
+++ /dev/null
@@ -1,97 +0,0 @@
-# Slug
-
-[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Slug)
-|
-[Slug release status](https://airtable.com/appCAqlGVN8tRUbAp/shr71ZyLlIGORz3Vh/tblHqPusgkK8hIeHo)
-|
-[Using AI-enhanced components in V10](https://github.com/carbon-design-system/carbon-for-ai/blob/main/docs/support-for-carbon-v10.md)
-
-## Table of Contents
-
-- [Overview](#overview)
-- [Slug anatomy](#slug-anatomy)
-- List of components that accept `Slug`
- - [Checkbox](?path=/story/experimental-unstable-slug-examples--checkbox)
- - [Combobox](?path=/story/experimental-unstable-slug-examples--combobox)
- - [Composed Modal](?path=/story/experimental-unstable-slug-examples--composed-modal)
- - [Data Table](?path=/story/experimental-unstable-slug-datatable--slug-with-expansion)
- - [Date Picker](?path=/story/experimental-unstable-slug-examples--date-picker)
- - [Dropdown](?path=/story/experimental-unstable-slug-examples--dropdown)
- - [Filterable Multiselect](?path=/story/experimental-unstable-slug-examples--filterable-multiselect)
- - [Modal](?path=/story/experimental-unstable-slug-examples--modal)
- - [Multiselect](?path=/story/experimental-unstable-slug-examples--multiselect)
- - [Number Input](?path=/story/experimental-unstable-slug-examples--number-input)
- - [Radio Button](?path=/story/experimental-unstable-slug-examples--radio-button)
- - [Select](?path=/story/experimental-unstable-slug-examples--select)
- - [Tag](?path=/story/experimental-unstable-slug-examples--tag)
- - [Text Area](?path=/story/experimental-unstable-slug-examples--text-area)
- - [Text Input](?path=/story/experimental-unstable-slug-examples--text-input)
- - [Tile](?path=/story/experimental-unstable-slug-examples--tile)
-- [Feedback](#feedback)
-
-## Overview
-
-The AI slug is intended for any scenario where something is being generated by
-(or with) AI to reinforce AI transparency, accountability, and explainability at
-any interface level. This also enables more effective recognition and recall of
-AI instances in a way that is identifiable across any IBM product.
-
-## Slug anatomy
-
-The `Slug` itself is a button that acts as a `Toggletip` trigger. To construct
-the contents of the `Slug` callout, you can place the desired elements as a
-child of `Slug` in `SlugContent`, like so:
-
-```jsx
-
-
- {Content Here}
-
-
-```
-
-The `Slug` also supports the rendering of an action bar at the bottom of the
-callout. To achieve this, you can pass in `SlugActions` as a child of `Slug`,
-placed inside the `SlugContent`
-
-```jsx
-
-
- {Content Here}
- {Optional Slug action bar}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-To render the `Slug` inside a component, simply pass the `Slug` via the `slug`
-prop on the desired component.
-
-```jsx
-const slug = (
-
-
- {Content Here}
-
-
-);
-
-
-```
-
-## 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/Slug/SlugExamples.mdx).
diff --git a/packages/react/src/components/Slug/SlugForm.mdx b/packages/react/src/components/Slug/SlugForm.mdx
deleted file mode 100644
index 48afbe989a47..000000000000
--- a/packages/react/src/components/Slug/SlugForm.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
-# Slug
-
-[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Slug)
-|
-[Slug release status](https://airtable.com/appCAqlGVN8tRUbAp/shr71ZyLlIGORz3Vh/tblHqPusgkK8hIeHo)
-|
-[Using AI-enhanced components in V10](https://github.com/carbon-design-system/carbon-for-ai/blob/main/docs/support-for-carbon-v10.md)
-
-## Table of Contents
-
-- [Slug API docs](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug--overview)
-- [Slug-enabled components](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--overview)
-- [Feedback](#feedback)
-
-## 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/Slug/SlugForm.mdx).
diff --git a/packages/react/src/components/Tag/DismissibleTag.tsx b/packages/react/src/components/Tag/DismissibleTag.tsx
index 7b385c3fce84..755eb620cd28 100644
--- a/packages/react/src/components/Tag/DismissibleTag.tsx
+++ b/packages/react/src/components/Tag/DismissibleTag.tsx
@@ -109,7 +109,7 @@ const DismissibleTag = ({
};
let normalizedSlug;
- if (slug && slug['type']?.displayName === 'Slug') {
+ if (slug && slug['type']?.displayName === 'AILabel') {
normalizedSlug = React.cloneElement(slug as React.ReactElement, {
size: 'sm',
kind: 'inline',
diff --git a/packages/react/src/components/Tag/OperationalTag.tsx b/packages/react/src/components/Tag/OperationalTag.tsx
index 77b29e78525b..84d9c4296fb1 100644
--- a/packages/react/src/components/Tag/OperationalTag.tsx
+++ b/packages/react/src/components/Tag/OperationalTag.tsx
@@ -111,7 +111,7 @@ const OperationalTag = ({
}, [prefix, tagRef]);
let normalizedSlug;
- if (slug && slug['type']?.displayName === 'Slug') {
+ if (slug && slug['type']?.displayName === 'AILabel') {
normalizedSlug = React.cloneElement(slug as React.ReactElement, {
size: 'sm',
kind: 'inline',
diff --git a/packages/react/src/components/Tag/SelectableTag.tsx b/packages/react/src/components/Tag/SelectableTag.tsx
index 1f69e1cdfad9..a050b9e27fce 100644
--- a/packages/react/src/components/Tag/SelectableTag.tsx
+++ b/packages/react/src/components/Tag/SelectableTag.tsx
@@ -93,7 +93,7 @@ const SelectableTag = ({
}, [prefix, tagRef]);
let normalizedSlug;
- if (slug && slug['type']?.displayName === 'Slug') {
+ if (slug && slug['type']?.displayName === 'AILabel') {
normalizedSlug = React.cloneElement(slug as React.ReactElement, {
size: 'sm',
kind: 'inline',
diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js
index 69c5e1d3ad1a..0424fd687a07 100644
--- a/packages/react/src/components/Tag/Tag-test.js
+++ b/packages/react/src/components/Tag/Tag-test.js
@@ -10,7 +10,7 @@ import { render, screen } from '@testing-library/react';
import React from 'react';
import Tag from './';
import DismissibleTag from './DismissibleTag';
-import { Slug } from '../Slug';
+import { AILabel } from '../AILabel';
describe('Tag', () => {
describe('automated accessibility testing', () => {
@@ -57,7 +57,7 @@ describe('Tag', () => {
});
it('should respect slug prop', () => {
- render(} />);
+ render(} />);
expect(
screen.getByRole('button', { name: 'AI - Show information' })
diff --git a/packages/react/src/components/Tag/Tag.stories.js b/packages/react/src/components/Tag/Tag.stories.js
index f8ad717f4aac..850d5f048fb0 100644
--- a/packages/react/src/components/Tag/Tag.stories.js
+++ b/packages/react/src/components/Tag/Tag.stories.js
@@ -8,7 +8,11 @@
import React from 'react';
import { default as Tag } from '../Tag';
import TagSkeleton from '../Tag/Tag.Skeleton';
-import { Asleep } from '@carbon/icons-react';
+import { Asleep, View, FolderOpen, Folders } from '@carbon/icons-react';
+import Button from '../Button';
+import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
+import { IconButton } from '../IconButton';
+import '../AILabel/ailabel-story.scss';
export default {
title: 'Components/Tag',
@@ -197,3 +201,70 @@ Skeleton.argTypes = {
},
},
};
+
+const aiLabel = (
+
+
+
+
AI Explained
+
84%
+
Confidence score
+
+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+