Skip to content

Commit 2eda23c

Browse files
Mash707Mash707
authored
chore(menu toggle): move examples to separate files (#12034)
1 parent 02cbfa5 commit 2eda23c

11 files changed

Lines changed: 103 additions & 96 deletions

‎packages/react-core/src/components/MenuToggle/examples/MenuToggle.md‎

Lines changed: 13 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -19,62 +19,43 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
1919

2020
A toggle is collapsed until it is selected by a user.
2121

22-
```ts
23-
import { MenuToggle } from '@patternfly/react-core';
24-
25-
<MenuToggle>Collapsed</MenuToggle>
26-
22+
```ts file="MenuToggleCollapsed.tsx"
2723
```
2824

2925
### Expanded toggle
3026

3127
When a user selects a toggle, it becomes expanded and is styled with a blue underline. To flag expanded toggles, and apply expanded styling, use the `isExpanded` property .
3228

33-
```ts
34-
import { MenuToggle } from '@patternfly/react-core';
35-
36-
<MenuToggle isExpanded>Expanded</MenuToggle>;
37-
29+
```ts file ="MenuToggleExpanded.tsx"
3830
```
3931

4032
### Small toggle
4133

4234
You can pass `size="sm"` to a MenuToggle to style it as a small toggle, such as within a [breadcrumb](/components/breadcrumb).
4335

44-
```ts file="./MenuToggleSmall.tsx"
36+
```ts file="MenuToggleSmall.tsx"
4537

4638
```
4739

4840
### Disabled toggle
4941

5042
To disable the selection and expansion of a toggle, use the `isDisabled` property.
5143

52-
```ts
53-
import { MenuToggle } from '@patternfly/react-core';
54-
55-
<MenuToggle isDisabled>Disabled</MenuToggle>
56-
44+
```ts file="MenuToggleDisabled.tsx"
5745
```
5846

5947
### With a badge
6048

6149
To display a count of selected items in a toggle, use the `badge` property. You can also pass in `variant="plainText"` for a badge only toggle.
6250

63-
```ts
64-
import { Fragment } from 'react';
65-
import { MenuToggle, Badge } from '@patternfly/react-core';
66-
67-
<Fragment>
68-
<MenuToggle badge={<Badge>4 selected</Badge>}>Count</MenuToggle>
69-
<MenuToggle variant="plainText" badge={<Badge screenReaderText="additional items">4</Badge>} />
70-
</Fragment>
51+
```ts file="MenuToggleBadge.tsx"
7152
```
7253

7354
### Settings toggle
7455

7556
To create a "settings" menu toggle that will animate on hover and focus, you can pass the `isSettings` property in. Doing so will override the `icon` property, as a specific icon is used internally for the animations.
7657

77-
```ts file="./MenuToggleSettings.tsx"
58+
```ts file="MenuToggleSettings.tsx"
7859

7960
```
8061

@@ -84,7 +65,7 @@ To add a recognizable icon to a menu toggle, use the `icon` property. The follow
8465

8566
For most basic icons, it is recommended to wrap it inside our [icon component](/components/icon).
8667

87-
```ts file="./MenuToggleCustomIcon.tsx"
68+
```ts file="MenuToggleCustomIcon.tsx"
8869

8970
```
9071

@@ -94,37 +75,14 @@ You can also pass images into the `icon` property. The following example passes
9475

9576
This can be used alongside a text label that provides more context for the image.
9677

97-
```ts
98-
import { Fragment } from 'react';
99-
import { MenuToggle, Avatar } from '@patternfly/react-core';
100-
import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
101-
102-
<Fragment>
103-
<MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />}>Ned Username</MenuToggle>{' '}
104-
<MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isExpanded>Ned Username</MenuToggle>{' '}
105-
<MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isDisabled>Ned Username</MenuToggle>
106-
</Fragment>
78+
```ts file="MenuToggleAvatarText.tsx"
10779
```
10880

10981
### Variant styles
11082

11183
Variant styling can be applied to menu toggles. In the following example, the toggle uses primary styling by passing `variant="primary"` into the `<MenuToggle>` component. Additional variant options include “default”, “plain”, “plainText”, “secondary”, and “typeahead”.
11284

