@patternfly/react-core 5.2.0-prerelease.9 → 5.3.0-prerelease.1

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

@@ -52,9 +52,6 @@ exports[`SearchInput advanced search 1`] = `
               aria-disabled="false"
               aria-label="Reset"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-17"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -82,9 +79,6 @@ exports[`SearchInput advanced search 1`] = `
           aria-expanded="false"
           aria-label="Open advanced search"
           class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-10"
-          data-ouia-component-type="PF5/Button"
-          data-ouia-safe="true"
           type="button"
         >
           <svg
@@ -109,9 +103,6 @@ exports[`SearchInput advanced search 1`] = `
           aria-disabled="false"
           aria-label="Search"
           class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-11"
-          data-ouia-component-type="PF5/Button"
-          data-ouia-safe="true"
           type="submit"
         >
           <span
@@ -202,9 +193,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
               aria-disabled="false"
               aria-label="Reset"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-18"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -232,9 +220,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
           aria-expanded="true"
           aria-label="Open advanced search"
           class="pf-v5-c-button pf-m-control pf-m-expanded"
-          data-ouia-component-id="OUIA-Generated-Button-control-12"
-          data-ouia-component-type="PF5/Button"
-          data-ouia-safe="true"
           type="button"
         >
           <svg
@@ -259,9 +244,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
           aria-disabled="false"
           aria-label="Search"
           class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-13"
-          data-ouia-component-type="PF5/Button"
-          data-ouia-safe="true"
           type="submit"
         >
           <span
@@ -334,9 +316,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   >
                     <input
                       aria-invalid="false"
-                      data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-                      data-ouia-component-type="PF5/TextInput"
-                      data-ouia-safe="true"
                       id="username_0"
                       type="text"
                       value="player"
@@ -370,9 +349,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   >
                     <input
                       aria-invalid="false"
-                      data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-                      data-ouia-component-type="PF5/TextInput"
-                      data-ouia-safe="true"
                       id="firstname_1"
                       type="text"
                       value="john"
@@ -406,9 +382,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   >
                     <input
                       aria-invalid="false"
-                      data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-                      data-ouia-component-type="PF5/TextInput"
-                      data-ouia-safe="true"
                       id="pf-random-id-2"
                       type="text"
                       value=""
@@ -425,9 +398,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   <button
                     aria-disabled="false"
                     class="pf-v5-c-button pf-m-link pf-m-inline"
-                    data-ouia-component-id="OUIA-Generated-Button-link-1"
-                    data-ouia-component-type="PF5/Button"
-                    data-ouia-safe="true"
                     type="button"
                   >
                     Link
@@ -463,9 +433,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                     <button
                       aria-disabled="false"
                       class="pf-v5-c-button pf-m-primary"
-                      data-ouia-component-id="OUIA-Generated-Button-primary-1"
-                      data-ouia-component-type="PF5/Button"
-                      data-ouia-safe="true"
                       type="submit"
                     >
                       Search
@@ -473,9 +440,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                     <button
                       aria-disabled="false"
                       class="pf-v5-c-button pf-m-link"
-                      data-ouia-component-id="OUIA-Generated-Button-link-2"
-                      data-ouia-component-type="PF5/Button"
-                      data-ouia-safe="true"
                       type="reset"
                     >
                       Reset
@@ -544,9 +508,6 @@ exports[`SearchInput renders search input in strict mode 1`] = `
               aria-disabled="false"
               aria-label="Reset"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-11"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -574,9 +535,6 @@ exports[`SearchInput renders search input in strict mode 1`] = `
           aria-expanded="false"
           aria-label="Open advanced search"
           class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-5"
-          data-ouia-component-type="PF5/Button"
-          data-ouia-safe="true"
           type="button"
         >
           <svg
@@ -601,9 +559,6 @@ exports[`SearchInput renders search input in strict mode 1`] = `
           aria-disabled="false"
           aria-label="Search"
           class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-7"
-          data-ouia-component-type="PF5/Button"
-          data-ouia-safe="true"
           type="submit"
         >
           <span
@@ -700,9 +655,6 @@ exports[`SearchInput search input with hint 1`] = `
               aria-disabled="false"
               aria-label="Previous"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-4"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -723,9 +675,6 @@ exports[`SearchInput search input with hint 1`] = `
               aria-disabled="false"
               aria-label="Next"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-5"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -747,9 +696,6 @@ exports[`SearchInput search input with hint 1`] = `
             aria-disabled="false"
             aria-label="Reset"
             class="pf-v5-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-6"
