From afd3b85ef307117784527740d6ae6d442055fbb0 Mon Sep 17 00:00:00 2001
From: kmcfaul <45077788+kmcfaul@users.noreply.github.com>
Date: Mon, 8 Apr 2024 16:51:37 -0400
Subject: [PATCH] feat(MenuToggle): allow split action toggle text (#10256)

* feat(MenuToggle): allow split action toggle text

* use var
---
 .../src/components/MenuToggle/MenuToggle.tsx  |  2 +
 .../MenuToggle/examples/MenuToggle.md         | 12 ++++-
 ...oggleSplitButtonCheckboxWithToggleText.tsx | 51 +++++++++++++++++++
 3 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxWithToggleText.tsx

diff --git a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
index 30e3ce14644..9e8fef7a78f 100644
--- a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
+++ b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
@@ -186,8 +186,10 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
             aria-label={ariaLabel}
             disabled={isDisabled}
             onClick={onClick}
+            {...(children && { style: { display: 'flex', paddingLeft: 'var(--pf-v5-global--spacer--sm)' } })}
             {...otherProps}
           >
+            {children && <span className={css(styles.menuToggleText)}>{children}</span>}
             {toggleControls}
           </button>
         </div>
diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
index a3897722ae2..fc4a5d3f741 100644
--- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
+++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
@@ -205,7 +205,7 @@ Variant styling can be applied to split button toggles to adjust their appearanc
 
 ```
 
-### Split button toggle with text label
+### Split button toggle with checkbox label
 
 To display text in a split button menu toggle, add a label to the `items` property of `splitButtonOptions`.
 
@@ -213,6 +213,16 @@ To display text in a split button menu toggle, add a label to the `items` proper
 
 ```
 
+### Split button toggle with checkbox and toggle button text
+
+For split button toggles that should still contain text which will trigger the toggle's `onClick`, pass `children` to the `MenuToggle`.
+
+The following example shows a split button with a `<MenuToggleCheckbox>` and toggle button text.
+
+```ts file='MenuToggleSplitButtonCheckboxWithToggleText.tsx'
+
+```
+
 ### Split button toggle with action
 
 To add an action to a split button, pass `variant='action'` into `splitButtonOptions` and add a `<MenuToggleAction>` to the `items` property of `splitButtonOptions`.
diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxWithToggleText.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxWithToggleText.tsx
new file mode 100644
index 00000000000..cb289f147f7
--- /dev/null
+++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxWithToggleText.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
+
+export const MenuToggleSplitButtonCheckboxWithToggleText: React.FunctionComponent = () => (
+  <React.Fragment>
+    <MenuToggle
+      splitButtonOptions={{
+        items: [
+          <MenuToggleCheckbox
+            id="split-button-checkbox-with-text-example"
+            key="split-checkbox-with-text"
+            aria-label="Select all"
+          />
+        ]
+      }}
+      aria-label="Menu toggle with checkbox split button and text"
+    >
+      10 selected
+    </MenuToggle>{' '}
+    <MenuToggle
+      variant="primary"
+      splitButtonOptions={{
+        items: [
+          <MenuToggleCheckbox
+            id="split-button-checkbox-primary-example"
+            key="split-checkbox-primary"
+            aria-label="Select all"
+          />
+        ]
+      }}
+      aria-label="Primary menu toggle with checkbox split button"
+    >
+      10 selected
+    </MenuToggle>{' '}
+    <MenuToggle
+      variant="secondary"
+      splitButtonOptions={{
+        items: [
+          <MenuToggleCheckbox
+            id="split-button-checkbox-secondary-example"
+            key="split-checkbox-secondary"
+            aria-label="Select all"
+          />
+        ]
+      }}
+      aria-label="Secondary menu toggle with checkbox split button"
+    >
+      10 selected
+    </MenuToggle>
+  </React.Fragment>
+);