@patternfly/react-core 6.0.0-alpha.40 → 6.0.0-alpha.41

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.39","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.40","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.39","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.40","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.39","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.40","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.40",
+  "version": "6.0.0-alpha.41",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -74,5 +74,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "296ac2be2f24ef201a347384c1561a311d0c8c54"
+  "gitHead": "f32fea72a008afd7ca45a96438a41d0cd1f6b3a9"
 }

package/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
     };

package/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();
   });
 

package/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>
 `;

package/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,9 +150,9 @@ 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';
@@ -160,17 +160,14 @@ 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'
+
 ```

package/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>

package/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}
             >