@patternfly/react-core 5.2.0-prerelease.20 → 5.2.0-prerelease.22

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":"5.2.0-prerelease.19","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":"5.2.0-prerelease.21","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":"5.2.0-prerelease.19","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":"5.2.0-prerelease.21","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":"5.2.0-prerelease.19","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":"5.2.0-prerelease.21","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.2.0-prerelease.20",
+  "version": "5.2.0-prerelease.22",
   "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",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "e9f0b21cbc9830a91ff55128066b977cb10876e4"
+  "gitHead": "5febe85c94de2dcadc32e92d30ef760fb2c45388"
 }

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

@@ -1,34 +1,109 @@
-import { Divider } from '../Divider';
-import { Flex, FlexItem } from '../../../layouts/Flex';
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import { Divider } from '../Divider';
+import styles from '@patternfly/react-styles/css/components/Divider/divider';
 
-test('divider using hr', () => {
-  const { asFragment } = render(<Divider />);
-  expect(asFragment()).toMatchSnapshot();
+test(`Renders with only the class name ${styles.divider} by default`, () => {
+  render(<Divider />);
+  expect(screen.getByRole('separator')).toHaveClass(styles.divider, { exact: true });
 });
 
-test('divider using li', () => {
-  const { asFragment } = render(<Divider component="li" />);
-  expect(asFragment()).toMatchSnapshot();
+test('Renders with horizontal rule by default', () => {
+  render(<Divider />);
+  expect(screen.getByRole('separator')).toContainHTML('<hr class="pf-v5-c-divider" />');
 });
 
-test('divider using div', () => {
-  const { asFragment } = render(<Divider component="div" />);
-  expect(asFragment()).toMatchSnapshot();
+test('Renders with element passed to component prop', () => {
+  render(<Divider component="li" />);
+  expect(screen.getByRole('separator')?.tagName).toBe('LI');
+});
+
+test('Test default orientation (vertical divider)', () => {
+  render(<Divider orientation={{ default: 'vertical' }} />);
+  expect(screen.getByRole('separator')).toHaveClass('pf-m-vertical');
+});
+
+test('Test sm orientation', () => {
+  render(<Divider orientation={{ sm: 'horizontal' }} />);
+  expect(screen.getByRole('separator')).toHaveClass('pf-m-horizontal-on-sm');
+});
+
+test('Test md orientation', () => {
+  render(<Divider orientation={{ md: 'vertical' }} />);
+  expect(screen.getByRole('separator')).toHaveClass('pf-m-vertical-on-md');
+});
+
+test('Test lg orientation', () => {
+  render(<Divider orientation={{ lg: 'horizontal' }} />);
+  expect(screen.getByRole('separator')).toHaveClass('pf-m-horizontal-on-lg');
 });
 
-test('vertical divider', () => {
-  const { asFragment } = render(
-    <Flex>
-      <FlexItem>first item</FlexItem>
+test('Test xl orientation', () => {
+  render(<Divider orientation={{ xl: 'vertical' }} />);
+  expect(screen.getByRole('separator')).toHaveClass('pf-m-vertical-on-xl');
+});
+
+test('Test 2xl orientation', () => {
+  render(<Divider orientation={{ '2xl': 'horizontal' }} />);
+  expect(screen.getByRole('separator')).toHaveClass('pf-m-horizontal-on-2xl');
+});
+
+test('Test default inset', () => {
+  render(<Divider inset={{ default: 'insetNone' }} />);
+  expect(screen.getByRole('separator')).toHaveClass('pf-m-inset-none');
+});
+
+test(`Test all insets`, () => {
+  const insetValues = Object.values([
+    'insetNone',
+    'insetXs',
+    'insetSm',
+    'insetMd',
+    'insetLg',
+    'insetXl',
+    'inset2xl',
+    'inset3xl'
+  ] as ['insetNone', 'insetXs', 'insetSm', 'insetMd', 'insetLg', 'insetXl', 'inset2xl', 'inset3xl']);
+  
+  insetValues.forEach((insetValue) => {
+
+    const modifiers = ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'];
+
+    const classValue = modifiers.forEach((modifier, index) => {
+      const smClass = `pf-m-inset-${modifier}-on-sm`;
+      const mdClass = `pf-m-inset-${modifier}-on-md`;
+      const lgClass = `pf-m-inset-${modifier}-on-lg`;
+      const xlClass = `pf-m-inset-${modifier}-on-xl`;
+      const xl2Class = `pf-m-inset-${modifier}-on-2xl`;
+    });
+
+    render(
       <Divider
-        orientation={{
-          default: 'vertical'
+        inset={{
+          default: insetValue,
+          sm: insetValue,
+          md: insetValue,
+          lg: insetValue,
+          xl: insetValue,
+          '2xl': insetValue
         }}
       />
-      <FlexItem>second item</FlexItem>
-    </Flex>
-  );
+    );
+  });
+  const modifiers = ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'];
+
+  const classValue = modifiers.forEach((modifier, index) => {
+    const smClass = `pf-m-inset-${modifier}-on-sm`;
+    const mdClass = `pf-m-inset-${modifier}-on-md`;
+    const lgClass = `pf-m-inset-${modifier}-on-lg`;
+    const xlClass = `pf-m-inset-${modifier}-on-xl`;
+    const xl2Class = `pf-m-inset-${modifier}-on-2xl`;
+
+    expect(screen.getAllByRole('separator')[index]).toHaveClass(smClass, mdClass, lgClass, xlClass, xl2Class);
+  });
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<Divider />);
   expect(asFragment()).toMatchSnapshot();
 });

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

@@ -1,49 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`divider using div 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-divider"
-    role="separator"
-  />
-</DocumentFragment>
-`;
-
-exports[`divider using hr 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <hr
     class="pf-v5-c-divider"
   />
 </DocumentFragment>
 `;
-
-exports[`divider using li 1`] = `
-<DocumentFragment>
-  <li
-    class="pf-v5-c-divider"
-    role="separator"
-  />
-</DocumentFragment>
-`;
-
-exports[`vertical divider 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-l-flex"
-  >
-    <div
-      class=""
-    >
-      first item
-    </div>
-    <hr
-      class="pf-v5-c-divider pf-m-vertical"
-    />
-    <div
-      class=""
-    >
-      second item
-    </div>
-  </div>
-</DocumentFragment>
-`;

package/src/components/NotificationDrawer/NotificationDrawerHeader.tsx

@@ -42,7 +42,9 @@ export const NotificationDrawerHeader: React.FunctionComponent<NotificationDrawe
       {title}
     </Text>
     {(customText !== undefined || count !== undefined) && (
-      <span className={css(styles.notificationDrawerHeaderStatus)}>{customText || `${count} ${unreadText}`}</span>
+      <span className={css(styles.notificationDrawerHeaderStatus)} aria-live="polite">
+        {customText || `${count} ${unreadText}`}
+      </span>
     )}
     {(children || onClose) && (
       <div className={css(styles.notificationDrawerHeaderAction)}>

package/src/components/NotificationDrawer/NotificationDrawerListItem.tsx

@@ -13,6 +13,8 @@ export interface NotificationDrawerListItemProps extends React.HTMLProps<HTMLLIE
   isRead?: boolean;
   /**  Callback for when a list item is clicked */
   onClick?: (event: any) => void;
+  /**  Visually hidden text that conveys the current read state of the notification list item */
+  readStateScreenReaderText?: string;
   /**  Tab index for the list item */
   tabIndex?: number;
   /**  Variant indicates the severity level */
@@ -26,6 +28,7 @@ export const NotificationDrawerListItem: React.FunctionComponent<NotificationDra
   isRead = false,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   onClick = (event: React.MouseEvent) => undefined as any,
+  readStateScreenReaderText,
   tabIndex = 0,
   variant = 'custom',
   ...props
@@ -38,6 +41,14 @@ export const NotificationDrawerListItem: React.FunctionComponent<NotificationDra
       }
     }
   };
+
+  let readStateSRText;
+  if (readStateScreenReaderText) {
+    readStateSRText = readStateScreenReaderText;
+  } else {
+    readStateSRText = isRead ? 'read' : 'unread';
+  }
+
   return (
     <li
       {...props}
@@ -52,6 +63,7 @@ export const NotificationDrawerListItem: React.FunctionComponent<NotificationDra
       onClick={(e) => onClick(e)}
       onKeyDown={onKeyDown}
     >
+      <span className="pf-v5-screen-reader">{readStateSRText}</span>
       {children}
     </li>
   );

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

@@ -21,8 +21,21 @@ describe('NotificationDrawerListItem', () => {
     expect(screen.getByRole('listitem')).toHaveClass('pf-m-hoverable');
   });
 
-  test('drawer list item with isRead applied', () => {
+  test('drawer list item with isRead applied and screen reader text is set to read', () => {
     render(<NotificationDrawerListItem isRead />);
     expect(screen.getByRole('listitem')).toHaveClass('pf-m-read');
+    expect(screen.getByRole('listitem')).toContainHTML('<span class="pf-v5-screen-reader">read</span>');
+
+  });
+
+  test('drawer list item has screen reader text set to unread by default', () => {
+    render(<NotificationDrawerListItem />);
+    expect(screen.getByRole('listitem')).toContainHTML('<span class="pf-v5-screen-reader">unread</span>');
+  });
+
+  test('drawer list item screen reader textcan be customized', () => {
+    render(<NotificationDrawerListItem readStateScreenReaderText="was read"/>);
+    expect(screen.getByRole('listitem')).toContainHTML('<span class="pf-v5-screen-reader">was read</span>');
   });
 });
+ 

package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerHeader.test.tsx.snap

@@ -15,6 +15,7 @@ exports[`NotificationDrawerHeader drawer header with count applied 1`] = `
       Notifications
     </h1>
     <span
+      aria-live="polite"
       class="pf-v5-c-notification-drawer__header-status"
     >
       2 unread
@@ -38,6 +39,7 @@ exports[`NotificationDrawerHeader drawer header with custom unread text applied
       Notifications
     </h1>
     <span
+      aria-live="polite"
       class="pf-v5-c-notification-drawer__header-status"
     >
       2 unread alerts

package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItem.test.tsx.snap

@@ -5,6 +5,12 @@ exports[`NotificationDrawerListItem renders with PatternFly Core styles 1`] = `
   <li
     class="pf-v5-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
     tabindex="0"
-  />
+  >
+    <span
+      class="pf-v5-screen-reader"
+    >
+      unread
+    </span>
+  </li>
 </DocumentFragment>
 `;

package/src/components/TextInput/TextInput.tsx

@@ -26,6 +26,13 @@ export enum TextInputReadOnlyVariant {
   plain = 'plain'
 }
 
+export interface TextInputExpandedObj {
+  /** Flag to apply expanded styling. */
+  isExpanded: boolean;
+  /** Id of the element that the text input is controlling expansion of. */
+  ariaControls: string;
+}
+
 export interface TextInputProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'>,
     OUIAProps {
@@ -33,8 +40,10 @@ export interface TextInputProps
   className?: string;
   /** Flag to show if the text input is disabled. */
   isDisabled?: boolean;
-  /** Flag to apply expanded styling */
+  /** @deprecated Flag to apply expanded styling. expandedProps should now be used instead. */
   isExpanded?: boolean;
+  /** Prop to apply expanded styling to the text input and link it to the element it is controlling. This should be used when the input controls a menu and that menu is expandable. */
+  expandedProps?: TextInputExpandedObj;
   /** Sets the input as readonly and determines the readonly styling. */
   readOnlyVariant?: 'plain' | 'default';
   /** Flag indicating whether the input is required */
@@ -182,6 +191,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
       isLeftTruncated,
       isStartTruncated,
       isExpanded,
+      expandedProps,
       readOnly,
       readOnlyVariant,
       isRequired,
@@ -193,6 +203,9 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
     } = this.props;
 
     const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
+    const ariaExpandedProps = expandedProps
+      ? { 'aria-expanded': expandedProps?.isExpanded, 'aria-controls': expandedProps?.ariaControls, role: 'combobox' }
+      : {};
 
     return (
       <span
@@ -201,7 +214,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
           readOnlyVariant && styles.modifiers.readonly,
           readOnlyVariant === 'plain' && styles.modifiers.plain,
           isDisabled && styles.modifiers.disabled,
-          isExpanded && styles.modifiers.expanded,
+          (isExpanded || expandedProps?.isExpanded) && styles.modifiers.expanded,
           customIcon && styles.modifiers.icon,
           hasStatusIcon && styles.modifiers[validated as 'success' | 'warning' | 'error'],
           className
@@ -215,6 +228,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
           type={type}
           value={this.sanitizeInputValue(value)}
           aria-invalid={props['aria-invalid'] ? props['aria-invalid'] : validated === ValidatedOptions.error}
+          {...ariaExpandedProps}
           required={isRequired}
           disabled={isDisabled}
           readOnly={!!readOnlyVariant || readOnly}

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

@@ -124,4 +124,13 @@ describe('TextInput', () => {
     render(<TextInput isLeftTruncated aria-label="start truncated text input" />);
     expect(trimLeftFn).toHaveBeenCalled();
   });
+
+  test('has aria-expanded set to true when ariaProps.isExpanded is true', () => {
+    render(<TextInput expandedProps={{isExpanded: true, ariaControls: 'test'}}  aria-label="isExpanded"/>);
+
+    const input = screen.getByLabelText('isExpanded');
+    expect(input).toHaveAttribute('aria-expanded', 'true');
+    expect(input).toHaveAttribute('role', 'combobox');
+    expect(input).toHaveAttribute('aria-controls', 'test');
+  });
 });

package/src/components/TextInput/examples/TextInput.md

@@ -3,7 +3,7 @@ id: Text input
 section: components
 subsection: forms
 cssPrefix: pf-v5-c-form-control
-propComponents: ['TextInput']
+propComponents: ['TextInput', 'TextInputExpandedObj']
 ---
 
 import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';

package/src/components/TreeView/TreeViewListItem.tsx

@@ -135,6 +135,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
         }
       }}
       {...((hasCheckbox || isSelectable) && { 'aria-labelledby': `label-${randomId}` })}
+      {...(ToggleComponent === 'button' && { type: 'button' })}
       tabIndex={-1}
     >
       <span className={css(styles.treeViewNodeToggleIcon)}>
@@ -167,7 +168,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       <>
         {isCompact && title && <span className={css(styles.treeViewNodeTitle)}>{title}</span>}
         {isSelectable ? (
-          <button tabIndex={-1} className={css(styles.treeViewNodeText)}>
+          <button tabIndex={-1} className={css(styles.treeViewNodeText)} type="button">
             {name}
           </button>
         ) : (
@@ -230,6 +231,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
               }}
               {...(hasCheckbox && { htmlFor: randomId })}
               {...((hasCheckbox || (isSelectable && children)) && { id: `label-${randomId}` })}
+              {...(Component === 'button' && { type: 'button' })}
             >
               <span className={css(styles.treeViewNodeContainer)}>
                 {children && renderToggle(randomId)}