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

docs(menu-toggle): Adds docs for split button examples. #10268

Merged
merged 2 commits into from
Jun 3, 2024
Merged

docs(menu-toggle): Adds docs for split button examples. #10268

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2c31865
docs(menu-toggle): Adds docs for split button examples.
edonehoo Apr 10, 2024
a172559
Update names of split toggle examples.
edonehoo Apr 18, 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
22 changes: 12 additions & 10 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 @@ -193,9 +193,11 @@ import { MenuToggle } from '@patternfly/react-core';
</React.Fragment>
```

### Split button toggle with checkbox
### Split toggle with checkbox

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`.
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`.

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

Expand All @@ -205,25 +207,25 @@ Variant styling can be applied to split button toggles to adjust their appearanc

```

### Split button toggle with checkbox label
### Split toggle with labeled checkbox

To display text in a split button menu toggle, add a label to the `items` property of `splitButtonOptions`.
To add a text label to a split button toggle, pass `children` to the `<MenuToggle>` component.

```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
```ts file='MenuToggleSplitButtonCheckboxWithToggleText.tsx'

```

### Split button toggle with checkbox and toggle button text
### Split toggle with checkbox and toggle text label

For split button toggles that should still contain text which will trigger the toggle's `onClick`, pass `children` to the `MenuToggle`.
You can allow users to select a toggle checkbox by clicking either the checkbox or the text label.

The following example shows a split button with a `<MenuToggleCheckbox>` and toggle button text.
To do so, pass `children` to the `<MenuToggleCheckbox>` component. When the menu toggle text is clicked, the checkbox's `onChange` callback will be triggered.

```ts file='MenuToggleSplitButtonCheckboxWithToggleText.tsx'
```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'

```

### Split button toggle with action
### 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`.

Expand Down
Loading