From 3c840c0a195fe04d42aba9f326b69b6ce25cdfaa Mon Sep 17 00:00:00 2001 From: Erin Donehoo Date: Fri, 6 Jan 2023 11:43:21 -0500 Subject: [PATCH 1/8] Adds content to menu toggle component examples. --- .../MenuToggle/examples/MenuToggle.md | 147 +++++++++--------- 1 file changed, 76 insertions(+), 71 deletions(-) diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md index 2347afc8c72..3d5fe7f7978 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md @@ -13,7 +13,9 @@ import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/ava ## Examples -### Collapsed +### Collapsed toggle + +A toggle is collapsed until it is selected by a user. ```ts import React from 'react'; @@ -23,7 +25,9 @@ import { MenuToggle } from '@patternfly/react-core'; ``` -### Expanded +### Expanded toggle + +When a user selects a toggle, it becomes expanded and is styled with a blue underline. To flag expanded toggles, and apply expanded styling, use the `isExpanded` property . ```ts import React from 'react'; @@ -33,7 +37,9 @@ import { MenuToggle } from '@patternfly/react-core'; ``` -### Disabled +### Disabled toggle + +To disable the selection and expansion of a toggle, use the `isDisabled` property. ```ts import React from 'react'; @@ -43,7 +49,9 @@ import { MenuToggle } from '@patternfly/react-core'; ``` -### Count +### With a badge + +To display a count of selected items in a toggle, add a `badge`. ```ts import React from 'react'; @@ -53,29 +61,42 @@ import { MenuToggle, Badge } from '@patternfly/react-core'; ``` -### Primary +### With icons + +Add recognizable icons to a menu toggle using the `icon` property. ```ts import React from 'react'; -import { MenuToggle } from '@patternfly/react-core'; +import { MenuToggle, Avatar } from '@patternfly/react-core'; import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; - Collapsed{' '} - }> - Icon - {' '} - - Expanded - {' '} - - Disabled - + } variant="secondary">Icon{' '} + } variant="secondary" isDisabled>Icon +``` + +### With avatar and text +To add an avatar to a toggle, pass an `` component into the toggle's `icon` property. + +This can be used alongside a text label to display a user's login profile, as shown in the following example. + +```ts +import React from 'react'; +import { MenuToggle, Avatar } from '@patternfly/react-core'; +import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg'; + + + }>Ned Username{' '} + } isExpanded>Ned Username{' '} + } isDisabled>Ned Username + ``` -### Secondary +### Variant styles + +Variant styling can be applied to menu toggles. In the following example, the toggle uses primary styling by passing `variant="primary"` into the `` component. Additional variant options include “default”, “plain”, “plainText”, “secondary”, and “typeahead”. ```ts import React from 'react'; @@ -83,21 +104,25 @@ import { MenuToggle } from '@patternfly/react-core'; import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; - Collapsed{' '} - }> + Collapsed{' '} + }> Icon {' '} - + Expanded {' '} - + Disabled ``` -### Plain +### Plain toggle with icon + +To apply plain styling to a menu toggle, pass in `variant="plain"`. You may pass in an `icon` to serve at the menu toggle. The following example passes in an `` icon. + +To include an aria label, use the `aria-label` property. ```ts import React from 'react'; @@ -116,7 +141,9 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico ``` -### Plain with text +### Plain toggle with text label + +To apply plain styling to a menu toggle with a text label, pass in `variant="plainText"`. Unlike the “plain” variant, “plainText” adds a caret pointing down in the toggle. ```ts import React from 'react'; @@ -136,69 +163,43 @@ import { MenuToggle } from '@patternfly/react-core'; ``` -### Split button (checkbox) - -```ts file='MenuToggleSplitButtonCheckbox.tsx' -``` - -### Split button (checkbox with toggle text) - -```ts file='MenuToggleSplitButtonCheckboxWithText.tsx' -``` +### Split button toggle with checkbox -### Split button (checkbox, primary) - -```ts file='MenuToggleSplitButtonCheckboxPrimary.tsx' -``` +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`. -### Split button (checkbox, secondary) - -```ts file='MenuToggleSplitButtonCheckboxSecondary.tsx' -``` +The following example shows a split button with a . -### Split button (action) - -```ts file='MenuToggleSplitButtonAction.tsx' +```ts file='MenuToggleSplitButtonCheckbox.tsx' ``` -### Split button (action, primary) +### Split button toggle with text label -```ts file='MenuToggleSplitButtonActionPrimary.tsx' -``` +To display text in a menu toggle, add a label to the `items` property of `splitButtonOptions`. -### Split button (action, secondary) - -```ts file='MenuToggleSplitButtonActionSecondary.tsx' +```ts file='MenuToggleSplitButtonCheckboxWithText.tsx' ``` -### With icon/image and text +### Split button toggle with variant styling -```ts -import React from 'react'; -import { MenuToggle, Avatar } from '@patternfly/react-core'; -import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; +Variant styling can be applied to split button toggles to adjust their appearance for different scenarios. The following example applies “primary” styling to the toggles shown. - - } variant="secondary">Icon{' '} - } variant="secondary" isDisabled>Icon - +```ts file='MenuToggleSplitButtonCheckboxPrimary.tsx' ``` -### With avatar and text +### Split button toggle with action -```ts -import React from 'react'; -import { MenuToggle, Avatar } from '@patternfly/react-core'; -import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg'; +To add an action to a split button, pass `variant='action'` into `splitButtonOptions` and add a `` to the `items` property of `splitButtonOptions`. - - }>Ned Username{' '} - } isExpanded>Ned Username{' '} - } isDisabled>Ned Username - +Actions may be used with primary and secondary toggle variants. + +```ts file='MenuToggleSplitButtonAction.tsx' ``` -### Full height +### Full height toggle + +A full height toggle fills the height of its parent. To flag a full height toggle, use the `isFullHeight` property. + +In the following example, the toggle fills the size of the "80px" `
` element that it is within. ```ts import React from 'react'; @@ -211,7 +212,11 @@ import { MenuToggle } from '@patternfly/react-core';
``` -### Full width +### Full width toggle + +A full width toggle fills the width of its parent. To flag a full width toggle, use the `isFullWidth` property. + +In the following example, the toggle fills the width of its parent as the window size changes. ```ts import React from 'react'; @@ -224,4 +229,4 @@ const fullWidth: React.FunctionComponent = () => { ); } -``` +``` \ No newline at end of file From c1244abf1f416760e4c5768d40cac9bce675c0ce Mon Sep 17 00:00:00 2001 From: Erin Donehoo Date: Fri, 6 Jan 2023 11:53:49 -0500 Subject: [PATCH 2/8] typo fix. --- .../react-core/src/components/MenuToggle/examples/MenuToggle.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md index 3d5fe7f7978..f18a54e5964 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md @@ -165,7 +165,7 @@ 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 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`. The following example shows a split button with a . From 2a7847ad3ad2cd1b3bef851efa1ec50fd92d30c7 Mon Sep 17 00:00:00 2001 From: Erin Donehoo Date: Fri, 13 Jan 2023 10:40:30 -0500 Subject: [PATCH 3/8] Content edits. --- .../MenuToggle/examples/MenuToggle.md | 20 +++++++++---------- 1 file changed, 10 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 f18a54e5964..ff7242f9485 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md @@ -51,7 +51,7 @@ import { MenuToggle } from '@patternfly/react-core'; ### With a badge -To display a count of selected items in a toggle, add a `badge`. +To display a count of selected items in a toggle, use the `badge` property. ```ts import React from 'react'; @@ -63,11 +63,11 @@ import { MenuToggle, Badge } from '@patternfly/react-core'; ### With icons -Add recognizable icons to a menu toggle using the `icon` property. +To add a recognizable icon to a menu toggle, use the `icon` property. The following example adds a `CogIcon` to the toggle. ```ts import React from 'react'; -import { MenuToggle, Avatar } from '@patternfly/react-core'; +import { MenuToggle } from '@patternfly/react-core'; import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; @@ -78,9 +78,9 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; ### With avatar and text -To add an avatar to a toggle, pass an `` component into the toggle's `icon` property. +You can also pass images into the `icon` property. The following example passes in an `` component with an `imgAvatar`. -This can be used alongside a text label to display a user's login profile, as shown in the following example. +This can be used alongside a text label that provides more context for the image. ```ts import React from 'react'; @@ -120,9 +120,9 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; ### Plain toggle with icon -To apply plain styling to a menu toggle, pass in `variant="plain"`. You may pass in an `icon` to serve at the menu toggle. The following example passes in an `` icon. +To apply plain styling to a menu toggle with an icon, pass in `variant="plain"`. This will remove the default bottom border and caret. You may pass in an `icon` to serve as the menu toggle. The following example passes in an `EllipsisVIcon`. -To include an aria label, use the `aria-label` property. +If the toggle does not have any visible text content, use the `aria-label` property to provide an accessible name. ```ts import React from 'react'; @@ -173,15 +173,15 @@ The following example shows a split button with a . ``` ### Split button toggle with text label - -To display text in a menu toggle, add a label to the `items` property of `splitButtonOptions`. + +To display text in a split button menu toggle, add a label to the `items` property of `splitButtonOptions`. ```ts file='MenuToggleSplitButtonCheckboxWithText.tsx' ``` ### Split button toggle with variant styling -Variant styling can be applied to split button toggles to adjust their appearance for different scenarios. The following example applies “primary” styling to the toggles shown. +Variant styling can be applied to split button toggles to adjust their appearance for different scenarios. Both "primary" and "secondary" variants can be used with split button toggles. The following example uses “primary” styling. ```ts file='MenuToggleSplitButtonCheckboxPrimary.tsx' ``` From 5923291a273ef07a78144f24efa51d71222cca4c Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Thu, 16 Feb 2023 10:37:30 -0500 Subject: [PATCH 4/8] fix build --- .../src/components/MenuToggle/examples/MenuToggle.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md index ff7242f9485..06aa705787b 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md @@ -167,7 +167,7 @@ import { MenuToggle } from '@patternfly/react-core'; 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`. -The following example shows a split button with a . +The following example shows a split button with a ``. ```ts file='MenuToggleSplitButtonCheckbox.tsx' ``` @@ -229,4 +229,4 @@ const fullWidth: React.FunctionComponent = () => { ); } -``` \ No newline at end of file +``` From 8abffd5b475c9c95c97a85bdbf2cc5407bc3018a Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Mon, 20 Feb 2023 15:04:43 -0500 Subject: [PATCH 5/8] update/rearrange split button with text + actions examples --- .../MenuToggle/examples/MenuToggle.md | 9 +-- .../examples/MenuToggleSplitButtonAction.tsx | 21 ++++--- .../MenuToggleSplitButtonActionPrimary.tsx | 58 ------------------- .../MenuToggleSplitButtonActionSecondary.tsx | 58 ------------------- .../MenuToggleSplitButtonCheckboxPrimary.tsx | 55 ------------------ ...MenuToggleSplitButtonCheckboxSecondary.tsx | 55 ------------------ .../MenuToggleSplitButtonCheckboxWithText.tsx | 21 ++++--- 7 files changed, 22 insertions(+), 255 deletions(-) delete mode 100644 packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonActionPrimary.tsx delete mode 100644 packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonActionSecondary.tsx delete mode 100644 packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxPrimary.tsx delete mode 100644 packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxSecondary.tsx diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md index 06aa705787b..7065c49d807 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md @@ -176,14 +176,9 @@ The following example shows a split button with a ``. To display text in a split button menu toggle, add a label to the `items` property of `splitButtonOptions`. -```ts file='MenuToggleSplitButtonCheckboxWithText.tsx' -``` - -### Split button toggle with variant styling +Variant styling can be applied to split button toggles to adjust their appearance for different scenarios. Both "primary" and "secondary" variants can be used with split button toggles. -Variant styling can be applied to split button toggles to adjust their appearance for different scenarios. Both "primary" and "secondary" variants can be used with split button toggles. The following example uses “primary” styling. - -```ts file='MenuToggleSplitButtonCheckboxPrimary.tsx' +```ts file='MenuToggleSplitButtonCheckboxWithText.tsx' ``` ### Split button toggle with action diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonAction.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonAction.tsx index 76d14978781..284344b6e88 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonAction.tsx +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonAction.tsx @@ -4,16 +4,10 @@ import { MenuToggleAction, MenuToggle } from '@patternfly/react-core'; export const MenuToggleSplitButtonAction: React.FunctionComponent = () => ( + Action ] @@ -21,10 +15,15 @@ export const MenuToggleSplitButtonAction: React.FunctionComponent = () => ( aria-label="Menu toggle with action split button" />{' '} + Action ] @@ -32,13 +31,13 @@ export const MenuToggleSplitButtonAction: React.FunctionComponent = () => ( aria-label="Menu toggle with action split button" />{' '} Action diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonActionPrimary.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonActionPrimary.tsx deleted file mode 100644 index 51b43464380..00000000000 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonActionPrimary.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react'; -import { MenuToggleAction, MenuToggle } from '@patternfly/react-core'; - -export const MenuToggleSplitButtonActionPrimary: React.FunctionComponent = () => ( - - - Action - - ] - }} - aria-label="Menu toggle with action split button" - />{' '} - - Action - - ] - }} - aria-label="Menu toggle with action split button" - />{' '} - - Action - - ] - }} - aria-label="Menu toggle with action split button" - /> - -); diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonActionSecondary.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonActionSecondary.tsx deleted file mode 100644 index 96f7841503b..00000000000 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonActionSecondary.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react'; -import { MenuToggleAction, MenuToggle } from '@patternfly/react-core'; - -export const MenuToggleSplitButtonActionSecondary: React.FunctionComponent = () => ( - - - Action - - ] - }} - aria-label="Menu toggle with action split button" - />{' '} - - Action - - ] - }} - aria-label="Menu toggle with action split button" - />{' '} - - Action - - ] - }} - aria-label="Menu toggle with action split button" - /> - -); diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxPrimary.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxPrimary.tsx deleted file mode 100644 index 4a2a4667c38..00000000000 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxPrimary.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; -import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core'; - -export const MenuToggleSplitButtonCheckboxPrimary: React.FunctionComponent = () => ( - - - 10 selected - - ] - }} - aria-label="Primary menu toggle with checkbox split button" - />{' '} - - 10 selected - - ] - }} - aria-label="Primary menu toggle with checkbox split button" - />{' '} - - 10 selected - - ] - }} - aria-label="Primary menu toggle with checkbox split button" - /> - -); diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxSecondary.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxSecondary.tsx deleted file mode 100644 index 51602c494a6..00000000000 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxSecondary.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; -import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core'; - -export const MenuToggleSplitButtonCheckboxSecondary: React.FunctionComponent = () => ( - - - 10 selected - - ] - }} - aria-label="Secondary menu toggle with checkbox split button" - />{' '} - - 10 selected - - ] - }} - aria-label="Secondary menu toggle with checkbox split button" - />{' '} - - 10 selected - - ] - }} - aria-label="Secondary menu toggle with checkbox split button" - /> - -); diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxWithText.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxWithText.tsx index 788bc8bc41a..a6f24fb2ca7 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxWithText.tsx +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxWithText.tsx @@ -4,14 +4,12 @@ import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core'; export const MenuToggleSplitButtonCheckboxWithText: React.FunctionComponent = () => ( 10 selected @@ -20,33 +18,34 @@ export const MenuToggleSplitButtonCheckboxWithText: React.FunctionComponent = () aria-label="Menu toggle with checkbox split button and text" />{' '} 10 selected ] }} - aria-label="Menu toggle with checkbox split button and text" + aria-label="Primary menu toggle with checkbox split button" />{' '} 10 selected ] }} - aria-label="Menu toggle with checkbox split button and text" + aria-label="Secondary menu toggle with checkbox split button" /> ); From 62235eee956aa80fc2bbfee32b624f1b8508bf7e Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Tue, 28 Feb 2023 11:00:14 -0500 Subject: [PATCH 6/8] add typeahead example and clean up split button examples --- .../MenuToggle/examples/MenuToggle.md | 27 +++++---- .../examples/MenuToggleMultipleTypeahead.tsx | 58 +++++++++++++++++++ .../MenuToggleSplitButtonCheckbox.tsx | 21 ++----- .../examples/MenuToggleTypeahead.tsx | 35 +++++++++++ 4 files changed, 114 insertions(+), 27 deletions(-) create mode 100644 packages/react-core/src/components/MenuToggle/examples/MenuToggleMultipleTypeahead.tsx create mode 100644 packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md index 7065c49d807..cdc5e0b5c97 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md @@ -10,6 +10,7 @@ import './MenuToggle.css' import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg'; +import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; ## Examples @@ -71,6 +72,7 @@ import { MenuToggle } from '@patternfly/react-core'; import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; + } variant="primary">Icon{' '} } variant="secondary">Icon{' '} } variant="secondary" isDisabled>Icon @@ -105,9 +107,6 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; Collapsed{' '} - }> - Icon - {' '} Expanded {' '} @@ -132,10 +131,10 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico - + {' '} - + {' '} @@ -152,11 +151,10 @@ import { MenuToggle } from '@patternfly/react-core'; Disabled - -   + {' '} Custom text - + {' '} Custom text (expanded) @@ -169,6 +167,8 @@ To add an action button or other control to a menu toggle, use a split button. A The following example shows a split button with a ``. +Variant styling can be applied to split button toggles to adjust their appearance for different scenarios. Both "primary" and "secondary" variants can be used with split button toggles. + ```ts file='MenuToggleSplitButtonCheckbox.tsx' ``` @@ -176,8 +176,6 @@ The following example shows a split button with a ``. To display text in a split button menu toggle, add a label to the `items` property of `splitButtonOptions`. -Variant styling can be applied to split button toggles to adjust their appearance for different scenarios. Both "primary" and "secondary" variants can be used with split button toggles. - ```ts file='MenuToggleSplitButtonCheckboxWithText.tsx' ``` @@ -225,3 +223,12 @@ const fullWidth: React.FunctionComponent = () => { ); } ``` + +### Typeahead toggle + +To create a typeahead toggle, pass in `variant="typeahead"` to the ``. Then, pass a `` component as a child of the ``. + +To create a multiple typeahead toggle, pass a `` component implemented like the [text input group's filter example](/components/text-input-group#filters) as a child of ``. + +```ts file='MenuToggleTypeahead.tsx' +``` diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleMultipleTypeahead.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleMultipleTypeahead.tsx new file mode 100644 index 00000000000..7097cf17dc7 --- /dev/null +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleMultipleTypeahead.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { MenuToggle, TextInputGroup, ChipGroup, Chip, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core'; +import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; + +const typeahead: React.FunctionComponent = () => { + const [inputValue, setInputValue] = React.useState(''); + const [chips, setChips] = React.useState(['first', 'second', 'third']) + + const onTextInputChange = (_event: React.FormEvent, value: string) => { + setInputValue(value); + }; + + return ( + + + + + {chips.map((selection, index) => ( + { + ev.stopPropagation(); + const copyChips = [...chips]; + copyChips.splice(index, 1); + setChips(copyChips); + }} + > + {selection} + + ))} + + + + {chips.length > 0 && ( + + )} + + + + ); +} diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckbox.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckbox.tsx index caf76b347b3..6a7c04982f2 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckbox.tsx +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckbox.tsx @@ -4,35 +4,22 @@ import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core'; export const MenuToggleSplitButtonCheckbox: React.FunctionComponent = () => ( - ] + items: [] }} aria-label="Menu toggle with checkbox split button" />{' '} ] }} aria-label="Menu toggle with checkbox split button" />{' '} - ] + items: [] }} aria-label="Menu toggle with checkbox split button" /> diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx new file mode 100644 index 00000000000..03311d24f4f --- /dev/null +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { MenuToggle, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core'; +import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; + +const typeahead: React.FunctionComponent = () => { + const [inputValue, setInputValue] = React.useState(''); + + const onTextInputChange = (_event: React.FormEvent, value: string) => { + setInputValue(value); + }; + + return ( + + + + + + {!!inputValue && ( + + )} + + + + ); +} From f1953d862af280f3dc33bac65e2b97fb0d3539a3 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Tue, 28 Feb 2023 13:43:06 -0500 Subject: [PATCH 7/8] fix linting --- .../examples/MenuToggleMultipleTypeahead.tsx | 58 ------------------- .../examples/MenuToggleTypeahead.tsx | 2 +- 2 files changed, 1 insertion(+), 59 deletions(-) delete mode 100644 packages/react-core/src/components/MenuToggle/examples/MenuToggleMultipleTypeahead.tsx diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleMultipleTypeahead.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleMultipleTypeahead.tsx deleted file mode 100644 index 7097cf17dc7..00000000000 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleMultipleTypeahead.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react'; -import { MenuToggle, TextInputGroup, ChipGroup, Chip, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core'; -import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; - -const typeahead: React.FunctionComponent = () => { - const [inputValue, setInputValue] = React.useState(''); - const [chips, setChips] = React.useState(['first', 'second', 'third']) - - const onTextInputChange = (_event: React.FormEvent, value: string) => { - setInputValue(value); - }; - - return ( - - - - - {chips.map((selection, index) => ( - { - ev.stopPropagation(); - const copyChips = [...chips]; - copyChips.splice(index, 1); - setChips(copyChips); - }} - > - {selection} - - ))} - - - - {chips.length > 0 && ( - - )} - - - - ); -} diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx index 03311d24f4f..882b34b31f1 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { MenuToggle, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core'; import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; -const typeahead: React.FunctionComponent = () => { +export const Typeahead: React.FunctionComponent = () => { const [inputValue, setInputValue] = React.useState(''); const onTextInputChange = (_event: React.FormEvent, value: string) => { From b46a3436bc57cb0867bab63009b6b141dac16ae4 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Mon, 13 Mar 2023 14:20:06 -0400 Subject: [PATCH 8/8] update example name --- .../src/components/MenuToggle/examples/MenuToggleTypeahead.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx index 882b34b31f1..b2c484e5e32 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { MenuToggle, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core'; import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; -export const Typeahead: React.FunctionComponent = () => { +export const MenuToggleTypeahead: React.FunctionComponent = () => { const [inputValue, setInputValue] = React.useState(''); const onTextInputChange = (_event: React.FormEvent, value: string) => {