feat(Menu toggle): Added support for a adding styling for a menu toggle in a form

Author: tlabaj

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<MenuToggleProps> {
     isDisabled: false,
     isFullWidth: false,
     isFullHeight: false,
+    isInForm: false,
     isPlaceholder: false,
     isCircle: false,
     size: 'default',
@@ -99,6 +102,7 @@ class MenuToggleBase extends Component<MenuToggleProps> {
       isDisabled,
       isFullHeight,
       isFullWidth,
+      isInForm,
       isPlaceholder,
       isCircle,
       isSettings,
@@ -179,9 +183,10 @@ class MenuToggleBase extends Component<MenuToggleProps> {
             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,

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(<MenuToggle variant="plainText">Toggle</MenuToggle>);
+  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(<MenuToggle size="sm">Toggle</MenuToggle>);
   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(<MenuToggle isInForm>Toggle</MenuToggle>);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.form);
+});
+
+test(`Does not render class ${styles.modifiers.form} when isInForm is false`, () => {
+  render(<MenuToggle isInForm={false}>Toggle</MenuToggle>);
+  expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.form);
+});
+
 test(`Renders with class ${styles.modifiers.placeholder} when isPlaceholder is passed`, () => {
   render(<MenuToggle isPlaceholder>Toggle</MenuToggle>);
   expect(screen.getByRole('button')).toHaveClass(styles.modifiers.placeholder);