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

package/src/components/DualListSelector/DualListSelectorPane.tsx

@@ -7,6 +7,7 @@ import { DualListSelectorListWrapper } from './DualListSelectorListWrapper';
 import { DualListSelectorContext, DualListSelectorPaneContext } from './DualListSelectorContext';
 import { DualListSelectorList } from './DualListSelectorList';
 import { SearchInput } from '../SearchInput';
+import cssMenuMinHeight from '@patternfly/react-tokens/dist/esm/c_dual_list_selector__menu_MinHeight';
 
 /** Acts as the container for a list of options that are either available or chosen,
  * depending on the pane type (available or chosen). A search input and other actions,
@@ -151,7 +152,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
     >
       {title && (
         <div className={css(styles.dualListSelectorHeader)}>
-          <div className="pf-v5-c-dual-list-selector__title">
+          <div className={`${styles.dualListSelector}__title`}>
             <div className={css(styles.dualListSelectorTitleText)}>{title}</div>
           </div>
         </div>
@@ -201,7 +202,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
             id={`${id}-list`}
             isDisabled={isDisabled}
             {...(listMinHeight && {
-              style: { '--pf-v5-c-dual-list-selector__menu--MinHeight': listMinHeight } as React.CSSProperties
+              style: { [cssMenuMinHeight.name]: listMinHeight } as React.CSSProperties
             })}
           >
             {children}
@@ -212,7 +213,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
             aria-labelledby={`${id}-status`}
             id={`${id}-list`}
             {...(listMinHeight && {
-              style: { '--pf-v5-c-dual-list-selector__menu--MinHeight': listMinHeight } as React.CSSProperties
+              style: { [cssMenuMinHeight.name]: listMinHeight } as React.CSSProperties
             })}
           >
             {options.length > 0 ? (

package/src/components/EmptyState/EmptyStateHeader.tsx

@@ -27,10 +27,10 @@ export const EmptyStateHeader: React.FunctionComponent<EmptyStateHeaderProps> =
   icon,
   ...props
 }: EmptyStateHeaderProps) => (
-  <div className={css('pf-v5-c-empty-state__header', className)} {...props}>
+  <div className={css(`${styles.emptyState}__header`, className)} {...props}>
     {icon}
     {(titleText || children) && (
-      <div className={css('pf-v5-c-empty-state__title')}>
+      <div className={css(`${styles.emptyState}__title`)}>
         {titleText && (
           <HeadingLevel className={css(styles.emptyStateTitleText, titleClassName)}>{titleText}</HeadingLevel>
         )}

package/src/components/EmptyState/EmptyStateIcon.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
 import { Spinner } from '../Spinner';
+import cssIconColor from '@patternfly/react-tokens/dist/esm/c_empty_state__icon_Color';
 
 export interface IconProps extends Omit<React.HTMLProps<SVGElement>, 'size'> {
   /** Changes the color of the icon.  */
