docs(button): specify danger is not supported for icon only buttons (#…

…14307) * docs(button): specify danger is not supported for icon only buttons * fix(mdx): reformat doctoc comment to be on single line for mdx2 compatibility * docs(modal): fix mdx2 formatting in .mdx files --------- Co-authored-by: TJ Egan <tw15egan@gmail.com>
carbon-design-system · Jul 27, 2023 · 2ccf23b · 2ccf23b
1 parent 9963913
commit 2ccf23b
Show file tree

Hide file tree

Showing 33 changed files with 419 additions and 350 deletions.
diff --git a/packages/cli/src/component/templates/mdx.template.mdx b/packages/cli/src/component/templates/mdx.template.mdx
@@ -10,8 +10,7 @@ guidelines](https://www.carbondesignsystem.com/components/<%= name %>/usage)
 &nbsp;|&nbsp; [Accessibility](https://www.carbondesignsystem.com/components/<%=
 url %>/accessibility)
 
-{/* <!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
+{/* <!-- 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
 

diff --git a/packages/react/src/components/AspectRatio/AspectRatio.mdx b/packages/react/src/components/AspectRatio/AspectRatio.mdx
@@ -9,8 +9,7 @@ import { AspectRatio } from '.';
 &nbsp;|&nbsp;
 [Usage guidelines](https://www.carbondesignsystem.com/guidelines/2x-grid/overview#aspect-ratio)
 
-{/* <!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
+{/* <!-- 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
 

diff --git a/packages/react/src/components/Button/Button.mdx b/packages/react/src/components/Button/Button.mdx
@@ -15,8 +15,7 @@ import * as ButtonStories from './Button.stories';
 
 ## Table of Contents
 
-{/* <!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
+{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
 
 - [Overview](#overview)
 - [Danger Buttons](#danger-buttons)
@@ -72,9 +71,9 @@ danger button or the ghost danger button may be more appropriate.
 ## Icon-only Buttons
 
 Icon buttons allow users to take actions, and make choices, with a single tap.
-Icon buttons can take the form of any of the seven types (Primary, Secondary,
-Tertiary, Danger, Danger tertiary, Danger ghost and Ghost) but most commonly
-will be styled as primary or ghost buttons.
+Icon buttons can take the form of Primary, Secondary, Tertiary, and Ghost but
+most commonly will be styled as primary or ghost buttons. Icon only buttons do
+not support Danger, Danger tertiary, or Danger ghost.
 
 <Canvas>
   <Story of={ButtonStories.IconButton} />
@@ -182,10 +181,11 @@ button is interacted with.
 Carbon has seven types of buttons, `primary`, `secondary`, `tertiary`, `ghost`,
 `danger`, `danger--tertiary`, and `danger--ghost`. If no `kind` is specified, a
 `primary` button will be rendered. For more information on when to use each
-variant, check out the [design documentation](https://www.carbondesignsystem.com/components/button/usage#overview)
+variant, check out the
+[design documentation](https://www.carbondesignsystem.com/components/button/usage#overview)
 
 <Unstyled>
-  <div style={{display: 'flex', justifyContent: 'space-between'}}>
+  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
     <Button>Primary</Button>
     <Button kind="secondary">Secondary</Button>
     <Button kind="tertiary">Tertiary </Button>
@@ -223,11 +223,12 @@ to render icon-only buttons, please refer to the section on the
 [hasIconOnly](#button-hasicononly) prop
 
 <Unstyled>
-  <Button renderIcon={Add} iconDescription="Add" style={{marginRight: '3px'}}>Add</Button>
-  <Button
-    renderIcon={TrashCan}
-    kind="danger"
-    iconDescription="TrashCan">Delete</Button>
+  <Button renderIcon={Add} iconDescription="Add" style={{ marginRight: '3px' }}>
+    Add
+  </Button>
+  <Button renderIcon={TrashCan} kind="danger" iconDescription="TrashCan">
+    Delete
+  </Button>
 </Unstyled>
 
 ```jsx
@@ -241,11 +242,16 @@ the Icon to ensure the proper classes are applied:
 <Unstyled>
   <Button
     renderIcon={(props) => <Add size={24} {...props} />}
-    iconDescription="Add" style={{marginRight: '3px'}}>Add</Button>
+    iconDescription="Add"
+    style={{ marginRight: '3px' }}>
+    Add
+  </Button>
   <Button
     renderIcon={(props) => <TrashCan size={24} {...props} />}
     kind="danger"
-    iconDescription="TrashCan">Delete</Button>
+    iconDescription="TrashCan">
+    Delete
+  </Button>
 </Unstyled>
 
 ```jsx
@@ -261,7 +267,9 @@ an element appear as a button control to a screen reader. Check out the
 [References](#references) section for more information.
 
 <Unstyled>
-  <Button as="div" role="button">a11y Button</Button>
+  <Button as="div" role="button">
+    a11y Button
+  </Button>
 </Unstyled>
 
 ```jsx

diff --git a/packages/react/src/components/ClassPrefix/ClassPrefix.mdx b/packages/react/src/components/ClassPrefix/ClassPrefix.mdx
@@ -6,8 +6,7 @@ import * as ClassPrefixStories from './ClassPrefix.stories';
 
 [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/ClassPrefix)
 
-{/* <!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
+{/* <!-- 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
 

diff --git a/packages/react/src/components/ComboButton/ComboButton.mdx b/packages/react/src/components/ComboButton/ComboButton.mdx
@@ -4,8 +4,7 @@ import { ArgsTable } from '@storybook/blocks';
 
 [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/ComboButton)
 
-{/* <!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
+{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
 
 - [Overview](#overview)
 - [Component API](#component-api)
@@ -15,7 +14,10 @@ import { ArgsTable } from '@storybook/blocks';
 
 ## Overview
 
-A `ComboButton` can be used to offer additional, secondary actions in a disclosed list next to the primary action. These additional actions must be `MenuItem`s passed as `children`. The primary action's label is passed as `props.label`.
+A `ComboButton` can be used to offer additional, secondary actions in a
+disclosed list next to the primary action. These additional actions must be
+`MenuItem`s passed as `children`. The primary action's label is passed as
+`props.label`.
 
 ```jsx
 <ComboButton label="Primary action">

diff --git a/packages/react/src/components/ComposedModal/ComposedModal.mdx b/packages/react/src/components/ComposedModal/ComposedModal.mdx
@@ -3,7 +3,7 @@ import ComposedModal from '../ComposedModal';
 import { InlineNotification } from '../Notification';
 import CodeSnippet from '../CodeSnippet';
 import * as ComposedModalStories from './ComposedModal.stories.js';
-import './ComposedModal.stories.scss'
+import './ComposedModal.stories.scss';
 
 # ComposedModal
 
@@ -15,8 +15,7 @@ import './ComposedModal.stories.scss'
 
 ## Table of Contents
 
-{/* <!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
+{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
 
 - [Overview](#overview)
 - [Component API](#component-api)
@@ -97,14 +96,21 @@ const ModalStateManager = ({
 };
 ```
 
+{/* <!-- prettier-ignore-start --> */}
+
 <Unstyled>
-  <InlineNotification kind="warning" title="Warning" className="sb-notification">
-    <CodeSnippet type="inline" hideCopyButton>{'Modal'}</CodeSnippet>
-  and <CodeSnippet type="inline" hideCopyButton>{'ComposedModal'}</CodeSnippet>
-    have to be put at the top level in a React tree. The easiest way to ensure that is using React
-    portal as shown in above example.
+  <InlineNotification
+    kind="warning"
+    title="Warning"
+    className="sb-notification">
+    <CodeSnippet type="inline" hideCopyButton>Modal</CodeSnippet>
+    and
+    <CodeSnippet type="inline" hideCopyButton>ComposedModal</CodeSnippet>
+    have to be put at the top level in a React tree. The easiest way to ensure
+    that is using React portal as shown in above example.
   </InlineNotification>
 </Unstyled>
+{/* <!-- prettier-ignore-end --> */}
 
 ## Modal sizes
 
@@ -205,14 +211,23 @@ With `<ComposedModal>`, you can control the buttons with the following code.
 </ComposedModal>
 ```
 
+{/* <!-- prettier-ignore-start --> */}
+
 <Unstyled>
-  <InlineNotification kind="warning" title="Warning" className="sb-notification">
-    As the instruction for the three buttons implies, <CodeSnippet type="inline" hideCopyButton>{'ModalFooter'}</CodeSnippet>
-    is flexible on the buttons as you render <CodeSnippet type="inline" hideCopyButton>{'Button'}</CodeSnippet>'s by yourself,
-    as shown below. In this case, the application code needs to take care of running
-    actions upon clicking those buttons, e.g. closing the modal
+  <InlineNotification
+    kind="warning"
+    title="Warning"
+    className="sb-notification">
+    As the instruction for the three buttons implies,{' '}
+    <CodeSnippet type="inline" hideCopyButton>ModalFooter</CodeSnippet>
+    is flexible on the buttons as you render 
+    <CodeSnippet type="inline" hideCopyButton>Button</CodeSnippet>
+    's by yourself, as shown below. In this case, the application code
+    needs to take care of running actions upon clicking those buttons, e.g. closing
+    the modal
   </InlineNotification>
 </Unstyled>
+{/* <!-- prettier-ignore-end --> */}
 
 ```jsx
 <ComposedModal>

diff --git a/packages/react/src/components/ContainedList/ContainedList.mdx b/packages/react/src/components/ContainedList/ContainedList.mdx
@@ -9,8 +9,8 @@ import * as ContainedListStories from './ContainedList.stories.js';
 
 ## Table of Contents
 
-{/* <!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
+{/* <!-- 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)
@@ -31,68 +31,76 @@ import * as ContainedListStories from './ContainedList.stories.js';
 ### Search
 
 #### Expandable Search:
-Within the Contained List you can pass in an `ExpandableSearch` component within the `action` prop as seen below.
-The `ExpandableSearch` will give you the capability to expand and collapse the search bar within the title.
-However, we do not support passing in the `ExpandableSearch` within the title action prop while passing in the `Search` component
-as a child at the same time. If this happens, the `ExpandableSearch` in the title will override any other `Search` passed in as a child.
-To prevent this potential conflict, we have added funtionality to support both designs and both use cases. Please see [Persistent Search](#persistent-search) docs below.
+
+Within the Contained List you can pass in an `ExpandableSearch` component within
+the `action` prop as seen below. The `ExpandableSearch` will give you the
+capability to expand and collapse the search bar within the title. However, we
+do not support passing in the `ExpandableSearch` within the title action prop
+while passing in the `Search` component as a child at the same time. If this
+happens, the `ExpandableSearch` in the title will override any other `Search`
+passed in as a child. To prevent this potential conflict, we have added
+funtionality to support both designs and both use cases. Please see
+[Persistent Search](#persistent-search) docs below.
 
 ```js
-  export const WithExpandableSearch = () => {
-    const [searchTerm, setSearchTerm] = useState('');
-    const [searchResults, setSearchResults] = useState([]);
-    const handleChange = (event) => {
-      setSearchTerm(event.target.value);
-    };
-
-    useEffect(() => {
-      const listItems = [
-        'List item 1',
-        'List item 2',
-        'List item 3',
-        'List item 4'
-      ];
-
-      const results = listItems.filter((listItem) =>
-        listItem.toLowerCase().includes(searchTerm.toLowerCase())
-      );
-      setSearchResults(results);
-    }, [searchTerm]);
-
-    return (
-      <ContainedList
-        label="List title"
-        kind="on-page"
-        action={
-          <ExpandableSearch
-            placeholder="Filterable search"
-            value={searchTerm}
-            onChange={handleChange}
-            closeButtonLabelText="Clear search input"
-            size="lg"
-          />
-        }>
-        {searchResults.map((listItem, key) => (
-          <ContainedListItem key={key}>
-            {listItem}
-          </ContainedListItem>
-        ))}
-      </ContainedList>
-    );
+export const WithExpandableSearch = () => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [searchResults, setSearchResults] = useState([]);
+  const handleChange = (event) => {
+    setSearchTerm(event.target.value);
   };
+
+  useEffect(() => {
+    const listItems = [
+      'List item 1',
+      'List item 2',
+      'List item 3',
+      'List item 4',
+    ];
+
+    const results = listItems.filter((listItem) =>
+      listItem.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+    setSearchResults(results);
+  }, [searchTerm]);
+
+  return (
+    <ContainedList
+      label="List title"
+      kind="on-page"
+      action={
+        <ExpandableSearch
+          placeholder="Filterable search"
+          value={searchTerm}
+          onChange={handleChange}
+          closeButtonLabelText="Clear search input"
+          size="lg"
+        />
+      }>
+      {searchResults.map((listItem, key) => (
+        <ContainedListItem key={key}>{listItem}</ContainedListItem>
+      ))}
+    </ContainedList>
+  );
+};
 ```
+
 <Canvas>
   <Story of={ContainedListStories.WithExpandableSearch} />
 </Canvas>
 
 #### Persistent Search:
-We have added in the capability to pass down the `Search` component as a child of `ContainedList`.
-The `Search` component itself is not a prop but does render with specific styling such that the `Search` bar appears below the Contained List title as opposed to rendering inline.
-If you would like the Search to render inline to the Contained List title, please see the [Expandable Search](#expandable-search) docs above
-The `Search` component will also remain persistent under the title, so that it remains visible on scroll, when there are many list items passed in.
 
-```js
+We have added in the capability to pass down the `Search` component as a child
+of `ContainedList`. The `Search` component itself is not a prop but does render
+with specific styling such that the `Search` bar appears below the Contained
+List title as opposed to rendering inline. If you would like the Search to
+render inline to the Contained List title, please see the
+[Expandable Search](#expandable-search) docs above The `Search` component will
+also remain persistent under the title, so that it remains visible on scroll,
+when there are many list items passed in.
 
+```js
 export const WithPersistentSearch = () => {
   const [searchTerm, setSearchTerm] = useState('');
   const [searchResults, setSearchResults] = useState([]);
@@ -105,7 +113,7 @@ export const WithPersistentSearch = () => {
       'List item 1',
       'List item 2',
       'List item 3',
-      'List item 4'
+      'List item 4',
     ];
 
     const results = listItems.filter((listItem) =>
@@ -124,14 +132,11 @@ export const WithPersistentSearch = () => {
         size="lg"
       />
       {searchResults.map((listItem, key) => (
-        <ContainedListItem key={key}>
-          {listItem}
-        </ContainedListItem>
+        <ContainedListItem key={key}>{listItem}</ContainedListItem>
       ))}
     </ContainedList>
   );
 };
-
 ```
 
 <Canvas>

diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx b/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx
@@ -13,8 +13,7 @@ import * as ContentSwitcherStories from './ContentSwitcher.stories.js';
 
 ## Table of Contents
 
-{/* <!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
+{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
 
 - [Overview](#overview)
 - [Component API](#component-api)