feat(MenuToggle): allow split action toggle text (#10256)

* feat(MenuToggle): allow split action toggle text * use var
patternfly · Apr 8, 2024 · afd3b85 · afd3b85
1 parent 68d1bfb
commit afd3b85
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 1 deletion.
diff --git 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
@@ -205,14 +205,24 @@ 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`.
 
 ```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
 
 ```
 
+### 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/...t-core/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxWithToggleText.tsx b/...t-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>
+);