@patternfly/react-core 6.0.0-alpha.100 → 6.0.0-alpha.102

package/src/components/Card/examples/CardClickable.tsx

@@ -4,10 +4,6 @@ import { Card, CardHeader, CardTitle, CardBody, Checkbox, Gallery } from '@patte
 export const CardClickable: React.FunctionComponent = () => {
   const [isSecondary, setIsSecondary] = React.useState<boolean>(false);
 
-  const id1 = 'clickable-card-input-1';
-  const id2 = 'clickable-card-input-2';
-  const id3 = 'clickable-card-input-3';
-
   const toggleVariant = (checked: boolean) => {
     setIsSecondary(checked);
   };
@@ -24,44 +20,38 @@ export const CardClickable: React.FunctionComponent = () => {
       />
       <div style={{ marginTop: '15px' }}>
         <Gallery hasGutter>
-          <Card id="clickable-card-example-1" isClickable variant={isSecondary ? 'secondary' : 'default'}>
+          <Card isClickable variant={isSecondary ? 'secondary' : 'default'}>
             <CardHeader
               selectableActions={{
                 // eslint-disable-next-line no-console
-                onClickAction: () => console.log(`${id1} clicked`),
-                selectableActionId: id1,
-                selectableActionAriaLabelledby: 'clickable-card-example-1',
-                name: 'clickable-card-example'
+                onClickAction: () => console.log(`First card in actionable example clicked`),
+                selectableActionAriaLabelledby: 'clickable-card-example-title-1'
               }}
             >
-              <CardTitle>First card</CardTitle>
+              <CardTitle id="clickable-card-example-title-1">First card in the actionable example</CardTitle>
             </CardHeader>
             <CardBody>This card performs an action on click.</CardBody>
           </Card>
-          <Card id="clickable-card-example-2" isClickable variant={isSecondary ? 'secondary' : 'default'}>
+          <Card isClickable variant={isSecondary ? 'secondary' : 'default'}>
             <CardHeader
               selectableActions={{
                 to: '#',
-                selectableActionId: id2,
-                selectableActionAriaLabelledby: 'clickable-card-example-2',
-                name: 'clickable-card-example'
+                selectableActionAriaLabelledby: 'clickable-card-example-title-2'
               }}
             >
-              <CardTitle>Second card</CardTitle>
+              <CardTitle id="clickable-card-example-title-2">Second card in the actionable example</CardTitle>
             </CardHeader>
             <CardBody>This card can navigate to a link on click.</CardBody>
           </Card>
-          <Card id="clickable-card-example-3" isClickable isDisabled variant={isSecondary ? 'secondary' : 'default'}>
+          <Card isClickable isDisabled variant={isSecondary ? 'secondary' : 'default'}>
             <CardHeader
               selectableActions={{
                 // eslint-disable-next-line no-console
-                onClickAction: () => console.log(`${id3} clicked`),
-                selectableActionId: id3,
-                selectableActionAriaLabelledby: 'clickable-card-example-3',
-                name: 'clickable-card-example'
+                onClickAction: () => console.log(`Third card in actionable example clicked`),
+                selectableActionAriaLabelledby: 'clickable-card-example-title-3'
               }}
             >
-              <CardTitle>Third card</CardTitle>
+              <CardTitle id="clickable-card-example-title-3">Third card in the actionable example</CardTitle>
             </CardHeader>
             <CardBody>This card is clickable but disabled.</CardBody>
           </Card>

package/src/components/Card/examples/CardClickableSelectable.tsx

@@ -61,7 +61,8 @@ export const CardClickable: React.FunctionComponent = () => {
                 selectableActionId: id1,
                 selectableActionAriaLabelledby: 'clickable-selectable-card-example-1',
                 name: id1,
-                onChange
+                onChange,
+                hasNoOffset: true
               }}
             >
               <CardTitle>
@@ -84,7 +85,8 @@ export const CardClickable: React.FunctionComponent = () => {
                 selectableActionId: id2,
                 selectableActionAriaLabelledby: 'clickable-selectable-card-example-2',
                 name: id2,
-                onChange
+                onChange,
+                hasNoOffset: true
               }}
             >
               <CardTitle>Second Card</CardTitle>
@@ -110,7 +112,8 @@ export const CardClickable: React.FunctionComponent = () => {
                 selectableActionId: id3,
                 selectableActionAriaLabelledby: 'clickable-selectable-card-example-3',
                 name: id3,
-                onChange
+                onChange,
+                hasNoOffset: true
               }}
             >
               <CardTitle>

package/src/components/Card/examples/CardSelectable.tsx

