Create Button outline variant

HedvigInsurance · Sep 18, 2024 · 7e73fb8 · 7e73fb8
1 parent 6e1db0e
commit 7e73fb8
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 9 deletions.
diff --git a/apps/store/src/components/DetailsList/DetailsList.css.ts b/apps/store/src/components/DetailsList/DetailsList.css.ts
@@ -1,10 +1,13 @@
 import { style } from '@vanilla-extract/css'
-import { tokens, xStack } from 'ui'
+import { tokens, xStack, yStack } from 'ui'
 
-export const detailsListRoot = style({
-  listStyle: 'none',
-  color: tokens.colors.textTranslucentSecondary,
-})
+export const detailsListRoot = style([
+  yStack({ gap: 'xxs' }),
+  {
+    listStyle: 'none',
+    color: tokens.colors.textTranslucentSecondary,
+  },
+])
 
 export const detailsListItem = style([
   xStack({ justifyContent: 'space-between' }),

diff --git a/apps/store/src/components/DetailsList/DetailsList.tsx b/apps/store/src/components/DetailsList/DetailsList.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import { type ComponentProps } from 'react'
-import { type FontSizeProps, sprinkles } from 'ui'
+import { type FontSizeProps, type Sprinkles, yStack } from 'ui'
 import {
   detailsListItem,
   detailsListLabel,
@@ -10,10 +10,17 @@ import {
 
 type RootProps = ComponentProps<'ul'> & {
   size?: FontSizeProps
+  gap?: Sprinkles['gap']
 }
-const DetailsListRoot = ({ size = 'xs', className, children, ...props }: RootProps) => {
+const DetailsListRoot = ({
+  size = 'xs',
+  gap = 'xxs',
+  className,
+  children,
+  ...props
+}: RootProps) => {
   return (
-    <ul className={clsx(detailsListRoot, sprinkles({ fontSize: size }), className)} {...props}>
+    <ul className={clsx(detailsListRoot, yStack({ gap, fontSize: size }), className)} {...props}>
       {children}
     </ul>
   )

diff --git a/packages/ui/src/components/Button/Button.css.ts b/packages/ui/src/components/Button/Button.css.ts
@@ -168,6 +168,24 @@ export const buttonVariant = styleVariants({
       },
     },
   },
+
+  outline: {
+    backgroundColor: 'transparent',
+    color: tokens.colors.textPrimary,
+    border: '1px solid',
+    borderColor: tokens.colors.borderPrimary,
+
+    ':active': {
+      backgroundColor: tokens.colors.buttonGhostHover,
+    },
+
+    selectors: {
+      '&:disabled:not([data-loading])': {
+        color: tokens.colors.buttonDisabledText,
+        backgroundColor: 'transparent',
+      },
+    },
+  },
 })
 
 const HEIGHT = {

diff --git a/packages/ui/src/components/Button/Button.stories.tsx b/packages/ui/src/components/Button/Button.stories.tsx
@@ -32,6 +32,9 @@ const Template: StoryFn<Controls> = (props: Controls) => {
         <div>
           <Button {...props} variant="ghost" />
         </div>
+        <div>
+          <Button {...props} variant="outline" />
+        </div>
       </div>
 
       <div className={yStack({ gap: 'md' })}>
@@ -50,6 +53,9 @@ const Template: StoryFn<Controls> = (props: Controls) => {
         <div>
           <Button {...props} variant="ghost" disabled />
         </div>
+        <div>
+          <Button {...props} variant="outline" disabled />
+        </div>
       </div>
 
       <div className={yStack({ gap: 'md' })}>
@@ -68,6 +74,9 @@ const Template: StoryFn<Controls> = (props: Controls) => {
         <div>
           <Button {...props} variant="ghost" loading />
         </div>
+        <div>
+          <Button {...props} variant="outline" loading />
+        </div>
       </div>
     </div>
   )

diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
@@ -16,7 +16,14 @@ import { getButtonSizeStyles } from './Button.helpers'
 import { DotPulse } from './DotPulse'
 
 type BaseProps = {
-  variant?: 'primary' | 'primary-alt' | 'secondary' | 'secondary-alt' | 'ghost' | 'ghost-alt'
+  variant?:
+    | 'primary'
+    | 'primary-alt'
+    | 'secondary'
+    | 'secondary-alt'
+    | 'ghost'
+    | 'ghost-alt'
+    | 'outline'
   size?: ButtonSize
   fullWidth?: boolean
   hiddenText?: ReactNode