Skip to content

Commit 2ccf23b

Browse files
tay1orjonestw15egan
tay1orjones
and
tw15egan
authored
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>
1 parent 9963913 commit 2ccf23b

33 files changed

Lines changed: 419 additions & 350 deletions

File tree

‎packages/cli/src/component/templates/mdx.template.mdx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ guidelines](https://www.carbondesignsystem.com/components/<%= name %>/usage)
1010
&nbsp;|&nbsp; [Accessibility](https://www.carbondesignsystem.com/components/<%=
1111
url %>/accessibility)
1212

13-
{/* <!-- START doctoc generated TOC please keep comment here to allow auto update -->
14-
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
13+
{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
1514

1615
## Table of Contents
1716

‎packages/react/src/components/AspectRatio/AspectRatio.mdx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ import { AspectRatio } from '.';
99
&nbsp;|&nbsp;
1010
[Usage guidelines](https://www.carbondesignsystem.com/guidelines/2x-grid/overview#aspect-ratio)
1111

12-
{/* <!-- START doctoc generated TOC please keep comment here to allow auto update -->
13-
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
12+
{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
1413

1514
## Table of Contents
1615

‎packages/react/src/components/Button/Button.mdx‎

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,7 @@ import * as ButtonStories from './Button.stories';
1515

1616
## Table of Contents
1717

18-
{/* <!-- START doctoc generated TOC please keep comment here to allow auto update -->
19-
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
18+
{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
2019

2120
- [Overview](#overview)
2221
- [Danger Buttons](#danger-buttons)
@@ -72,9 +71,9 @@ danger button or the ghost danger button may be more appropriate.
7271
## Icon-only Buttons
7372

7473
Icon buttons allow users to take actions, and make choices, with a single tap.
75-
Icon buttons can take the form of any of the seven types (Primary, Secondary,
76-
Tertiary, Danger, Danger tertiary, Danger ghost and Ghost) but most commonly
77-
will be styled as primary or ghost buttons.
74+
Icon buttons can take the form of Primary, Secondary, Tertiary, and Ghost but
75+
most commonly will be styled as primary or ghost buttons. Icon only buttons do
76+
not support Danger, Danger tertiary, or Danger ghost.
7877

7978
<Canvas>
8079
<Story of={ButtonStories.IconButton} />
@@ -182,10 +181,11 @@ button is interacted with.
182181
Carbon has seven types of buttons, `primary`, `secondary`, `tertiary`, `ghost`,
183182
`danger`, `danger--tertiary`, and `danger--ghost`. If no `kind` is specified, a
184183
`primary` button will be rendered. For more information on when to use each
185-
variant, check out the [design documentation](https://www.carbondesignsystem.com/components/button/usage#overview)
184+
variant, check out the
185+
[design documentation](https://www.carbondesignsystem.com/components/button/usage#overview)
186186
187187
<Unstyled>
188-
<div style={{display: 'flex', justifyContent: 'space-between'}}>
188+
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
189189
<Button>Primary</Button>
190190
<Button kind="secondary">Secondary</Button>
191191
<Button kind="tertiary">Tertiary </Button>
@@ -223,11 +223,12 @@ to render icon-only buttons, please refer to the section on the
223223
[hasIconOnly](#button-hasicononly) prop
224224

225225
<Unstyled>
226-
<Button renderIcon={Add} iconDescription="Add" style={{marginRight: '3px'}}>Add</Button>
227-
<Button
228-
renderIcon={TrashCan}
229-
kind="danger"
230-
iconDescription="TrashCan">Delete</Button>
226+
<Button renderIcon={Add} iconDescription="Add" style={{ marginRight: '3px' }}>
227+
Add
228+
</Button>
229+
<Button renderIcon={TrashCan} kind="danger" iconDescription="TrashCan">
230+
Delete
231+
</Button>
231232
</Unstyled>
232233

233234
```jsx
@@ -241,11 +242,16 @@ the Icon to ensure the proper classes are applied:
241242
<Unstyled>
242243
<Button
243244
renderIcon={(props) => <Add size={24} {...props} />}
244-
iconDescription="Add" style={{marginRight: '3px'}}>Add</Button>
245+
iconDescription="Add"
246+
style={{ marginRight: '3px' }}>
247+
Add
248+
</Button>
245249
<Button
246250
renderIcon={(props) => <TrashCan size={24} {...props} />}
247251
kind="danger"
248-
iconDescription="TrashCan">Delete</Button>
252+
iconDescription="TrashCan">
253+
Delete
254+
</Button>
249255
</Unstyled>
250256

251257
```jsx
@@ -261,7 +267,9 @@ an element appear as a button control to a screen reader. Check out the
261267
[References](#references) section for more information.
262268

263269
<Unstyled>
264-
<Button as="div" role="button">a11y Button</Button>
270+
<Button as="div" role="button">
271+
a11y Button
272+
</Button>
265273
</Unstyled>
266274

267275
```jsx

‎packages/react/src/components/ClassPrefix/ClassPrefix.mdx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ import * as ClassPrefixStories from './ClassPrefix.stories';
66

77
[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/ClassPrefix)
88

9-
{/* <!-- START doctoc generated TOC please keep comment here to allow auto update -->
10-
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
9+
{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
1110

1211
## Table of Contents
1312

‎packages/react/src/components/ComboButton/ComboButton.mdx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ import { ArgsTable } from '@storybook/blocks';
44

55
[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/ComboButton)
66

7-
{/* <!-- START doctoc generated TOC please keep comment here to allow auto update -->
8-
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
7+
{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
98

109
- [Overview](#overview)
1110
- [Component API](#component-api)
@@ -15,7 +14,10 @@ import { ArgsTable } from '@storybook/blocks';
1514

1615
## Overview
1716

18-
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`.
17+
A `ComboButton` can be used to offer additional, secondary actions in a
18+
disclosed list next to the primary action. These additional actions must be
19+
`MenuItem`s passed as `children`. The primary action's label is passed as
20+
`props.label`.
1921

2022
```jsx
2123
<ComboButton label="Primary action">

‎packages/react/src/components/ComposedModal/ComposedModal.mdx‎

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import ComposedModal from '../ComposedModal';
33
import { InlineNotification } from '../Notification';
44
import CodeSnippet from '../CodeSnippet';
55
import * as ComposedModalStories from './ComposedModal.stories.js';
6-
import './ComposedModal.stories.scss'
6+
import './ComposedModal.stories.scss';
77

88
# ComposedModal
99

@@ -15,8 +15,7 @@ import './ComposedModal.stories.scss'
1515

1616
## Table of Contents
1717

18-
{/* <!-- START doctoc generated TOC please keep comment here to allow auto update -->
19-
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
18+
{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
2019

2120
- [Overview](#overview)
2221
- [Component API](#component-api)
@@ -97,14 +96,21 @@ const ModalStateManager = ({
9796
};
9897
```
9998

99+
{/* <!-- prettier-ignore-start --> */}
100+
100101
<Unstyled>
101-
<InlineNotification kind="warning" title="Warning" className="sb-notification">
102-
<CodeSnippet type="inline" hideCopyButton>{'Modal'}</CodeSnippet>
103-
and <CodeSnippet type="inline" hideCopyButton>{'ComposedModal'}</CodeSnippet>
104-
have to be put at the top level in a React tree. The easiest way to ensure that is using React
105-
portal as shown in above example.
102+
<InlineNotification
103+
kind="warning"
104+
title="Warning"
105+
className="sb-notification">
106+
<CodeSnippet type="inline" hideCopyButton>Modal</CodeSnippet>
107+
and
108+
<CodeSnippet type="inline" hideCopyButton>ComposedModal</CodeSnippet>
109+
have to be put at the top level in a React tree. The easiest way to ensure
110+
that is using React portal as shown in above example.
106111
</InlineNotification>
107112
</Unstyled>
113+
{/* <!-- prettier-ignore-end --> */}
108114

109115
## Modal sizes
110116

@@ -205,14 +211,23 @@ With `<ComposedModal>`, you can control the buttons with the following code.
205211
</ComposedModal>
206212
```
207213

214+
{/* <!-- prettier-ignore-start --> */}
215+
208216
<Unstyled>
209-
<InlineNotification kind="warning" title="Warning" className="sb-notification">
210-
As the instruction for the three buttons implies, <CodeSnippet type="inline" hideCopyButton>{'ModalFooter'}</CodeSnippet>
211-
is flexible on the buttons as you render <CodeSnippet type="inline" hideCopyButton>{'Button'}</CodeSnippet>'s by yourself,
212-
as shown below. In this case, the application code needs to take care of running
213-
actions upon clicking those buttons, e.g. closing the modal
217+
<InlineNotification
218+
kind="warning"
219+
title="Warning"
220+
className="sb-notification">
221+
As the instruction for the three buttons implies,{' '}
222+
<CodeSnippet type="inline" hideCopyButton>ModalFooter</CodeSnippet>
223+
is flexible on the buttons as you render
224+
<CodeSnippet type="inline" hideCopyButton>Button</CodeSnippet>
225+
's by yourself, as shown below. In this case, the application code
226+
needs to take care of running actions upon clicking those buttons, e.g. closing
227+
the modal
214228
</InlineNotification>
215229
</Unstyled>
230+
{/* <!-- prettier-ignore-end --> */}
216231

217232
```jsx
218233
<ComposedModal>

‎packages/react/src/components/ContainedList/ContainedList.mdx‎

Lines changed: 63 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import * as ContainedListStories from './ContainedList.stories.js';
99

1010
## Table of Contents
1111

12-
{/* <!-- START doctoc generated TOC please keep comment here to allow auto update -->
13-
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
12+
{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
13+
1414
## Table of Contents
1515

1616
- [Overview](#overview)
@@ -31,68 +31,76 @@ import * as ContainedListStories from './ContainedList.stories.js';
3131
### Search
3232

3333
#### Expandable Search:
34-
Within the Contained List you can pass in an `ExpandableSearch` component within the `action` prop as seen below.
35-
The `ExpandableSearch` will give you the capability to expand and collapse the search bar within the title.
36-
However, we do not support passing in the `ExpandableSearch` within the title action prop while passing in the `Search` component
37-
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.
38-
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.
34+
35+
Within the Contained List you can pass in an `ExpandableSearch` component within
36+
the `action` prop as seen below. The `ExpandableSearch` will give you the
37+
capability to expand and collapse the search bar within the title. However, we
38+
do not support passing in the `ExpandableSearch` within the title action prop
39+
while passing in the `Search` component as a child at the same time. If this
40+
happens, the `ExpandableSearch` in the title will override any other `Search`
41+
passed in as a child. To prevent this potential conflict, we have added
42+
funtionality to support both designs and both use cases. Please see
43+
[Persistent Search](#persistent-search) docs below.
3944

4045
```js
41-
export const WithExpandableSearch = () => {
42-
const [searchTerm, setSearchTerm] = useState('');
43-
const [searchResults, setSearchResults] = useState([]);
44-
const handleChange = (event) => {
45-
setSearchTerm(event.target.value);
46-
};
47-
48-
useEffect(() => {
49-
const listItems = [
50-
'List item 1',
51-
'List item 2',
52-
'List item 3',
53-
'List item 4'
54-
];
55-
56-
const results = listItems.filter((listItem) =>
57-
listItem.toLowerCase().includes(searchTerm.toLowerCase())
58-
);
59-
setSearchResults(results);
60-
}, [searchTerm]);
61-
62-
return (
63-
<ContainedList
64-
label="List title"
65-
kind="on-page"
66-
action={
67-
<ExpandableSearch
68-
placeholder="Filterable search"
69-
value={searchTerm}
70-
onChange={handleChange}
71-
closeButtonLabelText="Clear search input"
72-
size="lg"
73-
/>
74-
}>
75-
{searchResults.map((listItem, key) => (
76-
<ContainedListItem key={key}>
77-
{listItem}
78-
</ContainedListItem>
79-
))}
80-
</ContainedList>
81-
);
46+
export const WithExpandableSearch = () => {
47+
const [searchTerm, setSearchTerm] = useState('');
48+
const [searchResults, setSearchResults] = useState([]);
49+
const handleChange = (event) => {
50+
setSearchTerm(event.target.value);
8251
};
52+
53+
useEffect(() => {
54+
const listItems = [
55+
'List item 1',
56+
'List item 2',
57+
'List item 3',
58+
'List item 4',
59+
];
60+
61+
const results = listItems.filter((listItem) =>
62+
listItem.toLowerCase().includes(searchTerm.toLowerCase())
63+
);
64+
setSearchResults(results);
65+
}, [searchTerm]);
66+
67+
return (
68+
<ContainedList
69+
label="List title"
70+
kind="on-page"
71+
action={
72+
<ExpandableSearch
73+
placeholder="Filterable search"
74+
value={searchTerm}
75+
onChange={handleChange}
76+
closeButtonLabelText="Clear search input"
77+
size="lg"
78+
/>
79+
}>
80+
{searchResults.map((listItem, key) => (
81+
<ContainedListItem key={key}>{listItem}</ContainedListItem>
82+
))}
83+
</ContainedList>
84+
);
85+
};
8386
```
87+
8488
<Canvas>
8589
<Story of={ContainedListStories.WithExpandableSearch} />
8690
</Canvas>
8791

8892
#### Persistent Search:
89-
We have added in the capability to pass down the `Search` component as a child of `ContainedList`.
90-
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.
91-
If you would like the Search to render inline to the Contained List title, please see the [Expandable Search](#expandable-search) docs above
92-
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.
9393

94-
```js
94+
We have added in the capability to pass down the `Search` component as a child
95+
of `ContainedList`. The `Search` component itself is not a prop but does render
96+
with specific styling such that the `Search` bar appears below the Contained
97+
List title as opposed to rendering inline. If you would like the Search to
98+
render inline to the Contained List title, please see the
99+
[Expandable Search](#expandable-search) docs above The `Search` component will
100+
also remain persistent under the title, so that it remains visible on scroll,
101+
when there are many list items passed in.
95102

103+
```js
96104
export const WithPersistentSearch = () => {
97105
const [searchTerm, setSearchTerm] = useState('');
98106
const [searchResults, setSearchResults] = useState([]);
@@ -105,7 +113,7 @@ export const WithPersistentSearch = () => {
105113
'List item 1',
106114
'List item 2',
107115
'List item 3',
108-
'List item 4'
116+
'List item 4',
109117
];
110118

111119
const results = listItems.filter((listItem) =>
@@ -124,14 +132,11 @@ export const WithPersistentSearch = () => {
124132
size="lg"
125133
/>
126134
{searchResults.map((listItem, key) => (
127-
<ContainedListItem key={key}>
128-
{listItem}
129-
</ContainedListItem>
135+
<ContainedListItem key={key}>{listItem}</ContainedListItem>
130136
))}
131137
</ContainedList>
132138
);
133139
};
134-
135140
```
136141

137142
<Canvas>

‎packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,7 @@ import * as ContentSwitcherStories from './ContentSwitcher.stories.js';
1313

1414
## Table of Contents
1515

16-
{/* <!-- START doctoc generated TOC please keep comment here to allow auto update -->
17-
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
16+
{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
1817

1918
- [Overview](#overview)
2019
- [Component API](#component-api)

0 commit comments

Comments
 (0)