feat(NotificationDrawer): add no offset prop

patternfly · Jul 30, 2024 · 8b2e38d · 8b2e38d
1 parent 30e3c03
commit 8b2e38d
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerListItemHeader.tsx b/packages/react-core/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>
   );
 };

diff --git a/...ore/src/components/NotificationDrawer/__tests__/NotificationDrawerListItemHeader.test.tsx b/...ore/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);
+  });
 });