-            data-ouia-component-type="PF5/Button"
-            data-ouia-safe="true"
             type="button"
           >
             <svg
@@ -776,9 +722,6 @@ exports[`SearchInput search input with hint 1`] = `
         aria-disabled="false"
         aria-label="Search"
         class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-2"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
         type="submit"
       >
         <span
@@ -860,9 +803,6 @@ exports[`SearchInput simple search input 1`] = `
               aria-disabled="false"
               aria-label="Previous"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-1"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -883,9 +823,6 @@ exports[`SearchInput simple search input 1`] = `
               aria-disabled="false"
               aria-label="Next"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-2"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -907,9 +844,6 @@ exports[`SearchInput simple search input 1`] = `
             aria-disabled="false"
             aria-label="Reset"
             class="pf-v5-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-3"
-            data-ouia-component-type="PF5/Button"
-            data-ouia-safe="true"
             type="button"
           >
             <svg
@@ -936,9 +870,6 @@ exports[`SearchInput simple search input 1`] = `
         aria-disabled="false"
         aria-label="Search"
         class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-1"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
         type="submit"
       >
         <span

package/src/components/Select/Select.tsx

@@ -25,6 +25,8 @@ export interface SelectPopperProps {
    * 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 SelectToggleProps {

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

@@ -13,72 +13,112 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 ## Examples
 
-`Select` builds off of the Menu component suite to wrap commonly used properties and functions for a select menu. See the [Menu documentation](/components/menus/menu) for a full list of properties that may be passed through `Select` to further customize the select menu, or the [custom menu examples](/components/menus/custom-menus) for additional examples of fully functional menus.
+Select builds off of the menu component suite to adapt commonly used properties and functions to create a select menu. See the [menu documentation](/components/menus/menu) for a full list of properties that may be used to further customize a select menu. View the [custom menu examples](/components/menus/custom-menus) to see examples of fully functional select menus.
 
-### Single
+### Single select
+To let users select a single item from a list, use a single select menu.
+
+You can add multiple `<SelectOption>` components to build out a list of menu items. For each select option, pass a relevant option label to the `value` property.
+
+To disable the select menu toggle, use the `isDisabled` property. In the following example, select the checkbox to observe this behavior.
 
 ```ts file="./SelectBasic.tsx"
 
 ```
 
-### Option variations
+### Select option variants
+
+The following example showcases different option variants and customizations that are commonly used in a select menu. 
+
+To create these variants, you can pass different properties into a `<SelectOption>` component. 
 
-Showcases different option variants and customizations that are commonly used in a select menu. For a more complete list, see the [Menu documentation](/components/menus/menu).
+This example provides examples of: 
+
+- An option with a description, which is created by using the `description` property.
+- An option with a link, which is created by passing a URL into the `to` property. For external links, use the `isExternalLink` property so that the option is styled with an outbound link icon. 
+- An option with an icon, which is created by using the `icon` property. 
+- An option that is disabled by using the `isDisabled` property. 
 
 ```ts file="./SelectOptionVariations.tsx"
 
 ```
 
-### Grouped single
+### With grouped items
+To group related select options together, use 1 or more `<SelectGroup>` components and title each group using the `label` property.
 
 ```ts file="./SelectGrouped.tsx"
 
 ```
 
-### Checkbox
+### Checkbox select
+To let users select multiple list options via checkbox input, use a checkbox select. 
+
+To create a checkbox select, pass `role="menu"` to the `<Select>`, and `hasCheckbox` into each `<SelectOption>` component. To indicate that an option is selected, use the `isSelected` property.
+
+By default, the menu toggle will display a badge to indicate the number of items that a user has selected.
 
 ```ts file="./SelectCheckbox.tsx"
 
 ```
 
 ### 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.
+
+To make a typeahead, pass `variant=typeahead` into the `<MenuToggle>` component and link an `onClick` function to the `<TextInputGroupMain>` component.
 
 ```ts file="./SelectTypeahead.tsx"
 
 ```
 
 ### 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. 
+
+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.
 
 ```ts file="./SelectTypeaheadCreatable.tsx"
 
 ```
 
 ### 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.
+
+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.
 
 ```ts file="./SelectMultiTypeahead.tsx"
 
 ```
 
 ### 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."
 
 ```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.
 
 ```ts file="./SelectMultiTypeaheadCheckbox.tsx"
 
 ```
 
