v1.1 UI updates

[fiveoutofnine]

@/components/ui

• <Accordion /> 🆕
• <Avatar /> 🆕
• <Badge />
  • Add type: "text" | "number" prop (number has smaller x-padding)
  • Add type-checked intent="black" and intent="white" variants
  • Add data attribute data-length-one if children implements .toString() and returns length 1
  • Update variant="primary"'s dark:text-white and text-black to just text-white for accessibility and consistency (inverted for intent="warning")
  • Update variant="secondary"'s text-*-9 to text-*-11 for accessibility and consistency
  • Render <Badge /> as <span> instead of <div>
  • Ensure <Badge /> has a minimum aspect ratio of 1 / 1
  • Refactor intent="primary" $\rightarrow$ intent="info"
• <Button />
  • Add <ButtonGroup /> 🆕 and corresponding interactive styles (hover:* and focus-visible:*)
  • Add default newTab=false
  • Add type-checked variant="solid" & { intent="black" | "white" } variants
  • Add button-left-icon="", button-right-icon="", and button-content="" selectors
  • Update variant="primary"'s dark:text-white and text-black to just text-white for accessibility and consistency (inverted for intent="warning")
  • Update variant="outline" | "ghost" | "text"'s text-*-9 to text-*-11 and add bg-transparent for accessibility and consistency
  • Update size="xl"'s rounded to rounded-md
  • Remove cursor-not-allowed and add pointer-events-none to disabled=true variants
  • Refactor intent="primary" $\rightarrow$ intent="info"
• <Checkbox /> 🆕
• <CodeBlock />
  • Add logo, breakLines, and switcher props
  • Add diff syntax highlighting
  • Refactor "copy to clipboard" button to ./actions w/ source switcher
  • Animate <Copy />/<Check /> icons on copy
  • Display closable, intent="success" toast on copy
• <Command /> 🆕
• <Dialog /> 🆕
  • Bump @radix-ui/react-dialog ^1.0.4 $\rightarrow$ ^1.0.5 (latest)
• <Drawer /> 🆕
• <Dropdown /> 🆕
• <Form /> 🆕
• <HoverCard />
  • Bump @radix-ui/react-hover-card ^1.0.6 $\rightarrow$ ^1.0.7 (latest)
  • Add inPortal, triggerProps, defaultOpen, open, onOpenChange as props to preserve component API
• <IconButton />
  • Inherit all styles from <Button /> for consistency and code cleanliness
  • Refactor intent="primary" $\rightarrow$ intent="info"
• <Input /> 🆕
• <Popover /> 🆕
• <Radio /> 🆕
• <Select />
  • Inherit all styles from <Button /> for consistency and code cleanliness
  • Add comments for pl-*, pr-*, and right-* values
  • Add fullWidth prop
  • Add type-checked variant="solid" & { intent="black" | "white" } variants
  • Add select-content="" selector
  • Update variant="primary"'s dark:text-white and text-black to just text-white for accessibility and consistency (inverted for intent="warning")
  • Update variant="outline" | "ghost"'s text-*-9 to text-*-11 for accessibility and consistency
  • Remove <Select.Item /> (in favor of the HTML-native <option>)
  • Make the component a React.ForwardedRef
  • Refactor intent="primary" $\rightarrow$ intent="info"
• <Switch /> 🆕
• <Table /> 🆕
• <Tabs /> 🆕
  • Bump @radix-ui/react-tabs ^1.0.3 $\rightarrow$ ^1.0.4 (latest)
• <TextArea /> 🆕
• <Toaster /> and toast
  • Refactor intent="primary" $\rightarrow$ intent="info"
  • Refactor @/components/ui/toaster $\rightarrow$ @/components/ui/toast
  • Refactor useToast $\rightarrow$ toast and imports
  • Replace @radix-ui/react-toast with sonner for smoother animations and performance (see Sonner docs for API changes)
  • action now takes the form of ReactNode | Action, where type Action = { label: string; onClick: () => void }
  • Place <Toaster /> higher in the component tree
  • Add hasCloseButton prop (note: this button will show on hover if on a non-touchscreen device, and always be displayed otherwise)
• <Tooltip />
  • Bump @radix-ui/react-tooltip ^1.0.5 $\rightarrow$ ^1.0.7 (latest)
  • Add inPortal, triggerProps, defaultOpen, open, onOpenChange as props to preserve component API

Miscellaneous

• Update code convention
  • Remove imports for React types (e.g. FC $\rightarrow$ React.FC)
  • Remove unnecessary displayNames
  • Add exports comment divider in @/components/ui/*/index.tsxs
• Update dependencies
• Update <Logo /> hover styles to border color indicator
• Fix <Logo /> focus state
• Apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-9 to button in globals.css

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
www-xq0s	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 8, 2024 10:24pm

[sudo-owen]

lgtm