@patternfly/react-core 5.0.0-alpha.63 → 5.0.0-alpha.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/package.json +2 -2
  3. package/src/components/MenuToggle/examples/MenuToggle.md +85 -78
  4. package/src/components/MenuToggle/examples/MenuToggleSplitButtonAction.tsx +10 -11
  5. package/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckbox.tsx +4 -17
  6. package/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxWithText.tsx +10 -11
  7. package/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx +35 -0
  8. package/src/components/MenuToggle/examples/MenuToggleSplitButtonActionPrimary.tsx +0 -58
  9. package/src/components/MenuToggle/examples/MenuToggleSplitButtonActionSecondary.tsx +0 -58
  10. package/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxPrimary.tsx +0 -55
  11. package/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxSecondary.tsx +0 -55
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # 5.0.0-alpha.64 (2023-04-12)
7
+
8
+ **Note:** Version bump only for package @patternfly/react-core
9
+
6
10
  # [5.0.0-alpha.63](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@5.0.0-alpha.62...@patternfly/react-core@5.0.0-alpha.63) (2023-04-11)
7
11
 
8
12
  ### Features
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-core",
3
- "version": "5.0.0-alpha.63",
3
+ "version": "5.0.0-alpha.64",
4
4
  "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
5
5
  "main": "dist/js/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
70
70
  "react": "^17 || ^18",
71
71
  "react-dom": "^17 || ^18"
72
72
  },
73
- "gitHead": "729d7446d8c6769feecaa9406667d89cfbf53a9c"
73
+ "gitHead": "96fff41f82b6547ea995ea64938c38575058518e"
74
74
  }
package/src/components/MenuToggle/examples/MenuToggle.md CHANGED
@@ -11,10 +11,13 @@ import './MenuToggle.css'
11
11
  import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
12
12
  import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
13
13
  import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
14
+ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
14
15
 
15
16
  ## Examples
16
17
 
17
- ### Collapsed
18
+ ### Collapsed toggle
19
+
20
+ A toggle is collapsed until it is selected by a user.
18
21
 
19
22
  ```ts
20
23
  import React from 'react';
@@ -24,7 +27,9 @@ import { MenuToggle } from '@patternfly/react-core';
24
27
 
25
28
  ```
26
29
 
27
- ### Expanded
30
+ ### Expanded toggle
31
+
32
+ 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 .
28
33
 
29
34
  ```ts
30
35
  import React from 'react';
@@ -34,7 +39,9 @@ import { MenuToggle } from '@patternfly/react-core';
34
39
 
35
40
  ```
36
41
 
37
- ### Disabled
42
+ ### Disabled toggle
43
+
44
+ To disable the selection and expansion of a toggle, use the `isDisabled` property.
38
45
 
39
46
  ```ts
40
47
  import React from 'react';
@@ -44,7 +51,9 @@ import { MenuToggle } from '@patternfly/react-core';
44
51
 
45
52
  ```
46
53
 
47
- ### Count
54
+ ### With a badge
55
+
56
+ To display a count of selected items in a toggle, use the `badge` property.
48
57
 
49
58
  ```ts
50
59
  import React from 'react';
@@ -54,7 +63,9 @@ import { MenuToggle, Badge } from '@patternfly/react-core';
54
63
 
55
64
  ```
56
65
 
57
- ### Primary
66
+ ### With icons
67
+
68
+ To add a recognizable icon to a menu toggle, use the `icon` property. The following example adds a `CogIcon` to the toggle.
58
69
 
