Merge pull request #251 from omnifed/242-bug-fine-tune-button-recipe-…

…variants refactor(preset): update button recipe to use outlined over outline
omnifed · Jul 8, 2024 · e2a5ae0 · e2a5ae0
2 parents 1cb6180 + e1bfaa2
commit e2a5ae0
Show file tree

Hide file tree

Showing 25 changed files with 822 additions and 124 deletions.
diff --git a/docs/app/components/Admonition.tsx b/docs/app/components/Admonition.tsx
@@ -61,9 +61,6 @@ function getPaletteTextStyles(palette: Sentiment) {
     case 'danger':
       return css({
         color: 'danger.text.initial !important',
-        _darkMode: {
-          color: 'danger.text.inverse !important',
-        },
       })
 
     case 'info':

diff --git a/docs/app/react/button/components/button-preview.tsx b/docs/app/react/button/components/button-preview.tsx
@@ -13,7 +13,7 @@ export function DangerButtonPreview() {
 }
 
 export function OutlineButtonPreview() {
-  return <Button usage="outline">Outline styles</Button>
+  return <Button usage="outlined">Outlined styles</Button>
 }
 
 export function TextButtonPreview() {
@@ -52,7 +52,7 @@ export function CustomButtonPreview() {
 
 // Overview
 
-type ButtonTypes = 'sharp' | 'rounded' | 'outline' | 'text'
+type ButtonTypes = 'sharp' | 'rounded' | 'outlined' | 'text'
 interface MatchButtonProps {
   kind: ButtonTypes
 }
@@ -63,7 +63,7 @@ function MatchButtonPreview(props: MatchButtonProps) {
       return <BasicButtonPreview />
     case 'rounded':
       return <RoundedButtonPreview />
-    case 'outline':
+    case 'outlined':
       return <OutlineButtonPreview />
     case 'text':
       return <TextButtonPreview />
@@ -73,7 +73,7 @@ function MatchButtonPreview(props: MatchButtonProps) {
 }
 
 export function OverviewButtonPreview() {
-  const btnTypes: ButtonTypes[] = ['sharp', 'rounded', 'outline', 'text']
+  const btnTypes: ButtonTypes[] = ['sharp', 'rounded', 'outlined', 'text']
   return (
     <>
       <div

diff --git a/docs/app/react/button/dev.mdx b/docs/app/react/button/dev.mdx
@@ -47,14 +47,14 @@ function DangerButton() {
 ```
 </CodePreview>
 
-### Outline
+### Outlined
 
 <CodePreview preview={<OutlineButtonPreview />}>
 ```tsx title="button.tsx"
 import { Button } from '@cerberus-design/react'
 
-function OutlineButton() {
-  return <Button usage="outline">Outline styles</Button>
+function OutlinedButton() {
+  return <Button usage="outlined">Outlined styles</Button>
 }
 ```
 </CodePreview>
@@ -133,7 +133,7 @@ function CustomButton() {
 ```ts showLineNumbers=false
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   palette?: 'action' | 'danger'
-  usage?: 'filled' | 'outline' | 'text'
+  usage?: 'filled' | 'outlined' | 'text'
   shape?: 'sharp' | 'rounded'
 }
 

diff --git a/docs/app/react/button/overview.mdx b/docs/app/react/button/overview.mdx
@@ -12,7 +12,7 @@ import {
 
 <OverviewList rules={[
   'Can contain an optional leading icon',
-  'Four types: sharp, rounded, outline, and text',
+  'Four types: sharp, rounded, outlined, and text',
   'Keep labels concise and in sentence-case',
   'Containers are either sharp or rounded and wide enough to fit label text'
 ]} />

diff --git a/docs/app/react/icon-button/components/icon-button-preview.tsx b/docs/app/react/icon-button/components/icon-button-preview.tsx
@@ -24,6 +24,14 @@ export function DangerIconButtonPreview() {
   )
 }
 
+export function OutlinedIconButtonPreview() {
+  return (
+    <IconButton ariaLabel="Like something" usage="outlined">
+      <ThumbsUp size={16} />
+    </IconButton>
+  )
+}
+
 export function TextIconButtonPreview() {
   return (
     <IconButton ariaLabel="Like something" usage="text">

diff --git a/docs/app/react/icon-button/dev.mdx b/docs/app/react/icon-button/dev.mdx
@@ -7,6 +7,7 @@ recipe: 'iconButton.ts'
 import CodePreview from '@/app/components/CodePreview'
 import {
   BasicIconButtonPreview,
+  OutlinedIconButtonPreview,
   DangerIconButtonPreview,
   TextIconButtonPreview,
   IconButtonSizesPreview,
@@ -38,6 +39,23 @@ function BasicIconButtonPreview() {
 ```
 </CodePreview>
 
+### Outlined
+
+<CodePreview preview={<OutlinedIconButtonPreview />}>
+```tsx title="icon-button.tsx"
+import { IconButton } from '@cerberus-design/react'
+import { ThumbsUp } from '@cerberus/icons'
+
+function OutlinedIconButtonPreview() {
+  return (
+    <IconButton ariaLabel="Like something" usage="outlined">
+      <ThumbsUp size={16} />
+    </IconButton>
+  )
+}
+```
+</CodePreview>
+
 ### Danger
 
 <CodePreview preview={<DangerIconButtonPreview />}>
@@ -139,7 +157,7 @@ export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>
   shape?: 'circle'
   size?: 'sm' | 'lg'
   tooltipPosition?: 'top' | 'right' | 'bottom' | 'left'
-  usage?: 'filled' | 'text'
+  usage?: 'filled' | 'text' | 'outlined'
 }
 
 define function IconButton(props: IconButtonProps): ReactNode

diff --git a/docs/app/react/icon-button/guidelines.mdx b/docs/app/react/icon-button/guidelines.mdx
@@ -9,6 +9,7 @@ import {
 } from '@/app/components/Admonition'
 import {
   BasicIconButtonPreview,
+  OutlinedIconButtonPreview,
   DangerIconButtonPreview,
   TextIconButtonPreview
 } from '@/app/react/icon-button/components/icon-button-preview'
@@ -32,6 +33,14 @@ Standard icon buttons are used for primary actions on a page.
 
 <WhenToUseAdmonition description="When you need high priority actions or actions that are the only item on screen." />
 
+## Outlined Buttons
+
+Outlined icon buttons are used for secondary actions on a page.
+
+<CodePreview preview={<OutlinedIconButtonPreview />} />
+
+<WhenToUseAdmonition description="When you need to display a secondary action that is less important than the primary action." />
+
 ## Danger Buttons
 
 Danger buttons are used for actions that are destructive, like deleting an item or canceling a process. They should be used sparingly, and only when the action is irreversible.

diff --git a/docs/app/react/icon-button/overview.mdx b/docs/app/react/icon-button/overview.mdx
@@ -8,19 +8,21 @@ import CodePreview from '@/app/components/CodePreview'
 import OverviewList from '@/app/components/OverviewList'
 import {
   BasicIconButtonPreview,
+  OutlinedIconButtonPreview,
   DangerIconButtonPreview,
   TextIconButtonPreview
 } from '@/app/react/icon-button/components/icon-button-preview'
 
 <OverviewList rules={[
   'Icon buttons must use an icon with a clear meaning',
-  'Three types: standard, danger, and text',
+  'Four types: standard, outlined, danger, and text',
   "On hover, display a tooltip describing the button's action (not the name of the icon)",
 ]} />
 
 ## Example
 
 <CodePreview preview={<BasicIconButtonPreview />} />
+<CodePreview preview={<OutlinedIconButtonPreview />} />
 <CodePreview preview={<DangerIconButtonPreview />} />
 <CodePreview preview={<TextIconButtonPreview />} />
 

diff --git a/figma/src/button.figma.tsx b/figma/src/button.figma.tsx
@@ -17,7 +17,7 @@ const props = {
   }),
   usage: figma.enum('Usage', {
     filled: 'filled',
-    outline: 'outline',
+    outline: 'outlined',
     text: 'text',
   }),
   // Figma specific

diff --git a/figma/src/icons/arrow-left-icon.tsx → figma/src/icons/arrow-left-icon.figma.tsx b/figma/src/icons/arrow-left-icon.tsx → figma/src/icons/arrow-left-icon.figma.tsx
@@ -3,7 +3,7 @@ import { ArrowLeft } from '@cerberus-design/icons'
 
 figma.connect(
   ArrowLeft,
-  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=8702-3542&m=dev',
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9018-8977&m=dev',
 
   {
     imports: ["import { ArrowLeft } from '@cerberus/icons'"],

diff --git a/figma/src/icons/arrow-right-icon.tsx → figma/src/icons/arrow-right-icon.figma.tsx b/figma/src/icons/arrow-right-icon.tsx → figma/src/icons/arrow-right-icon.figma.tsx
@@ -3,7 +3,7 @@ import { ArrowRight } from '@cerberus-design/icons'
 
 figma.connect(
   ArrowRight,
-  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=8688-3388&m=dev',
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9018-8974&m=dev',
 
   {
     imports: ["import { ArrowRight } from '@cerberus/icons'"],

diff --git a/packages/panda-preset/src/recipes/button.ts b/packages/panda-preset/src/recipes/button.ts
@@ -7,7 +7,7 @@ import {
   buttonBase,
   buttonPalettes,
   filledUsage,
-  nonTextStates,
+  outlinedUsage,
   sharpRadii,
   textUsage,
 } from './shared/button.base'
@@ -36,12 +36,7 @@ export const button: RecipeConfig<RecipeVariantRecord> = defineRecipe({
     palette: buttonPalettes,
     usage: {
       text: textUsage,
-      outline: {
-        ...nonTextStates,
-        bgColor: 'colorPalette.bg.100.initial',
-        border: '4px solid',
-        borderColor: 'colorPalette.border.initial',
-      },
+      outlined: outlinedUsage,
       filled: filledUsage,
     },
     shape: {

diff --git a/packages/panda-preset/src/recipes/iconButton.ts b/packages/panda-preset/src/recipes/iconButton.ts
@@ -7,6 +7,7 @@ import {
   buttonBase,
   buttonPalettes,
   filledUsage,
+  outlinedUsage,
   textUsage,
 } from './shared/button.base'
 
@@ -40,6 +41,7 @@ export const iconButton: RecipeConfig<RecipeVariantRecord> = defineRecipe({
     usage: {
       text: textUsage,
       filled: filledUsage,
+      outlined: outlinedUsage,
     },
     shape: {
       circle: {

diff --git a/packages/panda-preset/src/recipes/shared/button.base.ts b/packages/panda-preset/src/recipes/shared/button.base.ts
@@ -73,6 +73,13 @@ export const filledUsage = {
   },
 }
 
+export const outlinedUsage = {
+  ...nonTextStates,
+  bgColor: 'colorPalette.bg.100.initial',
+  border: '4px solid',
+  borderColor: 'colorPalette.border.initial',
+}
+
 export const buttonPalettes = {
   action,
   danger,

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -8,25 +8,26 @@
   "main": "src/index.ts",
   "module": "src/index.ts",
   "scripts": {
-    "build": "tsup-node --experimental-dts",
+    "build": "tsup --experimental-dts noExternals",
     "clean": "rm -rf ./build",
     "lint:ts": "tsc --project tsconfig.lint.json --noEmit"
   },
   "peerDependencies": {
-    "@cerberus/panda-preset": "npm:@jsr/cerberus__panda-preset",
-    "@cerberus/styled-system": "npm:@cerberus-design/styled-system@next",
     "@cerberus/icons": "npm:@jsr/cerberus__icons",
+    "@cerberus/panda-preset": "npm:@jsr/cerberus__panda-preset",
+    "@cerberus/styled-system": "npm:@cerberus-design/styled-system@workspace:*",
     "@pandacss/dev": "*",
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
     "@cerberus-design/configs": "workspace:*",
+    "@cerberus-design/styled-system": "workspace:*",
     "@microsoft/api-extractor": "^7.46.2",
     "@types/react": "^18",
     "react": "^18",
     "react-dom": "^18",
-    "tsup": "^8.0.2"
+    "tsup": "^8.1.0"
   },
   "publishConfig": {
     "access": "public",

diff --git a/packages/react/src/components/Button.tsx b/packages/react/src/components/Button.tsx
@@ -9,7 +9,7 @@ import { button } from '@cerberus/styled-system/recipes'
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   palette?: 'action' | 'danger'
-  usage?: 'filled' | 'outline' | 'text'
+  usage?: 'filled' | 'outlined' | 'text'
   shape?: 'sharp' | 'rounded'
 }
 

diff --git a/packages/react/src/components/IconButton.tsx b/packages/react/src/components/IconButton.tsx
@@ -8,12 +8,11 @@ import type { ButtonProps } from './Button'
  * @module
  */
 
-export type IconButtonUsage = Exclude<ButtonProps['usage'], 'outline'>
 export interface IconButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement> {
   ariaLabel: string
   palette?: ButtonProps['palette']
-  usage?: IconButtonUsage
+  usage?: ButtonProps['usage']
   shape?: 'circle'
   size?: 'sm' | 'lg'
   tooltipPosition?: 'top' | 'bottom' | 'left' | 'right'

diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
@@ -1,11 +1,13 @@
 {
   "extends": "../../tsconfig.base.json",
   "include": ["src"],
-  "exclude": ["build", "node_modules"],
+  "exclude": ["build"],
 
   "compilerOptions": {
+    "baseUrl": "./",
     "paths": {
-      "@/*": ["./*"]
+      "@/*": ["./*"],
+      "@cerberus/*": ["node_modules/@cerberus-design/*"]
     }
   }
 }
diff --git a/packages/react/tsup.config.ts b/packages/react/tsup.config.ts
@@ -1,7 +1,18 @@
-import { defineConfig } from 'tsup'
+import { defineConfig, type Options } from 'tsup'
 import { modernConfig, legacyConfig } from '@cerberus-design/configs'
+import { devDependencies, peerDependencies } from './package.json'
+
+const external = [
+  ...Object.keys(devDependencies),
+  ...Object.keys(peerDependencies),
+  'react',
+  'react-dom',
+  '@cerberus/styled-system/css',
+  '@cerberus/styled-system/patterns',
+  '@cerberus/styled-system/recipes',
+]
 
 export default defineConfig([
-  modernConfig({ entry: ['src/**/*.ts', 'src/**/*.tsx'] }),
-  legacyConfig({ entry: ['src/**/*.ts', 'src/**/*.tsx'] }),
-])
+  modernConfig({ entry: ['src/**/*.ts', 'src/**/*.tsx'], external }),
+  legacyConfig({ entry: ['src/**/*.ts', 'src/**/*.tsx'], external }),
+] as Options[])