@@ -53,7 +53,8 @@ export const SelectableCard: React.FunctionComponent = () => {
                 selectableActionId: id1,
                 selectableActionAriaLabelledby: 'selectable-card-example-1',
                 name: id1,
-                onChange
+                onChange,
+                hasNoOffset: true
               }}
             >
               <CardTitle>First card</CardTitle>
@@ -71,7 +72,8 @@ export const SelectableCard: React.FunctionComponent = () => {
                 selectableActionId: id2,
                 selectableActionAriaLabelledby: 'selectable-card-example-2',
                 name: id2,
-                onChange
+                onChange,
+                hasNoOffset: true
               }}
             >
               <CardTitle>Second card</CardTitle>
@@ -90,7 +92,8 @@ export const SelectableCard: React.FunctionComponent = () => {
                 selectableActionId: id3,
                 selectableActionAriaLabelledby: 'selectable-card-example-3',
                 name: id3,
-                onChange
+                onChange,
+                hasNoOffset: true
               }}
             >
               <CardTitle>Third card</CardTitle>

package/src/components/Card/examples/CardSingleSelectable.tsx

@@ -20,7 +20,8 @@ export const SingleSelectableCard: React.FunctionComponent = () => {
             selectableActionAriaLabelledby: 'single-selectable-card-example-1',
             name: 'single-selectable-card-example',
             variant: 'single',
-            onChange
+            onChange,
+            hasNoOffset: true
           }}
         >
           <CardTitle>First card</CardTitle>
@@ -34,7 +35,8 @@ export const SingleSelectableCard: React.FunctionComponent = () => {
             selectableActionAriaLabelledby: 'single-selectable-card-example-2',
             name: 'single-selectable-card-example',
             variant: 'single',
-            onChange
+            onChange,
+            hasNoOffset: true
           }}
         >
           <CardTitle>Second card</CardTitle>
@@ -48,7 +50,8 @@ export const SingleSelectableCard: React.FunctionComponent = () => {
             selectableActionAriaLabelledby: 'single-selectable-card-example-3',
             name: 'single-selectable-card-example',
             variant: 'single',
-            onChange
+            onChange,
+            hasNoOffset: true
           }}
         >
           <CardTitle>Third card</CardTitle>

package/src/components/NotificationDrawer/NotificationDrawerListItemHeader.tsx

@@ -53,6 +53,8 @@ export interface NotificationDrawerListItemHeaderProps extends React.HTMLProps<H
     | 'right-end';
   /** Sets the heading level to use for the list item header title. Default is h2. */
   headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /** Removes the offset of the notification drawer actions. */
+  actionHasNoOffset?: boolean;
 }
 
 export const NotificationDrawerListItemHeader: React.FunctionComponent<NotificationDrawerListItemHeaderProps> = ({
@@ -65,6 +67,7 @@ export const NotificationDrawerListItemHeader: React.FunctionComponent<Notificat
   truncateTitle = 0,
   tooltipPosition,
   headingLevel: HeadingLevel = 'h2',
+  actionHasNoOffset = false,
   ...props
 }: NotificationDrawerListItemHeaderProps) => {
   const titleRef = React.useRef(null);
@@ -103,7 +106,11 @@ export const NotificationDrawerListItemHeader: React.FunctionComponent<Notificat
           Title
         )}
       </div>
-      {children && <div className={css(styles.notificationDrawerListItemAction)}>{children}</div>}
+      {children && (
+        <div className={css(styles.notificationDrawerListItemAction, actionHasNoOffset && styles.modifiers.noOffset)}>
+          {children}
+        </div>
+      )}
     </React.Fragment>
   );
 };

package/src/components/NotificationDrawer/__tests__/NotificationDrawerListItemHeader.test.tsx