-### View more
+### With view more 
+
+To reduce the processing load for long select lists, you can add a "View more" action to load additional items.
+
+The following example shows 3 items before the "View more" link, but you can adjust the number of visible items for your use case.
 
 ```ts file="./SelectViewMore.tsx"
 
 ```
 
-### Footer
+### With a footer
+
+You can add a `<MenuFooter>` component to a select menu to hold additional actions that users can take on menu items, through elements such as link buttons. A footer will be placed beneath a divider at the end of the select menu.
+
 
 ```ts file="./SelectFooter.tsx"
 
-```
+```

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

@@ -9,4 +9,3 @@ test('Verify Skip To Content', () => {
   // Add a useful assertion here.
   expect(asFragment()).toMatchSnapshot();
 });
-

package/src/components/Slider/Slider.tsx

@@ -8,6 +8,7 @@ import { TextInput } from '../TextInput';
 import { Tooltip } from '../Tooltip';
 import cssSliderValue from '@patternfly/react-tokens/dist/esm/c_slider_value';
 import cssFormControlWidthChars from '@patternfly/react-tokens/dist/esm/c_slider__value_c_form_control_width_chars';
+import { getLanguageDirection } from '../../helpers/util';
 
 /** Properties for creating custom steps in a slider. These properties should be passed in as
  * an object within an array to the slider component's customSteps property.
@@ -125,7 +126,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   let isRTL: boolean;
 
   React.useEffect(() => {
-    isRTL = window.getComputedStyle(sliderRailRef.current).getPropertyValue('direction') === 'rtl';
+    isRTL = getLanguageDirection(sliderRailRef.current) === 'rtl';
   });
 
   React.useEffect(() => {

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

@@ -25,4 +25,4 @@ test('large spinner', () => {
 test('extra large spinner', () => {
   const { asFragment } = render(<Spinner size="xl" />);
   expect(asFragment()).toMatchSnapshot();
-});
+});

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

@@ -77,7 +77,7 @@ describe('Switch', () => {
 
   test('switch passes value and event to onChange handler', async () => {
     const user = userEvent.setup();
-    
+
     render(<Switch id="onChange-switch" {...props} aria-label="Switch label" />);
 
     await user.click(screen.getByLabelText('Switch label'));

package/src/components/Tabs/Tabs.tsx

@@ -6,7 +6,7 @@ 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 } from '../../helpers/util';
+import { getUniqueId, isElementInView, formatBreakpointMods, getLanguageDirection } from '../../helpers/util';
 import { TabContent } from './TabContent';
 import { TabProps } from './Tab';
 import { TabsContextProvider } from './TabsContext';
@@ -333,7 +333,7 @@ class Tabs extends React.Component<TabsProps, TabsState> {
       if (canUseDOM) {
         window.addEventListener('resize', this.handleScrollButtons, false);
       }
-      this.direction = getComputedStyle(this.tabList.current).getPropertyValue('direction');
+      this.direction = getLanguageDirection(this.tabList.current);
       // call the handle resize function to check if scroll buttons should be shown
       this.handleScrollButtons();
     }
@@ -381,7 +381,7 @@ class Tabs extends React.Component<TabsProps, TabsState> {
       this.setState({ showScrollButtons: false });
     }
 
-    this.direction = getComputedStyle(this.tabList.current).getPropertyValue('direction');
+    this.direction = getLanguageDirection(this.tabList.current);
   }
 
   render() {

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

@@ -39,7 +39,7 @@ jest.mock('../../Menu', () => {
 });
 
 const tabsContextDefaultProps = {
-  variant: 'default' as 'default',
+  variant: 'default' as const,
   mountOnEnter: false,
   unmountOnExit: false,
   localActiveKey: '',

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

@@ -39,7 +39,7 @@ test('should render simple tabs', () => {
 });
 
 test('should render closeable tabs', () => {
-  const view = render(
+  render(
     <Tabs onClose={jest.fn()}>
       <Tab eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>} closeButtonAriaLabel="close-label">
         Tab 1 section
@@ -50,7 +50,7 @@ test('should render closeable tabs', () => {
 });
 
 test('should render add button', () => {
-  const view = render(
+  render(
     <Tabs onAdd={jest.fn()} addButtonAriaLabel="add-label">
       <Tab eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>} closeButtonAriaLabel="close-label">
         Tab 1 section
@@ -156,7 +156,7 @@ test('should render expandable vertical tabs', () => {
 test('should log error when there is no aria-label or toggleText for expandable vertical tabs', () => {
   const consoleErrorMock = jest.fn();
   global.console = { error: consoleErrorMock } as any;
-  const { asFragment } = render(
+  render(
     <Tabs id="verticalTabs" isVertical expandable={{ default: 'expandable' }}>
       <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
         Tab 1 section
@@ -429,7 +429,7 @@ test('should not render scroll buttons by default', () => {
 
   expect(screen.queryByLabelText('Scroll left')).not.toBeInTheDocument();
   expect(screen.queryByLabelText('Scroll right')).not.toBeInTheDocument();
-})
+});
 
 test('should not render scroll buttons when isVertical is true', () => {
   render(
@@ -448,4 +448,4 @@ test('should not render scroll buttons when isVertical is true', () => {
 
   expect(screen.queryByLabelText('Scroll left')).not.toBeInTheDocument();
   expect(screen.queryByLabelText('Scroll right')).not.toBeInTheDocument();
-})
+});

package/src/components/TextInput/TextInput.tsx

@@ -26,6 +26,13 @@ export enum TextInputReadOnlyVariant {
   plain = 'plain'
 }
 
+export interface TextInputExpandedObj {
+  /** Flag to apply expanded styling. */
+  isExpanded: boolean;
+  /** Id of the element that the text input is controlling expansion of. */
+  ariaControls: string;
+}
+
 export interface TextInputProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'>,
     OUIAProps {
@@ -33,8 +40,10 @@ export interface TextInputProps
   className?: string;
   /** Flag to show if the text input is disabled. */
   isDisabled?: boolean;
-  /** Flag to apply expanded styling */
+  /** @deprecated Flag to apply expanded styling. expandedProps should now be used instead. */
   isExpanded?: boolean;
+  /** Prop to apply expanded styling to the text input and link it to the element it is controlling. This should be used when the input controls a menu and that menu is expandable. */
+  expandedProps?: TextInputExpandedObj;
   /** Sets the input as readonly and determines the readonly styling. */
   readOnlyVariant?: 'plain' | 'default';
   /** Flag indicating whether the input is required */
@@ -182,6 +191,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
       isLeftTruncated,
       isStartTruncated,
       isExpanded,
+      expandedProps,
       readOnly,
       readOnlyVariant,
       isRequired,
@@ -193,6 +203,9 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
     } = this.props;
 
     const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
+    const ariaExpandedProps = expandedProps
+      ? { 'aria-expanded': expandedProps?.isExpanded, 'aria-controls': expandedProps?.ariaControls, role: 'combobox' }
+      : {};
 
     return (
       <span
@@ -201,7 +214,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
           readOnlyVariant && styles.modifiers.readonly,
           readOnlyVariant === 'plain' && styles.modifiers.plain,
           isDisabled && styles.modifiers.disabled,
-          isExpanded && styles.modifiers.expanded,
+          (isExpanded || expandedProps?.isExpanded) && styles.modifiers.expanded,
           customIcon && styles.modifiers.icon,
           hasStatusIcon && styles.modifiers[validated as 'success' | 'warning' | 'error'],
           className
@@ -215,6 +228,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
           type={type}
           value={this.sanitizeInputValue(value)}
           aria-invalid={props['aria-invalid'] ? props['aria-invalid'] : validated === ValidatedOptions.error}
+          {...ariaExpandedProps}
           required={isRequired}
           disabled={isDisabled}
           readOnly={!!readOnlyVariant || readOnly}

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

@@ -33,7 +33,9 @@ describe('TextInput', () => {
   });
 
   test('read only text input using isReadOnly', () => {
-    const { asFragment } = render(<TextInput readOnlyVariant="default" value="read only" aria-label="read only text input" />);
+    const { asFragment } = render(
+      <TextInput readOnlyVariant="default" value="read only" aria-label="read only text input" />
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 
@@ -113,15 +115,24 @@ describe('TextInput', () => {
 
   test('trimLeft is called when isStartTruncated is true', async () => {
     const trimLeftFn = jest.spyOn(ReactCoreUtils, 'trimLeft').mockImplementation();
-  
+
     render(<TextInput isStartTruncated aria-label="start truncated text input" />);
     expect(trimLeftFn).toHaveBeenCalled();
   });
 
   test('trimLeft is called when isLeftTruncated is true', async () => {
     const trimLeftFn = jest.spyOn(ReactCoreUtils, 'trimLeft').mockImplementation();
-  
+
     render(<TextInput isLeftTruncated aria-label="start truncated text input" />);
     expect(trimLeftFn).toHaveBeenCalled();
   });
+
+  test('has aria-expanded set to true when ariaProps.isExpanded is true', () => {
+    render(<TextInput expandedProps={{ isExpanded: true, ariaControls: 'test' }} aria-label="isExpanded" />);
+
+    const input = screen.getByLabelText('isExpanded');
+    expect(input).toHaveAttribute('aria-expanded', 'true');
+    expect(input).toHaveAttribute('role', 'combobox');
+    expect(input).toHaveAttribute('aria-controls', 'test');
+  });
 });

package/src/components/TextInput/examples/TextInput.md

@@ -3,7 +3,7 @@ id: Text input
 section: components
 subsection: forms
 cssPrefix: pf-v5-c-form-control
-propComponents: ['TextInput']
+propComponents: ['TextInput', 'TextInputExpandedObj']
 ---
 
 import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';

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

@@ -7,12 +7,10 @@ import { TimePicker, TimePickerProps } from '../TimePicker';
 
 describe('TimePicker', () => {
   test('Renders in strict mode', () => {
-    const validateTime = (_time: string) => {
-      return true;
-    };
+    const validateTime = (_time: string) => true;
 
     const consoleError = jest.spyOn(console, 'error');
-    const { asFragment } = render(
+    render(
       <React.StrictMode>
         <TimePicker value={'00:00'} validateTime={validateTime} aria-label="time picker" />
       </React.StrictMode>
@@ -112,9 +110,7 @@ describe('TimePicker', () => {
 
   describe('test isInvalid', () => {
     test('should be valid by default', () => {
-      const validateTime = (_time: string) => {
-        return true;
-      };
+      const validateTime = (_time: string) => true;
 
       render(<TimePicker value={'00:00'} validateTime={validateTime} aria-label="time picker" />);
 
@@ -122,9 +118,7 @@ describe('TimePicker', () => {
     });
 
     test('should stay valid after onChange', async () => {
-      const validateTime = (_time: string) => {
-        return true;
-      };
+      const validateTime = (_time: string) => true;
       const user = userEvent.setup();
 
       render(<TimePicker value="00:00" validateTime={validateTime} aria-label="time picker" />);

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -149,7 +149,7 @@ class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
                           aria-label="Show Filters"
                           {...(_isExpanded && { 'aria-expanded': true })}
                           aria-haspopup={_isExpanded && this.isContentPopup()}
-                          aria-controls={expandableContentId}
+                          aria-controls={_isExpanded ? expandableContentId : undefined}
                           ref={this.toggleRef}
                         >
                           {toggleIcon}

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

@@ -64,8 +64,8 @@ describe('Toolbar', () => {
           <ToolbarGroup variant="filter-group">
             <ToolbarFilter
               chips={['New', 'Pending']}
-              deleteChip={(category, chip) => {}}
-              deleteChipGroup={(category) => {}}
+              deleteChip={(_category, _chip) => {}}
+              deleteChipGroup={(_category) => {}}
               categoryName="Status"
             >
               test content

package/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx

@@ -4,7 +4,11 @@ import { ToolbarGroup } from '../ToolbarGroup';
 
 describe('ToolbarItem', () => {
   it('should render with pf-m-overflow-container when isOverflowContainer is set', () => {
-    render(<ToolbarGroup data-testid="toolbargroup" isOverflowContainer>Test</ToolbarGroup>);
+    render(
+      <ToolbarGroup data-testid="toolbargroup" isOverflowContainer>
+        Test
+      </ToolbarGroup>
+    );
     expect(screen.getByTestId('toolbargroup')).toHaveClass('pf-m-overflow-container');
   });
 });