@patternfly/react-core 6.0.0-alpha.46 → 6.0.0-alpha.48

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.45","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.47","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.45","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.47","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.45","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.47","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.46",
+  "version": "6.0.0-alpha.48",
   "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",
@@ -47,15 +47,15 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.17",
-    "@patternfly/react-styles": "^6.0.0-alpha.17",
-    "@patternfly/react-tokens": "^6.0.0-alpha.17",
+    "@patternfly/react-icons": "^6.0.0-alpha.18",
+    "@patternfly/react-styles": "^6.0.0-alpha.18",
+    "@patternfly/react-tokens": "^6.0.0-alpha.18",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.100",
+    "@patternfly/patternfly": "6.0.0-alpha.107",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -74,5 +74,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "c3f0ac633b7bca82d53f146a0844cdef0851096b"
+  "gitHead": "06e47ba0353efc5733516c2a658928da3439097d"
 }

package/src/components/Badge/Badge.tsx

@@ -1,15 +1,12 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Badge/badge';
-import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 export interface BadgeProps extends React.HTMLProps<HTMLSpanElement> {
   /** Text announced by screen readers to indicate the current content/status of the badge. */
   screenReaderText?: string;
   /**  Adds styling to the badge to indicate it has been read */
   isRead?: boolean;
-  /**  Adds styling to the badge to indicate it has a toggle. A badge with a toggle must be passed to a MenuToggle component. */
-  isToggle?: boolean;
   /** content rendered inside the Badge */
   children?: React.ReactNode;
   /** additional classes added to the Badge */
@@ -18,7 +15,6 @@ export interface BadgeProps extends React.HTMLProps<HTMLSpanElement> {
 
 export const Badge: React.FunctionComponent<BadgeProps> = ({
   isRead = false,
-  isToggle = false,
   className = '',
   children = '',
   screenReaderText,
@@ -30,11 +26,6 @@ export const Badge: React.FunctionComponent<BadgeProps> = ({
   >
     {children}
     {screenReaderText && <span className="pf-v6-screen-reader">{screenReaderText}</span>}
-    {isToggle && (
-      <span className={css(styles.badgeToggleIcon)}>
-        <CaretDownIcon />
-      </span>
-    )}
   </span>
 );
 Badge.displayName = 'Badge';

package/src/components/Badge/__tests__/Badge.test.tsx

@@ -32,15 +32,6 @@ test('Renders with class name pf-m-read when isRead prop is true', () => {
   expect(screen.getByText('Test')).toHaveClass('pf-m-read');
 });
 
-test('Renders with toggle styles and icon when isToggle prop is true', () => {
-  render(
-    <Badge isRead={true} isToggle={true}>
-      Test
-    </Badge>
-  );
-  expect(screen.getByText('Test').lastChild).toHaveClass(styles.badgeToggleIcon);
-});
-
 test('Does not render pf-v6-screen-reader class by default', () => {
   render(<Badge>Test</Badge>);
   expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v6-screen-reader"></span>');

package/src/components/Badge/examples/Badge.md

@@ -18,8 +18,3 @@ import './Badge.css';
 
 ```ts file="./BadgeUnread.tsx"
 ```
-
-### Badge as toggle
-
-```ts file="./BadgeToggle.tsx"
-```

package/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx

@@ -12,7 +12,6 @@ import {
   MenuToggleElement
 } from '@patternfly/react-core';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
-import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 const dropdownItems = [
   <DropdownItem
@@ -66,14 +65,17 @@ export const BreadcrumbDropdown: React.FunctionComponent = () => {
           onSelect={onSelect}
           onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-            <MenuToggle ref={toggleRef} onClick={onToggle} isExpanded={isOpen} variant="plain">
-              <Badge isRead screenReaderText="additional items">
-                {dropdownItems.length}{' '}
-                <span>
-                  <CaretDownIcon />
-                </span>
-              </Badge>
-            </MenuToggle>
+            <MenuToggle
+              badge={
+                <Badge isRead screenReaderText="additional items">
+                  {dropdownItems.length}
+                </Badge>
+              }
+              ref={toggleRef}
+              onClick={onToggle}
+              isExpanded={isOpen}
+              variant="plainText"
+            />
           )}
           isOpen={isOpen}
         >

package/src/components/Drawer/DrawerContent.tsx

@@ -2,7 +2,13 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
 import { DrawerMain } from './DrawerMain';
-import { DrawerColorVariant, DrawerContext } from './Drawer';
+import { DrawerContext } from './Drawer';
+
+export enum DrawerContentColorVariant {
+  default = 'default',
+  primary = 'primary',
+  secondary = 'secondary'
+}
 
 export interface DrawerContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the Drawer. */
@@ -12,14 +18,14 @@ export interface DrawerContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered in the drawer panel. */
   panelContent: React.ReactNode;
   /** Color variant of the background of the drawer panel */
-  colorVariant?: DrawerColorVariant | 'no-background' | 'default' | 'secondary';
+  colorVariant?: DrawerContentColorVariant | 'default' | 'primary' | 'secondary';
 }
 
 export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
   className,
   children,
   panelContent,
-  colorVariant = DrawerColorVariant.default,
+  colorVariant = DrawerContentColorVariant.default,
   ...props
 }: DrawerContentProps) => {
   const { drawerContentRef } = React.useContext(DrawerContext);
@@ -29,8 +35,8 @@ export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
       <div
         className={css(
           styles.drawerContent,
-          colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
-          colorVariant === DrawerColorVariant.secondary && styles.modifiers.secondary,
+          colorVariant === DrawerContentColorVariant.primary && styles.modifiers.primary,
+          colorVariant === DrawerContentColorVariant.secondary && styles.modifiers.secondary,
           className
         )}
         ref={drawerContentRef}

package/src/components/Drawer/examples/DrawerSecondaryBackground.tsx

@@ -10,7 +10,8 @@ import {
   DrawerCloseButton,
   DrawerSection,
   Button,
-  DrawerColorVariant
+  DrawerColorVariant,
+  DrawerContentColorVariant
 } from '@patternfly/react-core';
 
 export const DrawerSecondaryBackground: React.FunctionComponent = () => {
@@ -96,7 +97,7 @@ export const DrawerSecondaryBackground: React.FunctionComponent = () => {
           drawer-section
         </DrawerSection>
         <DrawerContent
-          colorVariant={contentSecondary ? DrawerColorVariant.secondary : DrawerColorVariant.default}
+          colorVariant={contentSecondary ? DrawerContentColorVariant.secondary : DrawerContentColorVariant.default}
           panelContent={panelContent}
         >
           <DrawerContentBody>{drawerContent}</DrawerContentBody>

package/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx

@@ -24,7 +24,6 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-i
 import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
   const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
@@ -117,14 +116,17 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
           isOpen={isOpen}
           onOpenChange={(isOpen: boolean) => onToggle(isOpen, 'app')}
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-            <MenuToggle ref={toggleRef} onClick={() => onToggle(true, 'app')} isExpanded={isOpen} variant="plain">
-              <Badge isRead screenReaderText="additional item">
-                1{' '}
-                <span>
-                  <CaretDownIcon />
-                </span>
-              </Badge>
-            </MenuToggle>
+            <MenuToggle
+              badge={
+                <Badge isRead screenReaderText="additional item">
+                  1
+                </Badge>
+              }
+              ref={toggleRef}
+              onClick={() => onToggle(true, 'app')}
+              isExpanded={isOpen}
+              variant="plainText"
+            />
           )}
         >
           <DropdownList>
@@ -161,14 +163,17 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
           isOpen={isOpen}
           onOpenChange={(isOpen: boolean) => onToggle(isOpen, 'label')}
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-            <MenuToggle ref={toggleRef} onClick={() => onToggle(true, 'label')} isExpanded={isOpen} variant="plain">
-              <Badge isRead screenReaderText="additional item">
-                1{' '}
-                <span>
-                  <CaretDownIcon />
-                </span>
-              </Badge>
-            </MenuToggle>
+            <MenuToggle
+              badge={
+                <Badge isRead screenReaderText="additional item">
+                  1
+                </Badge>
+              }
+              ref={toggleRef}
+              onClick={() => onToggle(true, 'label')}
+              isExpanded={isOpen}
+              variant="plainText"
+            />
           )}
         >
           <DropdownList>
@@ -217,14 +222,17 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
           isOpen={isOpen}
           onOpenChange={(isOpen: boolean) => onToggle(isOpen, 'pause-app')}
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-            <MenuToggle ref={toggleRef} onClick={() => onToggle(true, 'pause-app')} isExpanded={isOpen} variant="plain">
-              <Badge isRead screenReaderText="additional item">
-                1{' '}
-                <span>
-                  <CaretDownIcon />
-                </span>
-              </Badge>
-            </MenuToggle>
+            <MenuToggle
+              badge={
+                <Badge isRead screenReaderText="additional item">
+                  1
+                </Badge>
+              }
+              ref={toggleRef}
+              onClick={() => onToggle(true, 'pause-app')}
+              isExpanded={isOpen}
+              variant="plainText"
+            />
           )}
         >
           <DropdownList>
@@ -262,18 +270,16 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
           onOpenChange={(isOpen: boolean) => onToggle(isOpen, 'pause-label')}
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle
+              badge={
+                <Badge isRead screenReaderText="additional item">
+                  1
+                </Badge>
+              }
               ref={toggleRef}
               onClick={() => onToggle(true, 'pause-label')}
               isExpanded={isOpen}
-              variant="plain"
-            >
-              <Badge isRead screenReaderText="additional item">
-                1{' '}
-                <span>
-                  <CaretDownIcon />
-                </span>
-              </Badge>
-            </MenuToggle>
+              variant="plainText"
+            />
           )}
         >
           <DropdownList>

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -53,14 +53,16 @@ import { MenuToggle } from '@patternfly/react-core';
 
 ### With a badge
 
