@patternfly/react-core 4.273.2 → 4.274.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.273.2",
+  "version": "4.274.0",
   "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",
@@ -45,16 +45,16 @@
     "subpaths": "node scripts/copySubpaths.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.93.4",
-    "@patternfly/react-styles": "^4.92.4",
-    "@patternfly/react-tokens": "^4.94.4",
+    "@patternfly/react-icons": "^4.93.5",
+    "@patternfly/react-styles": "^4.92.5",
+    "@patternfly/react-tokens": "^4.94.5",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.224.0",
+    "@patternfly/patternfly": "4.224.1",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^3.0.0",
@@ -71,5 +71,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "f4d6511036d4a2a16d2ddae15a23fa80188dfc22"
+  "gitHead": "be07a04be01d28b6c3bc0805cd4b5eeb1a774809"
 }

package/src/components/Chip/Chip.tsx

@@ -83,7 +83,7 @@ export class Chip extends React.Component<ChipProps, ChipState> {
   });
 
   renderOverflowChip = () => {
-    const { children, className, onClick, ouiaId } = this.props;
+    const { children, className, onClick, ouiaId, ...props } = this.props;
     const Component = this.props.component as any;
     return (
       <Component
@@ -95,6 +95,7 @@ export class Chip extends React.Component<ChipProps, ChipState> {
         className={css(styles.chip, styles.modifiers.overflow, className)}
         {...(this.props.component === 'button' ? { type: 'button' } : {})}
         {...getOUIAProps('OverflowChip', ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
+        {...props}
       >
         <span className={css(styles.chipText)}>{children}</span>
       </Component>
@@ -102,7 +103,7 @@ export class Chip extends React.Component<ChipProps, ChipState> {
   };
 
   renderInnerChip(id: string) {
-    const { children, className, onClick, closeBtnAriaLabel, isReadOnly, component, ouiaId } = this.props;
+    const { children, className, onClick, closeBtnAriaLabel, isReadOnly, component, ouiaId, ...props } = this.props;
     const Component = component as any;
     return (
       <Component
@@ -112,6 +113,7 @@ export class Chip extends React.Component<ChipProps, ChipState> {
         className={css(styles.chip, className)}
         {...(this.state.isTooltipVisible && { tabIndex: 0 })}
         {...getOUIAProps(Chip.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
+        {...props}
       >
         <span ref={this.span} className={css(styles.chipText)} id={id}>
           {children}

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

@@ -47,4 +47,13 @@ describe('Chip', () => {
     );
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test("with role='gridcell'", () => {
+    const { asFragment } = render(
+      <Chip className="my-chp-cls" role="gridcell">
+        I'm a roled chip
+      </Chip>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -7,6 +7,8 @@ exports[`Chip closable 1`] = `
     data-ouia-component-id="OUIA-Generated-Chip-2"
     data-ouia-component-type="PF4/Chip"
     data-ouia-safe="true"
+    id="chip_one"
+    tooltipposition="top"
   >
     <span
       class="pf-c-chip__text"
@@ -50,6 +52,8 @@ exports[`Chip closable with tooltip 1`] = `
     data-ouia-component-id="OUIA-Generated-Chip-3"
     data-ouia-component-type="PF4/Chip"
     data-ouia-safe="true"
+    id="chip_one"
+    tooltipposition="top"
   >
     <span
       class="pf-c-chip__text"
@@ -94,6 +98,8 @@ exports[`Chip custom max-width text 1`] = `
     data-ouia-component-type="PF4/Chip"
     data-ouia-safe="true"
     style="--pf-c-chip__text--MaxWidth: 100px;"
+    textmaxwidth="100px"
+    tooltipposition="top"
   >
     <span
       class="pf-c-chip__text"
@@ -134,9 +140,12 @@ exports[`Chip overflow 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-chip pf-m-overflow my-chp-cls"
+    closebtnarialabel="close"
+    component="div"
     data-ouia-component-id="OUIA-Generated-Chip-1"
     data-ouia-component-type="PF4/OverflowChip"
     data-ouia-safe="true"
+    tooltipposition="top"
   >
     <span
       class="pf-c-chip__text"
@@ -154,6 +163,7 @@ exports[`Chip readonly 1`] = `
     data-ouia-component-id="OUIA-Generated-Chip-4"
     data-ouia-component-type="PF4/Chip"
     data-ouia-safe="true"
+    tooltipposition="top"
   >
     <span
       class="pf-c-chip__text"
@@ -164,3 +174,48 @@ exports[`Chip readonly 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Chip with role='gridcell' 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-chip my-chp-cls"
+    data-ouia-component-id="OUIA-Generated-Chip-6"
+    data-ouia-component-type="PF4/Chip"
+    data-ouia-safe="true"
+    role="gridcell"
+    tooltipposition="top"
+  >
+    <span
+      class="pf-c-chip__text"
+      id="pf-random-id-5"
+    >
+      I'm a roled chip
+    </span>
+    <button
+      aria-disabled="false"
+      aria-label="close"
+      aria-labelledby="remove_pf-random-id-5 pf-random-id-5"
+      class="pf-c-button pf-m-plain"
+      data-ouia-component-id="close"
+      data-ouia-component-type="PF4/Button"
+      data-ouia-safe="true"
+      id="remove_pf-random-id-5"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 352 512"
+        width="1em"
+      >
+        <path
+          d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+        />
+      </svg>
+    </button>
+  </div>
+</DocumentFragment>
+`;

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

@@ -25,6 +25,7 @@ exports[`ChipGroup chip group default 1`] = `
             data-ouia-component-id="OUIA-Generated-Chip-1"
             data-ouia-component-type="PF4/Chip"
             data-ouia-safe="true"
+            tooltipposition="top"
           >
             <span
               class="pf-c-chip__text"
@@ -96,6 +97,7 @@ exports[`ChipGroup chip group with category 1`] = `
             data-ouia-component-id="OUIA-Generated-Chip-2"
             data-ouia-component-type="PF4/Chip"
             data-ouia-safe="true"
+            tooltipposition="top"
           >
             <span
               class="pf-c-chip__text"
@@ -167,6 +169,7 @@ exports[`ChipGroup chip group with category and tooltip 1`] = `
             data-ouia-component-id="OUIA-Generated-Chip-9"
             data-ouia-component-type="PF4/Chip"
             data-ouia-safe="true"
+            tooltipposition="top"
           >
             <span
               class="pf-c-chip__text"
@@ -238,6 +241,7 @@ exports[`ChipGroup chip group with closable category 1`] = `
             data-ouia-component-id="OUIA-Generated-Chip-3"
             data-ouia-component-type="PF4/Chip"
             data-ouia-safe="true"
+            tooltipposition="top"
           >
             <span
               class="pf-c-chip__text"

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

@@ -13,84 +13,119 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 
 ## Examples
 
-### Basic
+### Basic modals
+
+Basic modals give users the option to either confirm or cancel an action. To flag an open modal, use the `isOpen` property. To execute a callback when a modal is closed, use the `onClose` property.
 
 ```ts file="./ModalBasic.tsx"
 ```
 
-### With description
+### Scrollable modals
+
+To enable keyboard-accessible scrolling of a modal’s content, pass `tabIndex={0}` to the `<Modal>`.
+
+```ts file="ModalWithOverflowingContent.tsx"
+```
+
+### With a static description
+
+To provide additional information about a modal, use the `description` property. Descriptions are static and do not scroll with other modal content.
 
 ```ts file="./ModalWithDescription.tsx"
 ```
 
 ### Top aligned
 
+To override a modal's default center alignment, use the `position` property. In this example, `position` is set to "top", which moves the modal to the top of the screen.
+
 ```ts file="./ModalTopAligned.tsx"
 ```
 
-### Small
+### Small modal
+
+To adjust the size of a modal, use the `variant` property. Modal variants include "small", "medium", "large", and "default". 
+
+The following example displays a "small" modal by passing in `variant={ModalVariant.small}`.
 
 ```ts file="./ModalSmall.tsx"
 ```
 
-### Medium
+### Medium modal
+
+The following example displays a "medium" modal by passing in `variant={ModalVariant.medium}`.
 
 ```ts file="./ModalMedium.tsx"
 ```
 
-### Large
+### Large modal
+
+The following example displays a "large" modal by passing in `variant={ModalVariant.large}`.
 
 ```ts file="./ModalLarge.tsx"
 ```
 
 ### Custom width
 
+To choose a specific width for a modal, use the `width` property. The following example has a `width` of "50%".
+
 ```ts file="./ModalCustomWidth.tsx"
 ```
 
 ### Custom header and footer
 
+To add a custom header and footer to a modal, set the `header` and `footer` properties to a custom implementation. The following example passes title components into both the header and the footer and also passes an icon to the footer.
+
 ```ts file="./ModalCustomHeaderFooter.tsx"
 ```
 
 ### No header or footer
 
+To exclusively present information in a modal, remove the `header` and/or `footer`.
+
 ```ts file="./ModalNoHeaderFooter.tsx"
 ```
 
 ### Title icon
 
+To add an icon before a modal’s title, use the `titleIconVariant`, which can be set to one of the predefined variants -- "success", "danger", "warning", "info", and "default" -- or to an imported custom icon. The following example uses a "warning" variant.
+
 ```ts file="./ModalTitleIcon.tsx"
 ```
 
 ### Custom title icon
 
+To add a custom icon before a modal’s title, set `titleIconVariant` to an imported custom icon. The following example imports and uses a bullhorn icon.
+
 ```ts file="./ModalCustomTitleIcon.tsx"
 ```
 
 ### With wizard
 
+To guide users through a series of steps in a modal, you can add a [wizard](/components/wizard) to a modal. To configure the `<Wizard>`, pass an array that contains a “name” and “component” value for each step into the `steps` property.
+
 ```ts file="./ModalWithWizard.tsx"
 ```
 
 ### With dropdown
 
+To present a menu of actions or links to a user, you can add a [dropdown](/components/dropdown) to a modal. To allow the dropdown to visually break out of the modal container, set the `menuAppendTo` property to “parent”. Handle the modal’s closing behavior by listening to the `onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the dropdown without closing the entire modal.
+
 ```ts file="./ModalWithDropdown.tsx"
 ```
 
 ### With help
 
+To help simplify and explain complex models, add a help [popover](/components/popover). Only place a help icon at the modal level if its information applies to all content in the modal. If the help popover is specific to a particular modal section, place the help icon beside that section instead.
+
 ```ts file="./ModalWithHelp.tsx"
 ```
 
 ### With form
 
-```ts file="ModalWithForm.tsx"
-```
-
-### With overflowing content
+To collect user input within a modal, you can add a [form](/components/form). 
 
-If the content that you're passing to the modal is likely to overflow the modal content area, pass `tabIndex={0}` to the modal to enable keyboard accessible scrolling.
+To submit the form from a button in the modal's footer (outside of the `<Form>`), set the button's `form` property equal to the form's id. 
 
-```ts file="ModalWithOverflowingContent.tsx"
+```ts file="ModalWithForm.tsx"
 ```
+

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

@@ -1859,6 +1859,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                   data-ouia-component-id="OUIA-Generated-Chip-1"
                   data-ouia-component-type="PF4/Chip"
                   data-ouia-safe="true"
+                  tooltipposition="top"
                 >
                   <span
                     class="pf-c-chip__text"
@@ -1901,6 +1902,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                   data-ouia-component-id="OUIA-Generated-Chip-2"
                   data-ouia-component-type="PF4/Chip"
                   data-ouia-safe="true"
+                  tooltipposition="top"
                 >
                   <span
                     class="pf-c-chip__text"

package/src/components/Text/TextList.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Content/content';
 import { css } from '@patternfly/react-styles';
 
 export enum TextListVariants {
@@ -14,18 +15,21 @@ export interface TextListProps extends React.HTMLProps<HTMLElement> {
   className?: string;
   /** The text list component */
   component?: 'ul' | 'ol' | 'dl';
+  /** Modifies the list to include plain styling */
+  isPlain?: boolean;
 }
 
 export const TextList: React.FunctionComponent<TextListProps> = ({
   children = null,
   className = '',
   component = TextListVariants.ul,
+  isPlain = false,
   ...props
 }: TextListProps) => {
   const Component: any = component;
 
   return (
-    <Component {...props} className={css(className)}>
+    <Component {...props} className={css(isPlain && styles.modifiers.plain, className)}>
       {children}
     </Component>
   );

package/src/components/Text/__tests__/TextList.test.tsx

@@ -41,6 +41,11 @@ test('Renders as "dl" element when component="dl"', () => {
   expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DL');
 });
 
+test('Renders with plain modifier class when isPlain is set to true', () => {
+  render(<TextList isPlain>Test</TextList>);
+  expect(screen.getByRole('list')).toHaveClass('pf-m-plain');
+});
+
 test('Renders with inherited element props spread to the component', () => {
   render(<TextList aria-label="Test label">Test</TextList>);
   expect(screen.getByText('Test')).toHaveAccessibleName('Test label');

package/src/components/Text/examples/Text.md

@@ -29,6 +29,11 @@ Text components such as Text, TextList, TextListItem need to be placed within a
 ```ts file="./TextOrderedList.tsx"
 ```
 
+### Plain list
+
+```ts file="./TextPlainList.tsx"
+```
+
 ### Description list
 
 ```ts file="./TextDescriptionList.tsx"

package/src/components/Text/examples/TextPlainList.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Text, TextVariants, TextContent, TextList, TextListVariants, TextListItem } from '@patternfly/react-core';
+
+export const TextPlainList: React.FunctionComponent = () => (
+  <TextContent>
+    <Text component={TextVariants.h3}>Plain unordered list</Text>
+    <TextList isPlain>
+      <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
+      <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
+      <TextListItem>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</TextListItem>
+      <TextListItem>Ut non enim metus.</TextListItem>
+    </TextList>
+    <Text component={TextVariants.h3}>Plain ordered list</Text>
+    <TextList component={TextListVariants.ol} isPlain>
+      <TextListItem>Donec blandit a lorem id convallis.</TextListItem>
+      <TextListItem>Cras gravida arcu at diam gravida gravida.</TextListItem>
+      <TextListItem>Integer in volutpat libero.</TextListItem>
+      <TextListItem>Donec a diam tellus.</TextListItem>
+      <TextListItem>Aenean nec tortor orci.</TextListItem>
+      <TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem>
+      <TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem>
+    </TextList>
+  </TextContent>
+);

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

@@ -297,6 +297,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                     data-ouia-component-id="OUIA-Generated-Chip-1"
                     data-ouia-component-type="PF4/Chip"
                     data-ouia-safe="true"
+                    tooltipposition="top"
                   >
                     <span
                       class="pf-c-chip__text"
@@ -339,6 +340,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                     data-ouia-component-id="OUIA-Generated-Chip-2"
                     data-ouia-component-type="PF4/Chip"
                     data-ouia-safe="true"
+                    tooltipposition="top"
                   >
                     <span
                       class="pf-c-chip__text"