@patternfly/react-core 6.0.0-alpha.31 → 6.0.0-alpha.33

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.30","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.32","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.30","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.32","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.30","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.32","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.31",
+  "version": "6.0.0-alpha.33",
   "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",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.11",
-    "@patternfly/react-styles": "^6.0.0-alpha.11",
-    "@patternfly/react-tokens": "^6.0.0-alpha.11",
+    "@patternfly/react-icons": "^6.0.0-alpha.12",
+    "@patternfly/react-styles": "^6.0.0-alpha.12",
+    "@patternfly/react-tokens": "^6.0.0-alpha.12",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.69",
+    "@patternfly/patternfly": "6.0.0-alpha.84",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -73,5 +73,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "9a345255141c46054b410c0b06a4ef2bb6e55e91"
+  "gitHead": "32be844c4045caae09df6bfa7dcfa601b327da25"
 }

package/src/components/ActionList/ActionList.tsx

@@ -14,7 +14,7 @@ export interface ActionListProps extends React.HTMLProps<HTMLDivElement> {
 export const ActionList: React.FunctionComponent<ActionListProps> = ({
   children,
   isIconList,
-  className = '',
+  className,
   ...props
 }: ActionListProps) => (
   <div className={css(styles.actionList, isIconList && styles.modifiers.icons, className)} {...props}>

package/src/components/ActionList/ActionListGroup.tsx

@@ -7,14 +7,17 @@ export interface ActionListGroupProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /** Additional classes added to the action list group */
   className?: string;
+  /** Flag indicating the action list group contains multiple icons and item padding should be removed */
+  isIconGroup?: boolean;
 }
 
 export const ActionListGroup: React.FunctionComponent<ActionListGroupProps> = ({
   children,
-  className = '',
+  className,
+  isIconGroup,
   ...props
 }: ActionListGroupProps) => (
-  <div className={css(styles.actionListGroup, className)} {...props}>
+  <div className={css(styles.actionListGroup, isIconGroup && styles.modifiers.icons, className)} {...props}>
     {children}
   </div>
 );

package/src/components/ActionList/ActionListItem.tsx

@@ -11,7 +11,7 @@ export interface ActionListItemProps extends React.HTMLProps<HTMLDivElement> {
 
 export const ActionListItem: React.FunctionComponent<ActionListItemProps> = ({
   children,
-  className = '',
+  className,
   ...props
 }: ActionListItemProps) => (
   <div className={css(`${styles.actionList}__item`, className)} {...props}>

package/src/components/ActionList/__tests__/ActionListGroup.test.tsx

@@ -14,10 +14,16 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test(`Renders with class ${styles.actionListGroup}`, () => {
+test(`Renders with only class ${styles.actionListGroup} by default`, () => {
   render(<ActionListGroup>Test</ActionListGroup>);
 
-  expect(screen.getByText('Test')).toHaveClass(styles.actionListGroup);
+  expect(screen.getByText('Test')).toHaveClass(styles.actionListGroup, { exact: true });
+});
+
+test(`Renders with class ${styles.modifiers.icons} when isIconGroup is true`, () => {
+  render(<ActionListGroup isIconGroup>Test</ActionListGroup>);
+
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.icons);
 });
 
 test('Renders with custom class names provided via prop', () => {

package/src/components/ActionList/examples/ActionListSingleGroup.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   ActionList,
+  ActionListGroup,
   ActionListItem,
   Button,
   Dropdown,
@@ -46,50 +47,54 @@ export const ActionListSingleGroup: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <ActionList>
-        <ActionListItem>
-          <Button variant="primary" id="single-group-next-button">
-            Next
-          </Button>
-        </ActionListItem>
-        <ActionListItem>
-          <Button variant="secondary" id="single-group-back-button">
-            Back
-          </Button>
-        </ActionListItem>
+        <ActionListGroup>
+          <ActionListItem>
+            <Button variant="primary" id="single-group-next-button">
+              Next
+            </Button>
+          </ActionListItem>
+          <ActionListItem>
+            <Button variant="secondary" id="single-group-back-button">
+              Back
+            </Button>
+          </ActionListItem>
+        </ActionListGroup>
       </ActionList>
       <br />
       With kebab
       <ActionList>
-        <ActionListItem>
-          <Button variant="primary" id="single-group-next-button2">
-            Next
-          </Button>
-        </ActionListItem>
-        <ActionListItem>
-          <Button variant="secondary" id="single-group-back-button2">
-            Back
-          </Button>
-        </ActionListItem>
-        <ActionListItem>
-          <Dropdown
-            onSelect={onSelect}
-            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-              <MenuToggle
-                ref={toggleRef}
-                onClick={onToggle}
-                variant="plain"
-                isExpanded={isOpen}
-                aria-label="Action list single group kebab"
-              >
-                <EllipsisVIcon />
-              </MenuToggle>
-            )}
-            isOpen={isOpen}
-            onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
-          >
-            <DropdownList>{dropdownItems}</DropdownList>
-          </Dropdown>
-        </ActionListItem>
+        <ActionListGroup>
+          <ActionListItem>
+            <Button variant="primary" id="single-group-next-button2">
+              Next
+            </Button>
+          </ActionListItem>
+          <ActionListItem>
+            <Button variant="secondary" id="single-group-back-button2">
+              Back
+            </Button>
+          </ActionListItem>
+          <ActionListItem>
+            <Dropdown
+              onSelect={onSelect}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  onClick={onToggle}
+                  variant="plain"
+                  isExpanded={isOpen}
+                  aria-label="Action list single group kebab"
+                >
+                  <EllipsisVIcon />
+                </MenuToggle>
+              )}
+              isOpen={isOpen}
+              onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+            >
+              <DropdownList>{dropdownItems}</DropdownList>
+            </Dropdown>
+          </ActionListItem>
+        </ActionListGroup>
       </ActionList>
     </React.Fragment>
   );

package/src/components/ActionList/examples/ActionListWithCancelButton.tsx

@@ -5,16 +5,18 @@ export const ActionListWithCancelButton: React.FunctionComponent = () => (
   <React.Fragment>
     In modals, forms, data lists
     <ActionList>
-      <ActionListItem>
-        <Button variant="primary" id="with-cancel-save-button">
-          Save
-        </Button>
-      </ActionListItem>
-      <ActionListItem>
-        <Button variant="link" id="with-cancel-cancel-button">
-          Cancel
-        </Button>
-      </ActionListItem>
+      <ActionListGroup>
+        <ActionListItem>
+          <Button variant="primary" id="with-cancel-save-button">
+            Save
+          </Button>
+        </ActionListItem>
+        <ActionListItem>
+          <Button variant="link" id="with-cancel-cancel-button">
+            Cancel
+          </Button>
+        </ActionListItem>
+      </ActionListGroup>
     </ActionList>
     <br />
     In wizards

package/src/components/ActionList/examples/ActionListWithIcons.tsx

@@ -1,19 +1,50 @@
 import React from 'react';
-import { ActionList, ActionListItem, Button } from '@patternfly/react-core';
+import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 
 export const ActionListWithIcons: React.FunctionComponent = () => (
-  <ActionList isIconList>
-    <ActionListItem>
-      <Button variant="plain" id="with-icons-times-button" aria-label="times icon button">
-        <TimesIcon />
-      </Button>
-    </ActionListItem>
-    <ActionListItem>
-      <Button variant="plain" id="with-icons-check-button" aria-label="check icon button">
-        <CheckIcon />
-      </Button>
-    </ActionListItem>
-  </ActionList>
+  <>
+    <h4>With list icons wrapper</h4>
+    <ActionList isIconList>
+      <ActionListItem>
+        <Button variant="plain" id="with-icons-times-button" aria-label="times icon button">
+          <TimesIcon />
+        </Button>
+      </ActionListItem>
+      <ActionListItem>
+        <Button variant="plain" id="with-icons-check-button" aria-label="check icon button">
+          <CheckIcon />
+        </Button>
+      </ActionListItem>
+    </ActionList>
+    <br />
+    <h4>With group icons wrapper</h4>
+    <ActionList>
+      <ActionListGroup isIconGroup>
+        <ActionListItem>
+          <Button variant="plain" id="with-icons-list-times-button" aria-label="times icon button">
+            <TimesIcon />
+          </Button>
+        </ActionListItem>
+        <ActionListItem>
+          <Button variant="plain" id="with-icons-list-check-button" aria-label="check icon button">
+            <CheckIcon />
+          </Button>
+        </ActionListItem>
+      </ActionListGroup>
+      <ActionListGroup isIconGroup>
+        <ActionListItem>
+          <Button variant="plain" id="with-icons-group-times-button" aria-label="times icon button">
+            <TimesIcon />
+          </Button>
+        </ActionListItem>
+        <ActionListItem>
+          <Button variant="plain" id="with-icons-group-check-button" aria-label="check icon button">
+            <CheckIcon />
+          </Button>
+        </ActionListItem>
+      </ActionListGroup>
+    </ActionList>
+  </>
 );

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -259,7 +259,7 @@ export const CalendarMonth = ({
   const calendarToRender = (
     <div className={css(styles.calendarMonth, className)} {...props}>
       <div className={styles.calendarMonthHeader}>
-        <div className={css(styles.calendarMonthHeaderNavControl, styles.modifiers.prevMonth)}>
+        <div className={css(styles.calendarMonthHeaderNavControl, 'pf-m-prev-month')}>
           <Button
             variant="plain"
             aria-label={prevMonthAriaLabel}
@@ -334,7 +334,7 @@ export const CalendarMonth = ({
             </div>
           </InputGroupItem>
         </InputGroup>
-        <div className={css(styles.calendarMonthHeaderNavControl, styles.modifiers.nextMonth)}>
+        <div className={css(styles.calendarMonthHeaderNavControl, 'pf-m-next-month')}>
           <Button
             variant="plain"
             aria-label={nextMonthAriaLabel}

package/src/components/Divider/examples/Divider.md

@@ -10,45 +10,53 @@ propComponents: ['Divider']
 ### Using hr
 
 ```ts file='./DividerUsingHr.tsx'
+
 ```
 
 ### Using li
 
 ```ts file='./DividerUsingLi.tsx'
+
 ```
 
 ### Using div
 
 ```ts file='./DividerUsingDiv.tsx'
+
 ```
 
 ### Inset medium
 
 ```ts file='./DividerInsetMedium.tsx'
+
 ```
 
 ### Inset at various breakpoints
 
 ```ts file='./DividerInsetVariousBreakpoints.tsx'
+
 ```
 
 ### Vertical in flex layout
 
 ```ts file='./DividerVerticalFlex.tsx'
+
 ```
 
-### Vertical in flex layout, inset medium
+### Vertical in flex layout, inset small
+
+```ts file='./DividerVerticalFlexInsetSmall.tsx'
 
-```ts file='./DividerVerticalFlexInsetMedium.tsx'
 ```
 
 ### Vertical in flex layout, inset at various breakpoints
 
 ```ts file='./DividerVerticalFlexInsetVariousBreakpoints.tsx'
+
 ```
 
 ### Switch orientation at various breakpoints
 
 ```ts file='./DividerOrientationVariousBreakpoints.tsx'
-```
 
+```

package/src/components/Divider/examples/{DividerVerticalFlexInsetMedium.tsx → DividerVerticalFlexInsetSmall.tsx}

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Divider, Flex, FlexItem } from '@patternfly/react-core';
 
-export const DividerVerticalFlexInsetMedium: React.FunctionComponent = () => (
+export const DividerVerticalFlexInsetSmall: React.FunctionComponent = () => (
   <Flex>
     <FlexItem>first item</FlexItem>
     <Divider
       orientation={{
         default: 'vertical'
       }}
-      inset={{ default: 'insetMd' }}
+      inset={{ default: 'insetSm' }}
     />
     <FlexItem>second item</FlexItem>
   </Flex>

package/src/components/Menu/Menu.tsx

@@ -248,7 +248,6 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
       ouiaId,
       ouiaSafe,
       containsFlyout,
-      isNavFlyout,
       containsDrilldown,
       isMenuDrilledIn,
       isPlain,
@@ -265,6 +264,7 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
       isRootMenu,
       activeMenu,
       role,
+      isNavFlyout,
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...props
     } = this.props;
@@ -325,7 +325,7 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
             isPlain && styles.modifiers.plain,
             isScrollable && styles.modifiers.scrollable,
             containsFlyout && styles.modifiers.flyout,
-            isNavFlyout && styles.modifiers.nav,
+            isNavFlyout && 'pf-m-nav',
             containsDrilldown && styles.modifiers.drilldown,
             _isMenuDrilledIn && styles.modifiers.drilledIn,
             className

package/src/components/Menu/MenuItem.tsx

@@ -441,7 +441,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
         _isOnPath && styles.modifiers.currentPath,
         isLoadButton && styles.modifiers.load,
         isLoading && styles.modifiers.loading,
-        isFocused && styles.modifiers.focus,
+        isFocused && 'pf-m-focus',
         isDanger && styles.modifiers.danger,
         className
       )}

package/src/components/Menu/MenuItemAction.tsx

@@ -48,7 +48,7 @@ const MenuItemActionBase: React.FunctionComponent<MenuItemActionProps> = ({
             <button
               className={css(
                 styles.menuItemAction,
-                isFavorited !== null && styles.modifiers.favorite,
+                isFavorited !== null && 'pf-m-favorite',
                 isFavorited && styles.modifiers.favorited,
                 className
               )}

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

@@ -40,17 +40,6 @@ describe('Menu', () => {
     });
   });
 
-  describe('with isNavFlyout', () => {
-    test('should render Menu with nav flyout styles applied', () => {
-      render(
-        <Menu activeItemId={0} onSelect={jest.fn()} isNavFlyout>
-          content
-        </Menu>
-      );
-      expect(screen.getByText('content')).toHaveClass('pf-m-nav');
-    });
-  });
-
   describe('with hasCheckbox', () => {
     test('should render Menu with checkbox items', () => {
       render(

package/src/components/MenuToggle/MenuToggle.tsx

@@ -112,7 +112,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
       variant === 'primary' && styles.modifiers.primary,
       variant === 'secondary' && styles.modifiers.secondary,
       (isPlain || isPlainText) && styles.modifiers.plain,
-      isPlainText && styles.modifiers.text,
+      isPlainText && 'pf-m-text',
       isFullHeight && styles.modifiers.fullHeight,
       isFullWidth && styles.modifiers.fullWidth,
       isDisabled && styles.modifiers.disabled,

package/src/components/TreeView/TreeViewListItem.tsx

@@ -208,7 +208,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
             <Component
               className={css(
                 styles.treeViewNode,
-                children && (isSelectable || hasCheckbox) && styles.modifiers.selectable,
+                children && (isSelectable || hasCheckbox) && 'pf-m-selectable',
                 (!children || isSelectable) &&
                   activeItems &&
                   activeItems.length > 0 &&

package/src/components/TreeView/__tests__/TreeViewListItem.test.tsx

@@ -371,7 +371,7 @@ test(`Does not render ${styles.treeViewNode} element with additional classes by
   expect(treeViewNode).toHaveClass(styles.treeViewNode, { exact: true });
 });
 
-test(`Renders ${styles.treeViewNode} element with ${styles.modifiers.selectable} class when hasCheckbox and children are passed`, () => {
+test(`Renders ${styles.treeViewNode} element with pf-m-selectable class when hasCheckbox and children are passed`, () => {
   render(
     <TreeViewListItem hasCheckbox {...requiredProps}>
       Content
@@ -380,10 +380,10 @@ test(`Renders ${styles.treeViewNode} element with ${styles.modifiers.selectable}
 
   const treeViewNode = screen.getByRole('treeitem').querySelector(`.${styles.treeViewNode}`);
 
-  expect(treeViewNode).toHaveClass(styles.modifiers.selectable);
+  expect(treeViewNode).toHaveClass('pf-m-selectable');
 });
 
-test(`Renders ${styles.treeViewNode} element with ${styles.modifiers.selectable} class when isSelectable and children are passed`, () => {
+test(`Renders ${styles.treeViewNode} element with pf-m-selectable class when isSelectable and children are passed`, () => {
   render(
     <TreeViewListItem isSelectable {...requiredProps}>
       Content
@@ -392,15 +392,15 @@ test(`Renders ${styles.treeViewNode} element with ${styles.modifiers.selectable}
 
   const treeViewNode = screen.getByRole('treeitem').querySelector(`.${styles.treeViewNode}`);
 
-  expect(treeViewNode).toHaveClass(styles.modifiers.selectable);
+  expect(treeViewNode).toHaveClass('pf-m-selectable');
 });
 
-test(`Does not render ${styles.treeViewNode} element with ${styles.modifiers.selectable} if children are not passed`, () => {
+test(`Does not render ${styles.treeViewNode} element with pf-m-selectable if children are not passed`, () => {
   render(<TreeViewListItem hasCheckbox isSelectable {...requiredProps} />);
 
   const treeViewNode = screen.getByRole('treeitem').querySelector(`.${styles.treeViewNode}`);
 
-  expect(treeViewNode).not.toHaveClass(styles.modifiers.selectable);
+  expect(treeViewNode).not.toHaveClass('pf-m-selectable');
 });
 
 test(`Renders ${styles.treeViewNode} element with ${styles.modifiers.current} class when isSelectable and activeItems are passed`, () => {