From adf25dfc9cb1a73254645e22abbf23cffb0c22c1 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Mon, 3 Jun 2024 10:15:44 -0400 Subject: [PATCH] docs(menu-toggle): Adds docs for split button examples. (#10268) * docs(menu-toggle): Adds docs for split button examples. * Update names of split toggle examples. --- .../MenuToggle/examples/MenuToggle.md | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md index 9cb7440138d..5f1a01eb660 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md @@ -191,9 +191,11 @@ import { MenuToggle } from '@patternfly/react-core'; ``` -### 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 `` 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 `` 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 ``. @@ -203,25 +205,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 `` 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 `` and toggle button text. +To do so, pass `children` to the `` 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 `` to the `items` property of `splitButtonOptions`.