Merge pull request #276 from omnifed/275-feature-update-tag-to-allow-…

…gradient-and-outlined 275 feature update tag to allow gradient and outlined
omnifed · Jul 15, 2024 · 30fdd04 · 30fdd04
2 parents ce70ef5 + df9f5a0
commit 30fdd04
Show file tree

Hide file tree

Showing 12 changed files with 337 additions and 136 deletions.
diff --git a/docs/app/react/tags/components/tag-preview.tsx b/docs/app/react/tags/components/tag-preview.tsx
@@ -4,7 +4,6 @@ import { css } from '@cerberus/styled-system/css'
 import { Fragment } from 'react'
 import { grid, gridItem, hstack } from '@cerberus/styled-system/patterns'
 import { ClosableTagPreview } from './closable-tag-preview'
-import type { Sentiment } from '@cerberus-design/panda-preset'
 
 export type TagPreviewProps = TagProps
 
@@ -14,14 +13,14 @@ export function BasicTagPreview() {
 
 export function OutlineTagPreview() {
   return (
-    <Tag shape="rounded" usage="outlined">
+    <Tag shape="square" usage="outlined">
       Outlined
     </Tag>
   )
 }
 
-export function RoundedTagPreview() {
-  return <Tag shape="rounded">Rounded</Tag>
+export function SquareTagPreview() {
+  return <Tag shape="square">Square</Tag>
 }
 
 export function PillTagPreview() {
@@ -45,34 +44,36 @@ export function WithIconTagPreview() {
 export function GradientTagPreview() {
   return (
     <div className={hstack()}>
-      <Tag
-        shape="rounded"
-        className={css({
-          cerbGradient: 'blue',
-        })}
-      >
+      <Tag gradient="blue" shape="square">
         Blue
       </Tag>
-      <Tag
-        shape="rounded"
-        className={css({
-          cerbGradient: 'green',
-        })}
-      >
+      <Tag gradient="blue" shape="square" usage="outlined">
+        Blue Outlined
+      </Tag>
+      <Tag gradient="green" shape="square">
         Green
       </Tag>
-      <Tag
-        shape="rounded"
-        className={css({
-          cerbGradient: 'purple',
-        })}
-      >
+      <Tag gradient="green" shape="square" usage="outlined">
+        Green Outlined
+      </Tag>
+      <Tag gradient="purple" shape="square">
         Purple
       </Tag>
+      <Tag gradient="purple" shape="square" usage="outlined">
+        Purple Outlined
+      </Tag>
     </div>
   )
 }
 
+export function GradientOutlinedTagPreview() {
+  return (
+    <Tag gradient="purple" shape="square" usage="outlined">
+      Gradient
+    </Tag>
+  )
+}
+
 export function CustomTagPreview() {
   return (
     <Tag
@@ -92,7 +93,13 @@ export function CustomTagPreview() {
 
 // Overview
 
-type TagTypes = 'pill' | 'rounded' | 'outline' | 'filled' | 'closable'
+type TagTypes =
+  | 'pill'
+  | 'square'
+  | 'outlined'
+  | 'gradient-outlined'
+  | 'filled'
+  | 'closable'
 interface MatchTagProps {
   kind: TagTypes
   palette?: TagProps['palette'] | 'gradient'
@@ -102,10 +109,12 @@ function MatchTagPreview(props: MatchTagProps) {
   switch (props.kind) {
     case 'pill':
       return <PillTagPreview />
-    case 'rounded':
-      return <RoundedTagPreview />
-    case 'outline':
+    case 'square':
+      return <SquareTagPreview />
+    case 'outlined':
       return <OutlineTagPreview />
+    case 'gradient-outlined':
+      return <GradientOutlinedTagPreview />
     case 'filled':
       return <BasicTagPreview />
     case 'closable':
@@ -118,8 +127,9 @@ function MatchTagPreview(props: MatchTagProps) {
 export function OverviewTagPreview() {
   const btnTypes: TagTypes[] = [
     'pill',
-    'rounded',
-    'outline',
+    'square',
+    'outlined',
+    'gradient-outlined',
     'filled',
     'closable',
   ]
@@ -166,31 +176,25 @@ function MatchTagPalettePreview(props: MatchTagProps) {
   switch (props.palette) {
     case 'neutral':
       return (
-        <Tag palette="neutral" shape="rounded">
+        <Tag palette="neutral" shape="square">
           Neutral
         </Tag>
       )
     case 'gradient':
       return (
-        <Tag
-          palette="neutral"
-          shape="rounded"
-          className={css({
-            cerbGradient: 'blue',
-          })}
-        >
+        <Tag gradient="purple" shape="square">
           Gradient
         </Tag>
       )
     case 'info':
       return (
-        <Tag palette="info" shape="rounded" usage="outlined">
+        <Tag palette="info" shape="square" usage="outlined">
           Info
         </Tag>
       )
     case 'success':
       return (
-        <Tag palette="success" shape="rounded" usage="outlined">
+        <Tag palette="success" shape="square" usage="outlined">
           Success
         </Tag>
       )
@@ -215,10 +219,10 @@ function MatchTagPalettePreview(props: MatchTagProps) {
 
 export function OverviewPaletteTagPreview() {
   const btnTypes: TagTypes[] = [
-    'rounded',
-    'rounded',
-    'outline',
-    'outline',
+    'square',
+    'square',
+    'outlined',
+    'outlined',
     'pill',
     'pill',
   ]

diff --git a/docs/app/react/tags/dev.mdx b/docs/app/react/tags/dev.mdx
@@ -5,11 +5,14 @@ recipe: 'tag.ts'
 ---
 
 import CodePreview from '@/app/components/CodePreview'
+import {
+  NoteAdmonition,
+} from '@/app/components/Admonition'
 import {
   BasicTagPreview,
   OutlineTagPreview,
   PillTagPreview,
-  RoundedTagPreview,
+  SquareTagPreview,
   WithIconTagPreview,
   CustomTagPreview,
   GradientTagPreview,
@@ -58,8 +61,8 @@ import { Tag } from '@cerberus-design/react'
 
 function OutlinedTagPreview() {
   return (
-    <Tag shape="rounded" usage="outline">
-      Outline
+    <Tag shape="square" usage="outlined">
+      Outlined
     </Tag>
   )
 }
@@ -83,14 +86,14 @@ function PillTagPreview() {
 ```
 </CodePreview>
 
-### Rounded
+### Square
 
-<CodePreview preview={<RoundedTagPreview />}>
+<CodePreview preview={<SquareTagPreview />}>
 ```tsx title="tag.tsx"
 import { Tag } from '@cerberus-design/react'
 
-function RoundedTagPreview() {
-  return <Tag shape="rounded">Rounded</Tag>
+function SquareTagPreview() {
+  return <Tag shape="square">Square</Tag>
 }
 ```
 </CodePreview>
@@ -115,6 +118,8 @@ function WithIconTagPreview() {
 
 ### Closable
 
+To use a closable tag, just pass an `onClick` prop to the `Tag` component.
+
 <CodePreview preview={<ClosableTagPreview />}>
 ```tsx title="tag.tsx" {11}
 'use client'
@@ -134,37 +139,33 @@ function ClosableTagPreview() {
 
 ## Gradient
 
-You can utilize the `cerbGradient` utility to apply a gradient to the tag.
-
 <CodePreview preview={<GradientTagPreview />}>
 ```tsx title="tag.tsx"
 import { Tag } from '@cerberus-design/react'
+import { hstack } from '@cerberus/styled-system'
 
 function GradientTagPreview() {
   return (
-    <>
-      <Tag
-        className={css({
-          cerbGradient: 'blue',
-        })}
-      >
+    <div className={hstack()}>
+      <Tag gradient="blue" shape="sqaure">
         Blue
       </Tag>
-      <Tag
-        className={css({
-          cerbGradient: 'green',
-        })}
-      >
+      <Tag gradient="blue" shape="sqaure" usage="outlined">
+        Blue Outlined
+      </Tag>
+      <Tag gradient="green" shape="sqaure">
         Green
       </Tag>
-      <Tag
-        className={css({
-          cerbGradient: 'purple',
-        })}
-      >
+      <Tag gradient="green" shape="sqaure" usage="outlined">
+        Green Outlined
+      </Tag>
+      <Tag gradient="purple" shape="sqaure">
         Purple
       </Tag>
-    </>
+      <Tag gradient="purple" shape="sqaure" usage="outlined">
+        Purple Outlined
+      </Tag>
+    </div>
   )
 }
 ```
@@ -201,27 +202,35 @@ function CustomTagPreview() {
 ## API
 
 ```ts showLineNumbers=false
-export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
-  palette?: Sentiment
-  shape?: 'rounded' | 'pill'
+export interface StaticTagProps extends HTMLAttributes<HTMLSpanElement> {
+  gradient?: 'blue' | 'green' | 'purple'
+  palette?: 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+  shape?: 'square' | 'pill'
   usage?: 'filled' | 'outlined'
+  onClick?: never
 }
 export interface ClickableTagProps extends HTMLAttributes<HTMLSpanElement> {
-  shape?: 'pill'
+  gradient?: never
+  palette?: never
   onClick: () => void
-  usage?: 'filled'
+  shape: 'pill'
+  usage: 'filled'
 }
+export type TagProps = StaticTagProps | ClickableTagProps
 
-define function Tag(props: TagProps | ClickableTagPRops): ReactNode
+define function Tag(props: PropsWithChildren<TagProps>): ReactNode
 ````
 
+<NoteAdmonition description="Combining palette and gradient will yield to either only a palette or gradient Tag (i.e. they override each other)." />
+
 ### Props
 
 The `Tag` component accepts the following props:
 
 | Name     | Default | Description                            |
 | -------- | ------- | -------------------------------------- |
-| palette  | `action`   | The color palette of the tag. |
+| gradient | `undefined` | The gradient of the tag (overrides palette).           |
+| palette  | `neutral`   | The color palette of the tag (overrides gradient). |
 | usage    | `filled`    | The style treatment of the tag.    |
-| shape    | `rounded`    | The shape of the tag.              |
+| shape    | `square`    | The shape of the tag.              |
 | onClick  | `undefined` | How to create a Closable tag.         |
diff --git a/docs/app/react/tags/guidelines.mdx b/docs/app/react/tags/guidelines.mdx
@@ -10,7 +10,7 @@ import {
   BasicTagPreview,
   FilledButtonPreview,
   OutlineTagPreview,
-  RoundedTagPreview,
+  SquareTagPreview,
   PillTagPreview,
 } from '@/app/react/tags/components/tag-preview'
 import {
@@ -46,11 +46,11 @@ Outline tags are used for secondary actions on a page, like Cancel or Close. The
 
 <WhenToUseAdmonition description="When you need medium priority meta-tag to the primary one." />
 
-## Rounded Tags
+## Square Tags
 
-Rounded tags are used for actions that are used as an alternate themed Default.
+Sqaure tags are used for actions that are used as an alternate themed Default.
 
-<CodePreview preview={<RoundedTagPreview />} />
+<CodePreview preview={<SquareTagPreview />} />
 
 <WhenToUseAdmonition description="When you need to display a high priority meta-tag within a page section." />
 

diff --git a/docs/app/react/tags/overview.mdx b/docs/app/react/tags/overview.mdx
@@ -13,7 +13,7 @@ import {
 
 <OverviewList rules={[
   'Use tags to show options for a specific context',
-  'Five types: filled, outline, rounded, pill, or closable',
+  'Five types: filled, outline, square, pill, or closable',
   'Use any non-actionable palette or gradient style',
 ]} />
 

diff --git a/figma/README.md b/figma/README.md
@@ -0,0 +1,16 @@
+# Figma
+
+This is the workspace devoted to anything related to Figma APIs.
+
+- [Figma Docs](https://www.figma.com/developers)
+- [Code Connect API](https://github.com/figma/code-connect/tree/main)
+
+## Code Connect
+
+### Enums
+
+```ts
+figma.enum(FIGMA_PROP_NAME, {
+  [FIGMA_VALUE]: DEV_VALUE,
+}),
+```
diff --git a/figma/src/components/Tooltip.tsx b/figma/src/components/Tooltip.tsx