@patternfly/react-core 6.0.0-alpha.5 → 6.0.0-alpha.51

package/src/components/Accordion/examples/AccordionDefinitionList.tsx

@@ -14,17 +14,16 @@ export const AccordionDefinitionList: React.FunctionComponent = () => {
 
   return (
     <Accordion asDefinitionList>
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'def-list-toggle1'}>
         <AccordionToggle
           onClick={() => {
             onToggle('def-list-toggle1');
           }}
-          isExpanded={expanded === 'def-list-toggle1'}
           id="def-list-toggle1"
         >
           Item one
         </AccordionToggle>
-        <AccordionContent id="def-list-expand1" isHidden={expanded !== 'def-list-toggle1'}>
+        <AccordionContent id="def-list-expand1">
           <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua.
@@ -32,17 +31,16 @@ export const AccordionDefinitionList: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'def-list-toggle2'}>
         <AccordionToggle
           onClick={() => {
             onToggle('def-list-toggle2');
           }}
-          isExpanded={expanded === 'def-list-toggle2'}
           id="def-list-toggle2"
         >
           Item two
         </AccordionToggle>
-        <AccordionContent id="def-list-expand2" isHidden={expanded !== 'def-list-toggle2'}>
+        <AccordionContent id="def-list-expand2">
           <p>
             Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
             ultrices, faucibus erat id, maximus nunc.
@@ -50,32 +48,30 @@ export const AccordionDefinitionList: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'def-list-toggle3'}>
         <AccordionToggle
           onClick={() => {
             onToggle('def-list-toggle3');
           }}
-          isExpanded={expanded === 'def-list-toggle3'}
           id="def-list-toggle3"
         >
           Item three
         </AccordionToggle>
-        <AccordionContent id="def-list-expand3" isHidden={expanded !== 'def-list-toggle3'}>
+        <AccordionContent id="def-list-expand3">
           <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'def-list-toggle4'}>
         <AccordionToggle
           onClick={() => {
             onToggle('def-list-toggle4');
           }}
-          isExpanded={expanded === 'def-list-toggle4'}
           id="def-list-toggle4"
         >
           Item four
         </AccordionToggle>
-        <AccordionContent id="def-list-expand4" isHidden={expanded !== 'def-list-toggle4'}>
+        <AccordionContent id="def-list-expand4">
           <p>
             Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
             sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
@@ -88,17 +84,16 @@ export const AccordionDefinitionList: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'def-list-toggle5'}>
         <AccordionToggle
           onClick={() => {
             onToggle('def-list-toggle5');
           }}
-          isExpanded={expanded === 'def-list-toggle5'}
           id="def-list-toggle5"
         >
           Item five
         </AccordionToggle>
-        <AccordionContent id="def-list-expand5" isHidden={expanded !== 'def-list-toggle5'}>
+        <AccordionContent id="def-list-expand5">
           <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
         </AccordionContent>
       </AccordionItem>

package/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx

