Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(Menu toggle): Remove pf-m-action modifier #11096

Merged
merged 4 commits into from
Oct 2, 2024
+229 −289
Merged

fix(Menu toggle): Remove pf-m-action modifier #11096

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
02692e3
fix(Menu toggle): Remove pf-m-action modifier
tlabaj Oct 1, 2024
c4f789e
disable integration test that is timing out
tlabaj Oct 1, 2024
fd25403
disable 2nd integration test that is timing out
tlabaj Oct 1, 2024
030da4a
fix example
tlabaj Oct 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/react-core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
"tslib": "^2.7.0"
},
"devDependencies": {
"@patternfly/patternfly": "6.0.0-prerelease.13",
"@patternfly/patternfly": "6.0.0-prerelease.15",
"case-anything": "^2.1.13",
"css": "^3.0.0",
"fs-extra": "^11.2.0"
Expand Down
26 changes: 6 additions & 20 deletions packages/react-core/src/components/MenuToggle/MenuToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,6 @@ export enum MenuToggleSize {

export type MenuToggleElement = HTMLDivElement | HTMLButtonElement;

export interface SplitButtonOptions {
/** Elements to display before the toggle button. When included, renders the menu toggle as a split button. */
items: React.ReactNode[];
/** Variant of split button toggle */
variant?: 'action' | 'checkbox';
}

export interface MenuToggleProps
extends Omit<
React.DetailedHTMLProps<
Expand All @@ -51,8 +44,8 @@ export interface MenuToggleProps
isFullWidth?: boolean;
/** Flag indicating the toggle contains placeholder text */
isPlaceholder?: boolean;
/** Object used to configure a split button menu toggle */
splitButtonOptions?: SplitButtonOptions;
/** Elements to display before the toggle button. When included, renders the menu toggle as a split button. */
splitButtonItems?: React.ReactNode[];
/** Variant styles of the menu toggle */
variant?: 'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead';
/** Status styles of the menu toggle */
Expand Down Expand Up @@ -107,7 +100,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
isFullHeight,
isFullWidth,
isPlaceholder,
splitButtonOptions,
splitButtonItems,
variant,
status,
statusIcon,
Expand Down Expand Up @@ -204,17 +197,10 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
);
}

