@patternfly/react-core 6.3.0-prerelease.2 → 6.3.0-prerelease.20

package/src/components/Page/examples/PageVerticalNav.tsx

@@ -64,9 +64,15 @@ export const PageVerticalNav: React.FunctionComponent = () => {
 
   return (
     <Page masthead={masthead} sidebar={sidebar}>
-      <PageSection>Section 1</PageSection>
-      <PageSection variant="secondary">Section 2 with secondary variant styling</PageSection>
-      <PageSection>Section 3</PageSection>
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Vertical nav example section 1</h2>
+      </PageSection>
+      <PageSection variant="secondary" aria-labelledby="section-2">
+        <h2 id="section-2">Vertical nav example section 2 with secondary variant styling</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-3">
+        <h2 id="section-3">Vertical nav example section 3</h2>
+      </PageSection>
     </Page>
   );
 };

package/src/components/Page/examples/PageWithOrWithoutFill.tsx

@@ -64,11 +64,15 @@ export const PageWithOrWithoutFill: React.FunctionComponent = () => {
 
   return (
     <Page isContentFilled masthead={masthead} sidebar={sidebar}>
-      <PageSection>A default page section</PageSection>
-      <PageSection isFilled={true} variant="secondary">
-        This section fills the available space.
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Section without fill</h2>
+      </PageSection>
+      <PageSection isFilled={true} variant="secondary" aria-labelledby="section-2">
+        <h2 id="section-2">Section with fill</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-3">
+        <h2 id="section-3">Another section without fill</h2>
       </PageSection>
-      <PageSection>A default page section</PageSection>
     </Page>
   );
 };

package/src/components/SearchInput/SearchInput.tsx

@@ -118,6 +118,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 +146,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   onToggleAdvancedSearch,
   isAdvancedSearchOpen = false,
   resultsCount,
+  resultsCountContext = ' results',
   onNextClick,
   onPreviousClick,
   innerRef,
@@ -309,7 +312,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

package/src/components/Select/examples/Select.md

@@ -78,11 +78,6 @@ By default, the menu toggle will display a badge to indicate the number of items
 ```
 
 ### Typeahead
-Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.
-
-Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.
-
-To make a typeahead, pass `variant=typeahead` into the `<MenuToggle>` component and link an `onClick` function to the `<TextInputGroupMain>` component.
 
 Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.
 
@@ -93,13 +88,6 @@ To make a typeahead, pass `variant=typeahead` into the `<MenuToggle>` component
 ```
 
 ### Typeahead with create option
-If a user enters a value into a typeahead select menu that does not exist, you can allow them to create an option of that value. 
-
-If a user enters a value into a typeahead select menu that does not exist, you can allow them to create an option of that value.
-
-To enable the creation ability, pass a predetermined `value` into a `<SelectOption>` component. You can use the `placeholder` property to change the default text shown in the text input.
-
-The following example outlines the code implementation required to create a working typeahead menu that allows for creation.
 
 If a user enters a value into a typeahead select menu that does not exist, you can allow them to create an option of that value.
 
@@ -111,14 +99,9 @@ The following example outlines the code implementation required to create a work
 
 ```
 
-### Multiple typeahead with chips
-A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a chip group to be placed in the select toggle.
-
-A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a chip group to be placed in the select toggle.
-
-When more items than the allowed limit are selected, overflowing items will be hidden under a "more" button. The following example hides items after more than 3 are selected. To show hidden items, select the “more” button. Select "show less" to hide extra items again.
+### Multiple typeahead with labels
 
-A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a chip group to be placed in the select toggle.
+A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a label group to be placed in the select toggle.
 
 When more items than the allowed limit are selected, overflowing items will be hidden under a "more" button. The following example hides items after more than 3 are selected. To show hidden items, select the “more” button. Select "show less" to hide extra items again.
 
@@ -127,20 +110,14 @@ When more items than the allowed limit are selected, overflowing items will be h
 ```
 
 ### Multiple typeahead with create option
