@dxos/react-ui 0.8.4-main.f9ba587 → 0.8.4-main.fcfe5033a5

package/src/components/Input/Input.stories.tsx

@@ -2,23 +2,20 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { baseSurface, modalSurface, activeSurface, mx, surfaceShadow } from '@dxos/react-ui-theme';
-import { type MessageValence } from '@dxos/react-ui-types';
+import { type MessageValence } from '@dxos/ui-types';
 
+import { withLayoutVariants, withTheme } from '../../testing';
 import {
   type CheckboxProps,
   Input,
   type PinInputProps,
   type SwitchProps,
-  type TextInputProps,
   type TextAreaProps,
+  type TextInputProps,
 } from './Input';
-import { withTheme } from '../../testing';
 
 type VariantMap = {
   text: TextInputProps;
@@ -30,7 +27,7 @@ type VariantMap = {
 
 type Variant = { [K in keyof VariantMap]: { type: K } & VariantMap[K] }[keyof VariantMap];
 
-type BaseProps = Partial<{
+type DefaultStoryProps = Partial<{
   kind: keyof VariantMap;
   label: string;
   labelVisuallyHidden: boolean;
@@ -40,7 +37,7 @@ type BaseProps = Partial<{
   validationMessage: string;
 }>;
 
-const Wrapper = ({
+const DefaultStory = ({
   kind,
   label,
   description,
@@ -49,7 +46,7 @@ const Wrapper = ({
   validationValence,
   validationMessage,
   ...props
-}: BaseProps) => {
+}: DefaultStoryProps) => {
   return (
     <Input.Root {...{ validationValence }}>
       <Input.Label srOnly={labelVisuallyHidden}>{label}</Input.Label>
@@ -61,49 +58,28 @@ const Wrapper = ({
       {kind === 'switch' && <Input.Switch {...props} />}
 
       <Input.DescriptionAndValidation srOnly={descriptionVisuallyHidden}>
-        {validationMessage && (
-          <>
-            <Input.Validation>{validationMessage}</Input.Validation>{' '}
-          </>
-        )}
+        {validationMessage && <Input.Validation classNames='block'>{validationMessage}</Input.Validation>}
         <Input.Description>{description}</Input.Description>
       </Input.DescriptionAndValidation>
     </Input.Root>
   );
 };
 
-const DefaultStory = (props: BaseProps) => {
-  return (
-    <div className='space-b-4'>
-      <div className={mx(baseSurface, 'p-4')}>
-        <Wrapper {...props} />
-      </div>
-      <div className={mx(activeSurface, 'p-4 rounded-md', surfaceShadow({ elevation: 'positioned' }))}>
-        <Wrapper {...props} />
-      </div>
-      <div className={mx(modalSurface, 'p-4 rounded-md', surfaceShadow({ elevation: 'dialog' }))}>
-        <Wrapper {...props} />
-      </div>
-    </div>
-  );
-};
-
-const meta: Meta<BaseProps> = {
-  title: 'ui/react-ui-core/Input',
-  component: Input.Root,
+const meta = {
+  title: 'ui/react-ui-core/components/Input',
+  component: Input.Root as any,
   render: DefaultStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  decorators: [withTheme(), withLayoutVariants()],
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj<BaseProps & Variant>;
+type Story = StoryObj<DefaultStoryProps & Variant>;
 
-export const Default: Story = {
+export const DensityCoarse: Story = {
   args: {
     kind: 'text',
-    label: 'Hello',
+    label: 'Input value',
     placeholder: 'This is an input',
     disabled: false,
     description: undefined,
@@ -111,13 +87,14 @@ export const Default: Story = {
     descriptionVisuallyHidden: false,
     validationMessage: '',
     validationValence: undefined,
+    density: 'coarse',
   },
 };
 
 export const DensityFine: Story = {
   args: {
     kind: 'text',
-    label: 'This is an Input with a density value of ‘fine’',
+    label: 'Input value',
     placeholder: 'This is a density:fine input',
     disabled: false,
     description: undefined,
@@ -132,7 +109,7 @@ export const DensityFine: Story = {
 export const Subdued: Story = {
   args: {
     kind: 'text',
-    label: 'Hello',
+    label: 'Input value',
     placeholder: 'This is a subdued input',
     disabled: false,
     description: undefined,
@@ -162,7 +139,7 @@ export const LabelVisuallyHidden: Story = {
   },
 };
 
-export const InputWithDescription: Story = {
+export const WithDescription: Story = {
   args: {
     kind: 'text',
     label: 'Described input',
@@ -171,7 +148,7 @@ export const InputWithDescription: Story = {
   },
 };
 
-export const InputWithErrorAndDescription: Story = {
+export const WithErrorAndDescription: Story = {
   args: {
     kind: 'text',
     label: 'Described invalid input',
@@ -182,7 +159,7 @@ export const InputWithErrorAndDescription: Story = {
   },
 };
 
-export const InputWithValidationAndDescription: Story = {
+export const WithValidationAndDescription: Story = {
   args: {
     kind: 'text',
     label: 'Described input with validation message',
@@ -208,7 +185,8 @@ export const PinInput: Story = {
     label: 'This input is a PIN-style input',
     length: 6,
     description: 'Type in secret you received',
-    placeholder: '••••••',
+    pattern: '\\d*',
+    density: 'coarse',
   },
 };
 
@@ -216,15 +194,15 @@ export const Checkbox: Story = {
   args: {
     kind: 'checkbox',
     label: 'This is a checkbox',
-    description: 'It’s checked, indeterminate, or unchecked',
+    description: 'Checked, indeterminate, or unchecked',
     size: 5,
   },
 };
 
-export const Switch = {
+export const Switch: Story = {
   args: {
     kind: 'switch',
     label: 'This is a switch',
-    description: 'It’s either off... or on.',
+    description: 'On or off',
   },
 };

package/src/components/Input/Input.tsx

@@ -2,34 +2,33 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type IconWeight } from '@phosphor-icons/react';
-import { Root as CheckboxPrimitive, type CheckboxProps as CheckboxPrimitiveProps } from '@radix-ui/react-checkbox';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { type ComponentPropsWithRef, forwardRef, type ForwardRefExoticComponent, useCallback } from 'react';
+import React, { type ComponentPropsWithRef, type ForwardRefExoticComponent, forwardRef } from 'react';
 
 import {
+  DescriptionAndValidation as DescriptionAndValidationPrimitive,
+  type DescriptionAndValidationProps as DescriptionAndValidationPrimitiveProps,
+  Description as DescriptionPrimitive,
+  type DescriptionProps as DescriptionPrimitiveProps,
+  INPUT_NAME,
   InputRoot,
   type InputRootProps,
+  type InputScopedProps,
+  Label as LabelPrimitive,
+  type LabelProps as LabelPrimitiveProps,
   PinInput as PinInputPrimitive,
   type PinInputProps as PinInputPrimitiveProps,
-  TextInput as TextInputPrimitive,
-  type TextInputProps as TextInputPrimitiveProps,
   TextArea as TextAreaPrimitive,
   type TextAreaProps as TextAreaPrimitiveProps,
-  useInputContext,
-  INPUT_NAME,
-  type InputScopedProps,
-  Description as DescriptionPrimitive,
-  DescriptionAndValidation as DescriptionAndValidationPrimitive,
-  type DescriptionAndValidationProps as DescriptionAndValidationPrimitiveProps,
-  type DescriptionProps as DescriptionPrimitiveProps,
-  Label as LabelPrimitive,
-  type LabelProps as LabelPrimitiveProps,
+  TextInput as TextInputPrimitive,
+  type TextInputProps as TextInputPrimitiveProps,
   Validation as ValidationPrimitive,
   type ValidationProps as ValidationPrimitiveProps,
+  useInputContext,
 } from '@dxos/react-input';
-import { mx } from '@dxos/react-ui-theme';
-import { type Density, type Elevation, type ClassNameValue, type Size } from '@dxos/react-ui-types';
+import { mx } from '@dxos/ui-theme';
+import { type Density, type Elevation, type Size } from '@dxos/ui-types';
 
 import { useDensityContext, useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
@@ -41,10 +40,10 @@ type InputSharedProps = Partial<{ density: Density; elevation: Elevation; varian
 
 type LabelProps = ThemedClassName<LabelPrimitiveProps> & { srOnly?: boolean };
 
-const Label = forwardRef<HTMLLabelElement, LabelProps>(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+const Label = forwardRef<HTMLLabelElement, LabelProps>(({ classNames, children, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return (
-    <LabelPrimitive {...props} className={tx('input.label', 'input__label', { srOnly }, classNames)} ref={forwardedRef}>
+    <LabelPrimitive {...props} className={tx('input.label', { srOnly }, classNames)} ref={forwardedRef}>
       {children}
     </LabelPrimitive>
   );
@@ -53,14 +52,10 @@ const Label = forwardRef<HTMLLabelElement, LabelProps>(({ srOnly, classNames, ch
 type DescriptionProps = ThemedClassName<DescriptionPrimitiveProps> & { srOnly?: boolean };
 
 const Description = forwardRef<HTMLSpanElement, DescriptionProps>(
-  ({ srOnly, classNames, children, ...props }, forwardedRef) => {
+  ({ classNames, children, srOnly, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <DescriptionPrimitive
-        {...props}
-        className={tx('input.description', 'input__description', { srOnly }, classNames)}
-        ref={forwardedRef}
-      >
+      <DescriptionPrimitive {...props} className={tx('input.description', { srOnly }, classNames)} ref={forwardedRef}>
         {children}
       </DescriptionPrimitive>
     );
@@ -70,18 +65,13 @@ const Description = forwardRef<HTMLSpanElement, DescriptionProps>(
 type ValidationProps = ThemedClassName<ValidationPrimitiveProps> & { srOnly?: boolean };
 
 const Validation = forwardRef<HTMLSpanElement, InputScopedProps<ValidationProps>>(
-  ({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
+  ({ __inputScope, classNames, children, srOnly, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
     return (
       <ValidationPrimitive
         {...props}
-        className={tx(
-          'input.validation',
-          `input__validation-message input__validation-message--${validationValence}`,
-          { srOnly, validationValence },
-          classNames,
-        )}
+        className={tx('input.validation', { srOnly, validationValence }, classNames)}
         ref={forwardedRef}
       >
         {children}
@@ -93,12 +83,12 @@ const Validation = forwardRef<HTMLSpanElement, InputScopedProps<ValidationProps>
 type DescriptionAndValidationProps = ThemedClassName<DescriptionAndValidationPrimitiveProps> & { srOnly?: boolean };
 
 const DescriptionAndValidation = forwardRef<HTMLParagraphElement, DescriptionAndValidationProps>(
-  ({ srOnly, classNames, children, ...props }, forwardedRef) => {
+  ({ classNames, children, srOnly, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
       <DescriptionAndValidationPrimitive
         {...props}
-        className={tx('input.descriptionAndValidation', 'input__description-and-validation', { srOnly }, classNames)}
+        className={tx('input.descriptionAndValidation', { srOnly }, classNames)}
         ref={forwardedRef}
       >
         {children}
@@ -107,54 +97,23 @@ const DescriptionAndValidation = forwardRef<HTMLParagraphElement, DescriptionAnd
   },
 );
 
-type PinInputProps = InputSharedProps &
-  Omit<PinInputPrimitiveProps, 'segmentClassName' | 'inputClassName'> & {
-    segmentClassName?: ClassNameValue;
-    inputClassName?: ClassNameValue;
-  };
+type PinInputProps = ThemedClassName<InputSharedProps & Omit<PinInputPrimitiveProps, 'className' | 'segmentClassName'>>;
 
 const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
-  (
-    {
-      density: propsDensity,
-      elevation: propsElevation,
-      segmentClassName: propsSegmentClassName,
-      inputClassName,
-      variant,
-      ...props
-    },
-    forwardedRef,
-  ) => {
+  ({ classNames, density: propsDensity, elevation: propsElevation, ...props }, forwardedRef) => {
     const { hasIosKeyboard } = useThemeContext();
     const { tx } = useThemeContext();
     const density = useDensityContext(propsDensity);
     const elevation = useElevationContext(propsElevation);
 
-    const segmentClassName = useCallback(
-      ({ focused, validationValence }: Parameters<Exclude<PinInputPrimitiveProps['segmentClassName'], undefined>>[0]) =>
-        tx(
-          'input.input',
-          'input--pin-segment',
-          {
-            variant: 'static',
-            focused,
-            disabled: props.disabled,
-            density,
-            elevation,
-            validationValence,
-          },
-          propsSegmentClassName,
-        ),
-      [tx, props.disabled, elevation, propsElevation, density],
-    );
     return (
       <PinInputPrimitive
         {...{
           ...props,
-          segmentClassName,
           ...(props.autoFocus && !hasIosKeyboard && { autoFocus: true }),
         }}
-        inputClassName={tx('input.inputWithSegments', 'input input--pin', { disabled: props.disabled }, inputClassName)}
+        className={tx('input.inputWithSegments', { disabled: props.disabled }, classNames) || ''}
+        segmentClassName={tx('input.segment', { disabled: props.disabled, density, elevation }) || ''}
         ref={forwardedRef}
       />
     );
@@ -163,24 +122,30 @@ const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
 
 // TODO(burdon): Implement inline icon within button: e.g., https://www.radix-ui.com/themes/playground#text-field
 
-type TextInputProps = InputSharedProps & ThemedClassName<TextInputPrimitiveProps>;
+type AutoFillProps = {
+  noAutoFill?: boolean;
+};
+
+type TextInputProps = InputSharedProps & ThemedClassName<TextInputPrimitiveProps> & AutoFillProps;
 
 const TextInput = forwardRef<HTMLInputElement, InputScopedProps<TextInputProps>>(
-  ({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+  (
+    { __inputScope, classNames, density: densityProp, elevation: elevationProp, variant, noAutoFill, ...props },
+    forwardedRef,
+  ) => {
     const { hasIosKeyboard } = useThemeContext();
-    const themeContextValue = useThemeContext();
-    const density = useDensityContext(propsDensity);
-    const elevation = useElevationContext(propsElevation);
+    const { tx } = useThemeContext();
+    const density = useDensityContext(densityProp);
+    const elevation = useElevationContext(elevationProp);
     const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
 
-    const { tx } = themeContextValue;
-
     return (
       <TextInputPrimitive
         {...props}
+        // TODO(wittjosiah): Factor out autofill properies.
+        {...{ 'data-1p-ignore': noAutoFill }}
         className={tx(
           'input.input',
-          'input',
           {
             variant,
             disabled: props.disabled,
@@ -211,8 +176,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, InputScopedProps<TextAreaProps>
       <TextAreaPrimitive
         {...props}
         className={tx(
-          'input.input',
-          'input--text-area',
+          'input.textArea',
           {
             variant,
             disabled: props.disabled,
@@ -220,7 +184,6 @@ const TextArea = forwardRef<HTMLTextAreaElement, InputScopedProps<TextAreaProps>
             elevation,
             validationValence,
           },
-          '-mbe-labelSpacingBlock',
           classNames,
         )}
         {...(props.autoFocus && !hasIosKeyboard && { autoFocus: true })}
@@ -230,7 +193,9 @@ const TextArea = forwardRef<HTMLTextAreaElement, InputScopedProps<TextAreaProps>
   },
 );
 
-type CheckboxProps = ThemedClassName<Omit<CheckboxPrimitiveProps, 'children'>> & { size?: Size; weight?: IconWeight };
+type CheckboxProps = ThemedClassName<Omit<CheckboxPrimitive.CheckboxProps, 'children'>> & {
+  size?: Size;
+};
 
 const Checkbox: ForwardRefExoticComponent<CheckboxProps> = forwardRef<
   HTMLButtonElement,
@@ -239,12 +204,11 @@ const Checkbox: ForwardRefExoticComponent<CheckboxProps> = forwardRef<
   (
     {
       __inputScope,
+      classNames,
       checked: propsChecked,
       defaultChecked: propsDefaultChecked,
       onCheckedChange: propsOnCheckedChange,
       size,
-      weight = 'bold',
-      classNames,
       ...props
     },
     forwardedRef,
@@ -258,7 +222,7 @@ const Checkbox: ForwardRefExoticComponent<CheckboxProps> = forwardRef<
     const { tx } = useThemeContext();
 
     return (
-      <CheckboxPrimitive
+      <CheckboxPrimitive.Root
         {...{
           ...props,
           checked,
@@ -269,15 +233,15 @@ const Checkbox: ForwardRefExoticComponent<CheckboxProps> = forwardRef<
             'aria-invalid': 'true' as const,
             'aria-errormessage': errorMessageId,
           }),
-          className: tx('input.checkbox', 'input--checkbox', { size }, 'shrink-0', classNames),
+          className: tx('input.checkbox', { size }, 'shrink-0', classNames),
         }}
         ref={forwardedRef}
       >
         <Icon
           icon={checked === 'indeterminate' ? 'ph--minus--regular' : 'ph--check--regular'}
-          classNames={tx('input.checkboxIndicator', 'input--checkbox__indicator', { size, checked })}
+          classNames={tx('input.checkboxIndicator', { size, checked })}
         />
-      </CheckboxPrimitive>
+      </CheckboxPrimitive.Root>
     );
   },
 );
@@ -290,10 +254,10 @@ const Switch = forwardRef<HTMLInputElement, InputScopedProps<SwitchProps>>(
   (
     {
       __inputScope,
+      classNames,
       checked: propsChecked,
       defaultChecked: propsDefaultChecked,
       onCheckedChange: propsOnCheckedChange,
-      classNames,
       ...props
     },
     forwardedRef,

package/src/components/Link/Link.stories.tsx

@@ -2,16 +2,19 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
-import { Link } from './Link';
 import { withTheme } from '../../testing';
+import { Link } from './Link';
 
-export default {
-  title: 'ui/react-ui-core/Link',
+const meta = {
+  title: 'ui/react-ui-core/components/Link',
   component: Link,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-} as any;
+  decorators: [withTheme()],
+} satisfies Meta<typeof Link>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = { args: { children: 'Hello', href: '#' } };
+export const Default: Story = { args: { children: 'Hello', href: '#' } };

package/src/components/Link/Link.tsx

@@ -18,7 +18,7 @@ export type LinkProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.a
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
   ({ asChild, variant, classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.a;
-    return <Root {...props} className={tx('link.root', 'link', { variant }, classNames)} ref={forwardedRef} />;
+    const Comp = asChild ? Slot : Primitive.a;
+    return <Comp {...props} className={tx('link.root', { variant }, classNames)} ref={forwardedRef} />;
   },
 );