fix(ai-label): update classes from slug to ai-label (carbon-design-sy…

…stem#17972) * fix(ai-label): update classes from slug to ai-label * fix(fluid-date-picker): add space * fix(fluid-list-box): merge conflict update * fix(format): update files * fix(classes): remove additions * fix(format): updates * fix(tag): comma * fix(format): updates * fix(date-picker): update styles * fix(date-picker): format * fix(date-picker): fluid gradient * fix(date-picker): format --------- Co-authored-by: Guilherme Datilio Ribeiro <[email protected]>
2nikhiltom · Nov 7, 2024 · 0cfda56 · 0cfda56
1 parent cdc8db7
commit 0cfda56
Show file tree

Hide file tree

Showing 46 changed files with 776 additions and 173 deletions.
diff --git a/packages/react/src/components/AILabel/AILabel.mdx b/packages/react/src/components/AILabel/AILabel.mdx
@@ -6,7 +6,7 @@ import * as AILabelStories from './AILabel.stories';
 
 # AILabel
 
-[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Slug)
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/AILabel)
 |
 [AILabel release status](https://airtable.com/appCAqlGVN8tRUbAp/shr71ZyLlIGORz3Vh/tblHqPusgkK8hIeHo)
 |
@@ -80,7 +80,7 @@ callout. To achieve this, you can pass in `AILabelActions` as a child of
 If needed, you can change the text inside the `AILabel` when translating to
 different languages.
 
-<AILabel aiText="IA" className="sbdocs-slug">
+<AILabel aiText="IA" className="sbdocs-ai-label">
   <AILabelContent>Explanation of AI generated content</AILabelContent>
 </AILabel>
 
@@ -95,11 +95,11 @@ different languages.
 When using the `inline` variant, you can add text adjacent to the AI label with
 the `aiTextLabel` prop.
 
-<AILabel kind="inline" textLabel="Text goes here" className="sbdocs-slug">
+<AILabel kind="inline" textLabel="Text goes here" className="sbdocs-ai-label">
   <AILabelContent>Explanation of AI generated content</AILabelContent>
 </AILabel>
 <br />
-<AILabel kind="inline" className="sbdocs-slug">
+<AILabel kind="inline" className="sbdocs-ai-label">
   <AILabelContent>Explanation of AI generated content</AILabelContent>
 </AILabel>
 
@@ -117,7 +117,7 @@ the `aiTextLabel` prop.
 
 The `AILabel` component has two variants, `default` and `inline`.
 
-<AILabel size="xs" className="sbdocs-slug">
+<AILabel size="xs" className="sbdocs-ai-label">
   <AILabelContent>AI was used to generate this content</AILabelContent>
 </AILabel>
 
@@ -130,7 +130,7 @@ The `AILabel` component has two variants, `default` and `inline`.
 The `inline` `AILabel` with the standard icon can also trigger the AI
 explainability callout.
 
-<AILabel kind="inline" textLabel="Text goes here" className="sbdocs-slug">
+<AILabel kind="inline" textLabel="Text goes here" className="sbdocs-ai-label">
   <AILabelContent>Explanation of AI generated content</AILabelContent>
 </AILabel>
 
@@ -147,12 +147,12 @@ the `AILabel` 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)
+[Revert Test story](https://react.carbondesignsystem.com/?path=/story/components-form--with-ai-label&args=revertActive:!true)
 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).