59
70
  ```ts
60
71
  import React from 'react';
@@ -62,21 +73,33 @@ import { MenuToggle } from '@patternfly/react-core';
62
73
  import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
63
74
 
64
75
  <React.Fragment>
65
- <MenuToggle variant="primary">Collapsed</MenuToggle>{' '}
66
- <MenuToggle variant="primary" icon={<CogIcon />}>
67
- Icon
68
- </MenuToggle>{' '}
69
- <MenuToggle variant="primary" isExpanded>
70
- Expanded
71
- </MenuToggle>{' '}
72
- <MenuToggle variant="primary" isDisabled>
73
- Disabled
74
- </MenuToggle>
76
+ <MenuToggle icon={<CogIcon />} variant="primary">Icon</MenuToggle>{' '}
77
+ <MenuToggle icon={<CogIcon />} variant="secondary">Icon</MenuToggle>{' '}
78
+ <MenuToggle icon={<CogIcon />} variant="secondary" isDisabled>Icon</MenuToggle>
75
79
  </React.Fragment>
80
+ ```
81
+
82
+ ### With avatar and text
76
83
 
84
+ You can also pass images into the `icon` property. The following example passes in an `<Avatar>` component with an `imgAvatar`.
85
+
86
+ This can be used alongside a text label that provides more context for the image.
87
+
88
+ ```ts
89
+ import React from 'react';
90
+ import { MenuToggle, Avatar } from '@patternfly/react-core';
91
+ import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
92
+
93
+ <React.Fragment>
94
+ <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />}>Ned Username</MenuToggle>{' '}
95
+ <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isExpanded>Ned Username</MenuToggle>{' '}
96
+ <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isDisabled>Ned Username</MenuToggle>
97
+ </React.Fragment>
77
98
  ```
78
99
 
79
- ### Secondary
100
+ ### Variant styles
101
+
102
+ 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”.
80
103
 
81
104
  ```ts
82
105
  import React from 'react';
@@ -84,21 +107,22 @@ import { MenuToggle } from '@patternfly/react-core';
84
107
  import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
85
108
 
86
109
  <React.Fragment>
87
- <MenuToggle variant="secondary">Collapsed</MenuToggle>{' '}
88
- <MenuToggle variant="secondary" icon={<CogIcon />}>
89
- Icon
90
- </MenuToggle>{' '}
91
- <MenuToggle variant="secondary" isExpanded>
110
+ <MenuToggle variant="primary">Collapsed</MenuToggle>{' '}
111
+ <MenuToggle variant="primary" isExpanded>
92
112
  Expanded
93
113
  </MenuToggle>{' '}
94
- <MenuToggle variant="secondary" isDisabled>
114
+ <MenuToggle variant="primary" isDisabled>
95
115
  Disabled
96
116
  </MenuToggle>
97
117
  </React.Fragment>
98
118
 
99
119
  ```
100
120
 
101
- ### Plain
121
+ ### Plain toggle with icon
122
+
123
+ To apply plain styling to a menu toggle with an icon, pass in `variant="plain"`. This will remove the default bottom border and caret. You may pass in an `icon` to serve as the menu toggle. The following example passes in an `EllipsisVIcon`.
124
+
125
+ If the toggle does not have any visible text content, use the `aria-label` property to provide an accessible name.
102
126
 
103
127
  ```ts
104
128
  import React from 'react';
@@ -108,16 +132,18 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
108
132
  <React.Fragment>
109
133
  <MenuToggle variant="plain" aria-label="plain kebab">
110
134
  <EllipsisVIcon />
111
- </MenuToggle>
135
+ </MenuToggle>{' '}
112
136
  <MenuToggle variant="plain" isExpanded aria-label="plain expanded kebab">
113
137
  <EllipsisVIcon />
114
- </MenuToggle>
138
+ </MenuToggle>{' '}
115
139
  <MenuToggle variant="plain" isDisabled aria-label="disabled kebab">
116
140
  <EllipsisVIcon />
117
141
  </MenuToggle>
118
142
  </React.Fragment>
119
143
  ```
120
- ### Plain with text
144
+ ### Plain toggle with text label
145
+
146
+ 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.
121
147
 
