docs(Slug): move slug examples under experimental section (#15294)

* docs(Slug): move slug examples under experimental section * refactor(Slug): move all slug examples under slug * test(e2e): update form test to match new location * refactor(Slug): add controls to slug example components * docs(Slug): add slug to controls table * style(TextArea): fix label width issue
carbon-design-system · Dec 5, 2023 · 5067a9b · 5067a9b
1 parent b0c87fa
commit 5067a9b
Show file tree

Hide file tree

Showing 27 changed files with 1,219 additions and 937 deletions.
diff --git a/e2e/components/Slug/Slug-test.avt.e2e.js b/e2e/components/Slug/Slug-test.avt.e2e.js
@@ -40,7 +40,7 @@ test.describe('Slug @avt', () => {
   test('@avt-advanced-states ai form', async ({ page }) => {
     await visitStory(page, {
       component: 'Slug',
-      id: 'components-form--ai-form',
+      id: 'experimental-unstable-slug-form--form-example',
       globals: {
         theme: 'white',
       },

diff --git a/e2e/components/Slug/Slug-test.e2e.js b/e2e/components/Slug/Slug-test.e2e.js
@@ -25,7 +25,7 @@ test.describe('Slug', () => {
       test('slug inside form @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'Slug',
-          id: 'components-form--ai-form',
+          id: 'experimental-unstable-slug-form--form-example',
           theme,
         });
       });

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3134,6 +3134,9 @@ Map {
       "onKeyUp": Object {
         "type": "func",
       },
+      "slug": Object {
+        "type": "node",
+      },
       "tabIndex": Object {
         "type": "number",
       },

diff --git a/packages/react/src/components/Checkbox/Checkbox.stories.js b/packages/react/src/components/Checkbox/Checkbox.stories.js
@@ -9,10 +9,6 @@ import React from 'react';
 import { default as Checkbox, CheckboxSkeleton } from './';
 import mdx from './Checkbox.mdx';
 import CheckboxGroup from '../CheckboxGroup';
-import { View, FolderOpen, Folders } from '@carbon/icons-react';
-import { Slug, SlugContent, SlugActions } from '../Slug';
-import { IconButton } from '../IconButton';
-import { Button } from '../Button';
 
 const checkboxEvents = {
   className: 'some-class',
@@ -75,80 +71,6 @@ export const Single = () => {
   );
 };
 
-export const SlugTest = () => {
-  const slug = (kind) => (
-    <Slug kind={kind} className="slug-container">
-      <SlugContent>
-        <div>
-          <p className="secondary">AI Explained</p>
-          <h1>84%</h1>
-          <p className="secondary bold">Confidence score</p>
-          <p className="secondary">
-            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
-            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
-          </p>
-          <hr />
-          <p className="secondary">Model type</p>
-          <p className="bold">Foundation model</p>
-        </div>
-        <SlugActions>
-          <IconButton kind="ghost" label="View">
-            <View />
-          </IconButton>
-          <IconButton kind="ghost" label="Open Folder">
-            <FolderOpen />
-          </IconButton>
-          <IconButton kind="ghost" label="Folders">
-            <Folders />
-          </IconButton>
-          <Button>View literature</Button>
-        </SlugActions>
-      </SlugContent>
-    </Slug>
-  );
-
-  return (
-    <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-      <CheckboxGroup
-        legendText="Group Label"
-        slug={slug()}
-        style={{ flex: '1 1 auto' }}>
-        <Checkbox labelText={`Checkbox label`} id="checkbox-label-1" />
-        <Checkbox labelText={`Checkbox label`} id="checkbox-label-2" />
-        <Checkbox labelText={`Checkbox label`} id="checkbox-label-3" />
-      </CheckboxGroup>
-
-      <CheckboxGroup legendText="Group Label" style={{ flex: '1 1 auto' }}>
-        <Checkbox
-          labelText={`Checkbox label`}
-          id="checkbox-label-4"
-          slug={slug()}
-        />
-        <Checkbox
-          labelText={`Checkbox label`}
-          id="checkbox-label-5"
-          slug={slug()}
-        />
-        <Checkbox labelText={`Checkbox label`} id="checkbox-label-6" />
-      </CheckboxGroup>
-
-      <CheckboxGroup legendText="Group Label" style={{ flex: '1 1 auto' }}>
-        <Checkbox
-          labelText={`Checkbox label`}
-          id="checkbox-label-7"
-          slug={slug('inline')}
-        />
-        <Checkbox
-          labelText={`Checkbox label`}
-          id="checkbox-label-8"
-          slug={slug('inline')}
-        />
-        <Checkbox labelText={`Checkbox label`} id="checkbox-label-9" />
-      </CheckboxGroup>
-    </div>
-  );
-};
-
 export const Skeleton = () => <CheckboxSkeleton />;
 
 export const Playground = (args) => (
@@ -234,11 +156,6 @@ Playground.argTypes = {
       disable: true,
     },
   },
-  disabled: {
-    table: {
-      disable: true,
-    },
-  },
   hideLabel: {
     table: {
       disable: true,

diff --git a/packages/react/src/components/Checkbox/Checkbox.tsx b/packages/react/src/components/Checkbox/Checkbox.tsx
@@ -70,7 +70,7 @@ export interface CheckboxProps
   invalidText?: React.ReactNode;
 
   /**
-   * Provide a `Slug` component to be rendered inside the `Checkbox` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
    */
   slug?: ReactNodeLike;
 
@@ -300,7 +300,7 @@ Checkbox.propTypes = {
   readOnly: PropTypes.bool,
 
   /**
-   * Provide a `Slug` component to be rendered inside the `Checkbox` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
    */
   slug: PropTypes.node,
 

diff --git a/packages/react/src/components/CheckboxGroup/CheckboxGroup.js b/packages/react/src/components/CheckboxGroup/CheckboxGroup.js
@@ -140,7 +140,7 @@ CheckboxGroup.propTypes = {
   readOnly: PropTypes.bool,
 
   /**
-   * Provide a `Slug` component to be rendered inside the `CheckboxGroup` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `CheckboxGroup` component
    */
   slug: PropTypes.node,
 

diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -282,7 +282,7 @@ export interface ComboBoxProps<ItemType>
   size?: ListBoxSize;
 
   /**
-   * Provide a `Slug` component to be rendered inside the `ComboBox` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `ComboBox` component
    */
   slug?: ReactNodeLike;
 
@@ -957,7 +957,7 @@ ComboBox.propTypes = {
   size: ListBoxPropTypes.ListBoxSize,
 
   /**
-   * Provide a `Slug` component to be rendered inside the `ComboBox` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `ComboBox` component
    */
   slug: PropTypes.node,
 

diff --git a/packages/react/src/components/DatePickerInput/DatePickerInput.tsx b/packages/react/src/components/DatePickerInput/DatePickerInput.tsx
@@ -112,7 +112,7 @@ interface DatePickerInputProps
   size?: 'sm' | 'md' | 'lg';
 
   /**
-   * Provide a `Slug` component to be rendered inside the `DatePickerInput` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `DatePickerInput` component
    */
   slug?: ReactNodeLike;
 
@@ -360,7 +360,7 @@ DatePickerInput.propTypes = {
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
 
   /**
-   * Provide a `Slug` component to be rendered inside the `DatePickerInput` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `DatePickerInput` component
    */
   slug: PropTypes.node,
 

diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx
@@ -199,7 +199,7 @@ export interface DropdownProps<ItemType>
   size?: ListBoxSize;
 
   /**
-   * Provide a `Slug` component to be rendered inside the `Dropdown` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `Dropdown` component
    */
   slug?: ReactNodeLike;
 
@@ -708,7 +708,7 @@ Dropdown.propTypes = {
   size: ListBoxPropTypes.ListBoxSize,
 
   /**
-   * Provide a `Slug` component to be rendered inside the `Dropdown` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `Dropdown` component
    */
   slug: PropTypes.node,