@patternfly/react-core 5.1.0 → 5.1.1-prerelease.2

package/src/components/Popover/examples/PopoverAdvanced.tsx

@@ -28,11 +28,11 @@ export const PopoverAdvanced: React.FunctionComponent = () => {
         <span style={{ paddingRight: '10px' }}>Popover position</span>
         <select
           aria-label="Popover position"
-          onChange={event => {
+          onChange={(event) => {
             setPosition(event.target.value as PopoverPosition);
           }}
         >
-          {Object.values(PopoverPosition).map(position => (
+          {Object.values(PopoverPosition).map((position) => (
             <option key={position} value={position}>
               {position}
             </option>

package/src/components/Popover/examples/PopoverCloseUncontrolled.tsx

@@ -6,7 +6,7 @@ export const PopoverCloseUncontrolled: React.FunctionComponent = () => (
     <Popover
       aria-label="Uncontrolled popover with button in the body that can close it"
       headerContent={<div>Popover header</div>}
-      bodyContent={hide => (
+      bodyContent={(hide) => (
         <div>
           <div>
             All the content props (headerContent, bodyContent, footerContent) can take a function which the popover

package/src/components/Popover/examples/PopoverCustomFocus.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Popover, Button } from '@patternfly/react-core';
+
+export const PopoverCustomFocus: React.FunctionComponent = () => (
+  <Popover
+    elementToFocus="#popover-cancel-button"
+    showClose={false}
+    aria-label="Popover with custom focus"
+    headerContent={<div>Popover header</div>}
+    bodyContent={
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.{' '}
+        <Button
+          // Preventing default click behavior for example purposes only
+          onClick={(event: React.MouseEvent) => event.preventDefault()}
+          component="a"
+          isInline
+          variant="link"
+          href="#basic"
+        >
+          View the basic example
+        </Button>
+      </div>
+    }
+    footerContent={(hide) => (
+      <Button onClick={hide} variant="secondary" id="popover-cancel-button">
+        Cancel
+      </Button>
+    )}
+  >
+    <Button>Toggle popover with custom focus</Button>
+  </Popover>
+);

package/src/components/Popover/examples/PopoverHover.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Popover, Button } from '@patternfly/react-core';
+
+export const PopoverHover: React.FunctionComponent = () => (
+  <div style={{ margin: '50px' }}>
+    <Popover
+      triggerAction="hover"
+      aria-label="Hoverable popover"
+      headerContent={<div>Popover header</div>}
+      bodyContent={<div>This popover opens on hover.</div>}
+      footerContent="Popover footer"
+    >
+      <Button disabled>Hover to trigger popover</Button>
+    </Popover>
+  </div>
+);

package/src/components/Progress/Progress.tsx

@@ -48,7 +48,7 @@ export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'si
   helperText?: React.ReactNode;
 }
 
-export class Progress extends React.Component<ProgressProps> {
+class Progress extends React.Component<ProgressProps> {
   static displayName = 'Progress';
   static defaultProps: ProgressProps = {
     className: '',
@@ -148,3 +148,5 @@ export class Progress extends React.Component<ProgressProps> {
     );
   }
 }
+
+export { Progress };

package/src/components/Progress/examples/ProgressHelperText.tsx

@@ -11,7 +11,7 @@ export const ProgressHelperText: React.FunctionComponent = () => {
   const capitalize = (input: string) => input[0].toUpperCase() + input.substring(1);
   const formatVariantName = (variant: ProgressVariant) => (variant ? capitalize(variant) : 'Default');
 
-  const variantOptions = progressVariants.map(variant => (
+  const variantOptions = progressVariants.map((variant) => (
     <Radio
       id={`progress-helper-text-${variant}-selector`}
       label={`${formatVariantName(variant)} variant`}

package/src/components/Radio/Radio.tsx

@@ -45,7 +45,7 @@ export interface RadioProps
   ouiaSafe?: boolean;
 }
 
-export class Radio extends React.Component<RadioProps, { ouiaStateId: string }> {
+class Radio extends React.Component<RadioProps, { ouiaStateId: string }> {
   static displayName = 'Radio';
   static defaultProps: PickOptional<RadioProps> = {
     className: '',
@@ -148,3 +148,5 @@ export class Radio extends React.Component<RadioProps, { ouiaStateId: string }>
     );
   }
 }
+
+export { Radio };

package/src/components/SearchInput/AdvancedSearchMenu.tsx

@@ -191,7 +191,7 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
     });
     formGroups.push(
       <GenerateId key={'hasWords'}>
-        {randomId => (
+        {(randomId) => (
           <FormGroup label={hasWordsAttrLabel} fieldId={randomId}>
             <TextInput
               type="text"

package/src/components/SearchInput/SearchInput.tsx

@@ -398,7 +398,11 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   };
 
   if (!!expandableInput && !isExpanded) {
-    return <InputGroup {...searchInputProps}><InputGroupItem>{expandableToggle}</InputGroupItem></InputGroup>;
+    return (
+      <InputGroup {...searchInputProps}>
+        <InputGroupItem>{expandableToggle}</InputGroupItem>
+      </InputGroup>
+    );
   }
 
   if (!!onSearch || attributes.length > 0 || !!onToggleAdvancedSearch) {

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

@@ -130,6 +130,13 @@ exports[`SearchInput advanced search 1`] = `
         </button>
       </div>
     </div>
+    <div
+      class=""
+      data-popper-escaped="true"
+      data-popper-placement="bottom-start"
+      data-popper-reference-hidden="true"
+      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
+    />
   </div>
 </DocumentFragment>
 `;
@@ -270,7 +277,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
       data-popper-escaped="true"
       data-popper-placement="bottom-start"
       data-popper-reference-hidden="true"
-      style="position: absolute; top: 0px; left: 0px; transform: translate(0px, 0px); min-width: 0px; z-index: 9999;"
+      style="position: absolute; top: 0px; left: 0px; transform: translate(0px, 0px); min-width: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11);"
     >
       <div
         class="pf-v5-c-panel pf-m-raised"
@@ -599,6 +606,13 @@ exports[`SearchInput renders search input in strict mode 1`] = `
         </button>
       </div>
     </div>
+    <div
+      class=""
+      data-popper-escaped="true"
+      data-popper-placement="bottom-start"
+      data-popper-reference-hidden="true"
+      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
+    />
   </div>
 </DocumentFragment>
 `;

package/src/components/SimpleList/SimpleList.tsx

@@ -36,7 +36,7 @@ interface SimpleListContextProps {
 
 export const SimpleListContext = React.createContext<Partial<SimpleListContextProps>>({});
 
-export class SimpleList extends React.Component<SimpleListProps, SimpleListState> {
+class SimpleList extends React.Component<SimpleListProps, SimpleListState> {
   static displayName = 'SimpleList';
   state = {
     currentRef: null as React.RefObject<HTMLButtonElement> | React.RefObject<HTMLAnchorElement>
@@ -77,7 +77,7 @@ export class SimpleList extends React.Component<SimpleListProps, SimpleListState
         <div className={css(styles.simpleList, className)} {...props}>
           {isGrouped && children}
           {!isGrouped && (
-            <ul role="list" aria-label={ariaLabel}>
+            <ul className={css('pf-v5-c-simple-list__list')} role="list" aria-label={ariaLabel}>
               {children}
             </ul>
           )}
@@ -86,3 +86,5 @@ export class SimpleList extends React.Component<SimpleListProps, SimpleListState
     );
   }
 }
+
+export { SimpleList };

package/src/components/SimpleList/SimpleListGroup.tsx

@@ -27,7 +27,7 @@ export const SimpleListGroup: React.FunctionComponent<SimpleListGroupProps> = ({
     <h2 id={id} className={css(styles.simpleListTitle, titleClassName)} aria-hidden="true">
       {title}
     </h2>
-    <ul className={css(className)} role="list" aria-labelledby={id}>
+    <ul className={css('pf-v5-c-simple-list__list', className)} role="list" aria-labelledby={id}>
       {children}
     </ul>
   </section>

package/src/components/SimpleList/SimpleListItem.tsx

@@ -26,7 +26,7 @@ export interface SimpleListItemProps {
   href?: string;
 }
 
-export class SimpleListItem extends React.Component<SimpleListItemProps> {
+class SimpleListItem extends React.Component<SimpleListItemProps> {
   static displayName = 'SimpleListItem';
   ref = React.createRef<any>();
   static defaultProps: SimpleListItemProps = {
@@ -72,7 +72,7 @@ export class SimpleListItem extends React.Component<SimpleListItemProps> {
               };
 
           return (
-            <li className={css(className)} {...props}>
+            <li className={css('pf-v5-c-simple-list__item', className)} {...props}>
               <Component
                 className={css(
                   styles.simpleListItemLink,
@@ -96,3 +96,5 @@ export class SimpleListItem extends React.Component<SimpleListItemProps> {
     );
   }
 }
+
+export { SimpleListItem };

package/src/components/SimpleList/__tests__/Generated/__snapshots__/SimpleListGroup.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`SimpleListGroup should match snapshot (auto-generated) 1`] = `
     />
     <ul
       aria-labelledby="''"
-      class="''"
+      class="pf-v5-c-simple-list__list ''"
       role="list"
     >
       ReactNode

package/src/components/SimpleList/__tests__/Generated/__snapshots__/SimpleListItem.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`SimpleListItem should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <li
-    class="''"
+    class="pf-v5-c-simple-list__item ''"
   >
     <button
       class="pf-v5-c-simple-list__item-link ''"

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

@@ -7,10 +7,11 @@ exports[`SimpleList renders aria-labelled content 1`] = `
   >
     <ul
       aria-label="This is a simple list"
+      class="pf-v5-c-simple-list__list"
       role="list"
     >
       <li
-        class=""
+        class="pf-v5-c-simple-list__item"
       >
         <button
           class="pf-v5-c-simple-list__item-link"
@@ -20,7 +21,7 @@ exports[`SimpleList renders aria-labelled content 1`] = `
         </button>
       </li>
       <li
-        class=""
+        class="pf-v5-c-simple-list__item"
       >
         <button
           class="pf-v5-c-simple-list__item-link"
@@ -30,7 +31,7 @@ exports[`SimpleList renders aria-labelled content 1`] = `
         </button>
       </li>
       <li
-        class=""
+        class="pf-v5-c-simple-list__item"
       >
         <button
           class="pf-v5-c-simple-list__item-link"
@@ -50,10 +51,11 @@ exports[`SimpleList renders content 1`] = `
     class="pf-v5-c-simple-list"
   >
     <ul
+      class="pf-v5-c-simple-list__list"
       role="list"
     >
       <li
-        class=""
+        class="pf-v5-c-simple-list__item"
       >
         <button
           class="pf-v5-c-simple-list__item-link"
@@ -63,7 +65,7 @@ exports[`SimpleList renders content 1`] = `
         </button>
       </li>
       <li
-        class=""
+        class="pf-v5-c-simple-list__item"
       >
         <button
           class="pf-v5-c-simple-list__item-link"
@@ -73,7 +75,7 @@ exports[`SimpleList renders content 1`] = `
         </button>
       </li>
       <li
-        class=""
+        class="pf-v5-c-simple-list__item"
       >
         <button
           class="pf-v5-c-simple-list__item-link"
@@ -104,11 +106,11 @@ exports[`SimpleList renders grouped content 1`] = `
       </h2>
       <ul
         aria-labelledby=""
-        class=""
+        class="pf-v5-c-simple-list__list"
         role="list"
       >
         <li
-          class=""
+          class="pf-v5-c-simple-list__item"
         >
           <button
             class="pf-v5-c-simple-list__item-link"
@@ -118,7 +120,7 @@ exports[`SimpleList renders grouped content 1`] = `
           </button>
         </li>
         <li
-          class=""
+          class="pf-v5-c-simple-list__item"
         >
           <button
             class="pf-v5-c-simple-list__item-link"
@@ -128,7 +130,7 @@ exports[`SimpleList renders grouped content 1`] = `
           </button>
         </li>
         <li
-          class=""
+          class="pf-v5-c-simple-list__item"
         >
           <button
             class="pf-v5-c-simple-list__item-link"

package/src/components/Skeleton/Skeleton.tsx

@@ -48,7 +48,7 @@ export const Skeleton: React.FunctionComponent<SkeletonProps> = ({
         } as React.CSSProperties
       })}
     >
-      <span className="pf-v5-u-screen-reader">{screenreaderText}</span>
+      <span className="pf-v5-screen-reader">{screenreaderText}</span>
     </div>
   );
 };

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

@@ -6,7 +6,7 @@ exports[`skeleton circle skeleton 1`] = `
     class="pf-v5-c-skeleton pf-m-circle"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -18,7 +18,7 @@ exports[`skeleton default 1`] = `
     class="pf-v5-c-skeleton"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -30,7 +30,7 @@ exports[`skeleton skeleton with 2xl font size 1`] = `
     class="pf-v5-c-skeleton pf-m-text-2xl"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -42,7 +42,7 @@ exports[`skeleton skeleton with 3xl font size 1`] = `
     class="pf-v5-c-skeleton pf-m-text-3xl"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -54,7 +54,7 @@ exports[`skeleton skeleton with 4xl font size 1`] = `
     class="pf-v5-c-skeleton pf-m-text-4xl"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -67,7 +67,7 @@ exports[`skeleton skeleton with 25% height 1`] = `
     style="--pf-v5-c-skeleton--Height: 25%;"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -80,7 +80,7 @@ exports[`skeleton skeleton with 25% width 1`] = `
     style="--pf-v5-c-skeleton--Width: 25%;"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -93,7 +93,7 @@ exports[`skeleton skeleton with 33% height 1`] = `
     style="--pf-v5-c-skeleton--Height: 33%;"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -106,7 +106,7 @@ exports[`skeleton skeleton with 33% width 1`] = `
     style="--pf-v5-c-skeleton--Width: 33%;"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -119,7 +119,7 @@ exports[`skeleton skeleton with 50% height 1`] = `
     style="--pf-v5-c-skeleton--Height: 50%;"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -132,7 +132,7 @@ exports[`skeleton skeleton with 50% width 1`] = `
     style="--pf-v5-c-skeleton--Width: 50%;"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -145,7 +145,7 @@ exports[`skeleton skeleton with 66% height 1`] = `
     style="--pf-v5-c-skeleton--Height: 66%;"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -158,7 +158,7 @@ exports[`skeleton skeleton with 66% width 1`] = `
     style="--pf-v5-c-skeleton--Width: 66%;"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -171,7 +171,7 @@ exports[`skeleton skeleton with 75% height 1`] = `
     style="--pf-v5-c-skeleton--Height: 75%;"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -184,7 +184,7 @@ exports[`skeleton skeleton with 75% width 1`] = `
     style="--pf-v5-c-skeleton--Width: 75%;"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -197,7 +197,7 @@ exports[`skeleton skeleton with 100% height 1`] = `
     style="--pf-v5-c-skeleton--Height: 100%;"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -209,7 +209,7 @@ exports[`skeleton skeleton with lg font size 1`] = `
     class="pf-v5-c-skeleton pf-m-text-lg"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -221,7 +221,7 @@ exports[`skeleton skeleton with md font size 1`] = `
     class="pf-v5-c-skeleton pf-m-text-md"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -233,7 +233,7 @@ exports[`skeleton skeleton with sm font size 1`] = `
     class="pf-v5-c-skeleton pf-m-text-sm"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -245,7 +245,7 @@ exports[`skeleton skeleton with xl font size 1`] = `
     class="pf-v5-c-skeleton pf-m-text-xl"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>
@@ -257,7 +257,7 @@ exports[`skeleton square skeleton 1`] = `
     class="pf-v5-c-skeleton pf-m-square"
   >
     <span
-      class="pf-v5-u-screen-reader"
+      class="pf-v5-screen-reader"
     />
   </div>
 </DocumentFragment>

package/src/components/Slider/Slider.tsx

@@ -423,9 +423,6 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
             {buildSteps()}
           </div>
         )}
-        {isInputVisible && inputPosition === 'aboveThumb' && (
-          <div className={css(styles.sliderValue, styles.modifiers.floating)}>{displayInput()}</div>
-        )}
         {hasTooltipOverThumb ? (
           <Tooltip triggerRef={thumbRef} entryDelay={0} content={findAriaTextValue()}>
             {thumbComponent}
@@ -433,6 +430,9 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
         ) : (
           thumbComponent
         )}
+        {isInputVisible && inputPosition === 'aboveThumb' && (
+          <div className={css(styles.sliderValue, styles.modifiers.floating)}>{displayInput()}</div>
+        )}
       </div>
       {isInputVisible && inputPosition === 'right' && <div className={css(styles.sliderValue)}>{displayInput()}</div>}
       {rightActions && <div className={css(styles.sliderActions)}>{rightActions}</div>}

package/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap

@@ -492,6 +492,17 @@ exports[`slider renders slider with input above thumb 1`] = `
           </div>
         </div>
       </div>
+      <div
+        aria-disabled="false"
+        aria-label="Value"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="50"
+        aria-valuetext="50"
+        class="pf-v5-c-slider__thumb"
+        role="slider"
+        tabindex="0"
+      />
       <div
         class="pf-v5-c-slider__value pf-m-floating"
       >
@@ -526,17 +537,6 @@ exports[`slider renders slider with input above thumb 1`] = `
           </div>
         </div>
       </div>
-      <div
-        aria-disabled="false"
-        aria-label="Value"
-        aria-valuemax="100"
-        aria-valuemin="0"
-        aria-valuenow="50"
-        aria-valuetext="50"
-        class="pf-v5-c-slider__thumb"
-        role="slider"
-        tabindex="0"
-      />
     </div>
   </div>
 </DocumentFragment>

package/src/components/Switch/Switch.tsx

@@ -40,7 +40,7 @@ export interface SwitchProps
   ouiaSafe?: boolean;
 }
 
-export class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaStateId: string }> {
+class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaStateId: string }> {
   static displayName = 'Switch';
   id: string;
 
@@ -94,7 +94,7 @@ export class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaState
           id={this.id}
           className={css(styles.switchInput)}
           type="checkbox"
-          onChange={event => onChange(event, event.target.checked)}
+          onChange={(event) => onChange(event, event.target.checked)}
           {...(defaultChecked !== undefined ? { defaultChecked } : { checked: isChecked })}
           disabled={isDisabled}
           aria-labelledby={!isAriaLabelledBy ? null : `${this.id}-${isChecked !== true ? 'off' : 'on'}`}
@@ -135,3 +135,5 @@ export class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaState
     );
   }
 }
+
+export { Switch };

package/src/components/Tabs/Tab.tsx

@@ -75,9 +75,8 @@ const TabBase: React.FunctionComponent<TabProps> = ({
     }),
     {}
   );
-  const { mountOnEnter, localActiveKey, unmountOnExit, uniqueId, handleTabClick, handleTabClose } = React.useContext(
-    TabsContext
-  );
+  const { mountOnEnter, localActiveKey, unmountOnExit, uniqueId, handleTabClick, handleTabClose } =
+    React.useContext(TabsContext);
   let ariaControls = tabContentId ? `${tabContentId}` : `pf-tab-section-${eventKey}-${childId || uniqueId}`;
   if ((mountOnEnter || unmountOnExit) && eventKey !== localActiveKey) {
     ariaControls = undefined;