diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md index 2347afc8c72..cdc5e0b5c97 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md @@ -10,10 +10,13 @@ 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 -### Collapsed +### Collapsed toggle + +A toggle is collapsed until it is selected by a user. ```ts import React from 'react'; @@ -23,7 +26,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 +38,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 +50,9 @@ import { MenuToggle } from '@patternfly/react-core'; ``` -### Count +### With a badge + +To display a count of selected items in a toggle, use the `badge` property. ```ts import React from 'react'; @@ -53,7 +62,9 @@ import { MenuToggle, Badge } from '@patternfly/react-core'; ``` -### Primary +### With icons + +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'; @@ -61,21 +72,33 @@ import { MenuToggle } from '@patternfly/react-core'; import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; - Collapsed{' '} - }> - Icon - {' '} - - Expanded - {' '} - - Disabled - + } variant="primary">Icon{' '} + } variant="secondary">Icon{' '} + } variant="secondary" isDisabled>Icon +``` + +### With avatar and text +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 that provides more context for the image. + +```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 +106,22 @@ import { MenuToggle } from '@patternfly/react-core'; import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; - Collapsed{' '} - }> - Icon - {' '} - + Collapsed{' '} + Expanded {' '} - + Disabled ``` -### Plain +### Plain toggle with 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`. + +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'; @@ -107,16 +131,18 @@ 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'; @@ -125,80 +151,48 @@ import { MenuToggle } from '@patternfly/react-core'; Disabled - -   + {' '} Custom text - + {' '} Custom text (expanded) ``` -### Split button (checkbox) - -```ts file='MenuToggleSplitButtonCheckbox.tsx' -``` +### Split button toggle with checkbox -### Split button (checkbox with toggle text) - -```ts file='MenuToggleSplitButtonCheckboxWithText.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, primary) - -```ts file='MenuToggleSplitButtonCheckboxPrimary.tsx' -``` +The following example shows a split button with a ``. -### Split button (checkbox, secondary) - -```ts file='MenuToggleSplitButtonCheckboxSecondary.tsx' -``` +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. -### Split button (action) - -```ts file='MenuToggleSplitButtonAction.tsx' +```ts file='MenuToggleSplitButtonCheckbox.tsx' ``` -### Split button (action, primary) - -```ts file='MenuToggleSplitButtonActionPrimary.tsx' -``` +### Split button toggle with text label -### Split button (action, secondary) - -```ts file='MenuToggleSplitButtonActionSecondary.tsx' +To display text in a split button menu toggle, add a label to the `items` property of `splitButtonOptions`. + +```ts file='MenuToggleSplitButtonCheckboxWithText.tsx' ``` -### With icon/image and text +### Split button toggle with action -```ts -import React from 'react'; -import { MenuToggle, Avatar } from '@patternfly/react-core'; -import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; +To add an action to a split button, pass `variant='action'` into `splitButtonOptions` and add a `` to the `items` property of `splitButtonOptions`. - - } variant="secondary">Icon{' '} - } variant="secondary" isDisabled>Icon - +Actions may be used with primary and secondary toggle variants. + +```ts file='MenuToggleSplitButtonAction.tsx' ``` -### With avatar and text +### Full height toggle -```ts -import React from 'react'; -import { MenuToggle, Avatar } from '@patternfly/react-core'; -import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg'; +A full height toggle fills the height of its parent. To flag a full height toggle, use the `isFullHeight` property. - - }>Ned Username{' '} - } isExpanded>Ned Username{' '} - } isDisabled>Ned Username - -``` - -### Full height +In the following example, the toggle fills the size of the "80px" `
` element that it is within. ```ts import React from 'react'; @@ -211,7 +205,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'; @@ -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/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/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/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" /> ); 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..b2c484e5e32 --- /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'; + +export const MenuToggleTypeahead: React.FunctionComponent = () => { + const [inputValue, setInputValue] = React.useState(''); + + const onTextInputChange = (_event: React.FormEvent, value: string) => { + setInputValue(value); + }; + + return ( + + + + + + {!!inputValue && ( + + )} + + + + ); +}