@patternfly/react-core 6.3.0-prerelease.8 → 6.3.0

package/src/components/SearchInput/SearchInput.tsx

@@ -14,6 +14,7 @@ import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities } from '../
 import { InputGroup, InputGroupItem } from '../InputGroup';
 import { Popper } from '../../helpers';
 import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
+import inputGroupStyles from '@patternfly/react-styles/css/components/InputGroup/input-group';
 
 /** Properties for adding search attributes to an advanced search input. These properties must
  * be passed in as an object within an array to the search input component's attribute property.
@@ -41,6 +42,8 @@ export interface SearchInputExpandable {
   onToggleExpand: (event: React.SyntheticEvent<HTMLButtonElement>, isExpanded: boolean) => void;
   /** An accessible label for the expandable search input toggle. */
   toggleAriaLabel: string;
+  /** Flag indicating animations should be enabled when the search input expands and collapses. Note: this will change the component's DOM structure. In a future breaking change release, this will become the default behavior and will no longer be needed. */
+  hasAnimations?: boolean;
 }
 
 /** The main search input component. */
@@ -118,6 +121,8 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   /** The number of search results returned. Either a total number of results,
    * or a string representing the current result over the total number of results. i.e. "1 / 5". */
   resultsCount?: number | string;
+  /** Screenreader text that will appear after resultsCount to give context for what that value represents to assistive technologies. */
+  resultsCountContext?: string;
   /** Label for the button which calls the onSearch event handler. */
   submitSearchButtonLabel?: string;
   /** Value of the search input. */
@@ -144,6 +149,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   onToggleAdvancedSearch,
   isAdvancedSearchOpen = false,
   resultsCount,
+  resultsCountContext = ' results',
   onNextClick,
   onPreviousClick,
   innerRef,
@@ -174,7 +180,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   const popperRef = useRef(null);
   const [focusAfterExpandChange, setFocusAfterExpandChange] = useState(false);
 
