@workday/canvas-kit-react 11.0.0-alpha.671-next.0 → 11.0.0-alpha.693-next.0

package/checkbox/lib/CheckboxInput.tsx

@@ -0,0 +1,279 @@
+import * as React from 'react';
+import {createComponent, focusRing, ErrorType} from '@workday/canvas-kit-react/common';
+
+import {
+  calc,
+  createStencil,
+  cssVar,
+  handleCsProp,
+  px2rem,
+  CSProps,
+} from '@workday/canvas-kit-styling';
+import {base, brand, system} from '@workday/canvas-tokens-web';
+import {backgroundVars} from './CheckBackground';
+
+export interface CheckboxProps extends CSProps {
+  /**
+   * If true, set the Checkbox to the checked state.
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * If true, set the Checkbox to the disabled state.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The type of error associated with the Checkbox (if applicable).
+   */
+  error?: ErrorType;
+  /**
+   * The HTML `id` of the underlying checkbox input element. This is required if `label` is defined as a non-empty string.
+   * @default {useUniqueId}
+   */
+  id?: string;
+  /**
+   * If true, set the Checkbox to an indeterminate state. Use this on a Checkbox with nested child Checkboxes to denote that some (but not all) child Checkboxes are checked.
+   * @default false
+   */
+  indeterminate?: boolean;
+  /**
+   * The text of the Checkbox label.
+   * @default ''
+   */
+  label?: string;
+  /**
+   * The function called when the Checkbox state changes.
+   */
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * The value of the Checkbox.
+   */
+  value?: string;
+  /**
+   * The variant for the checkbox
+   */
+  variant?: 'inverse' | undefined;
+}
+
+const checkboxInputStencil = createStencil({
+  base: {
+    borderRadius: system.shape.half,
+    width: system.space.x6,
+    height: system.space.x6,
+    margin: system.space.zero,
+    marginTop: calc.negate(px2rem(3)),
+    marginInlineStart: calc.negate(px2rem(3)),
+    position: 'absolute',
+    opacity: 0,
+
+    '&:not(:disabled)': {
+      cursor: 'pointer',
+    },
+
+    '&:where(:hover, .hover) ~ span:first-of-type': {
+      boxShadow: `0 0 0 ${px2rem(7)} ${base.soap200}`,
+    },
+
+    // Disabled State
+    '&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type':
+      {
+        borderColor: base.licorice500,
+      },
+    '&:where(:checked, :indeterminate) ~ div:first-of-type': {
+      borderColor: brand.primary.base,
+      backgroundColor: brand.primary.base,
+    },
+    '&:disabled ~ div:first-of-type': {
+      borderColor: base.licorice100,
+      backgroundColor: base.soap100,
+      opacity: 1,
+    },
+    '&:disabled:where(:checked, :indeterminate) ~ div:first-of-type': {
+      borderColor: brand.primary.light,
+      backgroundColor: brand.primary.light,
+    },
+
+    // Focus State
+    '&:where(:focus-visible, :active, .focus, .active)': {
+      outline: 'none',
+    },
+    '&:where(:focus-visible, .focus) ~ div:first-of-type': {
+      borderColor: brand.primary.base,
+      borderWidth: px2rem(2),
+      boxShadow: 'none',
+      ...focusRing({
+        width: 0,
+        separation: 0,
+        animate: false,
+      }),
+    },
+    '&:checked:focus-visible, &:indeterminate:focus-visible, &:checked.focus, &:indeterminate.focus':
+      {
+        '& ~ div:first-of-type': {
+          ...focusRing({
+            width: 2,
+            separation: 2,
+            animate: false,
+            outerColor: cssVar(brand.common.focusOutline),
+          }),
+          borderColor: brand.primary.base,
+          borderWidth: px2rem(2),
+          span: {
+            marginInlineStart: calc.negate(px2rem(7)),
+          },
+        },
+      },
+  },
+  modifiers: {
+    variant: {
+      inverse: {
+        '& ~ span:first-of-type': {
+          opacity: system.opacity.disabled,
+        },
+
+        '& ~ div:first-of-type': {
+          borderColor: base.soap300,
+        },
+
+        // Disabled State for inverse variant
+        '&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type':
+          {
+            borderColor: base.soap300,
+          },
+        '&:where(:checked, :indeterminate) ~ div:first-of-type': {
+          borderColor: base.soap300,
+          backgroundColor: base.frenchVanilla100,
+        },
+        '&:disabled ~ div:first-of-type': {
+          backgroundColor: base.soap300,
+          opacity: system.opacity.disabled,
+        },
+        '&:disabled:where(:checked, :indeterminate) ~ div:first-of-type': {
+          borderColor: base.soap300,
+          backgroundColor: base.soap300,
+        },
+
+        // Focus state for inverse variant
+        '&:where(:focus-visible, .focus) ~ div:first-of-type': {
+          borderColor: base.blackPepper400,
+          ...focusRing({
+            width: 2,
+            separation: 0,
+            animate: false,
+            innerColor: cssVar(base.blackPepper400),
+            outerColor: cssVar(base.frenchVanilla100),
+          }),
+        },
+        '&:checked:focus-visible, &:checked.focus, &:indeterminate:focus-visible, &:indeterminate.focus':
+          {
+            '& ~ div:first-of-type': {
+              ...focusRing({
+                width: 2,
+                separation: 2,
+                animate: false,
+                innerColor: cssVar(base.blackPepper400),
+                outerColor: cssVar(base.frenchVanilla100),
+              }),
+              borderColor: base.frenchVanilla100,
+            },
+          },
+      },
+    },
+    disabled: {
+      true: {
+        '&:where(:hover, .hover) ~ span:first-of-type': {
+          boxShadow: 'none',
+        },
+      },
+    },
+    error: {
+      error: {
+        '&:not(:where(:focus-visible, .focus)) ~ div:first-of-type': {
+          borderColor: backgroundVars.inner,
+          boxShadow: `
+            0 0 0 ${px2rem(1)} ${backgroundVars.inner}, 
+            0 0 0 ${px2rem(2)} ${backgroundVars.outer}`,
+        },
+        '&:where(:checked, :indeterminate) ~ div:first-of-type': {
+          borderColor: 'transparent',
+          boxShadow: `
+            0 0 0 ${px2rem(2)} ${base.frenchVanilla100},
+            0 0 0 ${px2rem(4)} ${backgroundVars.inner},
+            0 0 0 ${px2rem(5)} ${backgroundVars.outer}`,
+        },
+        '&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type':
+          {
+            borderColor: backgroundVars.inner,
+          },
+      },
+      alert: {
+        '&:not(:where(:focus-visible, .focus)) ~ div:first-of-type': {
+          border: `${px2rem(1)} solid ${backgroundVars.inner}`,
+          boxShadow: `
+            0 0 0 ${px2rem(1)} ${backgroundVars.inner}, 
+            0 0 0 ${px2rem(2)} ${backgroundVars.outer}`,
+        },
+        '&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type':
+          {
+            borderColor: backgroundVars.inner,
+          },
+        '&:where(:checked, :indeterminate) ~ div:first-of-type': {
+          borderColor: 'transparent',
+          boxShadow: `
+            0 0 0 ${px2rem(2)} ${base.frenchVanilla100},
+            0 0 0 ${px2rem(4)} ${backgroundVars.inner},
+            0 0 0 ${px2rem(5)} ${backgroundVars.outer}`,
+        },
+      },
+    },
+  },
+  compound: [
+    {
+      modifiers: {variant: 'inverse', error: 'error'},
+      styles: {
+        '&:not(:where(:focus-visible, .focus)) ~ div:first-of-type': {
+          border: `${px2rem(1)} solid ${base.soap300}`,
+        },
+        '&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type':
+          {
+            borderColor: base.soap300,
+          },
+        '&:where(:checked, :indeterminate) ~ div:first-of-type': {
+          borderColor: base.soap300,
+        },
+      },
+    },
+    {
+      modifiers: {variant: 'inverse', error: 'alert'},
+      styles: {
+        '&:not(:where(:focus-visible, .focus)) ~ div:first-of-type': {
+          border: `${px2rem(1)} solid ${base.soap300}`,
+        },
+        '&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type':
+          {
+            borderColor: base.soap300,
+          },
+        '&:where(:checked, :indeterminate) ~ div:first-of-type': {
+          borderColor: base.soap300,
+        },
+      },
+    },
+  ],
+});
+
+export const CheckboxInput = createComponent('input')({
+  displayName: 'CheckboxInput',
+  Component: ({variant, error, ...elemProps}: CheckboxProps, ref, Element) => {
+    const {checked, disabled, indeterminate} = elemProps;
+
+    return (
+      <Element
+        type="checkbox"
+        ref={ref}
+        aria-checked={indeterminate ? 'mixed' : checked}
+        {...handleCsProp(elemProps, checkboxInputStencil({variant, disabled, error}))}
+      />
+    );
+  },
+});

