@patternfly/react-core 4.236.1 → 4.236.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.236.1",
+  "version": "4.236.2",
   "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.1",
-    "@patternfly/react-styles": "^4.86.1",
-    "@patternfly/react-tokens": "^4.88.1",
+    "@patternfly/react-icons": "^4.87.2",
+    "@patternfly/react-styles": "^4.86.2",
+    "@patternfly/react-tokens": "^4.88.2",
     "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": "1e8f4121716891c90191b948a66eccf167f404ce"
+  "gitHead": "de201ab6c9fa8d24e516025f984b0b86666f484d"
 }

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/TimePicker/TimePicker.tsx

@@ -282,7 +282,7 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     ) {
       time = `${time}${new Date().getHours() > 11 ? pmSuffix : amSuffix}`;
     }
-    let scrollIndex = this.getOptions().findIndex(option => option.innerText === time);
+    let scrollIndex = this.getOptions().findIndex(option => option.textContent === time);
 
     // if we found an exact match, scroll to match and return index of match for focus
     if (scrollIndex !== -1) {
@@ -299,7 +299,7 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
         }
       }
       time = `${splitTime[0]}${delimiter}00${amPm}`;
-      scrollIndex = this.getOptions().findIndex(option => option.innerText === time);
+      scrollIndex = this.getOptions().findIndex(option => option.textContent === time);
       if (scrollIndex !== -1) {
         this.scrollToIndex(scrollIndex);
       }