@patternfly/react-core 4.236.0 → 4.236.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.236.0",
+  "version": "4.236.3",
   "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",
@@ -44,16 +44,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.87.0",
-    "@patternfly/react-styles": "^4.86.0",
-    "@patternfly/react-tokens": "^4.88.0",
+    "@patternfly/react-icons": "^4.87.3",
+    "@patternfly/react-styles": "^4.86.3",
+    "@patternfly/react-tokens": "^4.88.3",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.210.2",
+    "@patternfly/patternfly": "4.211.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -70,5 +70,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "a4b7c93b2fad078f13a177a886317bbb054f4922"
+  "gitHead": "07d9fc8ea68e953640e5d48c8693ec6865851bf1"
 }

package/src/components/Alert/Alert.tsx

@@ -73,6 +73,8 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
   isExpandable?: boolean;
   /** Adds accessible text to the alert Toggle */
   toggleAriaLabel?: string;
+  /** Uniquely identifies the alert */
+  id?: string;
 }
 
 export const Alert: React.FunctionComponent<AlertProps> = ({
@@ -100,6 +102,7 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
   toggleAriaLabel = `${capitalize(variant)} alert details`,
   onMouseEnter = () => {},
   onMouseLeave = () => {},
+  id,
   ...props
 }: AlertProps) => {
   const ouiaProps = useOUIAProps(Alert.displayName, ouiaId, ouiaSafe, variant);
@@ -211,6 +214,7 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
       })}
       onMouseEnter={myOnMouseEnter}
       onMouseLeave={myOnMouseLeave}
