diff --git a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx index 565b478a928..63fefc6b7e8 100644 --- a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx +++ b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx @@ -45,6 +45,8 @@ export interface MenuToggleProps isFullHeight?: boolean; /** Flag indicating the toggle takes up the full width of its parent */ isFullWidth?: boolean; + /** @beta Flag indicating the toggle is placed inside a form */ + isInForm?: boolean; /** Flag indicating the toggle contains placeholder text */ isPlaceholder?: boolean; /** @beta Flag indicating the toggle has circular styling. Can only be applied to plain toggles. */ @@ -83,6 +85,7 @@ class MenuToggleBase extends Component { isDisabled: false, isFullWidth: false, isFullHeight: false, + isInForm: false, isPlaceholder: false, isCircle: false, size: 'default', @@ -99,6 +102,7 @@ class MenuToggleBase extends Component { isDisabled, isFullHeight, isFullWidth, + isInForm, isPlaceholder, isCircle, isSettings, @@ -179,9 +183,10 @@ class MenuToggleBase extends Component { variant === 'secondary' && styles.modifiers.secondary, status && styles.modifiers[status], (isPlain || isPlainText) && styles.modifiers.plain, - isPlainText && 'pf-m-text', + isPlainText && styles.modifiers.text, isFullHeight && styles.modifiers.fullHeight, isFullWidth && styles.modifiers.fullWidth, + isInForm && styles.modifiers.form, isDisabled && styles.modifiers.disabled, isPlaceholder && styles.modifiers.placeholder, isSettings && styles.modifiers.settings, diff --git a/packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx b/packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx index 2adbeda6b5e..2b2e58387e4 100644 --- a/packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx +++ b/packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx @@ -57,6 +57,13 @@ describe('Old Snapshot tests - remove when refactoring', () => { const toggleVariants = ['default', 'plain', 'primary', 'plainText', 'secondary', 'typeahead']; +test(`Renders with classes ${styles.modifiers.plain} and ${styles.modifiers.text} when variant="plainText" is passed`, () => { + render(Toggle); + const toggle = screen.getByRole('button'); + expect(toggle).toHaveClass(styles.modifiers.plain); + expect(toggle).toHaveClass(styles.modifiers.text); +}); + test(`Renders with class ${styles.modifiers.small} when size="sm" is passed`, () => { render(Toggle); expect(screen.getByRole('button')).toHaveClass(styles.modifiers.small); @@ -101,6 +108,16 @@ test('split toggle passes onClick', async () => { expect(mockClick).toHaveBeenCalled(); }); +test(`Renders with class ${styles.modifiers.form} when isInForm is passed`, () => { + render(Toggle); + expect(screen.getByRole('button')).toHaveClass(styles.modifiers.form); +}); + +test(`Does not render class ${styles.modifiers.form} when isInForm is false`, () => { + render(Toggle); + expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.form); +}); + test(`Renders with class ${styles.modifiers.placeholder} when isPlaceholder is passed`, () => { render(Toggle); expect(screen.getByRole('button')).toHaveClass(styles.modifiers.placeholder); diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md index 41663677376..a9965e0e556 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md @@ -179,6 +179,14 @@ In the following example, the toggle fills the width of its parent as the window ``` +### Toggle in a form + +When a menu toggle is used inside a form, pass the `isInForm` property so the toggle receives form-appropriate styling. + +```ts file="MenuToggleInForm.tsx" + +``` + ### Typeahead toggle To create a typeahead toggle, pass in `variant="typeahead"` to the ``. Then, pass a `` component as a child of the ``. diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleInForm.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleInForm.tsx new file mode 100644 index 00000000000..ad8065565e4 --- /dev/null +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleInForm.tsx @@ -0,0 +1,7 @@ +import { MenuToggle } from '@patternfly/react-core'; + +export const MenuToggleInForm = (): JSX.Element => ( + + In form + +);