122
148
  ```ts
123
149
  import React from 'react';
@@ -126,80 +152,48 @@ import { MenuToggle } from '@patternfly/react-core';
126
152
  <React.Fragment>
127
153
  <MenuToggle variant="plainText" isDisabled aria-label="Disabled plain menu toggle">
128
154
  Disabled
129
- </MenuToggle>
130
- &nbsp;
155
+ </MenuToggle>{' '}
131
156
  <MenuToggle variant="plainText" aria-label="Plain menu toggle">
132
157
  Custom text
133
- </MenuToggle>
158
+ </MenuToggle>{' '}
134
159
  <MenuToggle variant="plainText" isExpanded aria-label="Expanded plain menu toggle">
135
160
  Custom text (expanded)
136
161
  </MenuToggle>
137
162
  </React.Fragment>
138
163
  ```
139
164
 
140
- ### Split button (checkbox)
141
-
142
- ```ts file='MenuToggleSplitButtonCheckbox.tsx'
143
- ```
165
+ ### Split button toggle with checkbox
144
166
 
145
- ### Split button (checkbox with toggle text)
146
-
147
- ```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
148
- ```
167
+ To add an action button or other control to a menu toggle, use a split button. A `<MenuToggle>` can be rendered as a split button by adding a `splitButtonOptions` object. Elements to be displayed before the toggle button must be included in the `items` property of `splitButtonOptions`.
149
168
 
150
- ### Split button (checkbox, primary)
151
-
152
- ```ts file='MenuToggleSplitButtonCheckboxPrimary.tsx'
153
- ```
169
+ The following example shows a split button with a `<MenuToggleCheckbox>`.
154
170
 
155
- ### Split button (checkbox, secondary)
156
-
157
- ```ts file='MenuToggleSplitButtonCheckboxSecondary.tsx'
158
- ```
171
+ Variant styling can be applied to split button toggles to adjust their appearance for different scenarios. Both "primary" and "secondary" variants can be used with split button toggles.
159
172
 
160
- ### Split button (action)
161
-
162
- ```ts file='MenuToggleSplitButtonAction.tsx'
173
+ ```ts file='MenuToggleSplitButtonCheckbox.tsx'
163
174
  ```
164
175
 
165
- ### Split button (action, primary)
166
-
167
- ```ts file='MenuToggleSplitButtonActionPrimary.tsx'
168
- ```
176
+ ### Split button toggle with text label
169
177
 
170
- ### Split button (action, secondary)
171
-
172
- ```ts file='MenuToggleSplitButtonActionSecondary.tsx'
178
+ To display text in a split button menu toggle, add a label to the `items` property of `splitButtonOptions`.
179
+
180
+ ```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
173
181
  ```
174
182
 
175
- ### With icon/image and text
183
+ ### Split button toggle with action
176
184
 
177
- ```ts
178
- import React from 'react';
179
- import { MenuToggle, Avatar } from '@patternfly/react-core';
180
- import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
185
+ To add an action to a split button, pass `variant='action'` into `splitButtonOptions` and add a `<MenuToggleAction>` to the `items` property of `splitButtonOptions`.
181
186
 
182
- <React.Fragment>
183
- <MenuToggle icon={<CogIcon />} variant="secondary">Icon</MenuToggle>{' '}
184
- <MenuToggle icon={<CogIcon />} variant="secondary" isDisabled>Icon</MenuToggle>
185
- </React.Fragment>
187
+ Actions may be used with primary and secondary toggle variants.
188
+
189
+ ```ts file='MenuToggleSplitButtonAction.tsx'
186
190
  ```
187
191
 
188
- ### With avatar and text
192
+ ### Full height toggle
189
193
 
190
- ```ts
191
- import React from 'react';
192
- import { MenuToggle, Avatar } from '@patternfly/react-core';
193
- import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
194
+ A full height toggle fills the height of its parent. To flag a full height toggle, use the `isFullHeight` property.
194
195
 
195
- <React.Fragment>
196
- <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />}>Ned Username</MenuToggle>{' '}
197
- <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isExpanded>Ned Username</MenuToggle>{' '}
198
- <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isDisabled>Ned Username</MenuToggle>
199
- </React.Fragment>
200
- ```
201
-
202
- ### Full height
196
+ In the following example, the toggle fills the size of the "80px" `<div>` element that it is within.
203
197
 
204
198
  ```ts
