diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md index 19d0e98f2bc..45b4f6690b6 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md @@ -19,29 +19,21 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; A toggle is collapsed until it is selected by a user. -```ts -import { MenuToggle } from '@patternfly/react-core'; - -Collapsed - +```ts file="MenuToggleCollapsed.tsx" ``` ### 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 { MenuToggle } from '@patternfly/react-core'; - -Expanded; - +```ts file ="MenuToggleExpanded.tsx" ``` ### Small toggle You can pass `size="sm"` to a MenuToggle to style it as a small toggle, such as within a [breadcrumb](/components/breadcrumb). -```ts file="./MenuToggleSmall.tsx" +```ts file="MenuToggleSmall.tsx" ``` @@ -49,32 +41,21 @@ You can pass `size="sm"` to a MenuToggle to style it as a small toggle, such as To disable the selection and expansion of a toggle, use the `isDisabled` property. -```ts -import { MenuToggle } from '@patternfly/react-core'; - -Disabled - +```ts file="MenuToggleDisabled.tsx" ``` ### With a badge To display a count of selected items in a toggle, use the `badge` property. You can also pass in `variant="plainText"` for a badge only toggle. -```ts -import { Fragment } from 'react'; -import { MenuToggle, Badge } from '@patternfly/react-core'; - - - 4 selected}>Count - 4} /> - +```ts file="MenuToggleBadge.tsx" ``` ### Settings toggle To create a "settings" menu toggle that will animate on hover and focus, you can pass the `isSettings` property in. Doing so will override the `icon` property, as a specific icon is used internally for the animations. -```ts file="./MenuToggleSettings.tsx" +```ts file="MenuToggleSettings.tsx" ``` @@ -84,7 +65,7 @@ To add a recognizable icon to a menu toggle, use the `icon` property. The follow For most basic icons, it is recommended to wrap it inside our [icon component](/components/icon). -```ts file="./MenuToggleCustomIcon.tsx" +```ts file="MenuToggleCustomIcon.tsx" ``` @@ -94,37 +75,14 @@ You can also pass images into the `icon` property. The following example passes This can be used alongside a text label that provides more context for the image. -```ts -import { Fragment } from 'react'; -import { MenuToggle, Avatar } from '@patternfly/react-core'; -import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg'; - - - }>Ned Username{' '} - } isExpanded>Ned Username{' '} - } isDisabled>Ned Username - +```ts file="MenuToggleAvatarText.tsx" ``` ### 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 { Fragment } from 'react'; -import { MenuToggle } from '@patternfly/react-core'; -import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; - - - Collapsed{' '} - - Expanded - {' '} - - Disabled - - - +```ts file="MenuToggleVariantStyles.tsx" ``` ### Plain toggle with icon @@ -133,39 +91,14 @@ To apply plain styling to a menu toggle with an icon, pass in `variant="plain"`. If the toggle does not have any visible text content, use the `aria-label` property to provide an accessible name. -```ts -import { Fragment } from 'react'; -import { MenuToggle } from '@patternfly/react-core'; -import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; - - - } variant="plain" aria-label="plain kebab"/> - {' '} - } variant="plain" isExpanded aria-label="plain expanded kebab"/> - {' '} - } variant="plain" isDisabled aria-label="disabled plain kebab"/> - +```ts file="MenuTogglePlainIcon.tsx" ``` ### 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 { Fragment } from 'react'; -import { MenuToggle } from '@patternfly/react-core'; - - - - Disabled - {' '} - - Custom text - {' '} - - Custom text (expanded) - - +```ts file="MenuTogglePlainTextLabel.tsx" ``` ### Split toggle with checkbox @@ -216,14 +149,7 @@ A full height toggle fills the height of its parent. To flag a full height toggl In the following example, the toggle fills the size of the "80px" `
` element that it is within. -```ts -import { MenuToggle } from '@patternfly/react-core'; - -
- - Full height - -
+```ts file="MenuToggleFullHeight.tsx" ``` ### Full width toggle @@ -232,16 +158,7 @@ A full width toggle fills the width of its parent. To flag a full width toggle, In the following example, the toggle fills the width of its parent as the window size changes. -```ts -import { MenuToggle } from '@patternfly/react-core'; - -const fullWidth: React.FunctionComponent = () => { - return ( - - Full width - - ); -} +```ts file="MenuToggleFullWidth.tsx" ``` ### Typeahead toggle diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleAvatarText.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleAvatarText.tsx new file mode 100644 index 00000000000..42be54a9d37 --- /dev/null +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleAvatarText.tsx @@ -0,0 +1,15 @@ +import { Fragment } from 'react'; +import { MenuToggle, Avatar } from '@patternfly/react-core'; +import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg'; + +export const MenuToggleAvatarText: React.FunctionComponent = () => ( + + }>Ned Username{' '} + } isExpanded> + Ned Username + {' '} + } isDisabled> + Ned Username + + +); diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleBadge.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleBadge.tsx new file mode 100644 index 00000000000..146acf1e4d8 --- /dev/null +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleBadge.tsx @@ -0,0 +1,9 @@ +import { Fragment } from 'react'; +import { MenuToggle, Badge } from '@patternfly/react-core'; + +export const MenuToggleBadge: React.FunctionComponent = () => ( + + 4 selected}>Count + 4} /> + +); diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleCollapsed.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleCollapsed.tsx new file mode 100644 index 00000000000..de713ef28c1 --- /dev/null +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleCollapsed.tsx @@ -0,0 +1,3 @@ +import { MenuToggle } from '@patternfly/react-core'; + +export const MenuToggleCollapsed: React.FunctionComponent = () => Collapsed; diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleDisabled.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleDisabled.tsx new file mode 100644 index 00000000000..ea6e5d4cfa6 --- /dev/null +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleDisabled.tsx @@ -0,0 +1,3 @@ +import { MenuToggle } from '@patternfly/react-core'; + +export const MenuToggleDisabled: React.FunctionComponent = () => Disabled; diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleExpanded.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleExpanded.tsx new file mode 100644 index 00000000000..67663d3c33a --- /dev/null +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleExpanded.tsx @@ -0,0 +1,3 @@ +import { MenuToggle } from '@patternfly/react-core'; + +export const MenuToggleExpanded: React.FunctionComponent = () => Expanded; diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleFullHeight.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleFullHeight.tsx new file mode 100644 index 00000000000..cb8c1d076c1 --- /dev/null +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleFullHeight.tsx @@ -0,0 +1,9 @@ +import { MenuToggle } from '@patternfly/react-core'; + +export const MenuToggleFullHeight: React.FunctionComponent = () => ( +
+ + Full height + +
+); diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleFullWidth.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleFullWidth.tsx new file mode 100644 index 00000000000..2f6e25976ea --- /dev/null +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleFullWidth.tsx @@ -0,0 +1,7 @@ +import { MenuToggle } from '@patternfly/react-core'; + +export const MenuToggleFullWidth: React.FunctionComponent = () => ( + + Full width + +); diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuTogglePlainIcon.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuTogglePlainIcon.tsx new file mode 100644 index 00000000000..92ce8b25fbb --- /dev/null +++ b/packages/react-core/src/components/MenuToggle/examples/MenuTogglePlainIcon.tsx @@ -0,0 +1,11 @@ +import { Fragment } from 'react'; +import { MenuToggle } from '@patternfly/react-core'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; + +export const MenuTogglePlainIcon: React.FunctionComponent = () => ( + + } variant="plain" aria-label="plain kebab" />{' '} + } variant="plain" isExpanded aria-label="plain expanded kebab" />{' '} + } variant="plain" isDisabled aria-label="disabled plain kebab" /> + +); diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuTogglePlainTextLabel.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuTogglePlainTextLabel.tsx new file mode 100644 index 00000000000..61075b810c9 --- /dev/null +++ b/packages/react-core/src/components/MenuToggle/examples/MenuTogglePlainTextLabel.tsx @@ -0,0 +1,16 @@ +import { Fragment } from 'react'; +import { MenuToggle } from '@patternfly/react-core'; + +export const MenuTogglePlainTextLabel: React.FunctionComponent = () => ( + + + Disabled + {' '} + + Custom text + {' '} + + Custom text (expanded) + + +); diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleVariantStyles.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleVariantStyles.tsx new file mode 100644 index 00000000000..b06a58c28b0 --- /dev/null +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleVariantStyles.tsx @@ -0,0 +1,14 @@ +import { Fragment } from 'react'; +import { MenuToggle } from '@patternfly/react-core'; + +export const MenuToggleVariantStyles: React.FunctionComponent = () => ( + + Collapsed{' '} + + Expanded + {' '} + + Disabled + + +);