-To display a count of selected items in a toggle, use the `badge` property.
+To display a count of selected items in a toggle, use the `badge` property. You can also pass in `variant="plainText"` for a badge only toggle.
 
 ```ts
 import React from 'react';
 import { MenuToggle, Badge } from '@patternfly/react-core';
 
-<MenuToggle badge={<Badge>4 selected</Badge>}>Count</MenuToggle>
-
+<React.Fragment>
+  <MenuToggle badge={<Badge>4 selected</Badge>}>Count</MenuToggle>
+  <MenuToggle variant="plainText" badge={<Badge screenReaderText="additional items">4</Badge>} />
+</React.Fragment>
 ```
 
 ### With icons

package/src/components/Page/Page.tsx

@@ -295,19 +295,21 @@ class Page extends React.Component<PageProps, PageState> {
     const Component: keyof JSX.IntrinsicElements = mainComponent;
 
     const main = (
-      <Component
-        ref={this.mainRef}
-        role={role}
-        id={mainContainerId}
-        className={css(styles.pageMain)}
-        tabIndex={mainTabIndex}
-        aria-label={mainAriaLabel}
-      >
-        {group}
-        {!isHorizontalSubnavGrouped && nav}
-        {!isBreadcrumbGrouped && crumb}
-        {children}
-      </Component>
+      <div className={css(styles.pageMainContainer)}>
+        <Component
+          ref={this.mainRef}
+          role={role}
+          id={mainContainerId}
+          className={css(styles.pageMain)}
+          tabIndex={mainTabIndex}
+          aria-label={mainAriaLabel}
+        >
+          {group}
+          {!isHorizontalSubnavGrouped && nav}
+          {!isBreadcrumbGrouped && crumb}
+          {children}
+        </Component>
+      </div>
     );
 
     const panelContent = <DrawerPanelContent>{notificationDrawer}</DrawerPanelContent>;