@@ -5,6 +5,7 @@ import '@testing-library/jest-dom';
 
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import { NotificationDrawerListItemHeader } from '../NotificationDrawerListItemHeader';
+import styles from '@patternfly/react-styles/css/components/NotificationDrawer/notification-drawer';
 
 describe('NotificationDrawerListItemHeader', () => {
   test('renders with PatternFly Core styles', () => {
@@ -48,4 +49,27 @@ describe('NotificationDrawerListItemHeader', () => {
 
     expect(screen.getByText('Pod quit unexpectedly')).toHaveClass('pf-m-truncate');
   });
+
+  test(`renders with ${styles.modifiers.noOffset} if actionHasNoOffset={true} is passed`, () => {
+    render(
+      <NotificationDrawerListItemHeader title="Pod quit unexpectedly" actionHasNoOffset>
+        test
+      </NotificationDrawerListItemHeader>
+    );
+    expect(screen.getByText('test')).toHaveClass(styles.modifiers.noOffset);
+  });
+
+  test(`does not render with ${styles.modifiers.noOffset} if actionHasNoOffset={false} is passed`, () => {
+    render(
+      <NotificationDrawerListItemHeader title="Pod quit unexpectedly" actionHasNoOffset={false}>
+        test
+      </NotificationDrawerListItemHeader>
+    );
+    expect(screen.getByText('test')).not.toHaveClass(styles.modifiers.noOffset);
+  });
+
+  test(`does not render with ${styles.modifiers.noOffset} if actionHasNoOffset is not passed`, () => {
+    render(<NotificationDrawerListItemHeader title="Pod quit unexpectedly">test</NotificationDrawerListItemHeader>);
+    expect(screen.getByText('test')).not.toHaveClass(styles.modifiers.noOffset);
+  });
 });

package/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -64,9 +64,8 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               onClick={onToggle(0)}
               variant="plain"
               aria-label={`Basic example header kebab toggle`}
-            >
-              <EllipsisVIcon aria-hidden="true" />
-            </MenuToggle>
+              icon={<EllipsisVIcon aria-hidden="true" />}
+            />
           )}
         >
           <DropdownList>{dropdownItems}</DropdownList>
@@ -92,9 +91,8 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(1)}
                     variant="plain"
                     aria-label={`Basic example notification 1 kebab toggle`}
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
               >
                 <DropdownList>{dropdownItems}</DropdownList>
@@ -122,9 +120,8 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(2)}
                     variant="plain"
                     aria-label={`Basic example notification 2 kebab toggle`}
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
               >
                 <DropdownList>{dropdownItems}</DropdownList>
@@ -154,9 +151,8 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(3)}
                     variant="plain"
                     aria-label={`Basic example notification 3 kebab toggle`}
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
               >
                 <DropdownList>{dropdownItems}</DropdownList>
@@ -185,9 +181,8 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(4)}
                     variant="plain"
                     aria-label={`Basic example notification 4 kebab toggle`}
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
               >
                 <DropdownList>{dropdownItems}</DropdownList>
@@ -215,9 +210,8 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(5)}
                     variant="plain"
                     aria-label={`Basic example notification 5 kebab toggle`}
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
               >
                 <DropdownList>{dropdownItems}</DropdownList>
@@ -241,9 +235,8 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(6)}
                     variant="plain"
                     aria-label={`Basic example notification 6 kebab toggle`}
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
               >
                 <DropdownList>{dropdownItems}</DropdownList>

package/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx

@@ -89,9 +89,8 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
               onClick={() => onToggle('groups-kebab-toggle-1')}
               variant="plain"
               aria-label={`Groups example header kebab toggle`}
-            >
-              <EllipsisVIcon aria-hidden="true" />
-            </MenuToggle>
+              icon={<EllipsisVIcon aria-hidden="true" />}
+            />
           )}
         >
           <DropdownList>{dropdownItems}</DropdownList>
@@ -125,9 +124,8 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-2')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 1 kebab toggle`}
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={<EllipsisVIcon aria-hidden="true" />}
+                      />
                     )}
                   >
                     <DropdownList>{dropdownItems}</DropdownList>
@@ -156,9 +154,8 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-3')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 2 kebab toggle`}
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={<EllipsisVIcon aria-hidden="true" />}
+                      />
                     )}
                   >
                     <DropdownList>{dropdownItems}</DropdownList>
@@ -188,9 +185,8 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-4')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 3 kebab toggle`}
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={<EllipsisVIcon aria-hidden="true" />}
+                      />
                     )}
                   >
                     <DropdownList>{dropdownItems}</DropdownList>
@@ -219,9 +215,8 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-5')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 4 kebab toggle`}
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={<EllipsisVIcon aria-hidden="true" />}
+                      />
                     )}
                   >
                     <DropdownList>{dropdownItems}</DropdownList>
@@ -259,9 +254,8 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-6')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 1 kebab toggle`}
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={<EllipsisVIcon aria-hidden="true" />}
+                      />
                     )}
                   >
                     <DropdownList>{dropdownItems}</DropdownList>
@@ -290,9 +284,8 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-7')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 2 kebab toggle`}
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={<EllipsisVIcon aria-hidden="true" />}
+                      />
                     )}
                   >
                     <DropdownList>{dropdownItems}</DropdownList>
@@ -322,9 +315,8 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-8')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 3 kebab toggle`}
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={<EllipsisVIcon aria-hidden="true" />}
+                      />
                     )}
                   >
                     <DropdownList>{dropdownItems}</DropdownList>
@@ -353,9 +345,8 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-9')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 4 kebab toggle`}
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={<EllipsisVIcon aria-hidden="true" />}
+                      />
                     )}
                   >
                     <DropdownList>{dropdownItems}</DropdownList>