113-
```ts
114-
import { Fragment } from 'react';
115-
import { MenuToggle } from '@patternfly/react-core';
116-
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
117-
118-
<Fragment>
119-
<MenuToggle variant="primary">Collapsed</MenuToggle>{' '}
120-
<MenuToggle variant="primary" isExpanded>
121-
Expanded
122-
</MenuToggle>{' '}
123-
<MenuToggle variant="primary" isDisabled>
124-
Disabled
125-
</MenuToggle>
126-
</Fragment>
127-
85+
```ts file="MenuToggleVariantStyles.tsx"
12886
```
12987

13088
### Plain toggle with icon
@@ -133,39 +91,14 @@ To apply plain styling to a menu toggle with an icon, pass in `variant="plain"`.
13391

13492
If the toggle does not have any visible text content, use the `aria-label` property to provide an accessible name.
13593

136-
```ts
137-
import { Fragment } from 'react';
138-
import { MenuToggle } from '@patternfly/react-core';
139-
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
140-
141-
<Fragment>
142-
<MenuToggle icon={<EllipsisVIcon />} variant="plain" aria-label="plain kebab"/>
143-
{' '}
144-
<MenuToggle icon={<EllipsisVIcon />} variant="plain" isExpanded aria-label="plain expanded kebab"/>
145-
{' '}
146-
<MenuToggle icon={<EllipsisVIcon />} variant="plain" isDisabled aria-label="disabled plain kebab"/>
147-
</Fragment>
94+
```ts file="MenuTogglePlainIcon.tsx"
14895
```
14996

15097
### Plain toggle with text label
15198

15299
To apply plain styling to a menu toggle with a text label, pass in `variant="plainText"`. Unlike the “plain” variant, “plainText” adds a caret pointing down in the toggle.
153100

154-
```ts
155-
import { Fragment } from 'react';
156-
import { MenuToggle } from '@patternfly/react-core';
157-
158-
<Fragment>
159-
<MenuToggle variant="plainText" isDisabled aria-label="Disabled plain menu toggle">
160-
Disabled
161-
</MenuToggle>{' '}
162-
<MenuToggle variant="plainText" aria-label="Plain menu toggle">
163-
Custom text
164-
</MenuToggle>{' '}
165-
<MenuToggle variant="plainText" isExpanded aria-label="Expanded plain menu toggle">
166-
Custom text (expanded)
167-
</MenuToggle>
168-
</Fragment>
101+
```ts file="MenuTogglePlainTextLabel.tsx"
169102
```
170103

171104
### Split toggle with checkbox
@@ -216,14 +149,7 @@ A full height toggle fills the height of its parent. To flag a full height toggl
216149

217150
In the following example, the toggle fills the size of the "80px" `<div>` element that it is within.
218151

219-
```ts
220-
import { MenuToggle } from '@patternfly/react-core';
221-
222-
<div style={{ height: "80px" }}>
223-
<MenuToggle isFullHeight aria-label="Full height menu toggle">
224-
Full height
225-
</MenuToggle>
226-
</div>
152+
```ts file="MenuToggleFullHeight.tsx"
227153
```
228154

229155
### Full width toggle
@@ -232,16 +158,7 @@ A full width toggle fills the width of its parent. To flag a full width toggle,
232158

233159
In the following example, the toggle fills the width of its parent as the window size changes.
234160