-  const { isExpanded, onToggleExpand, toggleAriaLabel } = expandableInput || {};
+  const { isExpanded, onToggleExpand, toggleAriaLabel, hasAnimations } = expandableInput || {};
 
   useEffect(() => {
     // this effect and the focusAfterExpandChange variable are needed to focus the input/toggle as needed when the
@@ -184,9 +190,13 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
     } else if (isExpanded) {
       searchInputInputRef?.current?.focus();
     } else {
-      searchInputExpandableToggleRef?.current?.focus();
+      if (!hasAnimations) {
+        searchInputExpandableToggleRef?.current?.focus();
+      }
+    }
+    if (!hasAnimations) {
+      setFocusAfterExpandChange(false);
     }
-    setFocusAfterExpandChange(false);
   }, [focusAfterExpandChange, isExpanded, searchInputInputRef, searchInputExpandableToggleRef]);
 
   useEffect(() => {
@@ -309,7 +319,11 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
       />
       {(renderUtilities || areUtilitiesDisplayed) && (
         <TextInputGroupUtilities>
-          {resultsCount && <Badge isRead>{resultsCount}</Badge>}
+          {resultsCount && (
+            <Badge isRead screenReaderText={resultsCountContext}>
+              {resultsCount}
+            </Badge>
+          )}
           {!!onNextClick && !!onPreviousClick && (
             <div className={textInputGroupStyles.textInputGroupGroup}>
               <Button
@@ -342,7 +356,28 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
     </TextInputGroup>
   );
 
-  const expandableToggle = (
+  const expandToggleButton = (
+    <Button
+      variant={ButtonVariant.plain}
+      aria-label={toggleAriaLabel}
+      aria-expanded={isExpanded}
+      icon={<SearchIcon />}
+      onClick={onExpandHandler}
+      ref={searchInputExpandableToggleRef}
+    />
+  );
+
+  const collapseToggleButton = (
+    <Button
+      variant={ButtonVariant.plain}
+      aria-label={toggleAriaLabel}
+      aria-expanded={isExpanded}
+      icon={<TimesIcon />}
+      onClick={onExpandHandler}
+    />
+  );
+
+  const singleButtonToggle = (
     <Button
       variant={ButtonVariant.plain}
       aria-label={toggleAriaLabel}
@@ -353,10 +388,48 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
     />
   );
 
-  const buildExpandableSearchInput = ({ ...searchInputProps } = {}) => (
+  const onTransitionEnd = () => {
+    !isExpanded && focusAfterExpandChange && searchInputExpandableToggleRef?.current?.focus();
+    setFocusAfterExpandChange(false);
+  };
+
+  const expandableToggle = (
+    <>
+      {!hasAnimations && <InputGroupItem isPlain>{singleButtonToggle}</InputGroupItem>}
+      {hasAnimations && (
+        <>
+          <InputGroupItem
+            className={inputGroupStyles.modifiers.searchExpand}
+            isPlain
+            onTransitionEnd={onTransitionEnd}
+            {...(isExpanded && { inert: '' })}
+          >
+            {expandToggleButton}
+          </InputGroupItem>
+          <InputGroupItem
+            className={inputGroupStyles.modifiers.searchAction}
+            isPlain
+            {...(!isExpanded && { inert: '' })}
+          >
+            {collapseToggleButton}
+          </InputGroupItem>
+        </>
+      )}
+    </>
+  );
+
+  const buildExpandableSearchInput = ({ ...searchInputProps }: any = {}) => (
     <InputGroup {...searchInputProps}>
-      <InputGroupItem isFill>{buildTextInputGroup()} </InputGroupItem>
-      <InputGroupItem isPlain>{expandableToggle}</InputGroupItem>
+      <InputGroupItem
+        {...(!hasAnimations && { isFill: true })}
+        {...(hasAnimations && { className: inputGroupStyles.modifiers.searchInput })}
+        {...(!isExpanded && {
+          inert: ''
+        })}
+      >
+        {buildTextInputGroup()}
+      </InputGroupItem>
+      {expandableToggle}
     </InputGroup>
   );
 
@@ -370,9 +443,19 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
 
   const buildSearchTextInputGroupWithExtraButtons = ({ ...searchInputProps } = {}) => (
     <InputGroup ref={triggerRef} {...searchInputProps}>
-      <InputGroupItem isFill>{buildTextInputGroup()}</InputGroupItem>
+      <InputGroupItem
+        {...(!hasAnimations && { isFill: true })}
+        {...(expandableInput && hasAnimations && { className: inputGroupStyles.modifiers.searchInput })}
+        {...(expandableInput &&
+          hasAnimations &&
+          !isExpanded && {
+            inert: ''
+          })}
+      >
+        {buildTextInputGroup()}
+      </InputGroupItem>
       {(attributes.length > 0 || onToggleAdvancedSearch) && (
-        <InputGroupItem isPlain>
+        <InputGroupItem isPlain {...(hasAnimations && { className: inputGroupStyles.modifiers.searchAction })}>
           <Button
             className={isSearchMenuOpen && 'pf-m-expanded'}
             variant={ButtonVariant.control}
@@ -385,7 +468,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         </InputGroupItem>
       )}
       {!!onSearch && (
-        <InputGroupItem>
+        <InputGroupItem {...(hasAnimations && { className: inputGroupStyles.modifiers.searchAction })}>
           <Button
             type="submit"
             variant={ButtonVariant.control}
@@ -406,11 +489,15 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
 
   const searchInputProps = {
     ...props,
-    className: className && css(className),
+    className: css(
+      expandableInput && hasAnimations && inputGroupStyles.modifiers.searchExpandable,
+      expandableInput && hasAnimations && isExpanded && inputGroupStyles.modifiers.expanded,
+      className && css(className)
+    ),
     innerRef: searchInputRef
   };
 
-  if (!!expandableInput && !isExpanded) {
+  if (!!expandableInput && !isExpanded && !hasAnimations) {
     return (
       <InputGroup {...searchInputProps}>
         <InputGroupItem>{expandableToggle}</InputGroupItem>
@@ -442,10 +529,19 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         </div>
       );
 
+      const advancedSearchInputProps = hasAnimations
+        ? {
+            className: css(
+              expandableInput && inputGroupStyles.modifiers.searchExpandable,
+              expandableInput && isExpanded && inputGroupStyles.modifiers.expanded
+            )
+          }
+        : {};
+
       const AdvancedSearchWithPopper = (
         <div className={css(className)} ref={searchInputRef} {...props}>
           <Popper
-            trigger={buildSearchTextInputGroupWithExtraButtons()}
+            trigger={buildSearchTextInputGroupWithExtraButtons(advancedSearchInputProps)}
             triggerRef={triggerRef}
             popper={AdvancedSearch}
             popperRef={popperRef}
@@ -459,7 +555,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
 
       const AdvancedSearchInline = (
         <div className={css(className)} ref={searchInputRef} {...props}>
-          {buildSearchTextInputGroupWithExtraButtons()}
+          {buildSearchTextInputGroupWithExtraButtons(advancedSearchInputProps)}
           {AdvancedSearch}
         </div>
       );

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

@@ -8,6 +8,7 @@ import { Button } from '../../Button';
 import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
 import badgeStyles from '@patternfly/react-styles/css/components/Badge/badge';
 import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
+import inputGroupStyles from '@patternfly/react-styles/css/components/InputGroup/input-group';
 
 jest.mock('../../../helpers/OUIA/ouia');
 jest.mock('../../../helpers/GenerateId/GenerateId');
@@ -234,6 +235,89 @@ test('text input is rendered when isExpanded is true', () => {
   expect(screen.getByRole('textbox')).toBeVisible();
 });
 
+test('animate classes & inert are not rendered when hasAnimations is false', () => {
+  render(
+    <SearchInput
+      data-testid="test-id"
+      expandableInput={{
+        hasAnimations: false,
+        isExpanded: true,
+        onToggleExpand: () => {},
+        toggleAriaLabel: 'Test label'
+      }}
+    />
+  );
+
+  expect(screen.getByTestId('test-id')).not.toHaveClass(`${inputGroupStyles.modifiers.searchExpandable}`);
+  expect(screen.getByTestId('test-id')).not.toHaveClass(`${inputGroupStyles.modifiers.expanded}`);
+
+  expect(screen.getByTestId('test-id').children[0]).not.toHaveClass(`${inputGroupStyles.modifiers.searchInput}`);
+  expect(screen.getByTestId('test-id').children[0].parentElement).not.toHaveAttribute('inert', '');
+
+  expect(screen.getAllByRole('button')).toHaveLength(1);
+  expect(screen.getAllByRole('button')[0].parentElement).not.toHaveClass(`${inputGroupStyles.modifiers.searchExpand}`);
+  expect(screen.getAllByRole('button')[0].parentElement).not.toHaveClass(`${inputGroupStyles.modifiers.searchAction}`);
+  expect(screen.getAllByRole('button')[0].parentElement).not.toHaveAttribute('inert', '');
+});
+
+test('animate classes & inert are properly rendered when hasAnimations is true and isExpanded is false', () => {
+  render(
+    <SearchInput
+      data-testid="test-id"
+      expandableInput={{
+        hasAnimations: true,
+        isExpanded: false,
+        onToggleExpand: () => {},
+        toggleAriaLabel: 'Test label'
+      }}
+    />
+  );
+
+  expect(screen.getByTestId('test-id')).toHaveClass(`${inputGroupStyles.modifiers.searchExpandable}`);
+  expect(screen.getByTestId('test-id')).not.toHaveClass(`${inputGroupStyles.modifiers.expanded}`);
+
+  expect(screen.getByTestId('test-id').querySelector(`.${inputGroupStyles.modifiers.searchInput}`)).toBeInTheDocument();
+  expect(screen.getByTestId('test-id').querySelector(`.${inputGroupStyles.modifiers.searchInput}`)).toHaveAttribute(
+    'inert',
+    ''
+  );
+  expect(screen.getAllByRole('button')).toHaveLength(2);
+  expect(screen.getAllByRole('button')[0].parentElement).toHaveClass(`${inputGroupStyles.modifiers.searchExpand}`);
+  expect(screen.getAllByRole('button')[0].parentElement).not.toHaveAttribute('inert', '');
+
+  expect(screen.getAllByRole('button')[1].parentElement).toHaveClass(`${inputGroupStyles.modifiers.searchAction}`);
+  expect(screen.getAllByRole('button')[1].parentElement).toHaveAttribute('inert', '');
+});
+
+test('animate classes and inert are properly rendered when hasAnimations and isExpanded are true', () => {
+  render(
+    <SearchInput
+      data-testid="test-id"
+      expandableInput={{
+        hasAnimations: true,
+        isExpanded: true,
+        onToggleExpand: () => {},
+        toggleAriaLabel: 'Test label'
+      }}
+    />
+  );
+
+  expect(screen.getByTestId('test-id')).toHaveClass(`${inputGroupStyles.modifiers.searchExpandable}`);
+  expect(screen.getByTestId('test-id')).toHaveClass(`${inputGroupStyles.modifiers.expanded}`);
+
+  expect(screen.getByTestId('test-id').querySelector(`.${inputGroupStyles.modifiers.searchInput}`)).toBeInTheDocument();
+  expect(screen.getByTestId('test-id').querySelector(`.${inputGroupStyles.modifiers.searchInput}`)).not.toHaveAttribute(
+    'inert',
+    ''
+  );
+  expect(screen.getAllByRole('button')).toHaveLength(2);
+  expect(screen.getAllByRole('button')[0].parentElement).toHaveClass(`${inputGroupStyles.modifiers.searchExpand}`);
+  expect(screen.getAllByRole('button')[0].parentElement).toHaveAttribute('inert', '');
+
+  expect(screen.getAllByRole('button')[1].parentElement).toHaveClass(`${inputGroupStyles.modifiers.searchAction}`);
+  expect(screen.getAllByRole('button')[1].parentElement).not.toHaveAttribute('inert', '');
+});
+
 test('onToggleExpand is not called if the expandable toggle is not clicked', () => {
   const mockOnToggleExpand = jest.fn();
 

package/src/components/SearchInput/examples/SearchInput.md

@@ -13,39 +13,47 @@ import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 ### Basic
 
 ```ts file='./SearchInputBasic.tsx'
+
 ```
 
 ### Match with result count
 
 ```ts file='./SearchInputWithResultCount.tsx'
+
 ```
 
 ### Match with navigable options
 
 ```ts file='./SearchInputWithNavigableOptions.tsx'
+
 ```
 
 ### With submit button
 
 ```ts file='./SearchInputWithSubmitButton.tsx'
+
 ```
 
 ### Focus search input using ref
 
 ```ts file='./SearchInputFocusSearch.tsx'
+
 ```
 
 ### With expandable button
 
+Animations on the expansion and collapse of the search input may be opted into by passing `hasAnimations` to the `expandableInput` object.
+
 ```ts file='./SearchInputWithExpandable.tsx'
+
 ```
 
 ### Advanced
 
 The search input component can be used to dynamically build a one to one attribute-value advanced search.
 Using the `attributes` prop alongside the `advancedSearchDelimiter` will expose this functionality, as demonstrated in
-the following example. The search input component can also be used as a composable component and paired with a Popper 
-or other elements to build a completely custom advanced search form. This feature is demonstrated 
+the following example. The search input component can also be used as a composable component and paired with a Popper
+or other elements to build a completely custom advanced search form. This feature is demonstrated
 in the search input's <a href="/components/search-input/react-demos">react demos</a>.
 
 The values used in the attribute-value form fields may contain spaces. The values containing spaces
@@ -53,4 +61,5 @@ should be wrapped with quotes inside the summary search string in the input fiel
 autogenerated from the individual fields the quotes will be autoplaced.
 
 ```ts file='./SearchInputAdvanced.tsx'
+
 ```

package/src/components/SearchInput/examples/SearchInputWithExpandable.tsx

@@ -20,7 +20,12 @@ export const SearchInputWithExpandable: React.FunctionComponent = () => {
       value={value}
       onChange={(_event, value) => onChange(value)}
       onClear={() => onChange('')}
-      expandableInput={{ isExpanded, onToggleExpand, toggleAriaLabel: 'Expandable search input toggle' }}
+      expandableInput={{
+        isExpanded,
+        onToggleExpand,
+        toggleAriaLabel: 'Expandable search input toggle',
+        hasAnimations: true
+      }}
     />
   );
 };

package/src/components/Skeleton/examples/SkeletonText.tsx

@@ -1,6 +1,5 @@
 import { Fragment } from 'react';
 import { Skeleton } from '@patternfly/react-core';
-/* eslint-disable camelcase */
 import t_global_font_size_4xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_4xl';
 import t_global_font_size_3xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_3xl';
 import t_global_font_size_2xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_2xl';

package/src/components/Tabs/OverflowTab.tsx

@@ -8,6 +8,31 @@ import { TabsContext } from './TabsContext';
 import { TabProps } from './Tab';
 import { TabTitleText } from './TabTitleText';
 
+export interface HorizontalOverflowPopperProps {
+  /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
+  direction?: 'up' | 'down';
+  /** Horizontal position of the popper */
+  position?: 'right' | 'left' | 'center' | 'start' | 'end';
+  /** Custom width of the popper. If the value is "trigger", it will set the width to the select toggle's width */
+  width?: string | 'trigger';
+  /** Minimum width of the popper. If the value is "trigger", it will set the min width to the select toggle's width */
+  minWidth?: string | 'trigger';
+  /** Maximum width of the popper. If the value is "trigger", it will set the max width to the select toggle's width */
+  maxWidth?: string | 'trigger';
+  /** Enable to flip the popper when it reaches the boundary */
+  enableFlip?: boolean;
+  /** The container to append the select to. Defaults to document.body.
+   * If your select is being cut off you can append it to an element higher up the DOM tree.
+   * Some examples:
+   * appendTo="inline"
+   * appendTo={() => document.body}
+   * appendTo={document.getElementById('target')}
+   */
+  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
+  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
+  preventOverflow?: boolean;
+}
+
 export interface OverflowTabProps extends React.HTMLProps<HTMLLIElement> {
   /** Additional classes added to the overflow tab */
   className?: string;
@@ -25,6 +50,8 @@ export interface OverflowTabProps extends React.HTMLProps<HTMLLIElement> {
   shouldPreventScrollOnItemFocus?: boolean;
   /** Time in ms to wait before firing the toggles' focus event. Defaults to 0 */
   focusTimeoutDelay?: number;
+  /** Additional props to spread to the popper menu. */
+  popperProps?: HorizontalOverflowPopperProps;
 }
 
 export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
@@ -36,6 +63,7 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
   zIndex = 9999,
   shouldPreventScrollOnItemFocus = true,
   focusTimeoutDelay = 0,
+  popperProps,
   ...props
 }: OverflowTabProps) => {
   const menuRef = useRef<HTMLDivElement>(undefined);
@@ -148,6 +176,7 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
         minWidth="revert"
         appendTo={overflowLIRef.current}
         zIndex={zIndex}
+        {...popperProps}
       />
     </Fragment>
   );

package/src/components/Tabs/Tab.tsx

@@ -1,4 +1,4 @@
-import { useContext, forwardRef } from 'react';
+import { useContext, forwardRef, useEffect } from 'react';
 import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
 import { OUIAProps } from '../../helpers';
 import { TabButton } from './TabButton';
@@ -75,7 +75,7 @@ const TabBase: React.FunctionComponent<TabProps> = ({
     }),
     {}
   );
-  const { mountOnEnter, localActiveKey, unmountOnExit, uniqueId, handleTabClick, handleTabClose } =
+  const { mountOnEnter, localActiveKey, unmountOnExit, uniqueId, setAccentStyles, handleTabClick, handleTabClose } =
     useContext(TabsContext);
   let ariaControls = tabContentId ? `${tabContentId}` : `pf-tab-section-${eventKey}-${childId || uniqueId}`;
   if ((mountOnEnter || unmountOnExit) && eventKey !== localActiveKey) {
@@ -116,6 +116,10 @@ const TabBase: React.FunctionComponent<TabProps> = ({
     </TabButton>
   );
 
+  useEffect(() => {
+    setAccentStyles(true);
+  }, [title, actions]);
+
   return (
     <li
       className={css(