Skip to content

Commit fe6871c

Browse files
tlabajtlabaj
authored
fix(Menu toggle): Remove pf-m-action modifier (#11096)
* fix(Menu toggle): Remove pf-m-action modifier * disable integration test that is timing out * disable 2nd integration test that is timing out * fix example
1 parent 5decd6a commit fe6871c

File tree

26 files changed

+229
-289
lines changed

26 files changed

+229
-289
lines changed

‎packages/react-core/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
"tslib": "^2.7.0"
5555
},
5656
"devDependencies": {
57-
"@patternfly/patternfly": "6.0.0-prerelease.13",
57+
"@patternfly/patternfly": "6.0.0-prerelease.15",
5858
"case-anything": "^2.1.13",
5959
"css": "^3.0.0",
6060
"fs-extra": "^11.2.0"

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

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,6 @@ export enum MenuToggleSize {
2121

2222
export type MenuToggleElement = HTMLDivElement | HTMLButtonElement;
2323

24-
export interface SplitButtonOptions {
25-
/** Elements to display before the toggle button. When included, renders the menu toggle as a split button. */
26-
items: React.ReactNode[];
27-
/** Variant of split button toggle */
28-
variant?: 'action' | 'checkbox';
29-
}
30-
3124
export interface MenuToggleProps
3225
extends Omit<
3326
React.DetailedHTMLProps<
@@ -51,8 +44,8 @@ export interface MenuToggleProps
5144
isFullWidth?: boolean;
5245
/** Flag indicating the toggle contains placeholder text */
5346
isPlaceholder?: boolean;
54-
/** Object used to configure a split button menu toggle */
55-
splitButtonOptions?: SplitButtonOptions;
47+
/** Elements to display before the toggle button. When included, renders the menu toggle as a split button. */
48+
splitButtonItems?: React.ReactNode[];
5649
/** Variant styles of the menu toggle */
5750
variant?: 'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead';
5851
/** Status styles of the menu toggle */
@@ -107,7 +100,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
107100
isFullHeight,
108101
isFullWidth,
109102
isPlaceholder,
110-
splitButtonOptions,
103+
splitButtonItems,
111104
variant,
112105
status,
113106
statusIcon,
@@ -204,17 +197,10 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
204197
);
205198
}
206199