@@ -13,62 +13,41 @@ export const AccordionFixedWithMultipleExpandBehavior: React.FunctionComponent =
 
   return (
     <Accordion asDefinitionList={false}>
-      <AccordionItem>
-        <AccordionToggle
-          onClick={() => toggle('ex2-toggle1')}
-          isExpanded={expanded.includes('ex2-toggle1')}
-          id="ex2-toggle1"
-        >
+      <AccordionItem isExpanded={expanded.includes('ex2-toggle1')}>
+        <AccordionToggle onClick={() => toggle('ex2-toggle1')} id="ex2-toggle1">
           Item one
         </AccordionToggle>
-        <AccordionContent id="ex2-expand1" isHidden={!expanded.includes('ex2-toggle1')} isFixed>
+        <AccordionContent id="ex2-expand1" isFixed>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua.
           </p>
         </AccordionContent>
       </AccordionItem>
-      <AccordionItem>
-        <AccordionToggle
-          onClick={() => toggle('ex2-toggle2')}
-          isExpanded={expanded.includes('ex2-toggle2')}
-          id="ex2-toggle2"
-        >
+      <AccordionItem isExpanded={expanded.includes('ex2-toggle2')}>
+        <AccordionToggle onClick={() => toggle('ex2-toggle2')} id="ex2-toggle2">
           Item two
         </AccordionToggle>
-        <AccordionContent id="ex2-expand2" isHidden={!expanded.includes('ex2-toggle2')} isFixed>
+        <AccordionContent id="ex2-expand2" isFixed>
           <p>
             Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
             ultrices, faucibus erat id, maximus nunc.
           </p>
         </AccordionContent>
       </AccordionItem>
-      <AccordionItem>
-        <AccordionToggle
-          onClick={() => toggle('ex2-toggle3')}
-          isExpanded={expanded.includes('ex2-toggle3')}
-          id="ex2-toggle3"
-        >
+      <AccordionItem isExpanded={expanded.includes('ex2-toggle3')}>
+        <AccordionToggle onClick={() => toggle('ex2-toggle3')} id="ex2-toggle3">
           Item three
         </AccordionToggle>
-        <AccordionContent id="ex2-expand3" isHidden={!expanded.includes('ex2-toggle3')} isFixed>
+        <AccordionContent id="ex2-expand3" isFixed>
           <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
         </AccordionContent>
       </AccordionItem>
-      <AccordionItem>
-        <AccordionToggle
-          onClick={() => toggle('ex2-toggle4')}
-          isExpanded={expanded.includes('ex2-toggle4')}
-          id="ex2-toggle4"
-        >
+      <AccordionItem isExpanded={expanded.includes('ex2-toggle4')}>
+        <AccordionToggle onClick={() => toggle('ex2-toggle4')} id="ex2-toggle4">
           Item four
         </AccordionToggle>
-        <AccordionContent
-          aria-labelledby="ex2-toggle4"
-          id="ex2-expand4"
-          isHidden={!expanded.includes('ex2-toggle4')}
-          isFixed
-        >
+        <AccordionContent aria-labelledby="ex2-toggle4" id="ex2-expand4" isFixed>
           <p>
             Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
             sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
@@ -89,15 +68,11 @@ export const AccordionFixedWithMultipleExpandBehavior: React.FunctionComponent =
           </p>
         </AccordionContent>
       </AccordionItem>
-      <AccordionItem>
-        <AccordionToggle
-          onClick={() => toggle('ex2-toggle5')}
-          isExpanded={expanded.includes('ex2-toggle5')}
-          id="ex2-toggle5"
-        >
+      <AccordionItem isExpanded={expanded.includes('ex2-toggle5')}>
+        <AccordionToggle onClick={() => toggle('ex2-toggle5')} id="ex2-toggle5">
           Item five
         </AccordionToggle>
-        <AccordionContent id="ex2-expand5" isHidden={!expanded.includes('ex2-toggle5')} isFixed>
+        <AccordionContent id="ex2-expand5" isFixed>
           <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
         </AccordionContent>
       </AccordionItem>

package/src/components/Accordion/examples/AccordionSingleExpandBehavior.tsx

@@ -14,17 +14,16 @@ export const AccordionSingleExpandBehavior: React.FunctionComponent = () => {
 
   return (
     <Accordion asDefinitionList={false}>
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'ex-toggle1'}>
         <AccordionToggle
           onClick={() => {
             onToggle('ex-toggle1');
           }}
-          isExpanded={expanded === 'ex-toggle1'}
           id="ex-toggle1"
         >
           Item one
         </AccordionToggle>
-        <AccordionContent id="ex-expand1" isHidden={expanded !== 'ex-toggle1'}>
+        <AccordionContent id="ex-expand1">
           <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua.
@@ -32,17 +31,16 @@ export const AccordionSingleExpandBehavior: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'ex-toggle2'}>
         <AccordionToggle
           onClick={() => {
             onToggle('ex-toggle2');
           }}
-          isExpanded={expanded === 'ex-toggle2'}
           id="ex-toggle2"
         >
           Item two
         </AccordionToggle>
-        <AccordionContent id="ex-expand2" isHidden={expanded !== 'ex-toggle2'}>
+        <AccordionContent id="ex-expand2">
           <p>
             Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
             ultrices, faucibus erat id, maximus nunc.
@@ -50,32 +48,30 @@ export const AccordionSingleExpandBehavior: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'ex-toggle3'}>
         <AccordionToggle
           onClick={() => {
             onToggle('ex-toggle3');
           }}
