@patternfly/react-core 6.5.0-prerelease.64 → 6.5.0-prerelease.66

package/src/components/TextInputGroup/TextInputGroup.tsx

@@ -1,6 +1,7 @@
 import { createContext, useRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 import { css } from '@patternfly/react-styles';
+import { ValidatedOptions } from '../../helpers/constants';
 
 export interface TextInputGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the text input group */
@@ -11,8 +12,11 @@ export interface TextInputGroupProps extends React.HTMLProps<HTMLDivElement> {
   isDisabled?: boolean;
   /** Flag to indicate the toggle has no border or background */
   isPlain?: boolean;
-  /** Status variant of the text input group. */
-  validated?: 'success' | 'warning' | 'error';
+  /** Value to indicate if the text input group is modified to show that validation state.
+   * If set to success, warning, or error, the group will show that state.
+   * If set to default, no validation styling is applied (use to clear a prior validation state).
+   */
+  validated?: 'success' | 'warning' | 'error' | 'default' | ValidatedOptions;
   /** @hide A reference object to attach to the input box */
   innerRef?: React.RefObject<any>;
 }
@@ -32,6 +36,7 @@ export const TextInputGroup: React.FunctionComponent<TextInputGroupProps> = ({
 }: TextInputGroupProps) => {
   const ref = useRef(null);
   const textInputGroupRef = innerRef || ref;
+  const hasValidatedModifier = ['success', 'error', 'warning'].includes(validated);
 
   return (
     <TextInputGroupContext.Provider value={{ isDisabled, validated }}>
@@ -41,7 +46,7 @@ export const TextInputGroup: React.FunctionComponent<TextInputGroupProps> = ({
           styles.textInputGroup,
           isDisabled && styles.modifiers.disabled,
           isPlain && styles.modifiers.plain,
-          validated && styles.modifiers[validated],
+          hasValidatedModifier && styles.modifiers[validated as 'success' | 'warning' | 'error'],
           className
         )}
         {...props}

package/src/components/TextInputGroup/TextInputGroupMain.tsx

@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/TextInputGroup/text-
 import { css } from '@patternfly/react-styles';
 import { TextInputGroupContext } from './TextInputGroup';
 import { TextInputGroupIcon } from './TextInputGroupIcon';
-import { statusIcons, ValidatedOptions } from '../../helpers';
+import { statusIcons } from '../../helpers';
 
 export interface TextInputGroupMainProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
   /** Content rendered inside the text input group main div */
@@ -86,7 +86,19 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
   const { isDisabled, validated } = useContext(TextInputGroupContext);
   const ref = useRef(null);
   const textInputGroupInputInputRef = innerRef || ref;
-  const StatusIcon = statusIcons[validated === ValidatedOptions.error ? 'danger' : validated];
+  const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
+  const StatusIcon = (() => {
+    if (!hasStatusIcon) {
+      return undefined;
+    }
+    if (validated === 'error') {
+      return statusIcons.danger;
+    }
+    if (validated === 'success') {
+      return statusIcons.success;
+    }
+    return statusIcons.warning;
+  })();
 
   const handleChange = (event: React.FormEvent<HTMLInputElement>) => {
     onChange(event, event.currentTarget.value);
@@ -126,7 +138,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
           {...(ariaControls && { 'aria-controls': ariaControls })}
           {...inputProps}
         />
-        {validated && <TextInputGroupIcon isStatus>{<StatusIcon />}</TextInputGroupIcon>}
+        {hasStatusIcon && <TextInputGroupIcon isStatus>{<StatusIcon />}</TextInputGroupIcon>}
       </span>
     </div>
   );

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

@@ -72,6 +72,16 @@ describe('TextInputGroup', () => {
     expect(inputGroup).toHaveClass(styles.modifiers.error);
   });
 
+  it('does not apply validation modifiers when validated="default"', () => {
+    render(<TextInputGroup validated="default">Test</TextInputGroup>);
+
+    const inputGroup = screen.getByText('Test');
+
+    expect(inputGroup).not.toHaveClass(styles.modifiers.success);
+    expect(inputGroup).not.toHaveClass(styles.modifiers.warning);
+    expect(inputGroup).not.toHaveClass(styles.modifiers.error);
+  });
+
   it('passes isDisabled=false to children via a context when isDisabled prop is not passed', () => {
     const TestComponent: React.FunctionComponent = () => {
       const context = useContext(TextInputGroupContext);

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

@@ -251,6 +251,16 @@ describe('TextInputGroupMain', () => {
     expect(screen.getByRole('textbox').nextElementSibling).toHaveClass(styles.modifiers.status);
   });
 
+  it('does not render a status icon when validated is default', () => {
+    render(
+      <TextInputGroupContext.Provider value={{ validated: 'default' }}>
+        <TextInputGroupMain />
+      </TextInputGroupContext.Provider>
+    );
+
+    expect(screen.queryByRole('textbox').nextElementSibling).toBeNull();
+  });
+
   it('does not call onChange callback when the input does not change', () => {
     const onChangeMock = jest.fn();
 

package/src/demos/RTL/examples/PaginatedTable.tsx

@@ -15,6 +15,7 @@ import {
   DropdownList,
   Icon,
   Label,
+  LabelColor,
   Masthead,
   MastheadMain,
   MastheadLogo,
@@ -180,7 +181,7 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
       case 'רץ':
         return (
           <Label
-            color="green"
+            color={LabelColor.green}
             icon={
               <Icon shouldMirrorRTL>
                 <WalkingIcon />
@@ -199,7 +200,7 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
                 <HandPaperIcon />
               </Icon>
             }
-            color="red"
+            color={LabelColor.red}
           >
             {translation.table.rows.status.stopped}
           </Label>
@@ -207,14 +208,14 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
       case 'Needs maintenance':
       case 'זקוק לתחזוקה':
         return (
-          <Label icon={<ToolsIcon />} color="blue">
+          <Label icon={<ToolsIcon />} color={LabelColor.blue}>
             {translation.table.rows.status.needsMaintenance}
           </Label>
         );
       case 'Down':
       case 'מטה':
         return (
-          <Label icon={<ClockIcon />} color="orange">
+          <Label icon={<ClockIcon />} color={LabelColor.orange}>
             {translation.table.rows.status.down}
           </Label>
         );

package/src/demos/examples/Card/CardHorizontalGrid.tsx

@@ -8,6 +8,7 @@ import {
   Level,
   LabelGroup,
   Label,
+  LabelColor,
   Grid,
   Flex,
   List,
@@ -88,16 +89,16 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
           <Level hasGutter>
             <CardTitle id="titleId">Getting Started</CardTitle>
             <LabelGroup isCompact>
-              <Label isCompact icon={<RhUiInformationFillIcon />} color="blue">
+              <Label isCompact icon={<RhUiInformationFillIcon />} color={LabelColor.blue}>
                 Set up your cluster
               </Label>
-              <Label isCompact icon={<RhUiInformationFillIcon />} color="purple">
+              <Label isCompact icon={<RhUiInformationFillIcon />} color={LabelColor.purple}>
                 Guided tours
               </Label>
-              <Label isCompact icon={<RhUiInformationFillIcon />} color="green">
+              <Label isCompact icon={<RhUiInformationFillIcon />} color={LabelColor.green}>
                 Quick starts
               </Label>
-              <Label isCompact icon={<RhUiInformationFillIcon />} color="orange">
+              <Label isCompact icon={<RhUiInformationFillIcon />} color={LabelColor.orange}>
                 Learning resources
               </Label>
             </LabelGroup>
@@ -118,7 +119,7 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
                 direction={{ default: 'column' }}
                 grow={{ default: 'grow' }}
               >
-                <Label icon={<RhUiInformationFillIcon />} color="blue">
+                <Label icon={<RhUiInformationFillIcon />} color={LabelColor.blue}>
                   Set up your cluster
                 </Label>
                 <p>Continue setting up your cluster to access all you cain in the Console</p>
@@ -149,7 +150,7 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
                 direction={{ default: 'column' }}
                 grow={{ default: 'grow' }}
               >
-                <Label icon={<RhUiInformationFillIcon />} color="purple">
+                <Label icon={<RhUiInformationFillIcon />} color={LabelColor.purple}>
                   Guided tours
                 </Label>
                 <p>Tour some of the key features around the console</p>
@@ -177,7 +178,7 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
                 direction={{ default: 'column' }}
                 grow={{ default: 'grow' }}
               >
-                <Label icon={<RhUiInformationFillIcon />} color="green">
+                <Label icon={<RhUiInformationFillIcon />} color={LabelColor.green}>
                   Quick starts
                 </Label>
                 <p>Get started with features using our step-by-step documentation</p>
@@ -208,7 +209,7 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
                 direction={{ default: 'column' }}
                 grow={{ default: 'grow' }}
               >
-                <Label icon={<RhUiInformationFillIcon />} color="orange">
+                <Label icon={<RhUiInformationFillIcon />} color={LabelColor.orange}>
                   Learning resources
                 </Label>
                 <p>Learn about new features within the Console and get started with demo apps</p>

package/src/demos/examples/Card/CardStatus.tsx

@@ -10,6 +10,7 @@ import {
   Grid,
   GridItem,
   Label,
+  LabelStatus,
   NotificationDrawer,
   NotificationDrawerBody,
   NotificationDrawerGroup,
@@ -204,11 +205,11 @@ export const CardStatus: React.FunctionComponent = () => {
       <FlexItem spacer={{ default: 'spacerMd' }}>
         <span>Notifications</span>
       </FlexItem>
-      <Label status="danger">1</Label>
-      <Label status="warning">3</Label>
-      <Label status="success">3</Label>
-      <Label status="danger">3</Label>
-      <Label status="info">3</Label>
+      <Label status={LabelStatus.danger}>1</Label>
+      <Label status={LabelStatus.warning}>3</Label>
+      <Label status={LabelStatus.success}>3</Label>
+      <Label status={LabelStatus.danger}>3</Label>
+      <Label status={LabelStatus.info}>3</Label>
     </Flex>
   );
 

package/src/demos/examples/Tabs/TabsOpen.tsx

@@ -15,6 +15,7 @@ import {
   DescriptionListTerm,
   DescriptionListDescription,
   Label,
+  LabelColor,
   LabelGroup,
   Flex,
   FlexItem
@@ -73,7 +74,7 @@ export const TabsOpen: React.FunctionComponent = () => {
             <DescriptionListDescription>
               <Flex spaceItems={{ default: 'spaceItemsSm' }}>
                 <FlexItem>
-                  <Label color="teal">NS</Label>
+                  <Label color={LabelColor.teal}>NS</Label>
                 </FlexItem>
                 <FlexItem>
                   <a href="#">knative-serving-ingress</a>
@@ -115,7 +116,7 @@ export const TabsOpen: React.FunctionComponent = () => {
             <DescriptionListDescription>
               <Flex spaceItems={{ default: 'spaceItemsSm' }}>
                 <FlexItem>
-                  <Label color="purple">N</Label>
+                  <Label color={LabelColor.purple}>N</Label>
                 </FlexItem>
                 <FlexItem>ip-10-0-233-118.us-east-2.computer.external</FlexItem>
               </Flex>
@@ -142,7 +143,7 @@ export const TabsOpen: React.FunctionComponent = () => {
           flexWrap={{ default: 'noWrap' }}
         >
           <FlexItem>
-            <Label color="blue">N</Label>
+            <Label color={LabelColor.blue}>N</Label>
           </FlexItem>
           <FlexItem>
             <Title headingLevel="h1" size="2xl">

package/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx

@@ -15,6 +15,7 @@ import {
   DescriptionListTerm,
   DescriptionListDescription,
   Label,
+  LabelColor,
   LabelGroup,
   Flex,
   FlexItem
@@ -79,7 +80,7 @@ export const TabsOpenWithSecondaryTabs: React.FunctionComponent = () => {
             <DescriptionListDescription>
               <Flex spaceItems={{ default: 'spaceItemsSm' }}>
                 <FlexItem>
-                  <Label color="teal">NS</Label>
+                  <Label color={LabelColor.teal}>NS</Label>
                 </FlexItem>
                 <FlexItem>
                   <a href="#">knative-serving-ingress</a>
@@ -121,7 +122,7 @@ export const TabsOpenWithSecondaryTabs: React.FunctionComponent = () => {
             <DescriptionListDescription>
               <Flex spaceItems={{ default: 'spaceItemsSm' }}>
                 <FlexItem>
-                  <Label color="purple">N</Label>
+                  <Label color={LabelColor.purple}>N</Label>
                 </FlexItem>
                 <FlexItem>ip-10-0-233-118.us-east-2.computer.external</FlexItem>
               </Flex>
@@ -148,7 +149,7 @@ export const TabsOpenWithSecondaryTabs: React.FunctionComponent = () => {
           flexWrap={{ default: 'noWrap' }}
         >
           <FlexItem>
-            <Label color="blue">N</Label>
+            <Label color={LabelColor.blue}>N</Label>
           </FlexItem>
           <FlexItem>
             <Title headingLevel="h1" size="2xl">

package/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx

@@ -40,8 +40,8 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
   const [menuItems, setMenuItems] = useState<React.ReactElement<any>[]>([]);
 
   /** refs used to detect when clicks occur inside vs outside of the textInputGroup and menu popper */
-  const menuRef = useRef<HTMLDivElement>(undefined);
-  const textInputGroupRef = useRef<HTMLDivElement>(undefined);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const textInputGroupRef = useRef<HTMLDivElement>(null);
 
   /** callback for updating the inputValue state in this component so that the input can be controlled */
   const handleInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
@@ -107,7 +107,7 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
     const divider = <Divider key="divider" />;
 
     setMenuItems([headingItem, divider, ...filteredMenuItems]);
-  }, [inputValue]);
+  }, [inputValue, menuItemsText, selectedKey]);
 
   /** add selected key/value pair as a chip in the chip group */
   const selectValue = (selectedValue: string) => {
@@ -117,22 +117,30 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
 
   /** update the input to show the selected key and the menu to show the values associated with that specific key */
   const selectKey = (selectedText: string) => {
+    const values = data[selectedText];
+
+    if (!values) {
+      return;
+    }
+
     setInputValue(`${selectedText}: `);
     setSelectedKey(selectedText);
-    setMenuItemsText(data[selectedText]);
+    setMenuItemsText(values);
   };
 
   const handleEnter = () => {
-    /** do nothing if the menu contains no real results */
-    if (menuItems.length === 1) {
+    /** bail if heading + divider + first option are not all present */
+    const firstResult = menuItems[2]?.props?.children;
+
+    if (!firstResult) {
       return;
     }
 
     /** perform the appropriate action based on key selection state */
     if (selectedKey.length) {
-      selectValue(menuItems[2].props.children);
+      selectValue(firstResult);
     } else {
-      selectKey(menuItems[2].props.children);
+      selectKey(firstResult);
     }
   };
 
@@ -144,7 +152,7 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
   };
 
   /** allow the user to select a key by simply typing it and entering a colon, exact (case sensitive) matches only */
-  const handleColon = () => {
+  const handleColon = (event: React.KeyboardEvent) => {
     if (!selectedKey.length && keyNames.includes(inputValue)) {
       selectKey(inputValue);
       event.preventDefault();
@@ -172,7 +180,7 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
         handleBackspace();
         break;
       case ':':
-        handleColon();
+        handleColon(event);
         break;
       case 'ArrowUp':
       case 'ArrowDown':
@@ -182,24 +190,24 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
   };
 
   /** perform the proper key or value selection when a menu item is selected */
-  const onSelect = (event: React.MouseEvent<Element, MouseEvent>, _itemId: string | number) => {
-    const selectedText = (event.target as HTMLElement).innerText;
+  const onSelect = (event: React.MouseEvent<Element, MouseEvent> | undefined, _itemId: string | number) => {
+    const selectedText = (event?.target as HTMLElement | undefined)?.innerText.trim() || '';
 
     if (selectedKey.length) {
       selectValue(selectedText);
     } else {
       selectKey(selectedText);
     }
-    event.stopPropagation();
-    textInputGroupRef.current.querySelector('input').focus();
+    event?.stopPropagation();
+    textInputGroupRef.current?.querySelector('input')?.focus();
   };
 
   /** close the menu when a click occurs outside of the menu or text input group */
-  const handleClick = (event: MouseEvent) => {
+  const handleClick = (event: MouseEvent | undefined) => {
     if (
       menuRef.current &&
-      !menuRef.current.contains(event.target as HTMLElement) &&
-      !textInputGroupRef.current.contains(event.target as HTMLElement)
+      !menuRef.current.contains(event?.target as HTMLElement) &&
+      !textInputGroupRef.current?.contains(event?.target as HTMLElement)
     ) {
       setMenuIsOpen(false);
     }