Merge pull request #488 from omnifed/485-feat-buttons-iconbuttons-sho…

…uld-support-ghost-usage

485 feat buttons iconbuttons should support ghost usage

docs/app/react/button/components/button-preview.tsx

@@ -19,7 +19,7 @@ export function OutlineButtonPreview() {
 }
 
 export function TextButtonPreview() {
-  return <Button usage="text">Text styles</Button>
+  return <Button usage="ghost">Ghost styles</Button>
 }
 
 export function RoundedButtonPreview() {
@@ -54,7 +54,7 @@ export function CustomButtonPreview() {
 
 // Overview
 
-type ButtonTypes = 'sharp' | 'rounded' | 'outlined' | 'text'
+type ButtonTypes = 'sharp' | 'rounded' | 'outlined' | 'ghost'
 interface MatchButtonProps {
   kind: ButtonTypes
 }
@@ -67,15 +67,15 @@ function MatchButtonPreview(props: MatchButtonProps) {
       return <RoundedButtonPreview />
     case 'outlined':
       return <OutlineButtonPreview />
-    case 'text':
+    case 'ghost':
       return <TextButtonPreview />
     default:
       return null
   }
 }
 
 export function OverviewButtonPreview() {
-  const btnTypes: ButtonTypes[] = ['sharp', 'rounded', 'outlined', 'text']
+  const btnTypes: ButtonTypes[] = ['sharp', 'rounded', 'outlined', 'ghost']
   return (
     <>
       <div

docs/app/react/button/components/live-playground.tsx

@@ -7,7 +7,7 @@ import { Button } from '@cerberus-design/react'
 
 const api = {
   palette: builder.Enum('palette', ['action', 'secondaryAction', 'danger']),
-  usage: builder.Enum('usage', ['filled', 'outlined', 'text']),
+  usage: builder.Enum('usage', ['filled', 'outlined', 'ghost']),
   shape: builder.Enum('shape', ['sharp', 'rounded']),
   text: builder.Text('name', 'Button'),
   disabled: builder.Boolean('disabled', false),

docs/app/react/button/dev.mdx

@@ -74,7 +74,7 @@ function CustomButton() {
 ```ts showLineNumbers=false
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   palette?: 'action' | 'secondaryAction' | 'danger'
-  usage?: 'filled' | 'outlined' | 'text'
+  usage?: 'filled' | 'outlined' | 'ghost'
   shape?: 'sharp' | 'rounded'
 }
 

docs/app/react/button/guidelines.mdx

@@ -51,9 +51,9 @@ Outline buttons are used for secondary actions on a page, like Cancel or Close.
 
 <WhenToUseAdmonition description="When you need medium priority actions or a secondary action to a primary button." />
 
-## Text Buttons
+## Ghost Buttons
 
-Text buttons are used for tertiary actions on a page, like Help or Learn more. They should be used for actions that are less important than the secondary action on the page.
+Ghost buttons are used for tertiary actions on a page, like Help or Learn more. They should be used for actions that are less important than the secondary action on the page.
 
 <CodePreview preview={<TextButtonPreview />} />
 

docs/app/react/button/overview.mdx

@@ -15,7 +15,7 @@ import {
 
 <OverviewList rules={[
   'Can contain an optional leading icon',
-  'Four types: sharp, rounded, outlined, and text',
+  'Four types: sharp, rounded, outlined, and ghost',
   'Keep labels concise and in sentence-case',
   'Containers are either sharp or rounded and wide enough to fit label text'
 ]} />

docs/app/react/icon-button/components/icon-button-preview.tsx

@@ -34,7 +34,7 @@ export function OutlinedIconButtonPreview() {
 
 export function TextIconButtonPreview() {
   return (
-    <IconButton ariaLabel="Like something" usage="text">
+    <IconButton ariaLabel="Like something" usage="ghost">
       <ThumbsUp size={24} />
     </IconButton>
   )

docs/app/react/icon-button/components/live-preview.tsx

@@ -10,7 +10,7 @@ const fallbackAria = 'Like something'
 
 const api = {
   palette: builder.Enum('palette', ['action', 'secondaryAction', 'danger']),
-  usage: builder.Enum('usage', ['filled', 'outlined', 'text']),
+  usage: builder.Enum('usage', ['filled', 'outlined', 'ghost']),
   size: builder.Enum('size', ['sm', 'lg']),
   tooltipPosition: builder.Enum('tooltipPosition', [
     'top',

docs/app/react/icon-button/dev.mdx

@@ -64,7 +64,7 @@ export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>
   palette?: 'action' | 'secondaryAction' | 'danger'
   size?: 'sm' | 'lg'
   tooltipPosition?: 'top' | 'right' | 'bottom' | 'left'
-  usage?: 'filled' | 'text' | 'outlined'
+  usage?: 'filled' | 'ghost' | 'outlined'
 }
 
 define function IconButton(props: IconButtonProps): ReactNode
@@ -78,6 +78,6 @@ The `IconButton` component accepts the following props:
 | -------- | ------- | ------------------------------------------------------------- |
 | ariaLabel |    "Icon Button"     | The accessible label for the button. |
 | palette     | `action`   | The color palette of the button. |
-| usage | `text`    | The style treatment of the button.    |
+| usage | `ghost`    | The style treatment of the button.    |
 | size | `lg`    | The size of the button.               |
 | tooltipPosition | `top`    | The position of the tooltip.               |

docs/app/react/icon-button/guidelines.mdx

@@ -49,9 +49,9 @@ Danger buttons are used for actions that are destructive, like deleting an item
 
 <WhenToUseAdmonition description="When you need to display a high impact destructive action such as deleting items or other places where a destructive action is the priority in the UI." />
 
-## Text Buttons
+## Ghost Buttons
 
-Text buttons are used for tertiary actions on a page, like Help or Learn more. They should be used for actions that are less important than the secondary action on the page.
+Ghost buttons are used for tertiary actions on a page, like Help or Learn more. They should be used for actions that are less important than the secondary action on the page.
 
 <CodePreview preview={<TextIconButtonPreview />} />
 

docs/app/react/icon-button/overview.mdx

@@ -16,7 +16,7 @@ import { LivePlayground } from '@/app/react/icon-button/components/live-preview'
 
 <OverviewList rules={[
   'Icon buttons must use an icon with a clear meaning',
-  'Four types: standard, outlined, danger, and text',
+  'Four types: standard, outlined, danger, and ghost',
   "On hover, display a tooltip describing the button's action (not the name of the icon)",
 ]} />
 

docs/app/react/loading-states/components/loading-preview.tsx

@@ -1,3 +1,4 @@
+import { Circle } from '@/styled-system/jsx'
 import { Tag } from '@cerberus-design/react'
 import { css } from '@cerberus/styled-system/css'
 import { hstack, vstack } from '@cerberus/styled-system/patterns'
@@ -10,7 +11,31 @@ export function OverviewPreview() {
         w: '3/4',
       })}
     >
-      <div className={vstack()}>
+      <div
+        className={vstack({
+          alignItems: 'flex-start',
+        })}
+      >
+        <div
+          className={hstack({
+            justify: 'space-between',
+            w: 'full',
+          })}
+        >
+          <p
+            aria-busy="true"
+            className={css({
+              rounded: 'sm',
+            })}
+          >
+            This is a description of something.
+          </p>
+          <div className={hstack()}>
+            <Circle aria-busy="true" size="6" />
+            <Circle aria-busy="true" size="6" />
+            <Circle aria-busy="true" size="6" />
+          </div>
+        </div>
         <div
           aria-busy="true"
           className={css({
@@ -24,7 +49,14 @@ export function OverviewPreview() {
             here.
           </p>
         </div>
-        <Tag shape="pill">Skeleton</Tag>
+        <Tag
+          className={css({
+            alignSelf: 'center',
+          })}
+          shape="pill"
+        >
+          Skeleton
+        </Tag>
       </div>
     </div>
   )

packages/panda-preset/src/recipes/button.ts

@@ -35,6 +35,7 @@ export const button: RecipeConfig<RecipeVariantRecord> = defineRecipe({
   variants: {
     palette: buttonPalettes,
     usage: {
+      ghost: textUsage,
       text: textUsage,
       outlined: outlinedUsage,
       filled: filledUsage,

packages/panda-preset/src/recipes/iconButton.ts

@@ -40,6 +40,7 @@ export const iconButton: RecipeConfig<RecipeVariantRecord> = defineRecipe({
   variants: {
     palette: buttonPalettes,
     usage: {
+      ghost: textUsage,
       text: textUsage,
       filled: filledUsage,
       outlined: outlinedUsage,