@@ -27,8 +28,7 @@ export const EmptyStateIcon: React.FunctionComponent<EmptyStateIconProps> = ({
   return (
     <div
       className={css(styles.emptyStateIcon)}
-      {...(color &&
-        !iconIsSpinner && { style: { ['--pf-v5-c-empty-state__icon--Color']: color } as React.CSSProperties })}
+      {...(color && !iconIsSpinner && { style: { [cssIconColor.name]: color } as React.CSSProperties })}
     >
       <IconComponent className={className} aria-hidden={!iconIsSpinner} {...props} />
     </div>

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

@@ -11,6 +11,7 @@ import { Button } from '../../Button';
 import { EmptyStateHeader } from '../EmptyStateHeader';
 import { EmptyStateFooter } from '../EmptyStateFooter';
 import { EmptyStateIcon } from '../../../../dist/esm';
+import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
 
 describe('EmptyState', () => {
   test('Main', () => {
@@ -64,12 +65,12 @@ describe('EmptyState', () => {
 
   test('Body', () => {
     render(<EmptyStateBody className="custom-empty-state-body" data-testid="body-test-id" />);
-    expect(screen.getByTestId('body-test-id')).toHaveClass('pf-v5-c-empty-state__body custom-empty-state-body');
+    expect(screen.getByTestId('body-test-id')).toHaveClass(`${styles.emptyStateBody} custom-empty-state-body`);
   });
 
   test('Actions', () => {
     render(<EmptyStateActions className="custom-empty-state-secondary" data-testid="actions-test-id" />);
-    expect(screen.getByTestId('actions-test-id')).toHaveClass('pf-v5-c-empty-state__actions');
+    expect(screen.getByTestId('actions-test-id')).toHaveClass(styles.emptyStateActions);
   });
 
   test('Full height', () => {
@@ -88,9 +89,7 @@ describe('EmptyState', () => {
 
   test('Header with title text renders heading level 1 by default', () => {
     render(<EmptyStateHeader titleText="Empty state" />);
-    expect(screen.getByRole('heading', { level: 1, name: 'Empty state' })).toHaveClass(
-      'pf-v5-c-empty-state__title-text'
-    );
+    expect(screen.getByRole('heading', { level: 1, name: 'Empty state' })).toHaveClass(styles.emptyStateTitleText);
   });
 
   test('Header renders custom class passed via titleClassName', () => {
@@ -100,9 +99,7 @@ describe('EmptyState', () => {
 
   test('Header renders the title as other heading levels when one is passed using headingLevel', () => {
     render(<EmptyStateHeader titleText="Empty state" headingLevel="h3" />);
-    expect(screen.getByRole('heading', { level: 3, name: 'Empty state' })).toHaveClass(
-      'pf-v5-c-empty-state__title-text'
-    );
+    expect(screen.getByRole('heading', { level: 3, name: 'Empty state' })).toHaveClass(styles.emptyStateTitleText);
   });
 
   test('Headers render children', () => {

package/src/components/EmptyState/examples/EmptyState.md

@@ -7,6 +7,7 @@ propComponents: ['EmptyState', 'EmptyStateHeader', 'EmptyStateIcon', 'EmptyState
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_success_color_100';
 
 ## Examples
 ### Basic

package/src/components/EmptyState/examples/EmptyStateCustomIconColor.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import { EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+/* eslint-disable camelcase */
+import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_success_color_100';
 
 export const EmptyStateCustomIconColor: React.FunctionComponent = () => (
   <EmptyState>
     <EmptyStateHeader
       titleText="Custom icon color"
       headingLevel="h4"
-      icon={<EmptyStateIcon icon={CheckIcon} color="var(--pf-v5-global--success-color--100)" />}
+      icon={<EmptyStateIcon icon={CheckIcon} color={global_success_color_100.var} />}
     />
     <EmptyStateBody>
       This represents the empty state pattern in PatternFly with a custom icon color. Hopefully it's simple enough to

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -143,7 +143,7 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
   componentDidUpdate(prevProps: ExpandableSectionProps) {
     if (
       this.props.variant === ExpandableSectionVariant.truncate &&
-      prevProps.truncateMaxLines !== this.props.truncateMaxLines
+      (prevProps.truncateMaxLines !== this.props.truncateMaxLines || prevProps.children !== this.props.children)
     ) {
       const expandableContent = this.expandableContentRef.current;
       setLineClamp(this.props.truncateMaxLines, expandableContent);

package/src/components/FileUpload/examples/FileUploadCustomPreview.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { FileUpload } from '@patternfly/react-core';
 import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 export const CustomPreviewFileUpload: React.FunctionComponent = () => {
   const [value, setValue] = React.useState<File>();
@@ -28,7 +29,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
       browseButtonText="Upload"
     >
       {value && (
-        <div className="pf-v5-u-m-md">
+        <div className={spacing.mMd}>
           <FileUploadIcon width="2em" height="2em" /> Custom preview here for your {value.size}-byte file named{' '}
           {value.name}
         </div>

package/src/components/FileUpload/examples/FileUploadCustomUpload.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FileUploadField, Checkbox } from '@patternfly/react-core';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 export const CustomPreviewFileUpload: React.FunctionComponent = () => {
   const properties = [
@@ -110,7 +111,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
         textAreaPlaceholder={hasPlaceholderText ? 'File preview' : ''}
       >
         {children && (
-          <div className="pf-v5-u-m-md">(A custom preview of the uploaded file can be passed as children)</div>
+          <div className={spacing.mMd}>(A custom preview of the uploaded file can be passed as children)</div>
         )}
       </FileUploadField>
     </div>

package/src/components/Form/Form.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Form/form';
 import { css } from '@patternfly/react-styles';
+import cssMaxWidth from '@patternfly/react-tokens/dist/esm/c_form_m_limit_width_MaxWidth';
 
 export interface FormProps extends Omit<React.HTMLProps<HTMLFormElement>, 'ref'> {
   /** Anything that can be rendered as Form content. */
@@ -30,7 +31,7 @@ const FormBase: React.FunctionComponent<FormProps> = ({
     noValidate
     {...(maxWidth && {
       style: {
-        '--pf-v5-c-form--m-limit-width--MaxWidth': maxWidth,
+        [cssMaxWidth.name]: maxWidth,
         ...props.style
       } as React.CSSProperties
     })}

package/src/components/Form/FormAlert.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Form/form';
 
 export interface FormAlertProps extends React.HTMLProps<HTMLDivElement> {
   /** An inline PatternFly Alert. */
@@ -15,7 +16,7 @@ export const FormAlert: React.FunctionComponent<FormAlertProps> = ({
 }: FormAlertProps) => (
   // There are currently no associated styles with the pf-v5-c-form_alert class.
   // Therefore, it does not exist in react-styles
-  <div {...props} className={css('pf-v5-c-form__alert', className)}>
+  <div {...props} className={css(`${styles.form}__alert`, className)}>
     {children}
   </div>
 );

package/src/components/Form/examples/Form.md

@@ -40,6 +40,7 @@ Radio
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
+import styles from '@patternfly/react-styles/css/components/Form/form';
 
 ## Examples
 

package/src/components/Form/examples/FormBasic.tsx

@@ -13,6 +13,7 @@ import {
   FormHelperText
 } from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import styles from '@patternfly/react-styles/css/components/Form/form';
 
 export const FormBasic: React.FunctionComponent = () => {
   const [name, setName] = React.useState('');
@@ -68,7 +69,7 @@ export const FormBasic: React.FunctionComponent = () => {
               aria-label="More info for name field"
               onClick={(e) => e.preventDefault()}
               aria-describedby="simple-form-name-01"
-              className="pf-v5-c-form__group-label-help"
+              className={styles.formGroupLabelHelp}
             >
               <HelpIcon />
             </button>

package/src/components/Form/examples/FormGroupLabelInfo.tsx

@@ -9,6 +9,7 @@ import {
   FormHelperText
 } from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import styles from '@patternfly/react-styles/css/components/Form/form';
 
 export const FormGroupLabelInfo: React.FunctionComponent = () => {
   const [name, setName] = React.useState('');
@@ -55,7 +56,7 @@ export const FormGroupLabelInfo: React.FunctionComponent = () => {
               aria-label="More info for name field"
               onClick={(e) => e.preventDefault()}
               aria-describedby="form-group-label-info"
-              className="pf-v5-c-form__group-label-help"
+              className={styles.formGroupLabelHelp}
             >
               <HelpIcon />
             </button>

package/src/components/Form/examples/FormLimitWidth.tsx

@@ -13,6 +13,7 @@ import {
   FormHelperText
 } from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import styles from '@patternfly/react-styles/css/components/Form/form';
 
 export const FormLimitWidth: React.FunctionComponent = () => {
   const [name, setName] = React.useState('');
@@ -68,7 +69,7 @@ export const FormLimitWidth: React.FunctionComponent = () => {
               aria-label="More info for name field"
               onClick={(e) => e.preventDefault()}
               aria-describedby="simple-form-name-02"
-              className="pf-v5-c-form__group-label-help"
+              className={styles.formGroupLabelHelp}
             >
               <HelpIcon />
             </button>

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Hint } from '../Hint';
+import styles from '@patternfly/react-styles/css/components/Hint/hint';
 
 test('renders without children', () => {
   render(<Hint data-testid="Hint" />);
@@ -14,12 +15,12 @@ test('renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('renders with class pf-v5-c-hint', () => {
+test(`renders with class ${styles.hint}`, () => {
   render(<Hint>Test</Hint>);
 
   const hint = screen.getByText('Test');
 
-  expect(hint).toHaveClass('pf-v5-c-hint');
+  expect(hint).toHaveClass(styles.hint);
 });
 
 test('renders with custom class names provided via prop', () => {
@@ -46,12 +47,12 @@ test('renders actions options', () => {
   expect(actions).toBeVisible();
 });
 
-test('renders with class pf-v5-c-hint__actions if there is an action prop', () => {
+test(`renders with class ${styles.hintActions} if there is an action prop`, () => {
   render(<Hint actions="actions">Test</Hint>);
 
   const hint = screen.getByText('actions');
 
-  expect(hint).toHaveClass('pf-v5-c-hint__actions');
+  expect(hint).toHaveClass(styles.hintActions);
 });
 
 test('renders with inherited element props spread to the component', () => {

package/src/components/Hint/__tests__/HintBody.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import styles from '@patternfly/react-styles/css/components/Hint/hint';
 
 import { HintBody } from '../HintBody';
 
@@ -16,12 +17,12 @@ test('renders children', () => {
   expect(screen.getByRole('button', { name: 'Test Me' })).toBeVisible();
 });
 
-test('renders with class pf-v5-c-hint__body', () => {
+test(`renders with class ${styles.hintBody}`, () => {
   render(<HintBody>Hint Body Test</HintBody>);
 
   const body = screen.getByText('Hint Body Test');
 
-  expect(body).toHaveClass('pf-v5-c-hint__body');
+  expect(body).toHaveClass(styles.hintBody);
 });
 
 test('renders with custom class names provided via prop', () => {

package/src/components/Hint/__tests__/HintFooter.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import styles from '@patternfly/react-styles/css/components/Hint/hint';
 
 import { HintFooter } from '../HintFooter';
 
@@ -16,12 +17,12 @@ test('renders children', () => {
   expect(screen.getByRole('button', { name: 'Test Me' })).toBeVisible();
 });
 
-test('renders with class pf-v5-c-hint__footer', () => {
+test(`renders with class ${styles.hintFooter}`, () => {
   render(<HintFooter>Hint Body Test</HintFooter>);
 
   const body = screen.getByText('Hint Body Test');
 
-  expect(body).toHaveClass('pf-v5-c-hint__footer');
+  expect(body).toHaveClass(styles.hintFooter);
 });
 
 test('renders with custom class names provided via prop', () => {

package/src/components/Hint/__tests__/HintTitle.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import styles from '@patternfly/react-styles/css/components/Hint/hint';
 
 import { HintTitle } from '../HintTitle';
 
@@ -16,12 +17,12 @@ test('renders children', () => {
   expect(screen.getByRole('button', { name: 'Test Me' })).toBeVisible();
 });
 
-test('renders with class pf-v5-c-hint__title', () => {
+test(`renders with class ${styles.hintTitle}`, () => {
   render(<HintTitle>Hint Body Test</HintTitle>);
 
   const body = screen.getByText('Hint Body Test');
 
-  expect(body).toHaveClass('pf-v5-c-hint__title');
+  expect(body).toHaveClass(styles.hintTitle);
 });
 
 test('renders with custom class names provided via prop', () => {

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Icon } from '../Icon';
 import { CheckIcon } from '@patternfly/react-icons';
+import styles from '@patternfly/react-styles/css/components/Icon/icon';
 
 test('renders basic icon successfully', () => {
   const { asFragment } = render(
@@ -19,9 +20,9 @@ test('checks basic icon structure', () => {
     </Icon>
   );
   const iconContainer = screen.getByTitle('icon');
-  expect(iconContainer).toHaveClass('pf-v5-c-icon');
-  const iconContent = iconContainer.querySelector('.pf-v5-c-icon__content');
-  expect(iconContent).toHaveClass('pf-v5-c-icon__content');
+  expect(iconContainer).toHaveClass(styles.icon);
+  const iconContent = iconContainer.querySelector(`.${styles.iconContent}`);
+  expect(iconContent).toHaveClass(styles.iconContent);
 });
 
 test('renders without children', () => {
@@ -47,7 +48,7 @@ Object.values(['sm', 'md', 'lg', 'xl']).forEach((size) => {
         <CheckIcon />
       </Icon>
     );
-    const iconContainer = screen.getByTitle(`content-${size}-icon`).querySelector('.pf-v5-c-icon__content');
+    const iconContainer = screen.getByTitle(`content-${size}-icon`).querySelector(`.${styles.iconContent}`);
 
     expect(iconContainer).toHaveClass(`pf-m-${size}`);
   });
@@ -59,7 +60,7 @@ test('check icon without iconSize', () => {
       <CheckIcon />
     </Icon>
   );
-  const iconContainer = screen.getByTitle('no-icon-size').querySelector('.pf-v5-c-icon__content');
+  const iconContainer = screen.getByTitle('no-icon-size').querySelector(`.${styles.iconContent}`);
   expect(Array.from(iconContainer?.classList || []).some((c) => /pf-m-*/.test(c))); // Check no modifier classes have been added
 });
 
@@ -70,7 +71,7 @@ Object.values(['sm', 'md', 'lg', 'xl']).forEach((size) => {
         <CheckIcon />
       </Icon>
     );
-    const iconContainer = screen.getByTitle(`progress-content-${size}-icon`).querySelector('.pf-v5-c-icon__progress');
+    const iconContainer = screen.getByTitle(`progress-content-${size}-icon`).querySelector(`.${styles.iconProgress}`);
 
     expect(iconContainer).toHaveClass(`pf-m-${size}`);
   });
@@ -82,7 +83,7 @@ test('check icon without progress icon size', () => {
       <CheckIcon />
     </Icon>
   );
-  const iconContainer = screen.getByTitle('no-progress-icon-size').querySelector('.pf-v5-c-icon__progress');
+  const iconContainer = screen.getByTitle('no-progress-icon-size').querySelector(`.${styles.iconProgress}`);
   expect(Array.from(iconContainer?.classList || []).some((c) => /pf-m-*/.test(c))); // Check no modifier classes have been added
 });
 
@@ -116,7 +117,7 @@ Object.values(['custom', 'info', 'success', 'warning', 'danger']).forEach((statu
         <CheckIcon />
       </Icon>
     );
-    const iconContent = screen.getByTitle(`${status}-icon`).querySelector('.pf-v5-c-icon__content');
+    const iconContent = screen.getByTitle(`${status}-icon`).querySelector(`.${styles.iconContent}`);
 
     expect(iconContent).toHaveClass(`pf-m-${status}`);
   });
@@ -128,7 +129,7 @@ test('check icon without status', () => {
       <CheckIcon />
     </Icon>
   );
-  const iconContent = screen.getByTitle('no-status').querySelector('.pf-v5-c-icon__content');
+  const iconContent = screen.getByTitle('no-status').querySelector(`.${styles.iconContent}`);
   expect(Array.from(iconContent?.classList || []).some((c) => /pf-m-*/.test(c))); // Check no modifier classes have been added
 });
 
@@ -162,8 +163,8 @@ test('sets isInProgress successfully', () => {
   const iconContainer = screen.getByTitle('progress-icon');
   expect(iconContainer).toHaveClass('pf-m-in-progress');
 
-  const iconContent = iconContainer.querySelector('.pf-v5-c-icon__progress');
-  expect(iconContent).toHaveClass('pf-v5-c-icon__progress');
+  const iconContent = iconContainer.querySelector(`.${styles.iconProgress}`);
+  expect(iconContent).toHaveClass(styles.iconProgress);
 });
 
 test('check icon without isInProgress', () => {

package/src/components/InputGroup/InputGroup.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/InputGroup/input-group';
 import { css } from '@patternfly/react-styles';
-import { FormSelect } from '../FormSelect';
-import { TextArea } from '../TextArea';
-import { TextInput } from '../TextInput';
 
 export interface InputGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the input group. */
@@ -20,61 +17,12 @@ export const InputGroupBase: React.FunctionComponent<InputGroupProps> = ({
   innerRef,
   ...props
 }: InputGroupProps) => {
-  const getIdItem = () => {
-    const getChildId = (_children: any) =>
-      React.Children.toArray(_children).find(
-        (_child: any) => !formCtrls.includes(_child?.type?.displayName) && _child?.props?.id
-      );
-    let childId = getChildId(children);
-    if (childId) {
-      return childId;
-    }
-    React.Children.toArray(children).find((child: any) => {
-      const _childId = getChildId(child.props.children);
-      if (_childId) {
-        childId = _childId;
-        return true;
-      }
-    });
-    return childId;
-  };
-  const formCtrls = [FormSelect, TextArea, TextInput].map((comp) => comp.displayName);
-  const idItem = getIdItem() as React.ReactElement<{ id: string }>;
   const ref = React.useRef(null);
   const inputGroupRef = innerRef || ref;
 
-  const childrenWithId = React.Children.map(children, (child: any) => {
-    if (child?.type.displayName === 'InputGroupItem') {
-      const newChildren = React.Children.map(child.props.children, (_child) => {
-        if (!_child.props) {
-          return _child;
-        }
-        if (_child.props['aria-describedby']) {
-          return _child;
-        }
-        if (!formCtrls.includes(_child.type.displayName)) {
-          return _child;
-        }
-        return React.cloneElement(_child, {
-          'aria-describedby': _child.props['aria-describedby'] === '' ? undefined : idItem?.props?.id
-        });
-      });
-      return React.cloneElement(child, {}, newChildren);
-    }
-
-    if (child?.props['aria-describedby']) {
-      return child;
-    }
-    if (!formCtrls.includes(child?.type.displayName)) {
-      return child;
-    }
-    return React.cloneElement(child, {
-      'aria-describedby': child.props['aria-describedby'] === '' ? undefined : idItem?.props?.id
-    });
-  });
   return (
     <div ref={inputGroupRef} className={css(styles.inputGroup, className)} {...props}>
-      {idItem ? childrenWithId : children}
+      {children}
     </div>
   );
 };

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

@@ -8,59 +8,22 @@ import { Button } from '../../Button';
 import { TextInput } from '../../TextInput';
 
 describe('InputGroup', () => {
-  test('add aria-describedby to form-control if one of the non form-controls has id', () => {
-    // In this test, TextInput is a form-control component and Button is not.
-    // If Button has an id props, this should be used in aria-describedby.
+  // Regression test for https://github.com/patternfly/patternfly-react/issues/9667
+  test('wont add aria-describedby automatically to form-control', () => {
     render(
       <InputGroup>
         <InputGroupItem>
-          <TextInput value="some data" aria-label="some text" />
+          <TextInput aria-label="User password" />
         </InputGroupItem>
         <InputGroupItem>
-          <Button variant="primary" id="button-id">
-            hello
+          <Button variant="control" id="show-password-toggler">
+            Show
           </Button>
         </InputGroupItem>
       </InputGroup>
     );
-    expect(screen.getByLabelText('some text')).toHaveAttribute('aria-describedby', 'button-id');
-  });
 
-  test('wont add aria-describedby to form-control if describedby is empty string', () => {
-    // In this test, TextInput is a form-control component and Button is not.
-    // If Button has an id props, this should be used in aria-describedby, but this
-    // example has an empty aria-describedby to prevent that from happening.
-    render(
-      <InputGroup>
-        <InputGroupItem>
-          <TextInput value="some data" aria-describedby="" aria-label="some text" />
-        </InputGroupItem>
-        <InputGroupItem>
-          <Button id="button-id">
-            hello
-          </Button>
-        </InputGroupItem>
-      </InputGroup>
-    );
-    expect(screen.getByLabelText('some text')).not.toHaveAttribute('aria-describedby');
-  });
-
-  test('wont override aria-describedby in form-control if describedby has value', () => {
-    // In this test, TextInput is a form-control component and Button is not.
-    // If Button has an id props, this should be used in aria-describedby, but this
-    // example has a predefined aria-describedby to prevent that from happening
-    render(
-      <InputGroup>
-        <InputGroupItem>
-          <TextInput value="some data" aria-describedby="myself" aria-label="some text" />
-        </InputGroupItem>
-        <InputGroupItem>
-          <Button id="button-id">
-            hello
-          </Button>
-        </InputGroupItem>
-      </InputGroup>
-    );
-    expect(screen.getByLabelText('some text')).toHaveAttribute('aria-describedby', 'myself');
+    const formControl = screen.getByLabelText("User password");
+    expect(formControl).not.toHaveAttribute("aria-describedby");
   });
 });

package/src/components/JumpLinks/JumpLinks.tsx

@@ -227,7 +227,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
       {...props}
     >
       <div className={styles.jumpLinksMain}>
-        <div className={css('pf-v5-c-jump-links__header')}>
+        <div className={css(`${styles.jumpLinks}__header`)}>
           {expandable && (
             <div className={styles.jumpLinksToggle}>
               <Button

package/src/components/Label/Label.tsx

@@ -7,6 +7,7 @@ import { Tooltip, TooltipPosition } from '../Tooltip';
 import { css } from '@patternfly/react-styles';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import { useIsomorphicLayoutEffect } from '../../helpers';
+import cssTextMaxWidth from '@patternfly/react-tokens/dist/esm/c_label__text_MaxWidth';
 
 export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   /** Content rendered inside the label. */
@@ -230,7 +231,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
         className={css(styles.labelText)}
         {...(textMaxWidth && {
           style: {
-            '--pf-v5-c-label__text--MaxWidth': textMaxWidth
+            [cssTextMaxWidth.name]: textMaxWidth
           } as React.CSSProperties
         })}
       >