@patternfly/react-core 5.3.0-prerelease.23 → 5.3.0-prerelease.26

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":"5.3.0-prerelease.22","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":"5.3.0-prerelease.25","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":"5.3.0-prerelease.22","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":"5.3.0-prerelease.25","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":"5.3.0-prerelease.22","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":"5.3.0-prerelease.25","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.3.0-prerelease.23",
+  "version": "5.3.0-prerelease.26",
   "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",
@@ -72,5 +72,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "24c732ea445cd4678cc8901aa22b0d2f80d648cb"
+  "gitHead": "0c270bc245f50ed4e990918441903ccd6686044c"
 }

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

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

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

package/src/demos/AlertGroup.md

@@ -7,6 +7,7 @@ import { useEffect } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 
 ## Demos
 

package/src/demos/Nav.md

@@ -11,6 +11,8 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 
 ## Demos
 

package/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx

@@ -33,7 +33,7 @@ import {
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 interface NotificationProps {

package/src/demos/examples/Nav/NavDefault.tsx

@@ -17,7 +17,7 @@ import {
   Text
 } from '@patternfly/react-core';
 import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
-import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 
 export const NavDefault: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = React.useState<number | string>(0);

package/src/demos/examples/Nav/NavDrilldown.tsx

@@ -12,7 +12,7 @@ import {
   Menu,
   PageSection
 } from '@patternfly/react-core';
-import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 
 interface MenuHeights {
   [menuId: string]: number;

package/src/demos/examples/Nav/NavExpandable.tsx

@@ -18,7 +18,7 @@ import {
   Text
 } from '@patternfly/react-core';
 import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
-import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 
 export const NavExpandableDemo: React.FunctionComponent = () => {
   const [activeGroup, setActiveGroup] = React.useState<string | number>('grp-1');

package/src/demos/examples/Nav/NavGrouped.tsx

@@ -12,7 +12,7 @@ import {
   TextContent,
   Text
 } from '@patternfly/react-core';
-import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 
 export const NavGrouped: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = React.useState<number | string>('grp-1_itm-1');

package/src/demos/examples/Nav/NavWithSubnav.tsx

@@ -18,7 +18,7 @@ import {
   Text
 } from '@patternfly/react-core';
 import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
-import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 
 export const NavWithSubnav: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = React.useState<string | number>(0);

package/src/demos/examples/Nav/deprecated/NavLight.tsx

@@ -16,7 +16,7 @@ import {
   TextContent,
   Text
 } from '@patternfly/react-core';
-import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 
 export const NavLight: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = React.useState<string | number>(0);

package/src/demos/examples/Nav/deprecated/NavTertiary.tsx

@@ -15,7 +15,7 @@ import {
   Text
 } from '@patternfly/react-core';
 import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
-import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 
 export const NavTertiary: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = React.useState<string | number>(0);