-          isExpanded={expanded === 'ex-toggle3'}
           id="ex-toggle3"
         >
           Item three
         </AccordionToggle>
-        <AccordionContent id="ex-expand3" isHidden={expanded !== 'ex-toggle3'}>
+        <AccordionContent id="ex-expand3">
           <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'ex-toggle4'}>
         <AccordionToggle
           onClick={() => {
             onToggle('ex-toggle4');
           }}
-          isExpanded={expanded === 'ex-toggle4'}
           id="ex-toggle4"
         >
           Item four
         </AccordionToggle>
-        <AccordionContent id="ex-expand4" isHidden={expanded !== 'ex-toggle4'}>
+        <AccordionContent id="ex-expand4">
           <p>
             Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
             sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
@@ -88,17 +84,16 @@ export const AccordionSingleExpandBehavior: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'ex-toggle5'}>
         <AccordionToggle
           onClick={() => {
             onToggle('ex-toggle5');
           }}
-          isExpanded={expanded === 'ex-toggle5'}
           id="ex-toggle5"
         >
           Item five
         </AccordionToggle>
-        <AccordionContent id="ex-expand5" isHidden={expanded !== 'ex-toggle5'}>
+        <AccordionContent id="ex-expand5">
           <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
         </AccordionContent>
       </AccordionItem>

package/src/components/Accordion/examples/AccordionToggleIconAtStart.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
+
+export const AccordionToggleIconAtStart: React.FunctionComponent = () => {
+  const [expanded, setExpanded] = React.useState('start-toggle-toggle2');
+
+  const onToggle = (id: string) => {
+    if (id === expanded) {
+      setExpanded('');
+    } else {
+      setExpanded(id);
+    }
+  };
+
+  return (
+    <Accordion togglePosition="start">
+      <AccordionItem isExpanded={expanded === 'start-toggle-toggle1'}>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('start-toggle-toggle1');
+          }}
+          id="start-toggle-toggle1"
+        >
+          Item one
+        </AccordionToggle>
+        <AccordionContent id="start-toggle-expand1">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem isExpanded={expanded === 'start-toggle-toggle2'}>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('start-toggle-toggle2');
+          }}
+          id="start-toggle-toggle2"
+        >
+          Item two
+        </AccordionToggle>
+        <AccordionContent id="start-toggle-expand2">
+          <p>
+            Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
+            ultrices, faucibus erat id, maximus nunc.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem isExpanded={expanded === 'start-toggle-toggle3'}>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('start-toggle-toggle3');
+          }}
+          id="start-toggle-toggle3"
+        >
+          Item three
+        </AccordionToggle>
+        <AccordionContent id="start-toggle-expand3">
+          <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem isExpanded={expanded === 'start-toggle-toggle4'}>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('start-toggle-toggle4');
+          }}
+          id="start-toggle-toggle4"
+        >
+          Item four
+        </AccordionToggle>
+        <AccordionContent id="start-toggle-expand4">
+          <p>
+            Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
+            sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+            cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis
+            tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
+            ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero
+            convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis
+            dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem isExpanded={expanded === 'start-toggle-toggle5'}>
+        <AccordionToggle
+          onClick={() => {
+            onToggle('start-toggle-toggle5');
+          }}
+          id="start-toggle-toggle5"
+        >
+          Item five
+        </AccordionToggle>
+        <AccordionContent id="start-toggle-expand5">
+          <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+};

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/__tests__/__snapshots__/ActionList.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-action-list"
+    class="pf-v6-c-action-list"
   >
     test
   </div>

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

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-action-list__group"
+    class="pf-v6-c-action-list__group"
   >
     test
   </div>

package/src/components/ActionList/__tests__/__snapshots__/ActionListItem.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-action-list__item"
+    class="pf-v6-c-action-list__item"
   >
     test
   </div>

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