From cdd389fec181e91b228edab0b7f8759345944653 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Mon, 26 Aug 2024 15:06:24 -0400
Subject: [PATCH] feat(MenuToggle): add placeholder support

---
 .../react-core/src/components/MenuToggle/MenuToggle.tsx   | 5 +++++
 .../components/MenuToggle/__tests__/MenuToggle.test.tsx   | 5 +++++
 .../src/components/MenuToggle/examples/MenuToggle.md      | 8 ++++++++
 .../MenuToggle/examples/MenuTogglePlaceholder.tsx         | 6 ++++++
 4 files changed, 24 insertions(+)
 create mode 100644 packages/react-core/src/components/MenuToggle/examples/MenuTogglePlaceholder.tsx

diff --git a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
index 96855dac1ae..1fa0bd2f413 100644
--- a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
+++ b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
@@ -49,6 +49,8 @@ export interface MenuToggleProps
   isFullHeight?: boolean;
   /** Flag indicating the toggle takes up the full width of its parent */
   isFullWidth?: boolean;
+  /** Flag indicating the toggle contains placeholder text */
+  isPlaceholder?: boolean;
   /** Object used to configure a split button menu toggle */
   splitButtonOptions?: SplitButtonOptions;
   /** Variant styles of the menu toggle */
@@ -85,6 +87,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
     isDisabled: false,
     isFullWidth: false,
     isFullHeight: false,
+    isPlaceholder: false,
     size: 'default',
     ouiaSafe: true
   };
@@ -103,6 +106,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
       isDisabled,
       isFullHeight,
       isFullWidth,
+      isPlaceholder,
       splitButtonOptions,
       variant,
       status,
@@ -179,6 +183,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
       isFullHeight && styles.modifiers.fullHeight,
       isFullWidth && styles.modifiers.fullWidth,
       isDisabled && styles.modifiers.disabled,
+      isPlaceholder && styles.modifiers.placeholder,
       size === MenuToggleSize.sm && styles.modifiers.small,
       className
     );
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 66f2a6e4b12..8ec193f6a3d 100644
--- a/packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx
+++ b/packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx
@@ -100,4 +100,9 @@ describe('menu toggle', () => {
     await user.click(screen.getByRole(`button`) as Element);
     expect(mockClick).toHaveBeenCalled();
   });
+
+  test(`Renders with class ${styles.modifiers.placeholder} when isPlaceholder is passed`, () => {
+    render(<MenuToggle isPlaceholder>Toggle</MenuToggle>);
+    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 7a5e410ad76..e495dce2cc4 100644
--- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
+++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
@@ -296,3 +296,11 @@ When the status value is "warning" or "danger", you must include helper text tha
 ```ts file='MenuToggleStatus.tsx'
 
 ```
+
+### Placeholder text in toggle
+
+To indicate the toggle contains placeholder text, pass the `isPlaceholder` property to the `MenuToggle`.
+
+```ts file='MenuTogglePlaceholder.tsx'
+
+```
diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuTogglePlaceholder.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuTogglePlaceholder.tsx
new file mode 100644
index 00000000000..dee77fd77ff
--- /dev/null
+++ b/packages/react-core/src/components/MenuToggle/examples/MenuTogglePlaceholder.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { MenuToggle } from '@patternfly/react-core';
+
+export const MenuTogglePlaceholder: React.FunctionComponent = () => (
+  <MenuToggle isPlaceholder>Placeholder text</MenuToggle>
+);