@patternfly/react-core 6.0.0-alpha.1 → 6.0.0-alpha.3

package/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
+import styles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 
 import { TextInputGroupMain } from '../TextInputGroupMain';
 import { TextInputGroupContext } from '../TextInputGroup';
@@ -20,12 +21,12 @@ describe('TextInputGroupMain', () => {
     expect(screen.getByText('Test')).toBeVisible();
   });
 
-  it('renders with class pf-v5-c-text-input-group__main', () => {
+  it(`renders with class ${styles.textInputGroupMain}`, () => {
     render(<TextInputGroupMain>Test</TextInputGroupMain>);
 
     const inputGroupMain = screen.getByText('Test');
 
-    expect(inputGroupMain).toHaveClass('pf-v5-c-text-input-group__main');
+    expect(inputGroupMain).toHaveClass(styles.textInputGroupMain);
   });
 
   it('does not render with class pf-m-icon when an icon prop is not passed', () => {
@@ -52,20 +53,20 @@ describe('TextInputGroupMain', () => {
     expect(inputGroupMain).toHaveClass('custom-class');
   });
 
-  it('renders with class pf-v5-c-text-input-group__text on the inputs parent', () => {
+  it(`renders with class ${styles.textInputGroupText} on the inputs parent`, () => {
     render(<TextInputGroupMain>Test</TextInputGroupMain>);
 
     const inputGroupText = screen.getByRole('textbox').parentNode;
 
-    expect(inputGroupText).toHaveClass('pf-v5-c-text-input-group__text');
+    expect(inputGroupText).toHaveClass(styles.textInputGroupText);
   });
 
-  it('renders the input with class pf-v5-c-text-input-group__text-input', () => {
+  it(`renders the input with class ${styles.textInputGroupTextInput}`, () => {
     render(<TextInputGroupMain>Test</TextInputGroupMain>);
 
     const input = screen.getByRole('textbox');
 
-    expect(input).toHaveClass('pf-v5-c-text-input-group__text-input');
+    expect(input).toHaveClass(styles.textInputGroupTextInput);
   });
 
   it('does not render the icon when it is not passed', () => {
@@ -180,7 +181,7 @@ describe('TextInputGroupMain', () => {
     expect(hintInput).toBeInTheDocument();
   });
 
-  it('renders the hint input with classes pf-v5-c-text-input-group__text-input and pf-m-hint', () => {
+  it(`renders the hint input with classes ${styles.textInputGroupTextInput} and ${styles.modifiers.hint}`, () => {
     // we set the type of the main input to search here so that we can accurately target the hint input
     render(
       <TextInputGroupMain hint="Test" type="search">
@@ -190,8 +191,8 @@ describe('TextInputGroupMain', () => {
 
     const hintInput = screen.getByRole('textbox', { hidden: true });
 
-    expect(hintInput).toHaveClass('pf-m-hint');
-    expect(hintInput).toHaveClass('pf-v5-c-text-input-group__text-input');
+    expect(hintInput).toHaveClass(styles.modifiers.hint);
+    expect(hintInput).toHaveClass(styles.textInputGroupTextInput);
   });
 
   it('renders the hint input as disabled', () => {

package/src/components/TextInputGroup/__tests__/TextInputGroupUtilities.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
+import styles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 
 import { TextInputGroupUtilities } from '../TextInputGroupUtilities';
 
@@ -18,12 +18,12 @@ describe('TextInputGroupUtilities', () => {
     expect(screen.getByRole('button', { name: 'Test' })).toBeVisible();
   });
 
-  it('renders with class pf-v5-c-text-input-group__utilities', () => {
+  it(`renders with class ${styles.textInputGroupUtilities}`, () => {
     render(<TextInputGroupUtilities>Test</TextInputGroupUtilities>);
 
     const utilities = screen.getByText('Test');
 
-    expect(utilities).toHaveClass('pf-v5-c-text-input-group__utilities');
+    expect(utilities).toHaveClass(styles.textInputGroupUtilities);
   });
 
   it('matches the snapshot', () => {

package/src/components/TextInputGroup/examples/TextInputGroupBasic.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import { TextInputGroup, TextInputGroupMain } from '@patternfly/react-core';
 
-export const TextInputGroupBasic: React.FunctionComponent = () => (
-  <TextInputGroup>
-    <TextInputGroupMain />
-  </TextInputGroup>
-);
+export const TextInputGroupBasic: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <TextInputGroup>
+      <TextInputGroupMain value={value} onChange={(_event, value) => setValue(value)} />
+    </TextInputGroup>
+  );
+};

package/src/components/TimePicker/TimePicker.tsx

@@ -21,6 +21,8 @@ import {
 } from './TimePickerUtils';
 import { HelperText, HelperTextItem } from '../HelperText';
 import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
+import cssDatePickerFormControlWidth from '@patternfly/react-tokens/dist/esm/c_date_picker__input_c_form_control_Width';
+
 export interface TimePickerProps
   extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'> {
   /** Additional classes added to the time picker. */
@@ -472,7 +474,7 @@ class TimePicker extends React.Component<TimePickerProps, TimePickerState> {
       ...props
     } = this.props;
     const { timeState, isTimeOptionsOpen, isInvalid, minTimeState, maxTimeState } = this.state;
-    const style = { '--pf-v5-c-date-picker__input--c-form-control--Width': width } as React.CSSProperties;
+    const style = { [cssDatePickerFormControlWidth.name]: width } as React.CSSProperties;
     const options = makeTimeOptions(stepMinutes, !is24Hour, delimiter, minTimeState, maxTimeState, includeSeconds);
     const isValidFormat = this.isValidFormat(timeState);
     const randomId = id || getUniqueId('time-picker');

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/Timestamp/Timestamp.tsx

@@ -144,7 +144,7 @@ export const Timestamp: React.FunctionComponent<TimestampProps> = ({
       {...(tooltip && { tabIndex: 0 })}
       {...propsWithoutDateTime}
     >
-      <time className="pf-v5-c-timestamp__text" dateTime={dateTime || new Date(date).toISOString()}>
+      <time className={`${styles.timestamp}__text`} dateTime={dateTime || new Date(date).toISOString()}>
         {!children ? defaultDisplay : children}
       </time>
     </span>

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen, getDefaultNormalizer } from '@testing-library/react';
 import { Timestamp, TimestampFormat, TimestampTooltipVariant } from '../Timestamp';
+import styles from '@patternfly/react-styles/css/components/Timestamp/timestamp';
 
 jest.mock('../../Tooltip', () => ({
   Tooltip: ({ content, children, ...props }) => (
@@ -147,16 +148,16 @@ test('Renders with 12 hour time for a 24 hour locale when is12Hour is passed', (
   expect(screen.getByText('01/02/2022, 1:00:00 pm')).toBeInTheDocument();
 });
 
-test('Renders with pf-v5-c-timestamp by default', () => {
+test(`Renders with ${styles.timestamp} by default`, () => {
   render(<Timestamp date={new Date(2022, 0, 1)} />);
 
-  expect(screen.getByText('1/1/2022, 12:00:00 AM').parentElement).toHaveClass('pf-v5-c-timestamp');
+  expect(screen.getByText('1/1/2022, 12:00:00 AM').parentElement).toHaveClass(styles.timestamp);
 });
 
-test('Renders with pf-v5-c-timestamp__text by default', () => {
+test(`Renders with ${styles.timestamp}__text by default`, () => {
   render(<Timestamp date={new Date(2022, 0, 1)} />);
 
-  expect(screen.getByText('1/1/2022, 12:00:00 AM')).toHaveClass('pf-v5-c-timestamp__text');
+  expect(screen.getByText('1/1/2022, 12:00:00 AM')).toHaveClass(`${styles.timestamp}__text`);
 });
 
 test('Renders with custom class names', () => {

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Title } from '../Title';
+import styles from '@patternfly/react-styles/css/components/Title/title';
 
 test('Renders without children', () => {
   render(
@@ -16,14 +17,14 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the pf-v5-c-title', () => {
+test(`Renders with the ${styles.title}`, () => {
   render(<Title headingLevel="h1">Test</Title>);
-  expect(screen.getByRole('heading')).toHaveClass('pf-v5-c-title');
+  expect(screen.getByRole('heading')).toHaveClass(styles.title);
 });
 
-test('Renders with only the class pf-v5-c-title and the heading level modifier class pf-m-2xl by default', () => {
+test(`Renders with only the class ${styles.title} and the heading level modifier class ${styles.modifiers['2xl']} by default`, () => {
   render(<Title headingLevel="h1">Test</Title>);
-  expect(screen.getByRole('heading')).toHaveClass('pf-v5-c-title pf-m-2xl', { exact: true });
+  expect(screen.getByRole('heading')).toHaveClass(`${styles.title} ${styles.modifiers['2xl']}`, { exact: true });
 });
 
 test('Renders with custom class name when className prop is passed', () => {

package/src/components/Toolbar/ToolbarItem.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
+import cssWidth from '@patternfly/react-tokens/dist/esm/c_toolbar__item_Width';
 
 import { formatBreakpointMods, toCamel } from '../../helpers/util';
 import { Divider } from '../Divider';
@@ -101,7 +102,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   if (widths) {
     Object.entries(widths || {}).map(
       ([breakpoint, value]) =>
-        (widthStyles[`--pf-v5-c-toolbar__item--Width${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`] = value)
+        (widthStyles[`${cssWidth.name}${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`] = value)
     );
   }
 

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');
   });
 });

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

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

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

@@ -69,7 +69,6 @@ exports[`Toolbar should render with custom chip content 1`] = `
             class="pf-v5-c-toolbar__toggle"
           >
             <button
-              aria-controls="toolbar-with-filter-expandable-content-3"
               aria-disabled="false"
               aria-haspopup="false"
               aria-label="Show Filters"

package/src/components/TreeView/TreeViewList.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import { Divider } from '../Divider';
+import styles from '@patternfly/react-styles/css/components/TreeView/tree-view';
 
 export interface TreeViewListProps extends React.HTMLProps<HTMLUListElement> {
   /** Child nodes of the current tree view. */
@@ -24,7 +25,7 @@ export const TreeViewList: React.FunctionComponent<TreeViewListProps> = ({
         <Divider />
       </React.Fragment>
     )}
-    <ul className={css('pf-v5-c-tree-view__list')} role={isNested ? 'group' : 'tree'} {...props}>
+    <ul className={css(`${styles.treeView}__list`)} role={isNested ? 'group' : 'tree'} {...props}>
       {children}
     </ul>
   </>

package/src/components/TreeView/TreeViewListItem.tsx

@@ -135,6 +135,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
         }
       }}
       {...((hasCheckbox || isSelectable) && { 'aria-labelledby': `label-${randomId}` })}
+      {...(ToggleComponent === 'button' && { type: 'button' })}
       tabIndex={-1}
     >
       <span className={css(styles.treeViewNodeToggleIcon)}>
@@ -167,7 +168,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       <>
         {isCompact && title && <span className={css(styles.treeViewNodeTitle)}>{title}</span>}
         {isSelectable ? (
-          <button tabIndex={-1} className={css(styles.treeViewNodeText)}>
+          <button tabIndex={-1} className={css(styles.treeViewNodeText)} type="button">
             {name}
           </button>
         ) : (
@@ -197,7 +198,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
     <li
       id={id}
       className={css(styles.treeViewListItem, internalIsExpanded && styles.modifiers.expanded)}
-      {...(internalIsExpanded && { 'aria-expanded': 'true' })}
+      aria-expanded={internalIsExpanded}
       role="treeitem"
       tabIndex={-1}
     >
@@ -230,6 +231,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
               }}
               {...(hasCheckbox && { htmlFor: randomId })}
               {...((hasCheckbox || (isSelectable && children)) && { id: `label-${randomId}` })}
+              {...(Component === 'button' && { type: 'button' })}
             >
               <span className={css(styles.treeViewNodeContainer)}>
                 {children && renderToggle(randomId)}

package/src/components/TreeView/TreeViewRoot.tsx

@@ -32,9 +32,7 @@ class TreeViewRoot extends React.Component<TreeViewRootProps> {
       );
     }
     if (this.props.hasCheckboxes || this.props.hasSelectableNodes) {
-      const firstToggle = this.treeRef.current.getElementsByClassName(
-        'pf-v5-c-tree-view__node-toggle'
-      )[0] as HTMLElement;
+      const firstToggle = this.treeRef.current.getElementsByClassName(styles.treeViewNodeToggle)[0] as HTMLElement;
       if (firstToggle) {
         firstToggle.tabIndex = 0;
       }
@@ -45,15 +43,13 @@ class TreeViewRoot extends React.Component<TreeViewRootProps> {
         }
       }
       if (this.props.hasSelectableNodes) {
-        const firstTextButton = this.treeRef.current.getElementsByClassName(
-          'pf-v5-c-tree-view__node-text'
-        )[0] as HTMLElement;
+        const firstTextButton = this.treeRef.current.getElementsByClassName(styles.treeViewNodeText)[0] as HTMLElement;
         if (firstTextButton) {
           firstTextButton.tabIndex = 0;
         }
       }
     } else {
-      (this.treeRef.current?.getElementsByClassName('pf-v5-c-tree-view__node')[0] as HTMLElement).tabIndex = 0;
+      (this.treeRef.current?.getElementsByClassName(styles.treeViewNode)[0] as HTMLElement).tabIndex = 0;
     }
   }
 
@@ -69,13 +65,13 @@ class TreeViewRoot extends React.Component<TreeViewRootProps> {
   handleKeys = (event: KeyboardEvent) => {
     if (
       !this.treeRef.current.contains(event.target as HTMLElement) ||
-      !(event.target as HTMLElement).classList.contains('pf-v5-c-tree-view__node')
+      !(event.target as HTMLElement).classList.contains(styles.treeViewNode)
     ) {
       return;
     }
     const activeElement = document.activeElement;
     const key = event.key;
-    const treeItems = Array.from(this.treeRef.current?.getElementsByClassName('pf-v5-c-tree-view__node')).filter(
+    const treeItems = Array.from(this.treeRef.current?.getElementsByClassName(styles.treeViewNode)).filter(
       (el) => !el.classList.contains('pf-m-disabled')
     );
 
@@ -97,7 +93,7 @@ class TreeViewRoot extends React.Component<TreeViewRootProps> {
 
     if (['ArrowLeft', 'ArrowRight'].includes(key)) {
       const isExpandable = activeElement?.firstElementChild?.firstElementChild?.classList.contains(
-        'pf-v5-c-tree-view__node-toggle'
+        styles.treeViewNodeToggle
       );
       const isExpanded = activeElement?.closest('li')?.classList.contains('pf-m-expanded');
       if (key === 'ArrowLeft') {
@@ -142,7 +138,7 @@ class TreeViewRoot extends React.Component<TreeViewRootProps> {
       event.preventDefault();
     }
 
-    const treeNodes = Array.from(this.treeRef.current?.getElementsByClassName('pf-v5-c-tree-view__node'));
+    const treeNodes = Array.from(this.treeRef.current?.getElementsByClassName(styles.treeViewNode));
 
     handleArrows(
       event,