feat(MenuToggle): consumed Penta updates

packages/react-core/src/components/MenuToggle/MenuToggle.tsx

@@ -37,8 +37,9 @@ export interface MenuToggleProps
   splitButtonOptions?: SplitButtonOptions;
   /** Variant styles of the menu toggle */
   variant?: 'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead';
-  /** Optional icon or image rendered inside the toggle, before the children content. It is
-   * recommended to wrap most basic icons in our icon component.
+  /** Icon or image rendered inside the toggle, before the children content. It is
+   * recommended to wrap icons in our icon component. For menu toggles that contain only an icon, we
+   * recommend passing the icon to this prop instead of passing it as children.
    */
   icon?: React.ReactNode;
   /** Optional badge rendered inside the toggle, after the children content */
@@ -88,7 +89,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
     const content = (
       <>
         {icon && <span className={css(styles.menuToggleIcon)}>{icon}</span>}
-        {isTypeahead ? children : <span className={css(styles.menuToggleText)}>{children}</span>}
+        {isTypeahead ? children : children && <span className={css(styles.menuToggleText)}>{children}</span>}
         {React.isValidElement(badge) && <span className={css(styles.menuToggleCount)}>{badge}</span>}
         {isTypeahead ? (
           <button
@@ -101,7 +102,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
             {toggleControls}
           </button>
         ) : (
-          toggleControls
+          !isPlain && toggleControls
         )}
       </>
     );
@@ -120,7 +121,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
     );
 
     const componentProps = {
-      children: isPlain ? children : content,
+      children: content,
       ...(isDisabled && { disabled: true }),
       ...otherProps
     };

packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx

@@ -34,11 +34,7 @@ describe('menu toggle', () => {
   });
 
   test('shows isPlain', () => {
-    const { asFragment } = render(
-      <MenuToggle variant="plain">
-        <EllipsisVIcon />
-      </MenuToggle>
-    );
+    const { asFragment } = render(<MenuToggle variant="plain" icon={<EllipsisVIcon />} />);
     expect(asFragment()).toMatchSnapshot();
   });
 

packages/react-core/src/components/MenuToggle/__tests__/__snapshots__/MenuToggle.test.tsx.snap

@@ -256,19 +256,23 @@ exports[`menu toggle shows isPlain 1`] = `
     class="pf-v6-c-menu-toggle pf-m-plain"
     type="button"
   >
-    <svg
-      aria-hidden="true"
-      class="pf-v6-svg"
-      fill="currentColor"
-      height="1em"
-      role="img"
-      viewBox="0 0 192 512"
-      width="1em"
+    <span
+      class="pf-v6-c-menu-toggle__icon"
     >
-      <path
-        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        class="pf-v6-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        viewBox="0 0 192 512"
+        width="1em"
+      >
+        <path
+          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+        />
+      </svg>
+    </span>
   </button>
 </DocumentFragment>
 `;

packages/react-core/src/components/MenuToggle/examples/MenuToggle.md

@@ -17,7 +17,7 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 ### Collapsed toggle
 
-A toggle is collapsed until it is selected by a user. 
+A toggle is collapsed until it is selected by a user.
 
 ```ts
 import React from 'react';
@@ -29,7 +29,7 @@ import { MenuToggle } from '@patternfly/react-core';
 
 ### Expanded toggle
 
-When a user selects a toggle, it becomes expanded and is styled with a blue underline. To flag expanded toggles, and apply expanded styling, use the `isExpanded` property . 
+When a user selects a toggle, it becomes expanded and is styled with a blue underline. To flag expanded toggles, and apply expanded styling, use the `isExpanded` property .
 
 ```ts
 import React from 'react';
@@ -41,7 +41,7 @@ import { MenuToggle } from '@patternfly/react-core';
 
 ### Disabled toggle
 
