From 2c31865d2a11999e1688dfb871f52785210d4b1b Mon Sep 17 00:00:00 2001 From: Erin Donehoo Date: Wed, 10 Apr 2024 13:53:05 -0400 Subject: [PATCH 1/2] docs(menu-toggle): Adds docs for split button examples. --- .../MenuToggle/examples/MenuToggle.md | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md index fc4a5d3f741..5d9e4d1f54b 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md @@ -195,7 +195,9 @@ import { MenuToggle } from '@patternfly/react-core'; ### Split button 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 ``. @@ -205,21 +207,21 @@ Variant styling can be applied to split button toggles to adjust their appearanc ``` -### Split button toggle with checkbox label +### Split button toggle with checkbox and text label -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 button toggle with checkbox and clickable 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' ``` From a1725598d1a8712b494e5bf8bb9d428a8d8b6fb6 Mon Sep 17 00:00:00 2001 From: Erin Donehoo Date: Thu, 18 Apr 2024 14:36:48 -0400 Subject: [PATCH 2/2] Update names of split toggle examples. --- .../src/components/MenuToggle/examples/MenuToggle.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md index 5d9e4d1f54b..d1d9cd96dd1 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md @@ -193,7 +193,7 @@ import { MenuToggle } from '@patternfly/react-core'; ``` -### Split button toggle with checkbox +### Split toggle with checkbox To add a checkbox (or other action/control) to a menu toggle, use a split button. @@ -207,7 +207,7 @@ Variant styling can be applied to split button toggles to adjust their appearanc ``` -### Split button toggle with checkbox and text label +### Split toggle with labeled checkbox To add a text label to a split button toggle, pass `children` to the `` component. @@ -215,7 +215,7 @@ To add a text label to a split button toggle, pass `children` to the `` component. When the menu ``` -### 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`.