if (splitButtonOptions) {
if (splitButtonItems) {
return (
<div
ref={innerRef as React.Ref<HTMLDivElement>}
className={css(
commonStyles,
styles.modifiers.splitButton,
splitButtonOptions?.variant === 'action' && styles.modifiers.action
)}
>
{splitButtonOptions?.items}
<div ref={innerRef as React.Ref<HTMLDivElement>} className={css(commonStyles, styles.modifiers.splitButton)}>
{splitButtonItems}
<button
className={css(styles.menuToggleButton, children && styles.modifiers.text)}
type="button"
Expand Down
21 changes: 10 additions & 11 deletions packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
import userEvent from '@testing-library/user-event';
import { render, screen } from '@testing-library/react';
import styles from '@patternfly/react-styles/css/components/MenuToggle/menu-toggle';
import '@testing-library/jest-dom';

describe('menu toggle', () => {
test('renders successfully', () => {
Expand Down Expand Up @@ -82,17 +83,15 @@ describe('menu toggle', () => {
render(
<MenuToggle
onClick={mockClick}
splitButtonOptions={{
items: [
<MenuToggleCheckbox
id="split-button-checkbox-with-text-disabled-example"
key="split-checkbox-with-text-disabled"
aria-label="Select all"
>
10 selected
</MenuToggleCheckbox>
]
}}
splitButtonItems={[
<MenuToggleCheckbox
id="split-button-checkbox-with-text-disabled-example"
key="split-checkbox-with-text-disabled"
aria-label="Select all"
>
10 selected
</MenuToggleCheckbox>
]}
aria-label="Menu toggle with checkbox split button and text"
/>
);
Expand Down
10 changes: 5 additions & 5 deletions packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ id: Menu toggle
section: components
subsection: menus
cssPrefix: pf-v6-c-menu-toggle
propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox', 'SplitButtonOptions']
propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox']
---

import './MenuToggle.css'
Expand Down Expand Up @@ -203,7 +203,7 @@ import { MenuToggle } from '@patternfly/react-core';

To add a checkbox (or other action/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`.
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`.

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

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

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

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

```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'

```

### Split toggle with checkbox and toggle text

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

```ts file='MenuToggleSplitButtonCheckboxWithToggleText.tsx'

```

### Split toggle with action

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

Actions may be used with primary and secondary toggle variants.

Expand Down
55 changes: 23 additions & 32 deletions packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonAction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,46 +4,37 @@ import { MenuToggleAction, MenuToggle } from '@patternfly/react-core';
export const MenuToggleSplitButtonAction: React.FunctionComponent = () => (
<React.Fragment>
<MenuToggle
splitButtonOptions={{
variant: 'action',
items: [
<MenuToggleAction id="split-button-action-example-with-toggle-button" key="split-action" aria-label="Action">
Action
</MenuToggleAction>
]
}}
splitButtonItems={[
<MenuToggleAction id="split-button-action-example-with-toggle-button" key="split-action" aria-label="Action">
Action
</MenuToggleAction>
]}
aria-label="Menu toggle with action split button"
/>{' '}
<MenuToggle
variant="primary"
splitButtonOptions={{
variant: 'action',
items: [
<MenuToggleAction
id="split-button-action-primary-example-with-toggle-button"
key="split-action-primary"
aria-label="Action"
>
Action
</MenuToggleAction>
]
}}
splitButtonItems={[
<MenuToggleAction
id="split-button-action-primary-example-with-toggle-button"
key="split-action-primary"
aria-label="Action"
>
Action
</MenuToggleAction>
]}
aria-label="Menu toggle with action split button"
/>{' '}
<MenuToggle
variant="secondary"
splitButtonOptions={{
variant: 'action',
items: [
<MenuToggleAction
id="split-button-action-secondary-example-with-toggle-button"
key="split-action-secondary"
aria-label="Action"
>
Action
</MenuToggleAction>
]
}}
SplitButtonItems={[
kmcfaul marked this conversation as resolved.
Show resolved Hide resolved
<MenuToggleAction
id="split-button-action-secondary-example-with-toggle-button"
key="split-action-secondary"
aria-label="Action"
>
Action
</MenuToggleAction>
]}
aria-label="Menu toggle with action split button"
/>
</React.Fragment>
Expand Down
18 changes: 9 additions & 9 deletions packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,23 @@ import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
export const MenuToggleSplitButtonCheckbox: React.FunctionComponent = () => (
<React.Fragment>
<MenuToggle
splitButtonOptions={{
items: [<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />]
}}
splitButtonItems={[
<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />
]}
aria-label="Menu toggle with checkbox split button"
/>{' '}
<MenuToggle
variant="primary"
splitButtonOptions={{
items: [<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />]
}}
splitButtonItems={[
<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />
]}
aria-label="Menu toggle with checkbox split button"
/>{' '}
<MenuToggle
variant="secondary"
splitButtonOptions={{
items: [<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />]
}}
splitButtonItems={[
<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />
]}
aria-label="Menu toggle with checkbox split button"
/>
</React.Fragment>
Expand Down
60 changes: 27 additions & 33 deletions ...s/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxWithText.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,47 +4,41 @@ import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
export const MenuToggleSplitButtonCheckboxWithText: React.FunctionComponent = () => (
<React.Fragment>
<MenuToggle
splitButtonOptions={{
items: [
<MenuToggleCheckbox
id="split-button-checkbox-with-text-example"
key="split-checkbox-with-text"
aria-label="Select all"
>
10 selected
</MenuToggleCheckbox>
]
}}
splitButtonItems={[
<MenuToggleCheckbox
id="split-button-checkbox-with-text-example"
key="split-checkbox-with-text"
aria-label="Select all"
>
10 selected
</MenuToggleCheckbox>
]}
aria-label="Menu toggle with checkbox split button and text"
/>{' '}
<MenuToggle
variant="primary"
splitButtonOptions={{
items: [
<MenuToggleCheckbox
id="split-button-checkbox-primary-example"
key="split-checkbox-primary"
aria-label="Select all"
>
10 selected
</MenuToggleCheckbox>
]
}}
splitButtonItems={[
<MenuToggleCheckbox
id="split-button-checkbox-primary-example"
key="split-checkbox-primary"
aria-label="Select all"
>
10 selected
</MenuToggleCheckbox>
]}
aria-label="Primary menu toggle with checkbox split button"
/>{' '}
<MenuToggle
variant="secondary"
splitButtonOptions={{
items: [
<MenuToggleCheckbox
id="split-button-checkbox-secondary-example"
key="split-checkbox-secondary"
aria-label="Select all"
>
10 selected
</MenuToggleCheckbox>
]
}}
splitButtonItems={[
<MenuToggleCheckbox
id="split-button-checkbox-secondary-example"
key="split-checkbox-secondary"
aria-label="Select all"
>
10 selected
</MenuToggleCheckbox>
]}
aria-label="Secondary menu toggle with checkbox split button"
/>
</React.Fragment>
Expand Down
48 changes: 21 additions & 27 deletions ...t-core/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxWithToggleText.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,45 +4,39 @@ import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
export const MenuToggleSplitButtonCheckboxWithToggleText: React.FunctionComponent = () => (
<React.Fragment>
<MenuToggle
splitButtonOptions={{
items: [
<MenuToggleCheckbox
id="split-button-checkbox-with-text-example"
key="split-checkbox-with-text"
aria-label="Select all"
/>
]
}}
splitButtonItems={[
<MenuToggleCheckbox
id="split-button-checkbox-with-text-example"
key="split-checkbox-with-text"
aria-label="Select all"
/>
]}
aria-label="Menu toggle with checkbox split button and text"
>
10 selected
</MenuToggle>{' '}
<MenuToggle
variant="primary"
splitButtonOptions={{
items: [
<MenuToggleCheckbox
id="split-button-checkbox-primary-example"
key="split-checkbox-primary"
aria-label="Select all"
/>
]
}}
splitButtonItems={[
<MenuToggleCheckbox
id="split-button-checkbox-primary-example"
key="split-checkbox-primary"
aria-label="Select all"
/>
]}
aria-label="Primary menu toggle with checkbox split button"
>
10 selected
</MenuToggle>{' '}
<MenuToggle
variant="secondary"
splitButtonOptions={{
items: [
<MenuToggleCheckbox
id="split-button-checkbox-secondary-example"
key="split-checkbox-secondary"
aria-label="Select all"
/>
]
}}
splitButtonItems={[
<MenuToggleCheckbox
id="split-button-checkbox-secondary-example"
key="split-checkbox-secondary"
aria-label="Select all"
/>
]}
aria-label="Secondary menu toggle with checkbox split button"
>
10 selected
Expand Down
Loading
Loading