-To disable the selection and expansion of a toggle, use the `isDisabled` property. 
+To disable the selection and expansion of a toggle, use the `isDisabled` property.
 
 ```ts
 import React from 'react';
@@ -65,7 +65,7 @@ import { MenuToggle, Badge } from '@patternfly/react-core';
 
 ### With icons
 
-To add a recognizable icon to a menu toggle, use the `icon` property. The following example adds a `CogIcon` to the  toggle.
+To add a recognizable icon to a menu toggle, use the `icon` property. The following example adds a `CogIcon` to the toggle.
 
 For most basic icons, it is recommended to wrap it inside our [icon component](/components/icon).
 
@@ -111,7 +111,7 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 
 ### With avatar and text
 
-You can also pass images into the `icon` property. The following example passes in an `<Avatar>` component with an `imgAvatar`. 
+You can also pass images into the `icon` property. The following example passes in an `<Avatar>` component with an `imgAvatar`.
 
 This can be used alongside a text label that provides more context for the image.
 
@@ -150,27 +150,24 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 
 ### Plain toggle with icon
 
-To apply plain styling to a menu toggle with an icon, pass in `variant="plain"`. This will remove the default bottom border and caret. You may pass in an `icon` to serve as the menu toggle. The following example passes in an `EllipsisVIcon`. 
+To apply plain styling to a menu toggle with an icon, pass in `variant="plain"` and pass the icon to the `icon` property. This will remove the default bottom border and caret. The following example passes in an `EllipsisVIcon`.
 
-If the toggle does not have any visible text content, use the `aria-label` property to provide an accessible name. 
+If the toggle does not have any visible text content, you must pass in the `aria-label` property to provide an accessible name.
 
 ```ts
 import React from 'react';
 import { MenuToggle } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 <React.Fragment>
-  <MenuToggle variant="plain" aria-label="plain kebab">
-    <EllipsisVIcon />
-  </MenuToggle>{' '}
-  <MenuToggle variant="plain" isExpanded aria-label="plain expanded kebab">
-    <EllipsisVIcon />
-  </MenuToggle>{' '}
-  <MenuToggle variant="plain" isDisabled aria-label="disabled kebab">
-    <EllipsisVIcon />
-  </MenuToggle>
+  <MenuToggle icon={<EllipsisVIcon />} variant="plain" aria-label="plain kebab"/>
+  {' '}
+  <MenuToggle icon={<EllipsisVIcon />} variant="plain" isExpanded aria-label="plain expanded kebab"/>
+  {' '}
+  <MenuToggle icon={<EllipsisVIcon />} variant="plain" isDisabled aria-label="disabled plain kebab"/>
 </React.Fragment>
 ```
+
 ### Plain toggle with text label
 
 To apply plain styling to a menu toggle with a text label, pass in `variant="plainText"`. Unlike the “plain” variant, “plainText” adds a caret pointing down in the toggle.
@@ -201,27 +198,30 @@ The following example shows a split button with a `<MenuToggleCheckbox>`.
 Variant styling can be applied to split button toggles to adjust their appearance for different scenarios. Both "primary" and "secondary" variants can be used with split button toggles.
 
 ```ts file='MenuToggleSplitButtonCheckbox.tsx'
+
 ```
 
 ### Split button toggle with text label
 
-To display text in a split button menu toggle, add a label to the `items` property of `splitButtonOptions`.  
+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 action
 
-To add an action to a split button, pass `variant='action'` into `splitButtonOptions` and add a `<MenuToggleAction>` to the `items` property of `splitButtonOptions`. 
+To add an action to a split button, pass `variant='action'` into `splitButtonOptions` and add a `<MenuToggleAction>` to the `items` property of `splitButtonOptions`.
 
 Actions may be used with primary and secondary toggle variants.
-    
+
 ```ts file='MenuToggleSplitButtonAction.tsx'