207-
if (splitButtonOptions) {
200+
if (splitButtonItems) {
208201
return (
209-
<div
210-
ref={innerRef as React.Ref<HTMLDivElement>}
211-
className={css(
212-
commonStyles,
213-
styles.modifiers.splitButton,
214-
splitButtonOptions?.variant === 'action' && styles.modifiers.action
215-
)}
216-
>
217-
{splitButtonOptions?.items}
202+
<div ref={innerRef as React.Ref<HTMLDivElement>} className={css(commonStyles, styles.modifiers.splitButton)}>
203+
{splitButtonItems}
218204
<button
219205
className={css(styles.menuToggleButton, children && styles.modifiers.text)}
220206
type="button"

‎packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
77
import userEvent from '@testing-library/user-event';
88
import { render, screen } from '@testing-library/react';
99
import styles from '@patternfly/react-styles/css/components/MenuToggle/menu-toggle';
10+
import '@testing-library/jest-dom';
1011

1112
describe('menu toggle', () => {
1213
test('renders successfully', () => {
@@ -82,17 +83,15 @@ describe('menu toggle', () => {
8283
render(
8384
<MenuToggle
8485
onClick={mockClick}
85-
splitButtonOptions={{
86-
items: [
87-
<MenuToggleCheckbox
88-
id="split-button-checkbox-with-text-disabled-example"
89-
key="split-checkbox-with-text-disabled"
90-
aria-label="Select all"
91-
>
92-
10 selected
93-
</MenuToggleCheckbox>
94-
]
95-
}}
86+
splitButtonItems={[
87+
<MenuToggleCheckbox
88+
id="split-button-checkbox-with-text-disabled-example"
89+
key="split-checkbox-with-text-disabled"
90+
aria-label="Select all"
91+
>
92+
10 selected
93+
</MenuToggleCheckbox>
94+
]}
9695
aria-label="Menu toggle with checkbox split button and text"
9796
/>
9897
);

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ id: Menu toggle
33
section: components
44
subsection: menus
55
cssPrefix: pf-v6-c-menu-toggle
6-
propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox', 'SplitButtonOptions']
6+
propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox']
77
---
88

99
import './MenuToggle.css'
@@ -203,7 +203,7 @@ import { MenuToggle } from '@patternfly/react-core';
203203

204204
To add a checkbox (or other action/control) to a menu toggle, use a split button.
205205

206-
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`.
206+
A `<MenuToggle>` can be rendered as a split button by adding a `splitButtonItems` property. Elements to be displayed before the toggle button must be included in the `splitButtonItems`.
207207

208208
The following example shows a split button with a `<MenuToggleCheckbox>`.
209209

@@ -217,23 +217,23 @@ Variant styling can be applied to split button toggles to adjust their appearanc
217217

218218
You can allow users to select a toggle checkbox by clicking either the checkbox or the text label.
219219

220-
To link a split toggle label to the toggle's checkbox, pass both the label and the `<MenuToggleCheckbox>` component to `splitButtonOptions`.
220+
To link a split toggle label to the toggle's checkbox, pass both the label and the `<MenuToggleCheckbox>` component to `splitButtonItems`.
221221

222222
```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
223223

224224
```
225225

226226
### Split toggle with checkbox and toggle text
227227

228-
To link a split toggle label to the toggle button itself, pass the label to the `<MenuToggle>` component, instead of `splitButtonOptions`.
228+
To link a split toggle label to the toggle button itself, pass the label to the `<MenuToggle>` component, instead of `splitButtonItems`.
229229

230230
```ts file='MenuToggleSplitButtonCheckboxWithToggleText.tsx'
231231

232232
```
233233

234234
### Split toggle with action
235235

236-
To add an action to a split button, pass `variant='action'` into `splitButtonOptions` and add a `<MenuToggleAction>` to the `items` property of `splitButtonOptions`.
236+
To add an action to a split button, add a `<MenuToggleAction>` to the `splitButtonItems` property.
237237

238238
Actions may be used with primary and secondary toggle variants.
239239

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

Lines changed: 23 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,46 +4,37 @@ import { MenuToggleAction, MenuToggle } from '@patternfly/react-core';
44
export const MenuToggleSplitButtonAction: React.FunctionComponent = () => (
55
<React.Fragment>
66
<MenuToggle
7-
splitButtonOptions={{
8-
variant: 'action',
9-
items: [
10-
<MenuToggleAction id="split-button-action-example-with-toggle-button" key="split-action" aria-label="Action">
11-
Action
12-
</MenuToggleAction>
13-
]
14-
}}
7+
splitButtonItems={[
8+
<MenuToggleAction id="split-button-action-example-with-toggle-button" key="split-action" aria-label="Action">
9+
Action
10+
</MenuToggleAction>
11+
]}
1512
aria-label="Menu toggle with action split button"
1613
/>{' '}
1714
<MenuToggle
1815
variant="primary"
19-
splitButtonOptions={{
20-
variant: 'action',
21-
items: [
22-
<MenuToggleAction
23-
id="split-button-action-primary-example-with-toggle-button"
24-
key="split-action-primary"
25-
aria-label="Action"
26-
>
27-
Action
28-
</MenuToggleAction>
29-
]
30-
}}
16+
splitButtonItems={[
17+
<MenuToggleAction
18+
id="split-button-action-primary-example-with-toggle-button"
19+
key="split-action-primary"
20+
aria-label="Action"
21+
>
22+
Action
23+
</MenuToggleAction>
24+
]}
3125
aria-label="Menu toggle with action split button"
3226
/>{' '}
3327
<MenuToggle
3428
variant="secondary"
35-
splitButtonOptions={{
36-
variant: 'action',
37-
items: [
38-
<MenuToggleAction
39-
id="split-button-action-secondary-example-with-toggle-button"
40-
key="split-action-secondary"
41-
aria-label="Action"
42-
>
43-
Action
44-
</MenuToggleAction>
45-
]
46-
}}
29+
splitButtonItems={[
30+
<MenuToggleAction
31+
id="split-button-action-secondary-example-with-toggle-button"
32+
key="split-action-secondary"
33+
aria-label="Action"
34+
>
35+
Action
36+
</MenuToggleAction>
37+
]}
4738
aria-label="Menu toggle with action split button"
4839
/>
4940
</React.Fragment>

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,23 @@ import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
44
export const MenuToggleSplitButtonCheckbox: React.FunctionComponent = () => (
55
<React.Fragment>
66
<MenuToggle
7-
splitButtonOptions={{
8-
items: [<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />]
9-
}}
7+
splitButtonItems={[
8+
<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />
9+
]}
1010
aria-label="Menu toggle with checkbox split button"
1111
/>{' '}
1212
<MenuToggle
1313
variant="primary"
14-
splitButtonOptions={{
15-
items: [<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />]
16-
}}
14+
splitButtonItems={[
15+
<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />
16+
]}
1717
aria-label="Menu toggle with checkbox split button"
1818
/>{' '}
1919
<MenuToggle
2020
variant="secondary"
21-
splitButtonOptions={{
22-
items: [<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />]
23-
}}
21+
splitButtonItems={[
22+
<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />
23+
]}
2424
aria-label="Menu toggle with checkbox split button"
2525
/>
2626
</React.Fragment>

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

Lines changed: 27 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4,47 +4,41 @@ import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
44
export const MenuToggleSplitButtonCheckboxWithText: React.FunctionComponent = () => (
55
<React.Fragment>
66
<MenuToggle
7-
splitButtonOptions={{
8-
items: [
9-
<MenuToggleCheckbox
10-
id="split-button-checkbox-with-text-example"
11-
key="split-checkbox-with-text"
12-
aria-label="Select all"
13-
>
14-
10 selected
15-
</MenuToggleCheckbox>
16-
]
17-
}}
7+
splitButtonItems={[
8+
<MenuToggleCheckbox
9+
id="split-button-checkbox-with-text-example"
10+
key="split-checkbox-with-text"
11+
aria-label="Select all"
12+
>
13+
10 selected
14+
</MenuToggleCheckbox>
15+
]}
1816
aria-label="Menu toggle with checkbox split button and text"
1917
/>{' '}
2018
<MenuToggle
2119
variant="primary"
22-
splitButtonOptions={{
23-
items: [
24-
<MenuToggleCheckbox
25-
id="split-button-checkbox-primary-example"
26-
key="split-checkbox-primary"
27-
aria-label="Select all"
28-
>
29-
10 selected
30-
</MenuToggleCheckbox>
31-
]
32-
}}
20+
splitButtonItems={[
21+
<MenuToggleCheckbox
22+
id="split-button-checkbox-primary-example"
23+
key="split-checkbox-primary"
24+
aria-label="Select all"
25+
>
26+
10 selected
27+
</MenuToggleCheckbox>
28+
]}
3329
aria-label="Primary menu toggle with checkbox split button"
3430
/>{' '}
3531
<MenuToggle
3632
variant="secondary"
37-
splitButtonOptions={{
38-
items: [
39-
<MenuToggleCheckbox
40-
id="split-button-checkbox-secondary-example"
41-
key="split-checkbox-secondary"
42-
aria-label="Select all"
43-
>
44-
10 selected
45-
</MenuToggleCheckbox>
46-
]
47-
}}
33+
splitButtonItems={[
34+
<MenuToggleCheckbox
35+
id="split-button-checkbox-secondary-example"
36+
key="split-checkbox-secondary"
37+
aria-label="Select all"
38+
>
39+
10 selected
40+
</MenuToggleCheckbox>
41+
]}
4842
aria-label="Secondary menu toggle with checkbox split button"
4943
/>
5044
</React.Fragment>

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

Lines changed: 21 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,45 +4,39 @@ import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
44
export const MenuToggleSplitButtonCheckboxWithToggleText: React.FunctionComponent = () => (
55
<React.Fragment>
66
<MenuToggle
7-
splitButtonOptions={{
8-
items: [
9-
<MenuToggleCheckbox
10-
id="split-button-checkbox-with-text-example"
11-
key="split-checkbox-with-text"
12-
aria-label="Select all"
13-
/>
14-
]
15-
}}
7+
splitButtonItems={[
8+
<MenuToggleCheckbox
9+
id="split-button-checkbox-with-text-example"
10+
key="split-checkbox-with-text"
11+
aria-label="Select all"
12+
/>
13+
]}
1614
aria-label="Menu toggle with checkbox split button and text"
1715
>
1816
10 selected
1917
</MenuToggle>{' '}
2018
<MenuToggle
2119
variant="primary"
22-
splitButtonOptions={{
23-
items: [
24-
<MenuToggleCheckbox
25-
id="split-button-checkbox-primary-example"
26-
key="split-checkbox-primary"
27-
aria-label="Select all"
28-
/>
29-
]
30-
}}
20+
splitButtonItems={[
21+
<MenuToggleCheckbox
22+
id="split-button-checkbox-primary-example"
23+
key="split-checkbox-primary"
24+
aria-label="Select all"
25+
/>
26+
]}
3127
aria-label="Primary menu toggle with checkbox split button"
3228
>
3329
10 selected
3430
</MenuToggle>{' '}
3531
<MenuToggle
3632
variant="secondary"
37-
splitButtonOptions={{
38-
items: [
39-
<MenuToggleCheckbox
40-
id="split-button-checkbox-secondary-example"
41-
key="split-checkbox-secondary"
42-
aria-label="Select all"
43-
/>
44-
]
45-
}}
33+
splitButtonItems={[
34+
<MenuToggleCheckbox
35+
id="split-button-checkbox-secondary-example"
36+
key="split-checkbox-secondary"
37+
aria-label="Select all"
38+
/>
39+
]}
4640
aria-label="Secondary menu toggle with checkbox split button"
4741
>
4842
10 selected

0 commit comments

Comments
 (0)