From b2a8e66a527b904e203d71e2a0b03c5d00e6b281 Mon Sep 17 00:00:00 2001 From: jossmac <2730833+jossmac@users.noreply.github.com> Date: Mon, 4 Nov 2024 10:20:06 +1100 Subject: [PATCH 1/2] misc. component lib fixes and improvements --- .../pkg/src/calendar/CalendarCell.tsx | 1 + .../pkg/src/core/cssCustomProperties.ts | 2 +- design-system/pkg/src/date-time/DateField.tsx | 1 + design-system/pkg/src/date-time/DatePicker.tsx | 5 +++-- design-system/pkg/src/date-time/Input.tsx | 10 ++++++---- design-system/pkg/src/menu/types.ts | 10 +++++----- .../pkg/src/number-field/NumberField.tsx | 18 ++++++++++++++---- design-system/pkg/src/tag/TagGroup.tsx | 3 +-- 8 files changed, 32 insertions(+), 18 deletions(-) diff --git a/design-system/pkg/src/calendar/CalendarCell.tsx b/design-system/pkg/src/calendar/CalendarCell.tsx index 684e1c08a..196e920af 100644 --- a/design-system/pkg/src/calendar/CalendarCell.tsx +++ b/design-system/pkg/src/calendar/CalendarCell.tsx @@ -122,6 +122,7 @@ export function useCellStyles(props: Partial = {}) { trimBooleanKeys: true, }), className: css({ + boxSizing: 'content-box', height: cellSize, padding: cellPadding, position: 'relative', diff --git a/design-system/pkg/src/core/cssCustomProperties.ts b/design-system/pkg/src/core/cssCustomProperties.ts index d454ace4b..7428f927e 100644 --- a/design-system/pkg/src/core/cssCustomProperties.ts +++ b/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; diff --git a/design-system/pkg/src/date-time/DateField.tsx b/design-system/pkg/src/date-time/DateField.tsx index 64b775ef0..11743b569 100644 --- a/design-system/pkg/src/date-time/DateField.tsx +++ b/design-system/pkg/src/date-time/DateField.tsx @@ -65,6 +65,7 @@ function DateField( > ( 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( 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', diff --git a/design-system/pkg/src/date-time/Input.tsx b/design-system/pkg/src/date-time/Input.tsx index 07f585b2b..fdc160792 100644 --- a/design-system/pkg/src/date-time/Input.tsx +++ b/design-system/pkg/src/date-time/Input.tsx @@ -31,7 +31,7 @@ export const Input = forwardRef( validationState, } = props; - let { focusProps, isFocusVisible, isFocused } = useFocusRing({ + let { focusProps, isFocused } = useFocusRing({ isTextInput: true, within: true, }); @@ -41,7 +41,8 @@ export const Input = forwardRef( 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', diff --git a/design-system/pkg/src/menu/types.ts b/design-system/pkg/src/menu/types.ts index 53b66b73e..c83cfc586 100644 --- a/design-system/pkg/src/menu/types.ts +++ b/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 = { /** Whether `disabledKeys` applies to all interactions, or only selection. */ diff --git a/design-system/pkg/src/number-field/NumberField.tsx b/design-system/pkg/src/number-field/NumberField.tsx index 2cf45c510..0c78b8f88 100644 --- a/design-system/pkg/src/number-field/NumberField.tsx +++ b/design-system/pkg/src/number-field/NumberField.tsx @@ -32,7 +32,15 @@ export const NumberField: ForwardRefExoticComponent< forwardedRef: ForwardedRef ) { 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 ( ` AND after it // in the DOM, so we can respond to pseudo-classes. endElement={ diff --git a/design-system/pkg/src/tag/TagGroup.tsx b/design-system/pkg/src/tag/TagGroup.tsx index 0d02458dd..7847208e7 100644 --- a/design-system/pkg/src/tag/TagGroup.tsx +++ b/design-system/pkg/src/tag/TagGroup.tsx @@ -273,11 +273,10 @@ function TagGroup(
Date: Mon, 4 Nov 2024 14:18:20 +1100 Subject: [PATCH 2/2] add changeset --- .changeset/strong-snakes-repair.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/strong-snakes-repair.md diff --git a/.changeset/strong-snakes-repair.md b/.changeset/strong-snakes-repair.md new file mode 100644 index 000000000..67c051262 --- /dev/null +++ b/.changeset/strong-snakes-repair.md @@ -0,0 +1,5 @@ +--- +'@keystar/ui': patch +--- + +Fix quirks and bugs in various components.