+[source code](https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Form/Form.stories.js#L272).
 
 ## 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).
+[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/AILabel/AILabel.mdx).
diff --git a/packages/react/src/components/AILabel/AILabel.stories.js b/packages/react/src/components/AILabel/AILabel.stories.js
@@ -41,7 +41,7 @@ const aiContent = (
 
 export const Default = () => (
   <>
-    <div className="slug-container slug-container-example">
+    <div className="ai-label-container ai-label-container-example">
       <AILabel autoAlign size="mini">
         <AILabelContent>{aiContent}</AILabelContent>
       </AILabel>
@@ -134,7 +134,7 @@ export const Default = () => (
         </AILabelContent>
       </AILabel>
     </div>
-    <div className="slug-container-example slug-container">
+    <div className="ai-label-container ai-label-container-example">
       <AILabel autoAlign kind="inline" size="sm">
         <AILabelContent>
           {aiContent}
@@ -187,7 +187,7 @@ export const Default = () => (
         </AILabelContent>
       </AILabel>
     </div>
-    <div className="slug-container-example slug-container">
+    <div className="ai-label-container ai-label-container-example">
       <AILabel autoAlign kind="inline" size="sm" textLabel="Text goes here">
         <AILabelContent>
           {aiContent}
@@ -244,10 +244,10 @@ export const Default = () => (
 );
 
 export const ExplainabilityPopover = (args) => {
-  const { showSlugActions = true } = args;
+  const { showAILabelActions = true } = args;
 
   return (
-    <div className="slug-container-example slug-container centered">
+    <div className="ai-label-container-example ai-label-container centered">
       <AILabel autoAlign={false} defaultOpen {...args}>
         <AILabelContent>
           {' '}
@@ -264,7 +264,7 @@ export const ExplainabilityPopover = (args) => {
             <p className="secondary">Model type</p>
             <p className="bold">Foundation model</p>
           </div>
-          {showSlugActions && (
+          {showAILabelActions && (
             <AILabelActions>
               <IconButton kind="ghost" label="View">
                 <View />
@@ -285,7 +285,7 @@ export const ExplainabilityPopover = (args) => {
 };
 
 ExplainabilityPopover.argTypes = {
-  showSlugActions: {
+  showAILabelActions: {
     control: {
       type: 'boolean',
     },
@@ -384,7 +384,7 @@ ExplainabilityPopover.argTypes = {
 };
 
 export const Playground = (args) => {
-  const { showSlugActions = true } = args;
+  const { showAILabelActions = true } = args;
 
   const renderedContent = (
     <>
@@ -400,7 +400,7 @@ export const Playground = (args) => {
         <p className="secondary">Model type</p>
         <p className="bold">Foundation model</p>
       </div>
-      {showSlugActions && (
+      {showAILabelActions && (
         <AILabelActions>
           <IconButton kind="ghost" label="View">
             <View />
@@ -419,7 +419,7 @@ export const Playground = (args) => {
 
   return (
     <>
-      <div className="slug-container slug-container-example">
+      <div className="ai-label-container ai-label-container-example">
         <AILabel aria-label="Test" {...args}>
           <AILabelContent>{renderedContent}</AILabelContent>
         </AILabel>
@@ -431,7 +431,7 @@ export const Playground = (args) => {
 };
 
 Playground.argTypes = {
-  showSlugActions: {
+  showAILabelActions: {
     control: {
       type: 'boolean',
     },

diff --git a/packages/react/src/components/AILabel/AILabelDatatable.mdx b/packages/react/src/components/AILabel/AILabelDatatable.mdx
@@ -5,7 +5,7 @@ import { AILabel, AILabelContent, AILabelActions } from '.';
 
 # AILabel
 
-[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Slug)
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/AILabel)
 |
 [AILabel release status](https://airtable.com/appCAqlGVN8tRUbAp/shr71ZyLlIGORz3Vh/tblHqPusgkK8hIeHo)
 |
@@ -22,7 +22,7 @@ import { AILabel, AILabelContent, AILabelActions } from '.';
 
 ## Overview
 
-The `DataTable` supports placing a `slug` in both the column header and row.
+The `DataTable` supports placing a `AI label` in both the column header and row.
 
 <Canvas id="components-datatable-withailabel--column-ai-label-with-selection-and-expansion" />
 
@@ -50,7 +50,7 @@ callout. To achieve this, you can pass in `AILabelActions` as a child of
 <AILabel>
   <AILabelContent>
     {Content Here}
-    {Optional Slug action bar}
+    {Optional AI label action bar}
     <AILabelActions>
       <IconButton kind="ghost" label="View">
         <View />
@@ -71,7 +71,7 @@ callout. To achieve this, you can pass in `AILabelActions` as a child of
 
 ### Using as a column header
 
-To use an `AILabel` 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 `AILabel` to the
 appropriate column data.
 
 ```jsx
@@ -83,9 +83,9 @@ const columnAILabelHeaders = [
   {
     key: 'attached_groups',
     header: 'Attached groups',
-    slug: (
+    AILabel: (
       <AILabel
-        className="slug-container"
+        className="ai-label-container"
         autoAlign={false}
         align="bottom-right">
         <AILabelContent>
@@ -139,7 +139,7 @@ To use an `AILabel` inside a `DataTable` row, you'll need to pass in your
 <TableBody>
   {rows.map((row, i) => (
     <TableRow key={i} {...getRowProps({ row })}>
-      <TableSlugRow slug={slug} />
+      <TableSlugRow slug={AILabel} />
       <TableSelectRow {...getSelectionProps({ row })} />
       {row.cells.map((cell) => (
         <TableCell key={cell.id}>{cell.value}</TableCell>
@@ -153,4 +153,4 @@ To use an `AILabel` inside a `DataTable` row, you'll need to pass in your
 
 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/SlugDatatable.mdx).
+[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/AILabel/AILabelDatatable.mdx).
diff --git a/packages/react/src/components/AILabel/__tests__/AILabel-test.js b/packages/react/src/components/AILabel/__tests__/AILabel-test.js
@@ -46,7 +46,7 @@ describe('AILabel', () => {
       const wrapper = render(<AILabel kind="inline" textLabel="Test text" />);
 
       const additionalTextSpan = wrapper.container.querySelector(
-        `.${prefix}--slug__additional-text`
+        `.${prefix}--ai-label__additional-text`
       );
       expect(additionalTextSpan).toBeInTheDocument();
       expect(additionalTextSpan).toHaveTextContent('Test text');
@@ -56,7 +56,7 @@ describe('AILabel', () => {
       const wrapper = render(<AILabel textLabel="Test text" />);
 
       const additionalTextSpan = wrapper.container.querySelector(
-        `.${prefix}--slug__additional-text`
+        `.${prefix}--ai-label__additional-text`
       );
       expect(additionalTextSpan).not.toBeInTheDocument();
     });
@@ -89,14 +89,14 @@ describe('AILabel', () => {
       render(<AILabel kind="inline" />);
 
       expect(screen.getByRole('button')).toHaveClass(
-        `${prefix}--slug__button--inline`
+        `${prefix}--ai-label__button--inline`
       );
     });
 
     it('should respect revertActive prop', () => {
       const { container } = render(<AILabel revertActive />);
 
-      expect(container.firstChild).toHaveClass(`${prefix}--slug--revert`);
+      expect(container.firstChild).toHaveClass(`${prefix}--ai-label--revert`);
       expect(container.firstChild.firstChild).toHaveClass(
         `${prefix}--icon-tooltip`
       );
@@ -112,7 +112,7 @@ describe('AILabel', () => {
       render(<AILabel size="xl" />);
 
       expect(screen.getByRole('button')).toHaveClass(
-        `${prefix}--slug__button--xl`
+        `${prefix}--ai-label__button--xl`
       );
     });
   });