@patternfly/react-core 4.235.8 → 4.236.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.235.8",
+  "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.86.8",
-    "@patternfly/react-styles": "^4.85.8",
-    "@patternfly/react-tokens": "^4.87.8",
+    "@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": "6c9b5c5d59f891999837cd42cf974865548e6b7a"
+  "gitHead": "de201ab6c9fa8d24e516025f984b0b86666f484d"
 }

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/Dropdown/__tests__/Dropdown.test.tsx

@@ -106,7 +106,7 @@ describe('Dropdown', () => {
       <Dropdown
         dropdownItems={dropdownItems}
         toggle={
-          <DropdownToggle id="Dropdown Toggle" isPrimary>
+          <DropdownToggle id="Dropdown Toggle" toggleVariant="primary">
             Dropdown
           </DropdownToggle>
         }

package/src/components/Dropdown/examples/DropdownPrimaryToggle.tsx

@@ -46,7 +46,7 @@ export const DropdownPrimaryToggle: React.FunctionComponent = () => {
     <Dropdown
       onSelect={onSelect}
       toggle={
-        <DropdownToggle id="toggle-primary" isPrimary onToggle={onToggle}>
+        <DropdownToggle id="toggle-primary" toggleVariant="primary" onToggle={onToggle}>
           Dropdown
         </DropdownToggle>
       }

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

@@ -124,7 +124,13 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
     };
 
     if (isTypeahead) {
-      return <div ref={innerRef as React.Ref<HTMLDivElement>} className={css(commonStyles)} {...componentProps} />;
+      return (
+        <div
+          ref={innerRef as React.Ref<HTMLDivElement>}
+          className={css(commonStyles, styles.modifiers.typeahead)}
+          {...componentProps}
+        />
+      );
     }
 
     if (splitButtonOptions) {

package/src/components/Page/PageSection.tsx

@@ -65,6 +65,8 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
    * This prop should also be passed in if a heading is not being used to describe the content of the page section.
    */
   'aria-label'?: string;
+  /** Sets the base component to render. Defaults to section */
+  component?: keyof JSX.IntrinsicElements;
 }
 
 const variantType = {
@@ -98,6 +100,7 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
   hasShadowBottom = false,
   hasOverflowScroll = false,
   'aria-label': ariaLabel,
+  component = 'section',
   ...props
 }: PageSectionProps) => {
   const { height, getVerticalBreakpoint } = React.useContext(PageContext);
@@ -109,8 +112,10 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
     }
   }, [hasOverflowScroll, ariaLabel]);
 
+  const Component = component as any;
+
   return (
-    <section
+    <Component
       {...props}
       className={css(
         variantType[type],
@@ -133,7 +138,7 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
     >
       {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}
       {!isWidthLimited && children}
-    </section>
+    </Component>
   );
 };
 PageSection.displayName = 'PageSection';

package/src/components/Page/__tests__/PageSection.test.tsx

@@ -128,3 +128,15 @@ test('Logs a warning in the console when an aria-label is not included with hasO
 
   expect(consoleWarning).toHaveBeenCalled();
 });
+
+test('Renders as a section by default', () => {
+  render(<PageSection>test</PageSection>);
+
+  expect(screen.getByText('test')).toHaveProperty('nodeName', 'SECTION');
+});
+
+test('Renders as other elements when a different element type is passed using the component prop', () => {
+  render(<PageSection component="main">test</PageSection>);
+
+  expect(screen.getByRole('main')).toHaveTextContent('test');
+});

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);
       }