@patternfly/react-core 4.214.2 → 4.214.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.214.2",
+  "version": "4.214.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",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.65.2",
-    "@patternfly/react-styles": "^4.64.2",
-    "@patternfly/react-tokens": "^4.66.2",
+    "@patternfly/react-icons": "^4.65.3",
+    "@patternfly/react-styles": "^4.64.3",
+    "@patternfly/react-tokens": "^4.66.3",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "ed7902dfb21796ef07d5f938c3937d55d7dda0b9"
+  "gitHead": "9f92fdb50f7df0e12fbf14f815ed10d21f9b097e"
 }

package/src/components/Banner/Banner.tsx

@@ -11,12 +11,15 @@ export interface BannerProps extends React.HTMLProps<HTMLDivElement> {
   variant?: 'default' | 'info' | 'danger' | 'success' | 'warning';
   /** If set to true, the banner sticks to the top of its container */
   isSticky?: boolean;
+  /** Text announced by screen readers to indicate the type of banner. Defaults to "${variant} banner" if this prop is not passed in */
+  screenReaderText?: string;
 }
 
 export const Banner: React.FunctionComponent<BannerProps> = ({
   children,
   className,
   variant = 'default',
+  screenReaderText,
   isSticky = false,
   ...props
 }: BannerProps) => (
@@ -30,6 +33,7 @@ export const Banner: React.FunctionComponent<BannerProps> = ({
     {...props}
   >
     {children}
+    <span className="pf-u-screen-reader">{screenReaderText || `${variant} banner`}</span>
   </div>
 );
 Banner.displayName = 'Banner';

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

@@ -5,7 +5,11 @@ import { render } from '@testing-library/react';
 ['default', 'info', 'success', 'warning', 'danger'].forEach((variant: string) => {
   test(`${variant} banner`, () => {
     const { asFragment } = render(
-      <Banner variant={variant as 'default' | 'info' | 'success' | 'warning' | 'danger'} aria-label={variant}>
+      <Banner
+        variant={variant as 'default' | 'info' | 'success' | 'warning' | 'danger'}
+        aria-label={variant}
+        screenReaderText={`${variant} banner`}
+      >
         {variant} Banner
       </Banner>
     );

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

@@ -7,6 +7,11 @@ exports[`danger banner 1`] = `
     class="pf-c-banner pf-m-danger"
   >
     danger Banner
+    <span
+      class="pf-u-screen-reader"
+    >
+      danger banner
+    </span>
   </div>
 </DocumentFragment>
 `;
@@ -18,6 +23,11 @@ exports[`default banner 1`] = `
     class="pf-c-banner"
   >
     default Banner
+    <span
+      class="pf-u-screen-reader"
+    >
+      default banner
+    </span>
   </div>
 </DocumentFragment>
 `;
@@ -29,6 +39,11 @@ exports[`info banner 1`] = `
     class="pf-c-banner pf-m-info"
   >
     info Banner
+    <span
+      class="pf-u-screen-reader"
+    >
+      info banner
+    </span>
   </div>
 </DocumentFragment>
 `;
@@ -40,6 +55,11 @@ exports[`sticky banner 1`] = `
     class="pf-c-banner pf-m-sticky"
   >
     Sticky Banner
+    <span
+      class="pf-u-screen-reader"
+    >
+      default banner
+    </span>
   </div>
 </DocumentFragment>
 `;
@@ -51,6 +71,11 @@ exports[`success banner 1`] = `
     class="pf-c-banner pf-m-success"
   >
     success Banner
+    <span
+      class="pf-u-screen-reader"
+    >
+      success banner
+    </span>
   </div>
 </DocumentFragment>
 `;
@@ -62,6 +87,11 @@ exports[`warning banner 1`] = `
     class="pf-c-banner pf-m-warning"
   >
     warning Banner
+    <span
+      class="pf-u-screen-reader"
+    >
+      warning banner
+    </span>
   </div>
 </DocumentFragment>
 `;

package/src/components/Banner/examples/BannerBasic.tsx

@@ -3,9 +3,11 @@ import { Banner } from '@patternfly/react-core';
 
 export const BannerBasic: React.FunctionComponent = () => (
   <React.Fragment>
-    <Banner>Default banner</Banner>
+    <Banner screenReaderText="This is a default Banner">Default banner</Banner>
     <br />
-    <Banner variant="info">Info banner</Banner>
+    <Banner variant="info" screenReaderText="This is an info Banner">
+      Info banner
+    </Banner>
     <br />
     <Banner variant="danger">Danger banner</Banner>
     <br />

package/src/components/Chip/Chip.tsx

@@ -38,6 +38,9 @@ export interface ChipProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
     | 'left-end'
     | 'right-start'
     | 'right-end';
+
+  /** Css property expressed in percentage or any css unit that overrides the default value of the max-width of the chip's text */
+  textMaxWidth?: string;
 }
 
 interface ChipState {
@@ -73,12 +76,20 @@ export class Chip extends React.Component<ChipProps, ChipState> {
     });
   }
 
+  setChipStyle = () => ({
+    '--pf-c-chip__text--MaxWidth': this.props.textMaxWidth
+  });
+
   renderOverflowChip = () => {
     const { children, className, onClick, ouiaId } = this.props;
     const Component = this.props.component as any;
     return (
       <Component
         onClick={onClick}
+        {...(this.props.textMaxWidth && {
+          style: this.setChipStyle(),
+          ...this.props.style
+        })}
         className={css(styles.chip, styles.modifiers.overflow, className)}
         {...(this.props.component === 'button' ? { type: 'button' } : {})}
         {...getOUIAProps('OverflowChip', ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
@@ -93,6 +104,9 @@ export class Chip extends React.Component<ChipProps, ChipState> {
     const Component = component as any;
     return (
       <Component
+        {...(this.props.textMaxWidth && {
+          style: this.setChipStyle()
+        })}
         className={css(styles.chip, className)}
         {...(this.state.isTooltipVisible && { tabIndex: 0 })}
         {...getOUIAProps(Chip.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}

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

@@ -38,4 +38,13 @@ describe('Chip', () => {
     );
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('custom max-width text', () => {
+    const { asFragment } = render(
+      <Chip className="my-chp-cls" textMaxWidth="100px">
+        4 more
+      </Chip>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -86,6 +86,50 @@ exports[`Chip closable with tooltip 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Chip custom max-width text 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-chip my-chp-cls"
+    data-ouia-component-id="OUIA-Generated-Chip-5"
+    data-ouia-component-type="PF4/Chip"
+    data-ouia-safe="true"
+    style="--pf-c-chip__text--MaxWidth: 100px;"
+  >
+    <span
+      class="pf-c-chip__text"
+      id="pf-random-id-4"
+    >
+      4 more
+    </span>
+    <button
+      aria-disabled="false"
+      aria-label="close"
+      aria-labelledby="remove_pf-random-id-4 pf-random-id-4"
+      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-4"
+      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>
+`;
+
 exports[`Chip overflow 1`] = `
 <DocumentFragment>
   <div

package/src/components/Switch/Switch.tsx

@@ -91,7 +91,13 @@ export class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaState
         />
         {label !== undefined ? (
           <React.Fragment>
-            <span className={css(styles.switchToggle)} />
+            <span className={css(styles.switchToggle)}>
+              {hasCheckIcon && (
+                <span className={css(styles.switchToggleIcon)} aria-hidden="true">
+                  <CheckIcon noVerticalAlign />
+                </span>
+              )}
+            </span>
             <span
               className={css(styles.switchLabel, styles.modifiers.on)}
               id={isAriaLabelledBy ? `${this.id}-on` : null}
@@ -99,11 +105,6 @@ export class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaState
             >
               {label}
             </span>
-            {hasCheckIcon && (
-              <div className={css(styles.switchToggleIcon)} aria-hidden="true">
-                <CheckIcon noVerticalAlign />
-              </div>
-            )}
             <span
               className={css(styles.switchLabel, styles.modifiers.off)}
               id={isAriaLabelledBy ? `${this.id}-off` : null}