-If the text that is entered into a typeahead doesn't match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a chip group to display created items as chips."
 
-If the text that is entered into a typeahead doesn't match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a chip group to display created items as chips."
-
-If the text that is entered into a typeahead doesn't match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a chip group to display created items as chips."
+If the text that is entered into a typeahead doesn't match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a label group to display created items as labels.
 
 ```ts file="./SelectMultiTypeaheadCreatable.tsx"
 
 ```
 
 ### Multiple typeahead with checkboxes
-By default, a multiple typeahead select allows you to select multiple menu items, placing a checkmark beside selected items. Like basic checkbox select menus, you can add checkboxes to your menu items. This approach may be more accurate and comprehensive for more complex menu scenarios like filtering.
-
-By default, a multiple typeahead select allows you to select multiple menu items, placing a checkmark beside selected items. Like basic checkbox select menus, you can add checkboxes to your menu items. This approach may be more accurate and comprehensive for more complex menu scenarios like filtering.
 
 By default, a multiple typeahead select allows you to select multiple menu items, placing a checkmark beside selected items. Like basic checkbox select menus, you can add checkboxes to your menu items. This approach may be more accurate and comprehensive for more complex menu scenarios like filtering.
 

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(

package/src/components/Tabs/Tabs.tsx

@@ -5,20 +5,27 @@ import { PickOptional } from '../../helpers/typeUtils';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
-import { getUniqueId, isElementInView, formatBreakpointMods, getLanguageDirection } from '../../helpers/util';
+import {
+  getUniqueId,
+  isElementInView,
+  formatBreakpointMods,
+  getLanguageDirection,
+  getInlineStartProperty
+} from '../../helpers/util';
 import { TabContent } from './TabContent';
 import { TabProps } from './Tab';
 import { TabsContextProvider } from './TabsContext';
-import { OverflowTab } from './OverflowTab';
+import { OverflowTab, HorizontalOverflowPopperProps } from './OverflowTab';
 import { Button } from '../Button';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId, canUseDOM } from '../../helpers';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
+import linkAccentLength from '@patternfly/react-tokens/dist/esm/c_tabs_link_accent_length';
+import linkAccentStart from '@patternfly/react-tokens/dist/esm/c_tabs_link_accent_start';
 
 export enum TabsComponent {
   div = 'div',
   nav = 'nav'
 }