+
 ```
 
 ### Full height toggle
 
-A full height toggle fills the height of its parent. To flag a full height toggle, use the `isFullHeight` property. 
+A full height toggle fills the height of its parent. To flag a full height toggle, use the `isFullHeight` property.
 
 In the following example, the toggle fills the size of the "80px" `<div>` element that it is within.
 
@@ -238,7 +238,7 @@ import { MenuToggle } from '@patternfly/react-core';
 
 ### Full width toggle
 
-A full width toggle fills the width of its parent. To flag a full width toggle, use the `isFullWidth` property. 
+A full width toggle fills the width of its parent. To flag a full width toggle, use the `isFullWidth` property.
 
 In the following example, the toggle fills the width of its parent as the window size changes.
 
@@ -249,7 +249,7 @@ import { MenuToggle } from '@patternfly/react-core';
 const fullWidth: React.FunctionComponent = () => {
   return (
     <MenuToggle isFullWidth aria-label="Full width menu toggle" >
-      Full width 
+      Full width
     </MenuToggle>
   );
 }
@@ -262,4 +262,5 @@ To create a typeahead toggle, pass in `variant="typeahead"` to the `<MenuToggle>
 To create a multiple typeahead toggle, pass a `<TextInputGroup>` component implemented like the [text input group's filter example](/components/text-input-group#filters) as a child of `<MenuToggle>`.
 
 ```ts file='MenuToggleTypeahead.tsx'
+
 ```

packages/react-core/src/demos/DataList/examples/DataListBasic.tsx

@@ -61,9 +61,7 @@ export const DataListBasic: React.FunctionComponent = () => {
             <Button variant="primary">Create instance</Button>
           </OverflowMenuItem>
           <OverflowMenuControl hasAdditionalOptions>
-            <MenuToggle aria-label="Toolbar kebab overflow menu" variant="plain">
-              <EllipsisVIcon />
-            </MenuToggle>
+            <MenuToggle aria-label="Toolbar kebab overflow menu" variant="plain" icon={<EllipsisVIcon />} />
           </OverflowMenuControl>
         </OverflowMenu>
       </ToolbarItem>

packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx

@@ -55,7 +55,6 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 import { KeyTypes } from '../../../helpers';
-import display from '@patternfly/react-styles/css/utilities/Display/display';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 interface Repository {
@@ -186,12 +185,10 @@ export const TablesAndTabs = () => {
           </ToolbarItem>
         </ToolbarToggleGroup>
         <ToolbarItem>
-          <MenuToggle variant="plain" aria-label="Sort columns">
-            <SortAmountDownIcon aria-hidden="true" />
-          </MenuToggle>
+          <MenuToggle variant="plain" aria-label="Sort columns" icon={<SortAmountDownIcon aria-hidden="true" />} />
         </ToolbarItem>
         <OverflowMenu breakpoint="md">
-          <OverflowMenuContent className={`${display.displayNone} ${display.displayBlockOnLg}`}>
+          <OverflowMenuContent>
             <OverflowMenuGroup groupType="button" isPersistent>
               <OverflowMenuItem isPersistent>
                 <Button variant="primary">Generate</Button>
@@ -211,9 +208,8 @@ export const TablesAndTabs = () => {
                   variant="plain"
                   onClick={() => {}}
                   isExpanded={false}
-                >
-                  <EllipsisVIcon />
-                </MenuToggle>
+                  icon={<EllipsisVIcon />}
+                />
               )}
               isOpen={false}
             >

packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx

@@ -135,9 +135,13 @@ export class CardDemo extends Component {
           onOpenChange={(isOpen) => this.setState({ isOpen })}
           popperProps={{ position: 'right' }}
           toggle={(toggleRef) => (
-            <MenuToggle variant="plain" ref={toggleRef} isExpanded={this.state.isOpen} onClick={this.onToggle}>
-              <EllipsisVIcon />
-            </MenuToggle>
+            <MenuToggle
+              variant="plain"
+              ref={toggleRef}
+              isExpanded={this.state.isOpen}
+              onClick={this.onToggle}
+              icon={<EllipsisVIcon />}
+            />
           )}
         >
           <DropdownList>{dropdownItems}</DropdownList>

packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx

@@ -20,7 +20,7 @@ interface DataListState {
   isOpen: boolean;
 }
 
-export class DataListDemo extends React.Component<DataListProps, DataListState> {
+class DataListDemo extends React.Component<DataListProps, DataListState> {
   static displayName = 'DataListDemo';
   constructor(props: DataListProps) {
     super(props);
@@ -77,9 +77,13 @@ export class DataListDemo extends React.Component<DataListProps, DataListState>
                 onSelect={this.onSelect}
                 onOpenChange={(isOpen) => this.setState({ isOpen })}
                 toggle={(toggleRef) => (
-                  <MenuToggle variant="plain" ref={toggleRef} isExpanded={this.state.isOpen} onClick={this.onToggle}>
-                    <EllipsisVIcon />
-                  </MenuToggle>
+                  <MenuToggle
+                    variant="plain"
+                    ref={toggleRef}
+                    isExpanded={this.state.isOpen}
+                    onClick={this.onToggle}
+                    icon={<EllipsisVIcon />}
+                  />
                 )}
               >
                 <DropdownList>
@@ -131,3 +135,6 @@ export class DataListDemo extends React.Component<DataListProps, DataListState>
     );
   }
 }
+DataListDemo.displayName = 'DataListDemo';
+
+export { DataListDemo };

packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx

@@ -22,7 +22,7 @@ interface DualListSelectorState {
   chosenDescending: boolean;
 }
 
-export class DualListSelectorWithActionsDemo extends React.Component<DualListSelectorProps, DualListSelectorState> {
+class DualListSelectorWithActionsDemo extends React.Component<DualListSelectorProps, DualListSelectorState> {
   static displayName = 'DualListSelectorDemo';
   onSort: (panel: string) => void;
   onListChange: (
@@ -145,9 +145,8 @@ export class DualListSelectorWithActionsDemo extends React.Component<DualListSel
             ref={toggleRef}
             isExpanded={this.state.isAvailableKebabOpen}
             onClick={() => this.onToggle('available')}
-          >
-            <EllipsisVIcon />
-          </MenuToggle>
+            icon={<EllipsisVIcon />}
+          />
         )}
       >
         <DropdownList>{dropdownItems}</DropdownList>
@@ -174,9 +173,8 @@ export class DualListSelectorWithActionsDemo extends React.Component<DualListSel
             ref={toggleRef}
             isExpanded={this.state.isChosenKebabOpen}
             onClick={() => this.onToggle('chosen')}
-          >
-            <EllipsisVIcon />
-          </MenuToggle>
+            icon={<EllipsisVIcon />}
+          />
         )}
       >
         <DropdownList>{dropdownItems}</DropdownList>
@@ -222,3 +220,6 @@ export class DualListSelectorWithActionsDemo extends React.Component<DualListSel
     );
   }
 }
