@patternfly/react-core 4.243.0 → 4.244.0

package/src/components/Modal/ModalContent.tsx

@@ -15,62 +15,70 @@ import { ModalBoxHeader } from './ModalBoxHeader';
 import { ModalBoxTitle, isVariantIcon } from './ModalBoxTitle';
 
 export interface ModalContentProps extends OUIAProps {
-  /** Content rendered inside the Modal. */
+  /** Action buttons to add to the standard modal footer. Ignored if the footer property
+   * is passed in.
+   */
+  actions?: any;
+  /** Id to use for the modal box descriptor. */
+  'aria-describedby'?: string;
+  /** Accessible descriptor of the modal. */
+  'aria-label'?: string;
+  /** Id to use for the modal box label. */
+  'aria-labelledby'?: string | null;
+  /** Accessible label applied to the modal box body. This should be used to communicate
+   * important information about the modal box body div element if needed, such as that it
+   * is scrollable.
+   */
+  bodyAriaLabel?: string;
+  /** Accessible role applied to the modal box body. This will default to "region" if the
+   * bodyAriaLabel property is passed in. Set to a more appropriate role as applicable
+   * based on the modal content and context.
+   */
+  bodyAriaRole?: string;
+  /** Id of the modal box container. */
+  boxId: string;
+  /** Content rendered inside the modal. */
   children: React.ReactNode;
-  /** Additional classes added to the button */
+  /** Additional classes added to the modal box. */
   className?: string;
-  /** Variant of the modal */
-  variant?: 'small' | 'medium' | 'large' | 'default';
-  /** Alternate position of the modal */
-  position?: 'top';
-  /** Offset from alternate position. Can be any valid CSS length/percentage */
-  positionOffset?: string;
-  /** Flag to show the modal */
-  isOpen?: boolean;
-  /** Complex header (more than just text), supersedes title for header content */
+  /** Description of the modal. */
+  description?: React.ReactNode;
+  /** Id of the modal box description. */
+  descriptorId: string;
+  /** Flag to disable focus trap. */
+  disableFocusTrap?: boolean;
+  /** Custom footer. */
+  footer?: React.ReactNode;
+  /** Flag indicating if modal content should be placed in a modal box body wrapper. */
+  hasNoBodyWrapper?: boolean;
+  /** Complex header (more than just text), supersedes the title property for header content. */
   header?: React.ReactNode;
-  /** Optional help section for the Modal Header */
+  /** Optional help section for the modal header. */
   help?: React.ReactNode;
-  /** Description of the modal */
-  description?: React.ReactNode;
-  /** Simple text content of the Modal Header, also used for aria-label on the body */
+  /** Flag to show the modal. */
+  isOpen?: boolean;
+  /** Id of the modal box title. */
+  labelId: string;
+  /** A callback for when the close button is clicked. */
+  onClose?: () => void;
+  /** Alternate position of the modal. */
+  position?: 'top';
+  /** Offset from alternate position. Can be any valid CSS length/percentage. */
+  positionOffset?: string;
+  /** Flag to show the close button in the header area of the modal. */
+  showClose?: boolean;
+  /** Simple text content of the modal header. Also used for the aria-label on the body. */
   title?: string;
-  /** Optional alert icon (or other) to show before the title of the Modal Header
-   * When the predefined alert types are used the default styling
-   * will be automatically applied */
+  /** Optional alert icon (or other) to show before the title of the modal header. When the
+   * predefined alert types are used the default styling will be automatically applied.
+   */
   titleIconVariant?: 'success' | 'danger' | 'warning' | 'info' | 'default' | React.ComponentType<any>;
-  /** Optional title label text for screen readers */
+  /** Optional title label text for screen readers. */
   titleLabel?: string;
-  /** Id of Modal Box label */
-  'aria-labelledby'?: string | null;
-  /** Accessible descriptor of modal */
-  'aria-label'?: string;
-  /** Id of Modal Box description */
-  'aria-describedby'?: string;
-  /** Accessible label applied to the modal box body. This should be used to communicate important information about the modal box body div if needed, such as that it is scrollable */
-  bodyAriaLabel?: string;
-  /** Accessible role applied to the modal box body. This will default to region if a body aria label is applied. Set to a more appropriate role as applicable based on the modal content and context */
-  bodyAriaRole?: string;
-  /** Flag to show the close button in the header area of the modal */
-  showClose?: boolean;
-  /** Default width of the content. */
+  /** Variant of the modal. */
+  variant?: 'small' | 'medium' | 'large' | 'default';
+  /** Default width of the modal. */
   width?: number | string;
-  /** Custom footer */
-  footer?: React.ReactNode;
-  /** Action buttons to add to the standard Modal Footer, ignored if `footer` is given */
-  actions?: any;
-  /** A callback for when the close button is clicked */
-  onClose?: () => void;
-  /** Id of the ModalBox container */
-  boxId: string;
-  /** Id of the ModalBox title */
-  labelId: string;
-  /** Id of the ModalBoxBody */
-  descriptorId: string;
-  /** Flag to disable focus trap */
-  disableFocusTrap?: boolean;
-  /** Flag indicating if modal content should be placed in a modal box body wrapper */
-  hasNoBodyWrapper?: boolean;
 }
 
 export const ModalContent: React.FunctionComponent<ModalContentProps> = ({

package/src/components/Modal/examples/Modal.md

@@ -2,7 +2,7 @@
 id: Modal
 section: components
 cssPrefix: pf-c-modal-box
-propComponents: ['Modal', 'ModalBox', 'ModalBoxBody', 'ModalBoxCloseButton', 'ModalBoxFooter', 'ModalContent']
+propComponents: ['Modal']
 ouia: true
 ---
 
@@ -94,5 +94,3 @@ If the content that you're passing to the modal is likely to overflow the modal
 
 ```ts file="ModalWithOverflowingContent.tsx"
 ```
-
-

package/src/components/NotificationBadge/NotificationBadge.tsx

@@ -12,22 +12,26 @@ export enum NotificationBadgeVariant {
 }
 
 export interface NotificationBadgeProps extends Omit<ButtonProps, 'variant'> {
-  /** @deprecated Use the variant prop instead - Adds styling to the notification badge to indicate it has been read */
-  isRead?: boolean;
-  /** Determines the variant of the notification badge */
-  variant?: NotificationBadgeVariant | 'read' | 'unread' | 'attention';
-  /** A number displayed in the badge alongside the icon */
-  count?: number;
-  /** content rendered inside the notification badge */
-  children?: React.ReactNode;
-  /** additional classes added to the notification badge */
-  className?: string;
-  /** Adds accessible text to the notification badge. */
+  /** Adds an accessible label to the notification badge. */
   'aria-label'?: string;
-  /** Icon to display for attention variant */
+  /** Icon to display for attention variant. */
   attentionIcon?: React.ReactNode;
-  /** Icon do display in notification badge */
+  /** Content rendered inside the notification badge. */
+  children?: React.ReactNode;
+  /** Additional classes added to the notification badge. */
+  className?: string;
+  /** A number displayed in the badge alongside the icon. */
+  count?: number;
+  /** Icon to display in the notification badge. */
   icon?: React.ReactNode;
+  /** Flag for applying expanded styling and setting the aria-expanded attribute on the
+   * notification badge.
+   */
+  isExpanded?: boolean;
+  /** @deprecated Use the variant prop instead - Adds styling to the notification badge to indicate it has been read. */
+  isRead?: boolean;
+  /** Determines the variant of the notification badge. */
+  variant?: NotificationBadgeVariant | 'read' | 'unread' | 'attention';
 }
 
 export const NotificationBadge: React.FunctionComponent<NotificationBadgeProps> = ({
@@ -38,6 +42,7 @@ export const NotificationBadge: React.FunctionComponent<NotificationBadgeProps>
   attentionIcon = <AttentionBellIcon />,
   icon = <BellIcon />,
   className,
+  isExpanded = false,
   ...props
 }: NotificationBadgeProps) => {
   let notificationChild = icon;
@@ -47,8 +52,10 @@ export const NotificationBadge: React.FunctionComponent<NotificationBadgeProps>
     notificationChild = attentionIcon;
   }
   return (
-    <Button variant={ButtonVariant.plain} className={className} {...props}>
-      <span className={css(styles.notificationBadge, styles.modifiers[variant])}>
+    <Button variant={ButtonVariant.plain} className={className} aria-expanded={isExpanded} {...props}>
+      <span
+        className={css(styles.notificationBadge, styles.modifiers[variant], isExpanded && styles.modifiers.expanded)}
+      >
         {notificationChild}
         {count > 0 && <span className={css(styles.notificationBadgeCount)}>{count}</span>}
       </span>

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

@@ -1,6 +1,6 @@
 import { NotificationBadge } from '../NotificationBadge';
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 Object.values([true, false]).forEach(isRead => {
   test(`${isRead} NotificationBadge`, () => {
@@ -24,3 +24,27 @@ test(`NotificationBadge count`, () => {
   const { asFragment } = render(<NotificationBadge variant="read" count={3} />);
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Renders with aria-expanded="false" when isExpanded is not passed in.', () => {
+  render(<NotificationBadge />);
+
+  expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+});
+
+test('Renders with aria-expanded="true" when isExpanded is passed in.', () => {
+  render(<NotificationBadge isExpanded />);
+
+  expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
+});
+
+test('Does not render with .pf-m-expanded when isExpanded is not passed in.', () => {
+  render(<NotificationBadge />);
+
+  expect(screen.getByRole('button').firstChild).not.toHaveClass('pf-m-expanded');
+});
+
+test('Renders with .pf-m-expanded when isExpanded is passed in.', () => {
+  render(<NotificationBadge isExpanded />);
+
+  expect(screen.getByRole('button').firstChild).toHaveClass('pf-m-expanded');
+});

package/src/components/NotificationBadge/__tests__/__snapshots__/NotificationBadge.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`NotificationBadge count 1`] = `
 <DocumentFragment>
   <button
     aria-disabled="false"
+    aria-expanded="false"
     class="pf-c-button pf-m-plain"
     data-ouia-component-id="OUIA-Generated-Button-plain-5"
     data-ouia-component-type="PF4/Button"
@@ -40,6 +41,7 @@ exports[`false NotificationBadge 1`] = `
 <DocumentFragment>
   <button
     aria-disabled="false"
+    aria-expanded="false"
     class="pf-c-button pf-m-plain"
     data-ouia-component-id="OUIA-Generated-Button-plain-2"
     data-ouia-component-type="PF4/Button"
@@ -71,6 +73,7 @@ exports[`false NotificationBadge needs attention 1`] = `
 <DocumentFragment>
   <button
     aria-disabled="false"
+    aria-expanded="false"
     class="pf-c-button pf-m-plain"
     data-ouia-component-id="OUIA-Generated-Button-plain-4"
     data-ouia-component-type="PF4/Button"
@@ -90,6 +93,7 @@ exports[`true NotificationBadge 1`] = `
 <DocumentFragment>
   <button
     aria-disabled="false"
+    aria-expanded="false"
     class="pf-c-button pf-m-plain"
     data-ouia-component-id="OUIA-Generated-Button-plain-1"
     data-ouia-component-type="PF4/Button"
@@ -121,6 +125,7 @@ exports[`true NotificationBadge needs attention 1`] = `
 <DocumentFragment>
   <button
     aria-disabled="false"
+    aria-expanded="false"
     class="pf-c-button pf-m-plain"
     data-ouia-component-id="OUIA-Generated-Button-plain-3"
     data-ouia-component-type="PF4/Button"

package/src/components/NotificationBadge/examples/NotificationBadge.md

@@ -4,15 +4,28 @@ section: components
 cssPrefix: pf-c-notification-badge
 propComponents: ['NotificationBadge']
 ---
+
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import './notificationBadge.css';
 
 ## Examples
 
 ### Basic
-```ts file='./NotificationBadgeBasic.tsx' 
+
+The following example demonstrates the three variants of notification badge that are available: "read", "unread", and "attention".
+
+The `isExpanded` property is also passed in to:
+
+- set the `aria-expanded` attribute on the notification badge,
+- apply visual styling on the notification badge, and
+- to indiciate that a notification drawer is expanded, for use-cases as seen in our [notification drawer react demos](/components/notification-drawer/react-demos).
+
+```ts file='./NotificationBadgeBasic.tsx'
 ```
 
 ### With count
-```ts file='./NotificationBadgeWithCount.tsx' 
-```
+
+You can display a number within the notification badge by passing in the `count` property, to indicate how many read, unread, or attention notifications there are. The `isExpanded` property is also passed in, similar to the [notification badge basic example](/components/notification-badge#basic).
+
+```ts file='./NotificationBadgeWithCount.tsx'
+```

package/src/components/NotificationBadge/examples/NotificationBadgeBasic.tsx

@@ -1,29 +1,42 @@
 import React from 'react';
 import { NotificationBadge, NotificationBadgeVariant } from '@patternfly/react-core';
 
-export const SimpleNotificationBadge: React.FunctionComponent = () => {
-  const [unreadVariant, setUnreadVariant] = React.useState(NotificationBadgeVariant.unread);
-  const [attentionVariant, setAttentionVariant] = React.useState(NotificationBadgeVariant.attention);
+export const NotificationBadgeBasic: React.FunctionComponent = () => {
+  const [readExpanded, setReadExpanded] = React.useState(false);
+  const [unreadExpanded, setUnreadExpanded] = React.useState(false);
+  const [attentionExpanded, setAttentionExpanded] = React.useState(false);
 
-  const onFirstClick = (value: NotificationBadgeVariant) => {
-    setUnreadVariant(value);
+  const onReadClick = () => {
+    setReadExpanded(!readExpanded);
   };
 
-  const onSecondClick = (value: NotificationBadgeVariant) => {
-    setAttentionVariant(value);
+  const onUnreadClick = () => {
+    setUnreadExpanded(!unreadExpanded);
+  };
+
+  const onAttentionClick = () => {
+    setAttentionExpanded(!attentionExpanded);
   };
 
   return (
     <div className="pf-t-dark">
       <NotificationBadge
-        variant={unreadVariant}
-        onClick={() => onFirstClick(NotificationBadgeVariant.read)}
-        aria-label="First notifications"
+        variant={NotificationBadgeVariant.read}
+        onClick={onReadClick}
+        aria-label="Basic notification badge with read variant"
+        isExpanded={readExpanded}
+      />
+      <NotificationBadge
+        variant={NotificationBadgeVariant.unread}
+        onClick={onUnreadClick}
+        aria-label="Basic notification badge with unread variant"
+        isExpanded={unreadExpanded}
       />
       <NotificationBadge
-        variant={attentionVariant}
-        onClick={() => onSecondClick(NotificationBadgeVariant.read)}
-        aria-label="Second notifications"
+        variant={NotificationBadgeVariant.attention}
+        onClick={onAttentionClick}
+        aria-label="Basic notification badge with attention variant"
+        isExpanded={attentionExpanded}
       />
     </div>
   );

package/src/components/NotificationBadge/examples/NotificationBadgeWithCount.tsx

@@ -2,34 +2,44 @@ import React from 'react';
 import { NotificationBadge, NotificationBadgeVariant } from '@patternfly/react-core';
 
 export const NotificationBadgeWithCount: React.FunctionComponent = () => {
-  const [firstVariant, setFirstVariant] = React.useState(NotificationBadgeVariant.unread);
-  const [firstVariantCount, setFirstVariantCount] = React.useState(30);
-  const [secondVariant, setSecondVariant] = React.useState(NotificationBadgeVariant.attention);
-  const [secondVariantCount, setSecondVariantCount] = React.useState(30);
+  const [readExpanded, setReadExpanded] = React.useState(false);
+  const [unreadExpanded, setUnreadExpanded] = React.useState(false);
+  const [attentionExpanded, setAttentionExpanded] = React.useState(false);
 
-  const onFirstClick = (value: NotificationBadgeVariant) => {
-    setFirstVariant(value);
-    setFirstVariantCount(10);
+  const onReadClick = () => {
+    setReadExpanded(!readExpanded);
   };
 
-  const onSecondClick = (value: NotificationBadgeVariant) => {
-    setSecondVariant(value);
-    setSecondVariantCount(10);
+  const onUnreadClick = () => {
+    setUnreadExpanded(!unreadExpanded);
+  };
+
+  const onAttentionClick = () => {
+    setAttentionExpanded(!attentionExpanded);
   };
 
   return (
     <div className="pf-t-dark">
       <NotificationBadge
-        variant={firstVariant}
-        onClick={() => onFirstClick(NotificationBadgeVariant.read)}
-        aria-label="First notifications"
-        count={firstVariantCount}
+        variant={NotificationBadgeVariant.read}
+        onClick={onReadClick}
+        aria-label="Notification badge with count and read variant"
+        isExpanded={readExpanded}
+        count={10}
+      />
+      <NotificationBadge
+        variant={NotificationBadgeVariant.unread}
+        onClick={onUnreadClick}
+        aria-label="Notification badge with count and unread variant"
+        isExpanded={unreadExpanded}
+        count={10}
       />
       <NotificationBadge
-        variant={secondVariant}
-        onClick={() => onSecondClick(NotificationBadgeVariant.read)}
-        aria-label="Second notifications"
-        count={secondVariantCount}
+        variant={NotificationBadgeVariant.attention}
+        onClick={onAttentionClick}
+        aria-label="Notification badge with count and attention variant"
+        isExpanded={attentionExpanded}
+        count={10}
       />
     </div>
   );