235-
```ts
236-
import { MenuToggle } from '@patternfly/react-core';
237-
238-
const fullWidth: React.FunctionComponent = () => {
239-
return (
240-
<MenuToggle isFullWidth aria-label="Full width menu toggle" >
241-
Full width
242-
</MenuToggle>
243-
);
244-
}
161+
```ts file="MenuToggleFullWidth.tsx"
245162
```
246163

247164
### Typeahead toggle

‎packages/react-core/src/components/MenuToggle/examples/MenuToggleAvatarText.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Fragment } from 'react';
2+
import { MenuToggle, Avatar } from '@patternfly/react-core';
3+
import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
4+
5+
export const MenuToggleAvatarText: React.FunctionComponent = () => (
6+
<Fragment>
7+
<MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />}>Ned Username</MenuToggle>{' '}
8+
<MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isExpanded>
9+
Ned Username
10+
</MenuToggle>{' '}
11+
<MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isDisabled>
12+
Ned Username
13+
</MenuToggle>
14+
</Fragment>
15+
);

‎packages/react-core/src/components/MenuToggle/examples/MenuToggleBadge.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Fragment } from 'react';
2+
import { MenuToggle, Badge } from '@patternfly/react-core';
3+
4+
export const MenuToggleBadge: React.FunctionComponent = () => (
5+
<Fragment>
6+
<MenuToggle badge={<Badge>4 selected</Badge>}>Count</MenuToggle>
7+
<MenuToggle variant="plainText" badge={<Badge screenReaderText="additional items">4</Badge>} />
8+
</Fragment>
9+
);

‎packages/react-core/src/components/MenuToggle/examples/MenuToggleCollapsed.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { MenuToggle } from '@patternfly/react-core';
2+
3+
export const MenuToggleCollapsed: React.FunctionComponent = () => <MenuToggle>Collapsed</MenuToggle>;

‎packages/react-core/src/components/MenuToggle/examples/MenuToggleDisabled.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { MenuToggle } from '@patternfly/react-core';
2+
3+
export const MenuToggleDisabled: React.FunctionComponent = () => <MenuToggle isDisabled>Disabled</MenuToggle>;

‎packages/react-core/src/components/MenuToggle/examples/MenuToggleExpanded.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { MenuToggle } from '@patternfly/react-core';
2+
3+
export const MenuToggleExpanded: React.FunctionComponent = () => <MenuToggle isExpanded>Expanded</MenuToggle>;

‎packages/react-core/src/components/MenuToggle/examples/MenuToggleFullHeight.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { MenuToggle } from '@patternfly/react-core';
2+
3+
export const MenuToggleFullHeight: React.FunctionComponent = () => (
4+
<div style={{ height: '80px' }}>
5+
<MenuToggle isFullHeight aria-label="Full height menu toggle">
6+
Full height
7+
</MenuToggle>
8+
</div>
9+
);

‎packages/react-core/src/components/MenuToggle/examples/MenuToggleFullWidth.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { MenuToggle } from '@patternfly/react-core';
2+
3+
export const MenuToggleFullWidth: React.FunctionComponent = () => (
4+
<MenuToggle isFullWidth aria-label="Full width menu toggle">
5+
Full width
6+
</MenuToggle>
7+
);

‎packages/react-core/src/components/MenuToggle/examples/MenuTogglePlainIcon.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Fragment } from 'react';
2+
import { MenuToggle } from '@patternfly/react-core';
3+
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
4+
5+
export const MenuTogglePlainIcon: React.FunctionComponent = () => (
6+
<Fragment>
7+
<MenuToggle icon={<EllipsisVIcon />} variant="plain" aria-label="plain kebab" />{' '}
8+
<MenuToggle icon={<EllipsisVIcon />} variant="plain" isExpanded aria-label="plain expanded kebab" />{' '}
9+
<MenuToggle icon={<EllipsisVIcon />} variant="plain" isDisabled aria-label="disabled plain kebab" />
10+
</Fragment>
11+
);

‎packages/react-core/src/components/MenuToggle/examples/MenuTogglePlainTextLabel.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Fragment } from 'react';
2+
import { MenuToggle } from '@patternfly/react-core';
3+
4+
export const MenuTogglePlainTextLabel: React.FunctionComponent = () => (
5+
<Fragment>
6+
<MenuToggle variant="plainText" isDisabled aria-label="Disabled plain menu toggle">
7+
Disabled
8+
</MenuToggle>{' '}
9+
<MenuToggle variant="plainText" aria-label="Plain menu toggle">
10+
Custom text
11+
</MenuToggle>{' '}
12+
<MenuToggle variant="plainText" isExpanded aria-label="Expanded plain menu toggle">
13+
Custom text (expanded)
14+
</MenuToggle>
15+
</Fragment>
16+
);

0 commit comments

Comments
 (0)