Misc. component lib fixes and improvements

.changeset/strong-snakes-repair.md

@@ -0,0 +1,5 @@
+---
+'@keystar/ui': patch
+---
+
+Fix quirks and bugs in various components.

design-system/pkg/src/calendar/CalendarCell.tsx

@@ -122,6 +122,7 @@ export function useCellStyles(props: Partial<CellStyleProps> = {}) {
       trimBooleanKeys: true,
     }),
     className: css({
+      boxSizing: 'content-box',
       height: cellSize,
       padding: cellPadding,
       position: 'relative',

design-system/pkg/src/core/cssCustomProperties.ts

@@ -575,7 +575,7 @@ export const cssCustomProperties = `
   --kui-typography-font-weight-medium: 500;
   --kui-typography-font-weight-regular: 400;
   --kui-typography-font-family-code: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
-  --kui-typography-font-family-base: var(--font-inter, Inter);
+  --kui-typography-font-family-base: var(--font-inter, Inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   --kui-typography-heading-large-capheight: 23.2727px;
   --kui-typography-heading-large-capheight-trim: -0.2364em;
   --kui-typography-heading-large-baseline-trim: -0.2364em;

design-system/pkg/src/date-time/DateField.tsx

@@ -65,6 +65,7 @@ function DateField<T extends DateValue>(
     >
       <Input
         ref={fieldRef}
+        disableFocusRing={isReadOnly}
         fieldProps={fieldProps}
         isDisabled={isDisabled}
         autoFocus={autoFocus}

design-system/pkg/src/date-time/DatePicker.tsx

@@ -63,7 +63,7 @@ function DatePicker<T extends DateValue>(
     labelProps,
   } = useDatePicker(props, state, triggerRef);
 
-  let { isFocused, isFocusVisible, focusProps } = useFocusRing({
+  let { isFocused, focusProps } = useFocusRing({
     within: true,
     isTextInput: true,
     autoFocus,
@@ -89,7 +89,8 @@ function DatePicker<T extends DateValue>(
   let styleProps = usePickerStyles({
     isHovered,
     isFocused,
-    isFocusVisible: isFocusVisible && !isFocusedButton,
+    // prefer focusring appearance, regardless of input modality. otherwise it looks like a read-only field
+    isFocusVisible: isFocused && !isFocusedButton,
     isDisabled,
     isReadOnly,
     isInvalid: state.validationState === 'invalid',

design-system/pkg/src/date-time/Input.tsx

@@ -31,7 +31,7 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(
       validationState,
     } = props;
 
-    let { focusProps, isFocusVisible, isFocused } = useFocusRing({
+    let { focusProps, isFocused } = useFocusRing({
       isTextInput: true,
       within: true,
     });
@@ -41,7 +41,8 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(
       isDisabled,
       isInvalid,
       isFocused,
-      isFocusVisible: isFocusVisible && !disableFocusRing,
+      // prefer focusring appearance, regardless of input modality. otherwise it looks like a read-only field
+      isFocusVisible: isFocused && !disableFocusRing,
     });
 
     return (
@@ -101,10 +102,11 @@ function useInputStyles(props: InputProps, state: InputState) {
       },
       '&[data-focused]': {
         borderColor: tokenSchema.color.alias.borderFocused,
-      },
-      '&[data-focus-visible]': {
         boxShadow: `0 0 0 1px ${tokenSchema.color.alias.borderFocused}`,
       },
+      // '&[data-focus-visible]': {
+      //   boxShadow: `0 0 0 1px ${tokenSchema.color.alias.borderFocused}`,
+      // },
       '&[data-disabled]': {
         backgroundColor: tokenSchema.color.alias.backgroundDisabled,
         borderColor: 'transparent',

design-system/pkg/src/menu/types.ts

@@ -1,18 +1,18 @@
-import {
+import type {
   AriaMenuProps,
   MenuTriggerProps as _MenuTriggerProps,
 } from '@react-types/menu';
-import {
+import type {
   Alignment,
   AriaLabelingProps,
   CollectionBase,
   DOMProps,
   DisabledBehavior,
 } from '@react-types/shared';
-import { Key, ReactElement } from 'react';
+import type { Key, ReactElement } from 'react';
 
-import { BaseStyleProps } from '@keystar/ui/style';
-import { ActionButtonProps } from '@keystar/ui/button';
+import type { BaseStyleProps } from '@keystar/ui/style';
+import type { ActionButtonProps } from '@keystar/ui/button';
 
 export type MenuProps<T> = {
   /** Whether `disabledKeys` applies to all interactions, or only selection. */

design-system/pkg/src/number-field/NumberField.tsx

@@ -32,7 +32,15 @@ export const NumberField: ForwardRefExoticComponent<
   forwardedRef: ForwardedRef<HTMLInputElement>
 ) {
   props = useProviderProps(props);
-  let { isReadOnly, isDisabled, hideStepper, label, description } = props;
+  let {
+    contextualHelp,
+    description,
+    hideStepper,
+    isDisabled,
+    isReadOnly,
+    isRequired,
+    label,
+  } = props;
 
   let { locale } = useLocale();
   let state = useNumberFieldState({ ...props, locale });
@@ -50,23 +58,25 @@ export const NumberField: ForwardRefExoticComponent<
 
   return (
     <TextFieldPrimitive
+      ref={inputRef}
       width="alias.singleLineWidth"
       {...filterDOMProps(props)}
       {...onlyStyleProps(props)}
       label={label}
+      labelProps={labelProps}
+      contextualHelp={contextualHelp}
       description={description}
-      errorMessage={props.errorMessage}
       descriptionProps={descriptionProps}
+      errorMessage={props.errorMessage}
       errorMessageProps={errorMessageProps}
-      labelProps={labelProps}
       inputWrapperProps={{
         ...groupProps,
         ...inputWrapperStyleProps,
       }}
-      ref={inputRef}
       inputProps={inputProps}
       isDisabled={isDisabled}
       isReadOnly={isReadOnly}
+      isRequired={isRequired}
       // NOTE: step buttons must be a sibling of the `<input/>` AND after it
       // in the DOM, so we can respond to pseudo-classes.
       endElement={

design-system/pkg/src/tag/TagGroup.tsx

@@ -273,11 +273,10 @@ function TagGroup<T extends object>(
             <div
               ref={tagsRef}
               {...gridProps}
-              // TODO: review accessibility
-              // className={css({ display: 'contents' })}
               className={css({
                 borderRadius: radiusVar,
                 display: 'inline',
+                outline: 'none',
 
                 '&[data-focus=visible]': {
                   display: 'block',