+DualListSelectorWithActionsDemo.displayName = 'DualListSelectorDemo';
+
+export { DualListSelectorWithActionsDemo };

packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx

@@ -132,9 +132,8 @@ export class PageDemo extends Component {
                   ref={toggleRef}
                   onClick={this.onKebabDropdownToggle}
                   isExpanded={isKebabDropdownOpen}
-                >
-                  <EllipsisVIcon />
-                </MenuToggle>
+                  icon={<EllipsisVIcon />}
+                />
               )}
             >
               <DropdownList>{kebabDropdownItems}</DropdownList>

packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx

@@ -273,9 +273,13 @@ class ToolbarDemo extends React.Component<ToolbarProps, ToolbarState> {
             isOpen={kebabIsOpen}
             onOpenChange={(isOpen) => this.setState({ kebabIsOpen: isOpen })}
             toggle={(toggleRef) => (
-              <MenuToggle variant="plain" ref={toggleRef} onClick={this.onKebabToggle} isExpanded={kebabIsOpen}>
-                <EllipsisVIcon />
-              </MenuToggle>
+              <MenuToggle
+                variant="plain"
+                ref={toggleRef}
+                onClick={this.onKebabToggle}
+                isExpanded={kebabIsOpen}
+                icon={<EllipsisVIcon />}
+              />
             )}
           >
             <DropdownList>{dropdownItems}</DropdownList>