-
 export interface HorizontalOverflowObject {
   /** Flag which shows the count of overflowing tabs when enabled */
   showTabCount?: boolean;
@@ -26,6 +33,8 @@ export interface HorizontalOverflowObject {
   defaultTitleText?: string;
   /** The aria label applied to the button which toggles the tab overflow menu */
   toggleAriaLabel?: string;
+  /** Additional props to spread to the popper menu. */
+  popperProps?: HorizontalOverflowPopperProps;
 }
 
 type TabElement = React.ReactElement<TabProps, React.JSXElementConstructor<TabProps>>;
@@ -139,6 +148,9 @@ interface TabsState {
   uncontrolledIsExpandedLocal: boolean;
   ouiaStateId: string;
   overflowingTabCount: number;
+  isInitializingAccent: boolean;
+  currentLinkAccentLength: string;
+  currentLinkAccentStart: string;
 }
 
 class Tabs extends Component<TabsProps, TabsState> {
@@ -158,7 +170,10 @@ class Tabs extends Component<TabsProps, TabsState> {
       uncontrolledActiveKey: this.props.defaultActiveKey,
       uncontrolledIsExpandedLocal: this.props.defaultIsExpanded,
       ouiaStateId: getDefaultOUIAId(Tabs.displayName),
-      overflowingTabCount: 0
+      overflowingTabCount: 0,
+      isInitializingAccent: true,
+      currentLinkAccentLength: linkAccentLength.value,
+      currentLinkAccentStart: linkAccentStart.value
     };
 
     if (this.props.isVertical && this.props.expandable !== undefined) {
@@ -328,21 +343,49 @@ class Tabs extends Component<TabsProps, TabsState> {
     }
   };
 
+  setAccentStyles = (shouldInitializeStyle?: boolean) => {
+    const currentItem = this.tabList.current.querySelector('li.pf-m-current') as HTMLElement;
+    if (!currentItem) {
+      return;
+    }
+
+    const { isVertical } = this.props;
+    const { offsetWidth, offsetHeight, offsetTop } = currentItem;
+    const lengthValue = isVertical ? offsetHeight : offsetWidth;
+    const startValue = isVertical ? offsetTop : getInlineStartProperty(currentItem, this.tabList.current);
+    this.setState({
+      currentLinkAccentLength: `${lengthValue}px`,
+      currentLinkAccentStart: `${startValue}px`,
+      ...(shouldInitializeStyle && { isInitializingAccent: true })
+    });
+
+    setTimeout(() => {
+      this.setState({ isInitializingAccent: false });
+    }, 0);
+  };
+
+  handleResize = () => {
+    this.handleScrollButtons();
+    this.setAccentStyles();
+  };
+
   componentDidMount() {
     if (!this.props.isVertical) {
       if (canUseDOM) {
-        window.addEventListener('resize', this.handleScrollButtons, false);
+        window.addEventListener('resize', this.handleResize, false);
       }
       this.direction = getLanguageDirection(this.tabList.current);
       // call the handle resize function to check if scroll buttons should be shown
       this.handleScrollButtons();
     }
+
+    this.setAccentStyles(true);
   }
 
   componentWillUnmount() {
     if (!this.props.isVertical) {
       if (canUseDOM) {
-        window.removeEventListener('resize', this.handleScrollButtons, false);
+        window.removeEventListener('resize', this.handleResize, false);
       }
     }
     clearTimeout(this.scrollTimeout);
@@ -350,8 +393,18 @@ class Tabs extends Component<TabsProps, TabsState> {
   }
 
   componentDidUpdate(prevProps: TabsProps, prevState: TabsState) {
-    const { activeKey, mountOnEnter, isOverflowHorizontal, children } = this.props;
-    const { shownKeys, overflowingTabCount, enableScrollButtons } = this.state;
+    this.direction = getLanguageDirection(this.tabList.current);
+    const { activeKey, mountOnEnter, isOverflowHorizontal, children, defaultActiveKey } = this.props;
+    const { shownKeys, overflowingTabCount, enableScrollButtons, uncontrolledActiveKey } = this.state;
+    const isOnCloseUpdate = !!prevProps.onClose !== !!this.props.onClose;
+    if (
+      (defaultActiveKey !== undefined && prevState.uncontrolledActiveKey !== uncontrolledActiveKey) ||
+      (defaultActiveKey === undefined && prevProps.activeKey !== activeKey) ||
+      isOnCloseUpdate
+    ) {
+      this.setAccentStyles(isOnCloseUpdate);
+    }
+
     if (prevProps.activeKey !== activeKey && mountOnEnter && shownKeys.indexOf(activeKey) < 0) {
       this.setState({
         shownKeys: shownKeys.concat(activeKey)
@@ -364,6 +417,7 @@ class Tabs extends Component<TabsProps, TabsState> {
       Children.toArray(prevProps.children).length !== Children.toArray(children).length
     ) {
       this.handleScrollButtons();
+      this.setAccentStyles(true);
     }
 
     const currentOverflowingTabCount = this.countOverflowingElements(this.tabList.current);
@@ -380,8 +434,6 @@ class Tabs extends Component<TabsProps, TabsState> {
     } else if (prevState.enableScrollButtons && !enableScrollButtons) {
       this.setState({ showScrollButtons: false });
     }
-
-    this.direction = getLanguageDirection(this.tabList.current);
   }
 
   static getDerivedStateFromProps(nextProps: TabsProps, prevState: TabsState) {
@@ -450,7 +502,10 @@ class Tabs extends Component<TabsProps, TabsState> {
       shownKeys,
       uncontrolledActiveKey,
       uncontrolledIsExpandedLocal,
-      overflowingTabCount
+      overflowingTabCount,
+      isInitializingAccent,
+      currentLinkAccentLength,
+      currentLinkAccentStart
     } = this.state;
     const filteredChildren = Children.toArray(children)
       .filter((child): child is TabElement => isValidElement(child))
@@ -485,6 +540,7 @@ class Tabs extends Component<TabsProps, TabsState> {
           unmountOnExit,
           localActiveKey,
           uniqueId,
+          setAccentStyles: this.setAccentStyles,
           handleTabClick: (...args) => this.handleTabClick(...args),
           handleTabClose: onClose
         }}
@@ -493,6 +549,7 @@ class Tabs extends Component<TabsProps, TabsState> {
           aria-label={ariaLabel}
           className={css(
             styles.tabs,
+            styles.modifiers.animateCurrent,
             isFilled && styles.modifiers.fill,
             isSubtab && styles.modifiers.subtab,
             isVertical && styles.modifiers.vertical,
@@ -505,10 +562,12 @@ class Tabs extends Component<TabsProps, TabsState> {
             formatBreakpointMods(inset, styles),
             variantStyle[variant],
             hasOverflowTab && styles.modifiers.overflow,
+            isInitializingAccent && styles.modifiers.initializingAccent,
             className
           )}
           {...getOUIAProps(Tabs.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
           id={id && id}
+          style={{ [linkAccentLength.name]: currentLinkAccentLength, [linkAccentStart.name]: currentLinkAccentStart }}
           {...props}
         >
           {expandable && isVertical && (

package/src/components/Tabs/TabsContext.ts

@@ -6,6 +6,7 @@ export interface TabsContextProps {
   unmountOnExit: boolean;
   localActiveKey: string | number;
   uniqueId: string;
+  setAccentStyles: (shouldInitializeStyles?: boolean) => void;
   handleTabClick: (
     event: React.MouseEvent<HTMLElement, MouseEvent>,
     eventKey: number | string,
@@ -24,6 +25,7 @@ export const TabsContext = createContext<TabsContextProps>({
   unmountOnExit: false,
   localActiveKey: '',
   uniqueId: '',
+  setAccentStyles: () => null,
   handleTabClick: () => null,
   handleTabClose: undefined
 });

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

@@ -1,5 +1,6 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, act } from '@testing-library/react';
 import { Tabs } from '../Tabs';
+import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
 import { Tab } from '../Tab';
 import { TabTitleText } from '../TabTitleText';
 import { TabTitleIcon } from '../TabTitleIcon';
@@ -8,6 +9,47 @@ import { TabContentBody } from '../TabContentBody';
 
 jest.mock('../../../helpers/GenerateId/GenerateId');
 
+test(`Renders with classes ${styles.tabs} and ${styles.modifiers.animateCurrent} by default`, () => {
+  render(
+    <Tabs role="region">
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.getByRole('region')).toHaveClass(`${styles.tabs} ${styles.modifiers.animateCurrent}`);
+});
+
+test(`Renders with class ${styles.modifiers.initializingAccent} when component initially mounts`, () => {
+  render(
+    <Tabs role="region">
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.getByRole('region')).toHaveClass(styles.modifiers.initializingAccent);
+});
+
+test(`Does not render with class ${styles.modifiers.initializingAccent} when component is finished mounting`, () => {
+  jest.useFakeTimers();
+  render(
+    <Tabs role="region">
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  act(() => {
+    jest.advanceTimersByTime(500);
+  });
+  expect(screen.getByRole('region')).not.toHaveClass(styles.modifiers.initializingAccent);
+  jest.useRealTimers();
+});
+
 test('should render simple tabs', () => {
   const { asFragment } = render(
     <Tabs id="simpleTabs">