205
199
  import React from 'react';
@@ -212,7 +206,11 @@ import { MenuToggle } from '@patternfly/react-core';
212
206
  </div>
213
207
  ```
214
208
 
215
- ### Full width
209
+ ### Full width toggle
210
+
211
+ A full width toggle fills the width of its parent. To flag a full width toggle, use the `isFullWidth` property.
212
+
213
+ In the following example, the toggle fills the width of its parent as the window size changes.
216
214
 
217
215
  ```ts
218
216
  import React from 'react';
@@ -226,3 +224,12 @@ const fullWidth: React.FunctionComponent = () => {
226
224
  );
227
225
  }
228
226
  ```
227
+
228
+ ### Typeahead toggle
229
+
230
+ To create a typeahead toggle, pass in `variant="typeahead"` to the `<MenuToggle>`. Then, pass a `<TextInputGroup>` component as a child of the `<MenuToggle>`.
231
+
232
+ To create a multiple typeahead toggle, pass a `<TextInputGroup>` component implemented like the [text input group's filter example](/components/text-input-group#filters) as a child of `<MenuToggle>`.
233
+
234
+ ```ts file='MenuToggleTypeahead.tsx'
235
+ ```
package/src/components/MenuToggle/examples/MenuToggleSplitButtonAction.tsx CHANGED
@@ -4,16 +4,10 @@ import { MenuToggleAction, MenuToggle } from '@patternfly/react-core';
4
4
  export const MenuToggleSplitButtonAction: React.FunctionComponent = () => (
5
5
  <React.Fragment>
6
6
  <MenuToggle
7
- isDisabled
8
7
  splitButtonOptions={{
9
8
  variant: 'action',
10
9
  items: [
11
- <MenuToggleAction
12
- id="split-button-action-disabled-example-with-toggle-button"
13
- key="split-action-disabled"
14
- aria-label="Action"
15
- isDisabled
16
- >
10
+ <MenuToggleAction id="split-button-action-example-with-toggle-button" key="split-action" aria-label="Action">
17
11
  Action
18
12
  </MenuToggleAction>
19
13
  ]
@@ -21,10 +15,15 @@ export const MenuToggleSplitButtonAction: React.FunctionComponent = () => (
21
15
  aria-label="Menu toggle with action split button"
22
16
  />{' '}
23
17
  <MenuToggle
18
+ variant="primary"
24
19
  splitButtonOptions={{
25
20
  variant: 'action',
26
21
  items: [
27
- <MenuToggleAction id="split-button-action-example-with-toggle-button" key="split-action" aria-label="Action">
22
+ <MenuToggleAction
23
+ id="split-button-action-primary-example-with-toggle-button"
24
+ key="split-action-primary"
25
+ aria-label="Action"
26
+ >
28
27
  Action
29
28
  </MenuToggleAction>
30
29
  ]
@@ -32,13 +31,13 @@ export const MenuToggleSplitButtonAction: React.FunctionComponent = () => (
32
31
  aria-label="Menu toggle with action split button"
33
32
  />{' '}
34
33
  <MenuToggle
35
- isExpanded
34
+ variant="secondary"
36
35
  splitButtonOptions={{
37
36
  variant: 'action',
38
37
  items: [
39
38
  <MenuToggleAction
40
- id="split-button-action-expanded-example-with-toggle-button"
41
- key="split-action-expanded"
39
+ id="split-button-action-secondary-example-with-toggle-button"
40
+ key="split-action-secondary"
42
41
  aria-label="Action"
43
42
  >
44
43
  Action
package/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckbox.tsx CHANGED
@@ -4,35 +4,22 @@ import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
4
4
  export const MenuToggleSplitButtonCheckbox: React.FunctionComponent = () => (
5
5
  <React.Fragment>
6
6
  <MenuToggle
7
- isDisabled
8
7
  splitButtonOptions={{
9
- items: [
10
- <MenuToggleCheckbox
11
- id="split-button-checkbox-disabled-example"
12
- key="split-checkbox-disabled"
13
- aria-label="Select all"
14
- isDisabled
15
- />
16
- ]
8
+ items: [<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />]
17
9
  }}
18
10
  aria-label="Menu toggle with checkbox split button"
19
11
  />{' '}
20
12
  <MenuToggle
13
+ variant="primary"
21
14
  splitButtonOptions={{
22
15
  items: [<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />]
23
16
  }}
24
17
  aria-label="Menu toggle with checkbox split button"
25
18
  />{' '}
26
19
  <MenuToggle
27
- isExpanded
20
+ variant="secondary"
28
21
  splitButtonOptions={{
29
- items: [
30
- <MenuToggleCheckbox
31
- id="split-button-checkbox-expanded-example"
32
- key="split-checkbox-expanded"
33
- aria-label="Select all"
34
- />
35
- ]
22
+ items: [<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />]
36
23
  }}
37
24
  aria-label="Menu toggle with checkbox split button"
38
25
  />
package/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxWithText.tsx CHANGED
@@ -4,14 +4,12 @@ import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
4
4
  export const MenuToggleSplitButtonCheckboxWithText: React.FunctionComponent = () => (
5
5
  <React.Fragment>
6
6
  <MenuToggle
7
- isDisabled
8
7
  splitButtonOptions={{
9
8
  items: [
10
9
  <MenuToggleCheckbox
11
- id="split-button-checkbox-with-text-disabled-example"
12
- key="split-checkbox-with-text-disabled"
10
+ id="split-button-checkbox-with-text-example"
11
+ key="split-checkbox-with-text"
13
12
  aria-label="Select all"
14
- isDisabled
15
13
  >
16
14
  10 selected
17
15
  </MenuToggleCheckbox>
@@ -20,33 +18,34 @@ export const MenuToggleSplitButtonCheckboxWithText: React.FunctionComponent = ()
20
18
  aria-label="Menu toggle with checkbox split button and text"
21
19
  />{' '}
22
20
  <MenuToggle
21
+ variant="primary"
23
22
  splitButtonOptions={{
24
23
  items: [
25
24
  <MenuToggleCheckbox
26
- id="split-button-checkbox-with-text-example"
27
- key="split-checkbox-with-text"
25
+ id="split-button-checkbox-primary-example"
26
+ key="split-checkbox-primary"
28
27
  aria-label="Select all"
29
28
  >
30
29
  10 selected
31
30
  </MenuToggleCheckbox>
32
31
  ]
33
32
  }}
34
- aria-label="Menu toggle with checkbox split button and text"
33
+ aria-label="Primary menu toggle with checkbox split button"
35
34
  />{' '}
36
35
  <MenuToggle
37
- isExpanded
36
+ variant="secondary"
38
37
  splitButtonOptions={{
39
38
  items: [
40
39
  <MenuToggleCheckbox
41
- id="split-button-checkbox-with-text-expanded-example"
42
- key="split-checkbox-with-text-expanded"
40
+ id="split-button-checkbox-secondary-example"
41
+ key="split-checkbox-secondary"
43
42
  aria-label="Select all"
44
43
  >
45
44
  10 selected
46
45
  </MenuToggleCheckbox>
47
46
  ]
48
47
  }}
49
- aria-label="Menu toggle with checkbox split button and text"
48
+ aria-label="Secondary menu toggle with checkbox split button"
50
49
  />
51
50
  </React.Fragment>
52
51
  );
package/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx ADDED
@@ -0,0 +1,35 @@
1
+ import React from 'react';
2
+ import { MenuToggle, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core';
3
+ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
4
+
5
+ export const MenuToggleTypeahead: React.FunctionComponent = () => {
6
+ const [inputValue, setInputValue] = React.useState<string>('');
7
+
8
+ const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
9
+ setInputValue(value);
10
+ };
11
+
12
+ return (
13
+ <MenuToggle
14
+ variant="typeahead"
15
+ isFullWidth
16
+ >
17
+ <TextInputGroup isPlain>
18
+ <TextInputGroupMain
19
+ value={inputValue}
20
+ onChange={onTextInputChange}
21
+ id="typeahead-select-input"
22
+ autoComplete="off"
23
+ />
24
+
25
+ <TextInputGroupUtilities>
26
+ {!!inputValue && (
27
+ <Button variant="plain" onClick={() => setInputValue('')} aria-label="Clear input value">
28
+ <TimesIcon aria-hidden />
29
+ </Button>
30
+ )}
31
+ </TextInputGroupUtilities>
32
+ </TextInputGroup>
33
+ </MenuToggle>
34
+ );
35
+ }
package/src/components/MenuToggle/examples/MenuToggleSplitButtonActionPrimary.tsx DELETED
@@ -1,58 +0,0 @@
1
- import React from 'react';
2
- import { MenuToggleAction, MenuToggle } from '@patternfly/react-core';
3
-
4
- export const MenuToggleSplitButtonActionPrimary: React.FunctionComponent = () => (
5
- <React.Fragment>
6
- <MenuToggle
7
- isDisabled
8
- variant="primary"
9
- splitButtonOptions={{
10
- variant: 'action',
11
- items: [
12
- <MenuToggleAction
13
- id="split-button-action-primary-disabled-example-with-toggle-button"
14
- key="split-action-primary-disabled"
15
- aria-label="Action"
16
- isDisabled
17
- >
18
- Action
19
- </MenuToggleAction>
20
- ]
21
- }}
22
- aria-label="Menu toggle with action split button"
23
- />{' '}
24
- <MenuToggle
25
- variant="primary"
26
- splitButtonOptions={{
27
- variant: 'action',
28
- items: [
29
- <MenuToggleAction
30
- id="split-button-action-primary-example-with-toggle-button"
31
- key="split-action-primary"
32
- aria-label="Action"
33
- >
34
- Action
35
- </MenuToggleAction>
36
- ]
37
- }}
38
- aria-label="Menu toggle with action split button"
39
- />{' '}
40
- <MenuToggle
41
- isExpanded
42
- variant="primary"
43
- splitButtonOptions={{
44
- variant: 'action',
45
- items: [
46
- <MenuToggleAction
47
- id="split-button-action-primary-expanded-example-with-toggle-button"
48
- key="split-action-primary-expanded"
49
- aria-label="Action"
50
- >
51
- Action
52
- </MenuToggleAction>
53
- ]
54
- }}
55
- aria-label="Menu toggle with action split button"
56
- />
57
- </React.Fragment>
58
- );
package/src/components/MenuToggle/examples/MenuToggleSplitButtonActionSecondary.tsx DELETED
@@ -1,58 +0,0 @@
1
- import React from 'react';
2
- import { MenuToggleAction, MenuToggle } from '@patternfly/react-core';
3
-
4
- export const MenuToggleSplitButtonActionSecondary: React.FunctionComponent = () => (
5
- <React.Fragment>
6
- <MenuToggle
7
- isDisabled
8
- variant="secondary"
9
- splitButtonOptions={{
10
- variant: 'action',
11
- items: [
12
- <MenuToggleAction
13
- id="split-button-action-secondary-disabled-example-with-toggle-button"
14
- key="split-action-secondary-disabled"
15
- aria-label="Action"
16
- isDisabled
17
- >
18
- Action
19
- </MenuToggleAction>
20
- ]
21
- }}
22
- aria-label="Menu toggle with action split button"
23
- />{' '}
24
- <MenuToggle
25
- variant="secondary"
26
- splitButtonOptions={{
27
- variant: 'action',
28
- items: [
29
- <MenuToggleAction
30
- id="split-button-action-secondary-example-with-toggle-button"
31
- key="split-action-secondary"
32
- aria-label="Action"
33
- >
34
- Action
35
- </MenuToggleAction>
36
- ]
37
- }}
38
- aria-label="Menu toggle with action split button"
39
- />{' '}
40
- <MenuToggle
41
- isExpanded
42
- variant="secondary"
43
- splitButtonOptions={{
44
- variant: 'action',
45
- items: [
46
- <MenuToggleAction
47
- id="split-button-action-secondary-expanded-example-with-toggle-button"
48
- key="split-action-secondary-expanded"
49
- aria-label="Action"
50
- >
51
- Action
52
- </MenuToggleAction>
53
- ]
54
- }}
55
- aria-label="Menu toggle with action split button"
56
- />
57
- </React.Fragment>
58
- );
package/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxPrimary.tsx DELETED
@@ -1,55 +0,0 @@
1
- import React from 'react';
2
- import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
3
-
4
- export const MenuToggleSplitButtonCheckboxPrimary: React.FunctionComponent = () => (
5
- <React.Fragment>
6
- <MenuToggle
7
- isDisabled
8
- variant="primary"
9
- splitButtonOptions={{
10
- items: [
11
- <MenuToggleCheckbox
12
- id="split-button-checkbox-primary-disabled-example"
13
- key="split-checkbox-primary-disabled"
14
- aria-label="Select all"
15
- isDisabled
16
- >
17
- 10 selected
18
- </MenuToggleCheckbox>
19
- ]
20
- }}
21
- aria-label="Primary menu toggle with checkbox split button"
22
- />{' '}
23
- <MenuToggle
24
- variant="primary"
25
- splitButtonOptions={{
26
- items: [
27
- <MenuToggleCheckbox
28
- id="split-button-checkbox-primary-example"
29
- key="split-checkbox-primary"
30
- aria-label="Select all"
31
- >
32
- 10 selected
33
- </MenuToggleCheckbox>
34
- ]
35
- }}
36
- aria-label="Primary menu toggle with checkbox split button"
37
- />{' '}
38
- <MenuToggle
39
- isExpanded
40
- variant="primary"
41
- splitButtonOptions={{
42
- items: [
43
- <MenuToggleCheckbox
44
- id="split-button-checkbox-primary-expanded-example"
45
- key="split-checkbox-expanded"
46
- aria-label="Select all"
47
- >
48
- 10 selected
49
- </MenuToggleCheckbox>
50
- ]
51
- }}
52
- aria-label="Primary menu toggle with checkbox split button"
53
- />
54
- </React.Fragment>
55
- );
package/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxSecondary.tsx DELETED
@@ -1,55 +0,0 @@
1
- import React from 'react';
2
- import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
3
-
4
- export const MenuToggleSplitButtonCheckboxSecondary: React.FunctionComponent = () => (
5
- <React.Fragment>
6
- <MenuToggle
7
- isDisabled
8
- variant="secondary"
9
- splitButtonOptions={{
10
- items: [
11
- <MenuToggleCheckbox
12
- id="split-button-checkbox-secondary-disabled-example"
13
- key="split-checkbox-secondary-disabled"
14
- aria-label="Select all"
15
- isDisabled
16
- >
17
- 10 selected
18
- </MenuToggleCheckbox>
19
- ]
20
- }}
21
- aria-label="Secondary menu toggle with checkbox split button"
22
- />{' '}
23
- <MenuToggle
24
- variant="secondary"
25
- splitButtonOptions={{
26
- items: [
27
- <MenuToggleCheckbox
28
- id="split-button-checkbox-secondary-example"
29
- key="split-checkbox-secondary"
30
- aria-label="Select all"
31
- >
32
- 10 selected
33
- </MenuToggleCheckbox>
34
- ]
35
- }}
36
- aria-label="Secondary menu toggle with checkbox split button"
37
- />{' '}
38
- <MenuToggle
39
- isExpanded
40
- variant="secondary"
41
- splitButtonOptions={{
42
- items: [
43
- <MenuToggleCheckbox
44
- id="split-button-checkbox-secondary-expanded-example"
45
- key="split-checkbox-secondary-expanded"
46
- aria-label="Select all"
47
- >
48
- 10 selected
49
- </MenuToggleCheckbox>
50
- ]
51
- }}
52
- aria-label="Secondary menu toggle with checkbox split button"
53
- />
54
- </React.Fragment>
55
- );