package/checkbox/lib/CheckboxRipple.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {calc, createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const checkboxRippleStyles = createStyles({
+  borderRadius: system.shape.round,
+  boxShadow: 'none',
+  height: calc.add(system.space.x4, px2rem(2)),
+  width: calc.add(system.space.x4, px2rem(2)),
+  transition: 'box-shadow 150ms ease-out',
+  position: 'absolute',
+  pointerEvents: 'none',
+});
+
+export const CheckboxRipple = createComponent('span')({
+  displayName: 'CheckboxRipple',
+  Component: elemProps => {
+    return <span className={checkboxRippleStyles} {...elemProps} />;
+  },
+});

package/collection/lib/useCursorListModel.tsx

@@ -135,112 +135,108 @@ const getItem: (id: string, model: NavigationInput) => Item<Generic> = (id, {sta
   return item;
 };
 
-export const getWrappingOffsetItem = (offset: number) => (
-  index: number,
-  {state}: NavigationInput,
-  tries = state.items.length
-): number => {
-  if (Number.isNaN(index)) {
-    // we have no valid index. If the offset is positive, we'll return the first item
-    if (offset === 1) {
-      return getFirst(index, {state});
-    }
-    if (offset === -1) {
-      return getLast(index, {state});
-    }
-  }
-  const items = state.items;
-
-  let nextIndex = index + offset;
-
-  // calculate idealLength as in if the grid was a perfect rectangle
-  const rows = Math.ceil(items.length / state.columnCount);
-  const idealLength = rows * state.columnCount;
-  if (nextIndex < 0) {
-    if (offset === -1) {
-      // if the offset is -1, we want to wrap to the end
-      nextIndex = items.length - 1;
-    } else {
-      // if the offset is smaller than -1, we want to wrap by column
-      if (idealLength + nextIndex >= items.length) {
-        // we'll overflow the grid because there isn't enough items. Move `nextIndex` up so we wrap in
-        // the right spot
-        nextIndex -= state.columnCount;
+export const getWrappingOffsetItem =
+  (offset: number) =>
+  (index: number, {state}: NavigationInput, tries = state.items.length): number => {
+    if (Number.isNaN(index)) {
+      // we have no valid index. If the offset is positive, we'll return the first item
+      if (offset === 1) {
+        return getFirst(index, {state});
+      }
+      if (offset === -1) {
+        return getLast(index, {state});
       }
-      nextIndex = idealLength + nextIndex;
     }
-  } else if (nextIndex >= items.length) {
-    if (offset === 1) {
-      // if the offset is 1, we want to wrap to the beginning
-      nextIndex = 0;
-    } else {
-      // if the offset is larger than 1, we want to wrap by column
-      if (nextIndex - idealLength < 0) {
-        // we're going to overflow the grid because there isn't enough items. Move `nextIndex` down to
-        // the missing item in the next row. This way we'll end up wrapping in the right spot
-        nextIndex += state.columnCount;
+    const items = state.items;
+
+    let nextIndex = index + offset;
+
+    // calculate idealLength as in if the grid was a perfect rectangle
+    const rows = Math.ceil(items.length / state.columnCount);
+    const idealLength = rows * state.columnCount;
+    if (nextIndex < 0) {
+      if (offset === -1) {
+        // if the offset is -1, we want to wrap to the end
+        nextIndex = items.length - 1;
+      } else {
+        // if the offset is smaller than -1, we want to wrap by column
+        if (idealLength + nextIndex >= items.length) {
+          // we'll overflow the grid because there isn't enough items. Move `nextIndex` up so we wrap in
+          // the right spot
+          nextIndex -= state.columnCount;
+        }
+        nextIndex = idealLength + nextIndex;
+      }
+    } else if (nextIndex >= items.length) {
+      if (offset === 1) {
+        // if the offset is 1, we want to wrap to the beginning
+        nextIndex = 0;
+      } else {
+        // if the offset is larger than 1, we want to wrap by column
+        if (nextIndex - idealLength < 0) {
+          // we're going to overflow the grid because there isn't enough items. Move `nextIndex` down to
+          // the missing item in the next row. This way we'll end up wrapping in the right spot
+          nextIndex += state.columnCount;
+        }
+        nextIndex = nextIndex - idealLength;
       }
-      nextIndex = nextIndex - idealLength;
     }
-  }
 
-  if (items.length > 1 && state.nonInteractiveIds.includes(items[nextIndex].id) && tries > 0) {
-    // The next item is disabled, try again, but only if we haven't already tried everything.
-    // Avoid an infinite loop with `tries`
-    return getWrappingOffsetItem(offset)(nextIndex, {state}, tries - 1);
-  }
+    if (items.length > 1 && state.nonInteractiveIds.includes(items[nextIndex].id) && tries > 0) {
+      // The next item is disabled, try again, but only if we haven't already tried everything.
+      // Avoid an infinite loop with `tries`
+      return getWrappingOffsetItem(offset)(nextIndex, {state}, tries - 1);
+    }
 
-  return nextIndex;
-};
+    return nextIndex;
+  };
 
-export const getOffsetItem = (offset: number) => (
-  index: number,
-  {state}: NavigationInput,
-  tries = state.items.length
-): number => {
-  const {items, columnCount} = state;
+export const getOffsetItem =
+  (offset: number) =>
+  (index: number, {state}: NavigationInput, tries = state.items.length): number => {
+    const {items, columnCount} = state;
 
-  let nextIndex = index + offset;
+    let nextIndex = index + offset;
 
-  if (Math.abs(offset) < columnCount) {
-    // if we're here, the columnCount is non-zero and the absolute value of offset is less than the
-    // column count. We don't want to wrap, so we'll bound within the row
+    if (Math.abs(offset) < columnCount) {
+      // if we're here, the columnCount is non-zero and the absolute value of offset is less than the
+      // column count. We don't want to wrap, so we'll bound within the row
 
-    const currentIndexInRow = index % columnCount;
-    const nextIndexInRow = nextIndex - index + currentIndexInRow;
-    if (nextIndexInRow >= columnCount || nextIndexInRow < 0) {
-      nextIndex = index;
-    }
-  } else if (columnCount) {
-    // if we're here, there's a column count, but the offset will move into another row. We need to
-    // bound to row values
-    const nextRow = Math.floor(nextIndex / columnCount);
+      const currentIndexInRow = index % columnCount;
+      const nextIndexInRow = nextIndex - index + currentIndexInRow;
+      if (nextIndexInRow >= columnCount || nextIndexInRow < 0) {
+        nextIndex = index;
+      }
+    } else if (columnCount) {
+      // if we're here, there's a column count, but the offset will move into another row. We need to
+      // bound to row values
+      const nextRow = Math.floor(nextIndex / columnCount);
 
-    if (nextRow < 0 || nextRow >= columnCount) {
-      nextIndex = index;
-    }
+      if (nextRow < 0 || nextRow >= columnCount) {
+        nextIndex = index;
+      }
 
-    // make sure we don't go out of bounds if the grid isn't a perfect rectangle
-    if (nextIndex > items.length - 1) {
-      nextIndex = index;
+      // make sure we don't go out of bounds if the grid isn't a perfect rectangle
+      if (nextIndex > items.length - 1) {
+        nextIndex = index;
+      }
     }
-  }
 
-  // make sure we're always in bounds
-  if (nextIndex < 0) {
-    nextIndex = 0;
-  } else if (nextIndex >= items.length) {
-    nextIndex = items.length - 1;
-  }
+    // make sure we're always in bounds
+    if (nextIndex < 0) {
+      nextIndex = 0;
+    } else if (nextIndex >= items.length) {
+      nextIndex = items.length - 1;
+    }
 
-  if (state.nonInteractiveIds.includes(items[nextIndex].id) && tries > 0) {
-    // The next item is disabled, try again, but only if we haven't already tried everything.
-    // Avoid an infinite loop with `tries`
-    return getOffsetItem(offset)(nextIndex, {state}, tries - 1);
-  }
+    if (state.nonInteractiveIds.includes(items[nextIndex].id) && tries > 0) {
+      // The next item is disabled, try again, but only if we haven't already tried everything.
+      // Avoid an infinite loop with `tries`
+      return getOffsetItem(offset)(nextIndex, {state}, tries - 1);
+    }
 
-  return nextIndex;
-};
+    return nextIndex;
+  };
 
 /**
  * The default navigation manager of lists. This navigation manager will wrap around when the edge

package/collection/lib/useListItemAllowChildStrings.ts

@@ -1,5 +1,5 @@
 import {createElemPropsHook} from '@workday/canvas-kit-react/common';
-import {useListModel} from '@workday/canvas-kit-react/collection';
+import {useListModel, Item} from '@workday/canvas-kit-react/collection';
 
 /**
  * This elemProps hook allows for children values to be considered identifiers if the children are
@@ -27,9 +27,9 @@ import {useListModel} from '@workday/canvas-kit-react/collection';
  * ```
  */
 export const useListItemAllowChildStrings = createElemPropsHook(useListModel)(
-  (_, __, elemProps: {'data-id'?: string; children?: React.ReactNode} = {}) => {
+  (_, __, elemProps: {'data-id'?: string; children?: React.ReactNode; item?: Item<any>} = {}) => {
     const props: {'data-id'?: string} = {};
-    if (!elemProps['data-id'] && typeof elemProps.children === 'string') {
+    if (!elemProps['data-id'] && !elemProps.item && typeof elemProps.children === 'string') {
       props['data-id'] = elemProps.children;
     }
 

package/collection/lib/useListRenderItem.tsx

@@ -45,7 +45,7 @@ export function useListRenderItems<T>(
             if (React.isValidElement(child)) {
               return React.cloneElement(child, {
                 key: item.id || item.index,
-                item: item.value,
+                item: item,
               });
             }
             return child;

package/combobox/lib/hooks/useComboboxInput.ts

@@ -74,6 +74,7 @@ export const useComboboxInput = composeHooks(
       'aria-expanded': model.state.visibility === 'visible',
       'aria-autocomplete': 'list',
       'aria-controls': `${model.state.id}-list`,
+      'aria-activedescendant': model.state.visibility === 'hidden' ? null : undefined, // Removes activedescendant on menu close
       id: model.state.id,
       ref: elementRef,
     } as const;

package/combobox/lib/hooks/useComboboxKeyboardTypeAhead.ts

@@ -57,13 +57,13 @@ export const useComboboxKeyboardTypeAhead = createElemPropsHook(useComboboxModel
     return -1;
   };
 
-  const currentItem = model.navigation.getItem(model.state.cursorId, model);
-  const cursorFocusedIndex = currentItem.index;
+  const currentItemIndex =
+    model.state.items.length > 0 ? model.navigation.getItem(model.state.cursorId, model).index : 0;
 
   const handleKeyboardTypeAhead = (key: string, numOptions: number) => {
     // If the starting point is beyond the list of options, reset it
     // to the beginning of the list
-    const startNumber = keySofar.current.length === 0 ? cursorFocusedIndex + 1 : cursorFocusedIndex;
+    const startNumber = keySofar.current.length === 0 ? currentItemIndex + 1 : currentItemIndex;
 
     const start = startNumber === numOptions ? 0 : startNumber;
 

package/combobox/lib/hooks/useComboboxModel.tsx

@@ -56,8 +56,7 @@ export const useComboboxModel = createModelHook({
   const menu = useMenuModel(
     useMenuModel.mergeConfig(config, {
       onSelect({id}) {
-        const textValue = menu.navigation.getItem(id, menu).textValue || id;
-        dispatchInputEvent(menu.state.targetRef.current, textValue);
+        dispatchInputEvent(menu.state.targetRef.current, id);
       },
     })
   );

package/common/README.md

@@ -10,16 +10,32 @@ yarn add @workday/canvas-kit-react
 
 Includes:
 
-- [CanvasProvider](#canvasprovider)
-- [InputProvider](#inputprovider)
-- [Theming](#theming)
-- [Bidirectionality](#bidirectionality)
-- [Component Functions](#component-functions)
-  - [createComponent](#createcomponent)
-  - [ExtractProps](#extractprops)
-- [Common Hooks](#common-hooks)
-  - [useUniqueId](#useuniqueid)
-- [Utility Functions](#utility-functions)
+- [Canvas Kit Common](#canvas-kit-common)
+  - [Installation](#installation)
+  - [CanvasProvider](#canvasprovider)
+      - [Storybook Decorator](#storybook-decorator)
+    - [Input Provider](#input-provider)
+      - [Definitions](#definitions)
+      - [Usage](#usage)
+      - [Static Properties](#static-properties)
+        - [`InputTypes`](#inputtypes)
+      - [Component Props](#component-props)
+        - [Required](#required)
+        - [Optional](#optional)
+          - [`provideIntent: boolean`](#provideintent-boolean)
+          - [`container: HTMLElement | React.RefObject<HTMLElement>`](#container-htmlelement--reactrefobjecthtmlelement)
+      - [Storybook Decorator](#storybook-decorator-1)
+  - [Theming](#theming)
+  - [Bidirectionality](#bidirectionality)
+  - [Component Functions](#component-functions)
+    - [`createComponent`](#createcomponent)
+    - [`ExtractProps`](#extractprops)
+  - [Common Hooks](#common-hooks)
+    - [useUniqueId](#useuniqueid)
+  - [Utility Functions](#utility-functions)
+    - [generateUniqueId](#generateuniqueid)
+    - [setUniqueSeed](#setuniqueseed)
+    - [resetUniqueIdCount](#resetuniqueidcount)
 
 ## CanvasProvider
 
@@ -71,7 +87,7 @@ MyStory.decorators = [CanvasProviderDecorator];
 ### Input Provider
 
 This is a higher order (wrapping) component for providing css-referencable data attributes for the
-users current input. Focus outlines are required for accesibility, but they can be unnecessary
+users current input. Focus outlines are required for accessibility, but they can be unnecessary
 visual noise when using a mouse. This allows us to hide focus outlines (as desired) while the user
 is interacting with components using a mouse, touch, etc. and show them when keyboard navigation
 begins. This logic is heavily influenced by [what-input](https://github.com/ten1seven/what-input).
@@ -344,7 +360,7 @@ this example, `onClick` doesn't exist on `MyComponent`, but since `MyComponent`
 If we inspect the `MyNewComponentProps` type, it will return the following:
 
 ```tsx
-MyComponentProps & React.HTMLAttributes<HTMLElement>
+MyComponentProps & React.HTMLAttributes<HTMLElement>;
 ```
 
 Inside Canvas Kit components, we use `ExtractProps` when we need to extend from the interfaces of
@@ -377,9 +393,11 @@ be returned since there is not HTML attribute interface associated with `Compone
 
 ### useUniqueId
 
-A hook to generate a unique identifier for an element. Most commonly used for accessibility. The
+A hook to generate a unique identifier for an element – most commonly used for accessibility. The
 hook will generate a unique id the first render and always return the same id every render. This
-uses [generateUniqueId](#generateuniqueid) internally.
+uses [generateUniqueId](#generateuniqueid) internally. You should use `useUniqueId` when you need to
+create a unique ID within a component's render loop. Otherwise, you should opt for
+`generateUniqueId`.
 
 ```tsx
 const MyComponent = () => {

package/common/lib/styles/errorRing.ts

@@ -53,10 +53,10 @@ export function errorRing(error?: ErrorType, theme?: EmotionCanvasTheme): CSSObj
     borderColor: errorColors.outer,
     transition: '100ms box-shadow',
     boxShadow: errorBoxShadow,
-    '&:hover, &:disabled': {
+    '&:hover, &:disabled, &.hover, &.disabled': {
       borderColor: errorColors.outer,
     },
-    '&:focus:not([disabled])': {
+    '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
       borderColor: errorColors.outer,
       boxShadow: `${errorBoxShadow},
         0 0 0 2px ${colors.frenchVanilla100},