+      id={id}
       {...props}
     >
       {isExpandable && (

package/src/components/AlertGroup/AlertGroupInline.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/AlertGroup/alert-group';
 import { AlertGroupProps } from './AlertGroup';
+import { AlertProps } from '../Alert';
 
 export const AlertGroupInline: React.FunctionComponent<AlertGroupProps> = ({
   className,
@@ -18,8 +19,8 @@ export const AlertGroupInline: React.FunctionComponent<AlertGroupProps> = ({
     className={css(styles.alertGroup, className, isToast ? styles.modifiers.toast : '')}
     {...rest}
   >
-    {React.Children.toArray(children).map((Alert: React.ReactNode, index: number) => (
-      <li key={index}>{Alert}</li>
+    {React.Children.toArray(children).map((alert, index) => (
+      <li key={(alert as React.ReactElement<AlertProps>).props?.id || index}>{alert}</li>
     ))}
     {overflowMessage && (
       <li>

package/src/components/ApplicationLauncher/ApplicationLauncher.tsx

@@ -70,6 +70,7 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
     isDisabled: false,
     direction: DropdownDirection.down,
     favorites: [] as string[],
+    items: [] as React.ReactNode[],
     isOpen: false,
     position: DropdownPosition.left,
     /* eslint-disable @typescript-eslint/no-unused-vars */

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

@@ -1,8 +1,74 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Avatar } from '../Avatar';
 
-test('simple avatar', () => {
-  const { asFragment } = render(<Avatar alt="avatar" src="test.png" border="light" />);
+test('Renders simple avatar', () => {
+  render(
+    <div data-testid="avatar">
+      <Avatar alt="avatar" />
+    </div>
+  );
+  expect(screen.getByTestId('avatar').firstChild).toBeVisible();
+});
+
+test('Renders without any modifier class when border and size props are not passed', () => {
+  render(<Avatar alt="avatar" />);
+  expect(screen.getByRole('img')).toHaveClass('pf-c-avatar', { exact: true });
+});
+
+test('Renders with class name pf-m-light when "light" is passed as border prop', () => {
+  render(<Avatar alt="avatar" border="light" />);
+  expect(screen.getByRole('img')).toHaveClass('pf-m-light');
+});
+
+test('Renders with class name pf-m-dark when "dark" is passed as border prop', () => {
+  render(<Avatar alt="avatar" border="dark" />);
+  expect(screen.getByRole('img')).toHaveClass('pf-m-dark');
+});
+
+test('Renders with class name pf-m-xl when "xl" is passed as size prop', () => {
+  render(<Avatar alt="avatar" size="xl" />);
+  expect(screen.getByRole('img')).toHaveClass('pf-m-xl');
+});
+
+test('Renders with class name pf-m-lg when "lg" is passed as size prop', () => {
+  render(<Avatar alt="avatar" size="lg" />);
+  expect(screen.getByRole('img')).toHaveClass('pf-m-lg');
+});
+
+test('Renders with class name pf-m-md when "md" is passed as size prop', () => {
+  render(<Avatar alt="avatar" size="md" />);
+  expect(screen.getByRole('img')).toHaveClass('pf-m-md');
+});
+
+test('Renders with class name pf-m-sm when "sm" is passed as size prop', () => {
+  render(<Avatar alt="avatar" size="sm" />);
+  expect(screen.getByRole('img')).toHaveClass('pf-m-sm');
+});
+
+test('Renders with custom class name when className prop is passed', () => {
+  render(<Avatar alt="avatar" className="test-class" />);
+  expect(screen.getByRole('img')).toHaveClass('test-class');
+});
+
+test('Renders with passed src prop', () => {
+  render(<Avatar alt="avatar" src="test.png" />);
+  const image = screen.getByRole('img') as HTMLImageElement;
+  expect(image.src).toMatch('test.png');
+});
+
+test('Renders with passed alt prop', () => {
+  render(<Avatar alt="avatar" />);
+  expect(screen.getByRole('img')).toHaveProperty('alt', 'avatar');
+});
+
+test('Renders with passed aria-label prop', () => {
+  render(<Avatar alt="avatar" aria-label="Avatar test" />);
+  expect(screen.getByRole('img')).toHaveAccessibleName('Avatar test');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<Avatar alt="avatar" aria-label="Avatar test" src="test.png" className="test-class" />);
+
   expect(asFragment()).toMatchSnapshot();
 });

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

@@ -1,10 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`simple avatar 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <img
     alt="avatar"
-    class="pf-c-avatar pf-m-light"
+    aria-label="Avatar test"
+    class="pf-c-avatar test-class"
     src="test.png"
   />
 </DocumentFragment>

package/src/components/LabelGroup/examples/LabelGroupEditableAdd.tsx

@@ -59,7 +59,7 @@ export const LabelGroupEditableAdd: React.FunctionComponent = () => {
       {labels.map((label, index) => (
         <Label
           key={label.id}
-          id={`${label.name}-${index}`}
+          id={label.id}
           color="blue"
           onClose={() => onClose(label.id)}
           onEditCancel={prevText => onEdit(prevText, index)}

package/src/components/LabelGroup/examples/LabelGroupEditableAddDropdown.tsx

@@ -122,7 +122,7 @@ export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
         {labels.map((label, index) => (
           <Label
             key={label.id}
-            id={`${label.name}-${index}`}
+            id={label.id}
             color="blue"
             onClose={() => onClose(label.id)}
             onEditCancel={prevText => onEdit(prevText, index)}

package/src/components/LabelGroup/examples/LabelGroupEditableAddModal.tsx

@@ -20,7 +20,7 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-i
 
 export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
   const [isModalOpen, setModalOpen] = React.useState<boolean>(false);
-  const [idIndex, setIdIndex] = React.useState<number>(3);
+  const [idIndex, setIdIndex] = React.useState<number>(7);
   const [labelText, setLabelText] = React.useState<string>('');
   const [color, setColor] = React.useState<string>();
   const [icon, setIcon] = React.useState<any>();
@@ -40,8 +40,8 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
   const iconToggleRef = React.useRef<HTMLButtonElement>(null);
 
   const [labels, setLabels] = React.useState<any>([
-    { name: 'Label 1', id: 0 },
-    { name: 'Label 2', id: 1 },
+    { name: 'Label 1', id: 4 },
+    { name: 'Label 2', id: 5 },
     {
       name: 'Label 3',
       props: {
@@ -50,7 +50,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
           'aria-label': 'label editable text'
         }
       },
-      id: 2
+      id: 6
     }
   ]);
 
@@ -239,7 +239,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
         {labels.map((label: { name: string; id: string; props: any }, index: number) => (
           <Label
             key={label.id}
-            id={`${label.name}-${index}`}
+            id={label.id}
             color="blue"
             onClose={() => onClose(label.id)}
             onEditCancel={prevText => onEdit(prevText, index)}

package/src/components/Page/examples/PageCenteredSection.tsx

@@ -54,7 +54,7 @@ export const PageCenteredSection: React.FunctionComponent = () => {
     </Masthead>
   );
 
-  const sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="main-padding-sidebar" />;
+  const sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="centered-section-sidebar" />;
 
   return (
     <Page header={header} sidebar={sidebar}>

package/src/components/Tabs/OverflowTab.tsx

@@ -88,6 +88,7 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
       {...props}
     >
       <button
+        type="button"
         className={css(styles.tabsLink, isExpanded && styles.modifiers.expanded)}
         onClick={() => toggleMenu()}
         aria-label={toggleAriaLabel}

package/src/components/Tabs/TabButton.tsx

@@ -26,7 +26,12 @@ export const TabButton: React.FunctionComponent<TabButtonProps> = ({
   const Component = (props.href ? 'a' : 'button') as any;
 
   return (
-    <Component ref={parentInnerRef} {...getOUIAProps(TabButton.displayName, ouiaId, ouiaSafe)} {...props}>
+    <Component
+      {...(!props.href && { type: 'button' })}
+      ref={parentInnerRef}
+      {...getOUIAProps(TabButton.displayName, ouiaId, ouiaSafe)}
+      {...props}
+    >
       {children}
     </Component>
   );

package/src/components/Tabs/Tabs.tsx

@@ -463,6 +463,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
           )}
           {!isOverflowHorizontal && (
             <button
+              type="button"
               className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}
               aria-label={leftScrollAriaLabel}
               onClick={this.scrollLeft}
@@ -478,6 +479,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
           </ul>
           {!isOverflowHorizontal && (
             <button
+              type="button"
               className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}
               aria-label={rightScrollAriaLabel}
               onClick={this.scrollRight}

package/src/components/Tabs/__tests__/__snapshots__/OverflowTab.test.tsx.snap

@@ -17,6 +17,7 @@ exports[`Matches snapshot when expanded 1`] = `
           aria-haspopup="menu"
           class="pf-c-tabs__link pf-m-expanded"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"

package/src/components/Tabs/__tests__/__snapshots__/Tab.test.tsx.snap

@@ -14,6 +14,7 @@ exports[`should not render anything 1`] = `
       data-ouia-safe="true"
       id="pf-tab-0-"
       role="tab"
+      type="button"
     >
       <span
         class="pf-c-tabs__item-text"

package/src/components/Tabs/__tests__/__snapshots__/TabButton.test.tsx.snap

@@ -5,6 +5,7 @@ exports[`should render tab button 1`] = `
   <button
     data-ouia-component-type="PF4/TabButton"
     data-ouia-safe="true"
+    type="button"
   >
     Tab button
   </button>