Replace validationState with isInvalid (#4972)

Author: devongovett

packages/@react-aria/calendar/src/useCalendarBase.ts

@@ -59,7 +59,7 @@ export function useCalendarBase(props: CalendarPropsBase & DOMProps & AriaLabeli
     // handle an update to the caption that describes the currently selected range, to announce the new value
   }, [selectedDateDescription]);
 
-  let errorMessageId = useSlotId([Boolean(props.errorMessage), props.validationState]);
+  let errorMessageId = useSlotId([Boolean(props.errorMessage), props.isInvalid, props.validationState]);
 
   // Pass the label to the child grid elements.
   hookData.set(state, {

packages/@react-aria/calendar/src/useCalendarCell.ts

@@ -89,7 +89,7 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
   isDisabled = isDisabled || state.isCellDisabled(date);
   let isUnavailable = state.isCellUnavailable(date);
   let isSelectable = !isDisabled && !isUnavailable;
-  let isInvalid = state.validationState === 'invalid' && (
+  let isInvalid = state.isValueInvalid && (
     'highlightedRange' in state
       ? !state.anchorDate && state.highlightedRange && date.compare(state.highlightedRange.start) >= 0 && date.compare(state.highlightedRange.end) <= 0
       : state.value && isSameDay(state.value, date)

packages/@react-aria/checkbox/docs/useCheckboxGroup.mdx

@@ -105,7 +105,7 @@ import {useCheckboxGroupState} from '@react-stately/checkbox';
 let CheckboxGroupContext = React.createContext(null);
 
 function CheckboxGroup(props) {
-  let {children, label, description, errorMessage, validationState} = props;
+  let {children, label, description, errorMessage} = props;
   let state = useCheckboxGroupState(props);
   let {groupProps, labelProps, descriptionProps, errorMessageProps} = useCheckboxGroup(props, state);
 
@@ -116,7 +116,7 @@ function CheckboxGroup(props) {
         {children}
       </CheckboxGroupContext.Provider>
       {description && <div {...descriptionProps} style={{fontSize: 12}}>{description}</div>}
-      {errorMessage && validationState === 'invalid' &&
+      {errorMessage && state.isInvalid &&
         <div {...errorMessageProps} style={{color: 'red', fontSize: 12}}>{errorMessage}</div>
       }
     </div>
@@ -214,11 +214,11 @@ The `description` prop can be used to associate additional help text with a chec
 
 ### Error message
 
-The `errorMessage` prop can be used to help the user fix a validation error. It should be combined with the `validationState` prop to
+The `errorMessage` prop can be used to help the user fix a validation error. It should be combined with the `isInvalid` prop to
 semantically mark the checkbox group as invalid for assistive technologies.
 
 ```tsx example
-<CheckboxGroup label="Favorite sports" errorMessage="Invalid selection of sports." validationState="invalid">
+<CheckboxGroup label="Favorite sports" errorMessage="Invalid selection of sports." isInvalid>
   <Checkbox value="soccer">Soccer</Checkbox>
   <Checkbox value="baseball">Baseball</Checkbox>
   <Checkbox value="basketball">Basketball</Checkbox>

packages/@react-aria/checkbox/src/useCheckbox.ts

@@ -25,7 +25,9 @@ export interface CheckboxAria {
   /** Whether the checkbox is disabled. */
   isDisabled: boolean,
   /** Whether the checkbox is read only. */
-  isReadOnly: boolean
+  isReadOnly: boolean,
+  /** Whether the checkbox is invalid. */
+  isInvalid: boolean
 }
 
 /**
@@ -37,7 +39,7 @@ export interface CheckboxAria {
  * @param inputRef - A ref for the HTML input element.
  */
 export function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputRef: RefObject<HTMLInputElement>): CheckboxAria {
-  let {inputProps, isSelected, isPressed, isDisabled, isReadOnly} = useToggle(props, state, inputRef);
+  let {inputProps, isSelected, isPressed, isDisabled, isReadOnly, isInvalid} = useToggle(props, state, inputRef);
 
   let {isIndeterminate} = props;
   useEffect(() => {
@@ -56,6 +58,7 @@ export function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputR
     isSelected,
     isPressed,
     isDisabled,
-    isReadOnly
+    isReadOnly,
+    isInvalid
   };
 }

packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts

@@ -54,7 +54,7 @@ export function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: C
       ...res.inputProps,
       'aria-describedby': [
         props['aria-describedby'],
-        state.validationState === 'invalid' ? checkboxGroupErrorMessageIds.get(state) : null,
+        state.isInvalid ? checkboxGroupErrorMessageIds.get(state) : null,
         checkboxGroupDescriptionIds.get(state)
       ].filter(Boolean).join(' ') || undefined
     }

packages/@react-aria/color/test/useColorField.test.js

@@ -74,7 +74,7 @@ describe('useColorField', function () {
   });
 
   it('should return prop for invalid', function () {
-    let {inputProps} = renderColorFieldHook({validationState: 'invalid'});
+    let {inputProps} = renderColorFieldHook({isInvalid: true});
     expect(inputProps['aria-invalid']).toBe(true);
   });
 

packages/@react-aria/datepicker/docs/useDateField.mdx

@@ -117,7 +117,7 @@ export function DateField(props) {
         {state.segments.map((segment, i) =>
           <DateSegment key={i} segment={segment} state={state} />
         )}
-        {state.validationState === 'invalid' &&
+        {state.isInvalid &&
           <span aria-hidden="true">🚫</span>
         }
       </div>

packages/@react-aria/datepicker/docs/useDatePicker.mdx

@@ -166,7 +166,7 @@ function DateField(props) {
         {state.segments.map((segment, i) =>
           <DateSegment key={i} segment={segment} state={state} />
         )}
-        {state.validationState === 'invalid' &&
+        {state.isInvalid &&
           <span aria-hidden="true">🚫</span>
         }
       </div>

packages/@react-aria/datepicker/docs/useDateRangePicker.mdx

@@ -104,7 +104,7 @@ function DateRangePicker(props) {
           <DateField {...startFieldProps} />
           <span style={{padding: '0 4px'}}>–</span>
           <DateField {...endFieldProps} />
-          {state.validationState === 'invalid' &&
+          {state.isInvalid &&
             <span aria-hidden="true">🚫</span>
           }
         </div>
@@ -674,9 +674,9 @@ import {today} from '@internationalized/date';
 
 `useDateRangePicker` supports marking certain dates as _unavailable_. These dates remain focusable with the keyboard in the calendar so that navigation is consistent, but cannot be selected by the user. The `isDateUnavailable` prop accepts a callback that is called to evaluate whether each visible date is unavailable.
 
-Note that by default, users may not select non-contiguous ranges, i.e. ranges that contain unavailable dates within them. Once a start date is selected in the calendar, enabled dates will be restricted to subsequent dates until an unavailable date is hit. While this is handled automatically in the calendar, additional validation logic must be provided to ensure an invalid state is displayed in the date field. This can be achieved using the `validationState` prop. See [below](#non-contiguous-ranges) for an example of how to allow non-contiguous ranges.
+Note that by default, users may not select non-contiguous ranges, i.e. ranges that contain unavailable dates within them. Once a start date is selected in the calendar, enabled dates will be restricted to subsequent dates until an unavailable date is hit. While this is handled automatically in the calendar, additional validation logic must be provided to ensure an invalid state is displayed in the date field. This can be achieved using the `isInvalid` prop. See [below](#non-contiguous-ranges) for an example of how to allow non-contiguous ranges.
 
-This example includes multiple unavailable date ranges, e.g. dates when a rental house is not available. The `minValue` prop is also used to prevent selecting dates before today. The `validationState` prop is used to mark selected date ranges with unavailable dates in the middle as invalid.
+This example includes multiple unavailable date ranges, e.g. dates when a rental house is not available. The `minValue` prop is also used to prevent selecting dates before today. The `isInvalid` prop is used to mark selected date ranges with unavailable dates in the middle as invalid.
 
 ```tsx example
 import {today} from '@internationalized/date';
@@ -700,7 +700,7 @@ function Example() {
       isDateUnavailable={isDateUnavailable}
       value={value}
       onChange={setValue}
-      validationState={isInvalid ? 'invalid' : null} />
+      isInvalid={isInvalid} />
   );
 }
 ```

packages/@react-aria/datepicker/docs/useTimeField.mdx

@@ -111,7 +111,7 @@ export function TimeField(props) {
         {state.segments.map((segment, i) =>
           <DateSegment key={i} segment={segment} state={state} />
         )}
-        {state.validationState === 'invalid' &&
+        {state.isInvalid &&
           <span aria-hidden="true">🚫</span>
         }
       </div>