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

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

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/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)}