fix: input, select, checkbox and navbar inconsistencies

giantnodes · May 4, 2024 · e218e06 · e218e06
1 parent 8fbfbc8
commit e218e06
Show file tree

Hide file tree

Showing 12 changed files with 126 additions and 48 deletions.
diff --git a/packages/react/src/components/checkbox/Checkbox.stories.tsx b/packages/react/src/components/checkbox/Checkbox.stories.tsx
@@ -4,6 +4,7 @@ import type { Meta, StoryFn } from '@storybook/react'
 import { checkbox } from '@giantnodes/theme'
 
 import { Checkbox } from '@/components/checkbox'
+import Card from '@/components/card/Card'
 
 const Component: Meta<typeof Checkbox> = {
   title: 'Components/Checkbox',
@@ -30,4 +31,16 @@ Default.args = {
   ...defaultProps,
 }
 
+export const UsingCard: StoryFn<CheckboxProps> = (args) => (
+  <Card>
+    <Card.Body>
+      <Checkbox {...args} />
+    </Card.Body>
+  </Card>
+)
+
+UsingCard.args = {
+  ...defaultProps,
+}
+
 export default Component
diff --git a/packages/react/src/components/input/Input.stories.tsx b/packages/react/src/components/input/Input.stories.tsx
@@ -44,4 +44,30 @@ UsingGroup.args = {
   ...defaultProps,
 }
 
+export const UsingSize: StoryFn<InputGroupProps> = (args) => (
+  <div className="flex flex-col gap-2">
+    <Input.Group {...args} size="sm">
+      <Input.Addon>$</Input.Addon>
+      <Input placeholder="sm" type="text" />
+      <Input.Addon>USD</Input.Addon>
+    </Input.Group>
+
+    <Input.Group {...args} size="md">
+      <Input.Addon>$</Input.Addon>
+      <Input placeholder="md" type="text" />
+      <Input.Addon>USD</Input.Addon>
+    </Input.Group>
+
+    <Input.Group {...args} size="lg">
+      <Input.Addon>$</Input.Addon>
+      <Input placeholder="lg" type="text" />
+      <Input.Addon>USD</Input.Addon>
+    </Input.Group>
+  </div>
+)
+
+UsingSize.args = {
+  ...defaultProps,
+}
+
 export default Component
diff --git a/packages/react/src/components/input/Input.tsx b/packages/react/src/components/input/Input.tsx
@@ -28,13 +28,13 @@ const Component: ComponentType = React.forwardRef(
     props: ComponentProps<TElement>,
     ref: Polymophic.Ref<TElement>
   ) => {
-    const { as, children, className, status, size, variant, ...rest } = props
+    const { as, children, className, color, size, variant, ...rest } = props
 
     const Element = as || Input
 
     const context = useInputContext()
     const { slots } = useInput({
-      status: status ?? context?.status,
+      color: color ?? context?.color,
       size: size ?? context?.size,
       variant: variant ?? context?.variant,
     })

diff --git a/packages/react/src/components/input/InputGroup.tsx b/packages/react/src/components/input/InputGroup.tsx
@@ -25,11 +25,11 @@ const Component: ComponentType = React.forwardRef(
     props: ComponentProps<TElement>,
     ref: Polymophic.Ref<TElement>
   ) => {
-    const { as, children, className, status, size, variant, ...rest } = props
+    const { as, children, className, color, size, variant, ...rest } = props
 
     const Element = as || Group
 
-    const context = useInput({ status, size, variant })
+    const context = useInput({ color, size, variant })
 
     const component = React.useMemo<GroupProps>(
       () => ({

diff --git a/packages/react/src/components/input/use-input.hook.tsx b/packages/react/src/components/input/use-input.hook.tsx
@@ -10,13 +10,13 @@ type UseInputProps = InputVariantProps
 type UseInputReturn = ReturnType<typeof useInput>
 
 export const useInput = (props: UseInputProps) => {
-  const { status, size, variant } = props
+  const { color, size, variant } = props
 
-  const slots = React.useMemo(() => input({ status, size, variant }), [status, size, variant])
+  const slots = React.useMemo(() => input({ color, size, variant }), [color, size, variant])
 
   return {
     slots,
-    status,
+    color,
     size,
     variant,
   }

diff --git a/packages/react/src/components/select/Select.stories.tsx b/packages/react/src/components/select/Select.stories.tsx
@@ -40,6 +40,41 @@ Default.args = {
   ...defaultProps,
 }
 
+export const UsingSize: StoryFn<SelectProps<object>> = (args) => (
+  <div className="flex flex-col gap-2">
+    <Select {...args} size="sm" placeholder="sm">
+      <Select.Option>Aardvark</Select.Option>
+      <Select.Option>Cat</Select.Option>
+      <Select.Option>Dog</Select.Option>
+      <Select.Option>Kangaroo</Select.Option>
+      <Select.Option>Panda</Select.Option>
+      <Select.Option>Snake</Select.Option>
+    </Select>
+
+    <Select {...args} size="md" placeholder="md">
+      <Select.Option>Aardvark</Select.Option>
+      <Select.Option>Cat</Select.Option>
+      <Select.Option>Dog</Select.Option>
+      <Select.Option>Kangaroo</Select.Option>
+      <Select.Option>Panda</Select.Option>
+      <Select.Option>Snake</Select.Option>
+    </Select>
+
+    <Select {...args} size="lg" placeholder="lg">
+      <Select.Option>Aardvark</Select.Option>
+      <Select.Option>Cat</Select.Option>
+      <Select.Option>Dog</Select.Option>
+      <Select.Option>Kangaroo</Select.Option>
+      <Select.Option>Panda</Select.Option>
+      <Select.Option>Snake</Select.Option>
+    </Select>
+  </div>
+)
+
+UsingSize.args = {
+  ...defaultProps,
+}
+
 export const UsingForm: StoryFn<SelectProps<object>> = (args) => (
   <Form>
     <Form.Group name="name">

diff --git a/packages/react/src/components/select/Select.tsx b/packages/react/src/components/select/Select.tsx
@@ -56,6 +56,7 @@ const Component: ComponentType = React.forwardRef(
       behavior,
       mode,
       placement,
+      size,
       status,
       onChange,
       onSelectionChange,
@@ -71,6 +72,7 @@ const Component: ComponentType = React.forwardRef(
       name: group?.name,
       behavior,
       mode,
+      size,
       status,
       onSelectionChange,
       onChange: group?.onChange ?? onChange,

diff --git a/packages/react/src/components/select/use-select.hook.ts b/packages/react/src/components/select/use-select.hook.ts
@@ -19,9 +19,9 @@ type UseSelectProps<T extends object> = SelectVariantProps &
 type UseSelectReturn = ReturnType<typeof useSelect>
 
 export const useSelect = <T extends object>(props: UseSelectProps<T>) => {
-  const { ref, name, status, onChange, onSelectionChange } = props
+  const { ref, name, size, status, onChange, onSelectionChange } = props
 
-  const slots = React.useMemo(() => select({ status }), [status])
+  const slots = React.useMemo(() => select({ size, status }), [size, status])
 
   const onSelect = (key: Key) => {
     onSelectionChange?.(key)

diff --git a/packages/theme/src/components/checkbox.ts b/packages/theme/src/components/checkbox.ts
@@ -8,7 +8,7 @@ export const checkbox = tv({
       'group',
       'relative',
       'flex items-center',
-      'bg-middleground',
+      'bg-shark',
       'border-transparent',
       'rounded',
       'border-2',

diff --git a/packages/theme/src/components/input.ts b/packages/theme/src/components/input.ts
@@ -4,51 +4,50 @@ import { tv } from 'tailwind-variants'
 
 export const input = tv({
   slots: {
-    group: ['flex gap-px', 'bg-foreground', 'rounded-md', 'overflow-hidden', 'has-[:disabled]:opacity-50'],
-    input: ['flex-1', 'bg-foreground', 'w-full', 'outline-none', 'placeholder-subtitle', 'py-2 px-3'],
+    group: [
+      'flex gap-px',
+      'bg-foreground',
+      'rounded-md',
+      'overflow-hidden',
+      'has-[:disabled]:opacity-50',
+      'focus-within:outline-dashed focus-within:outline-offset-2 focus-within:outline-1',
+    ],
+    input: ['flex-1', 'bg-foreground', 'w-full', 'font-normal', 'placeholder-subtitle', 'outline-none', 'py-2 px-1'],
     addon: ['flex items-center', 'bg-foreground', 'px-3'],
   },
   variants: {
-    size: {
-      xs: {
-        group: ['text-xs'],
-        input: ['placeholder:text-xs'],
-      },
-      sm: {
-        group: ['text-sm'],
-        input: ['placeholder:text-sm'],
-      },
-      md: {
-        group: ['text-base'],
-        input: ['placeholder:text-base'],
-      },
-      lg: {
-        group: ['text-lg'],
-        input: ['placeholder:text-lg'],
-      },
-      xl: {
-        group: ['text-xl'],
-        input: ['placeholder:text-xl'],
-      },
-    },
-    status: {
+    color: {
       neutral: {
-        group: ['text-content', 'border-partition'],
+        group: ['text-content', 'border-partition', 'focus-within:outline-partition'],
       },
       brand: {
-        group: ['text-brand', 'border-brand'],
+        group: ['text-brand', 'border-brand', 'focus-within:outline-brand'],
       },
       success: {
-        group: ['text-success', 'border-success'],
+        group: ['text-success', 'border-success', 'focus-within:outline-success'],
       },
       info: {
-        group: ['text-info', 'border-info'],
+        group: ['text-info', 'border-info', 'focus-within:outline-info'],
       },
       warning: {
-        group: ['text-warning', 'border-warning'],
+        group: ['text-warning', 'border-warning', 'focus-within:outline-danger'],
       },
       danger: {
-        group: ['text-danger', 'border-danger'],
+        group: ['text-danger', 'border-danger', 'focus-within:outline-warning'],
+      },
+    },
+    size: {
+      sm: {
+        group: ['text-sm'],
+        input: ['h-8 min-h-8', 'placeholder:text-sm'],
+      },
+      md: {
+        group: ['text-base'],
+        input: ['h-10 min-h-10', 'placeholder:text-base'],
+      },
+      lg: {
+        group: ['h-12 min-h-12', 'text-lg'],
+        input: ['placeholder:text-lg'],
       },
     },
     variant: {
@@ -60,7 +59,7 @@ export const input = tv({
   },
   defaultVariants: {
     size: 'md',
-    status: 'neutral',
+    color: 'neutral',
     variant: 'outlined',
   },
 })

diff --git a/packages/theme/src/components/navigation.ts b/packages/theme/src/components/navigation.ts
@@ -9,7 +9,7 @@ export const navigation = tv({
     brand: ['flex flex-row justify-center flex-nowrap shrink-0'],
     segment: ['flex gap-2', 'list-none'],
     title: ['font-semibold'],
-    item: ['grow', 'select-none'],
+    item: ['flex grow', 'select-none'],
     link: [
       'flex items-center gap-x-3 grow',
       'p-2',

diff --git a/packages/theme/src/components/select.ts b/packages/theme/src/components/select.ts
@@ -33,17 +33,20 @@ export const select = tv({
   variants: {
     size: {
       sm: {
-        select: ['text-xs'],
-        option: ['text-xs'],
-      },
-      md: {
         select: ['text-sm'],
+        button: ['h-8 min-h-8'],
         option: ['text-sm'],
       },
-      lg: {
+      md: {
         select: ['text-base'],
+        button: ['h-10 min-h-10'],
         option: ['text-base'],
       },
+      lg: {
+        select: ['text-lg'],
+        button: ['h-12 min-h-12'],
+        option: ['text-lg'],
+      },
     },
     status: {
       neutral: {