fix tag hierarchy issues (#5333)

uber · Jun 27, 2024 · 83c122a · 83c122a
1 parent d43fc06
commit 83c122a
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 18 deletions.
diff --git a/documentation-site/examples/input/with-tags.tsx b/documentation-site/examples/input/with-tags.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useStyletron } from "baseui";
 import { Input, StyledInput } from "baseui/input";
-import { Tag, VARIANT as TAG_VARIANT } from "baseui/tag";
+import { Tag, HIERARCHY } from "baseui/tag";
 
 const InputReplacement = React.forwardRef(
   ({ tags, removeTag, ...restProps }: any, ref) => {
@@ -17,7 +17,7 @@ const InputReplacement = React.forwardRef(
       >
         {tags.map((tag: string, index: number) => (
           <Tag
-            variant={TAG_VARIANT.solid}
+            hierarchy={HIERARCHY.primary}
             onActionClick={() => removeTag(tag)}
             key={index}
           >

diff --git a/documentation-site/examples/table-grid/nested.tsx b/documentation-site/examples/table-grid/nested.tsx
@@ -140,7 +140,7 @@ function Tasks(props: { tasks: any[] }) {
               <StyledBodyCell>
                 <Tag
                   closeable={false}
-                  variant="outlined"
+                  hierarchy="secondary"
                   kind={statusToTagKind(task[1])}
                 >
                   {task[1]}
@@ -184,7 +184,7 @@ function Row({ striped, row }: any) {
       <CenteredBodyCell $striped={striped}>
         <Tag
           closeable={false}
-          variant="outlined"
+          hierarchy="secondary"
           kind={statusToTagKind(row[1])}
         >
           {row[1]}

diff --git a/documentation-site/pages/blog/base-web-v7/index.mdx b/documentation-site/pages/blog/base-web-v7/index.mdx
@@ -318,7 +318,7 @@ You can simply remove the `shape="square"` property.
 
 ## Tag
 
-We've removed the deprecated `COLOR_STYLE_KEYS` export from the Tag component. Instead of that, please use the `KIND` and `VARIANT` exports.
+We've removed the deprecated `COLOR_STYLE_KEYS` export from the Tag component. Instead of that, please use the `KIND` and `HIERARCHY` exports.
 
 ## RadioGroup
 

diff --git a/documentation-site/pages/blog/nested-overrides-playground/live-editor-tag.jsx b/documentation-site/pages/blog/nested-overrides-playground/live-editor-tag.jsx
@@ -7,7 +7,7 @@ LICENSE file in the root directory of this source tree.
 //
 import * as React from "react";
 import Yard from "../../../components/yard/index";
-import { Tag, KIND, VARIANT, SIZE } from "baseui/tag";
+import { Tag, KIND, HIERARCHY, SIZE } from "baseui/tag";
 import { PropTypes } from "react-view";
 
 const tagYardConfig = {
@@ -20,7 +20,7 @@ const tagYardConfig = {
   scope: {
     Tag,
     KIND,
-    VARIANT,
+    HIERARCHY,
     SIZE,
   },
   theme: [
@@ -115,16 +115,16 @@ const tagYardConfig = {
       type: PropTypes.String,
       description: `The color theme to be applied to a Tag. To make this custom color active, you have to set kind to custom.`,
     },
-    variant: {
-      value: "VARIANT.light",
-      defaultValue: "VARIANT.light",
-      options: VARIANT,
+    hierarchy: {
+      value: "HIERARCHY.secondary",
+      defaultValue: "HIERARCHY.secondary",
+      options: HIERARCHY,
       type: PropTypes.Enum,
       description:
-        "Defines tags look. Set it to one of VARIANT[key] values. Defaults to VARIANT.light.",
+        "Defines tags look. Set it to one of HIERARCHY[key] values. Defaults to HIERARCHY.secondary.",
       imports: {
         "baseui/tag": {
-          named: ["VARIANT"],
+          named: ["HIERARCHY"],
         },
       },
     },

diff --git a/documentation-site/pages/components/tag.mdx b/documentation-site/pages/components/tag.mdx
@@ -3,7 +3,7 @@ import Layout from "../../components/layout";
 import Exports from "../../components/exports";
 
 import Basic from "examples/tag/basic.tsx";
-import Variants from "examples/tag/variants.tsx";
+import Hierarchy from "examples/tag/variants.tsx";
 import Primitive from "examples/tag/primitive.tsx";
 import Kinds from "examples/tag/kinds.tsx";
 import Size from "examples/tag/size.tsx";
@@ -50,8 +50,8 @@ You can change the color of the tag by passing a value to the `kind` prop. Here
 
 In addition to the "semantic" `kind` colors, you can also use "primitive" colors such as `blue` or `green`. Some of these simply alias the "semantic" colors (and therefore your theme), but there are also color-ways not contained in the "semantic" set, such as `orange`, `purple`, and `brown`.
 
-<Example title="Tag Variants Prop Type" path="tag/variants.tsx">
-  <Variants />
+<Example title="Tag hierarchy Prop Type" path="tag/variants.tsx">
+  <Hierarchy />
 </Example>
 
 <Example title="Tag sizing" path="tag/size.tsx">

diff --git a/src/table-grid/__tests__/table-grid-jobs.scenario.tsx b/src/table-grid/__tests__/table-grid-jobs.scenario.tsx
@@ -155,7 +155,7 @@ function Tasks(props: { tasks: Task[] }) {
             <>
               <StyledBodyCell>{task[0]}</StyledBodyCell>
               <StyledBodyCell>
-                <Tag closeable={false} variant="outlined" kind={statusToTagKind(task[1])}>
+                <Tag closeable={false} hierarchy="secondary" kind={statusToTagKind(task[1])}>
                   {task[1]}
                 </Tag>
               </StyledBodyCell>
@@ -205,7 +205,7 @@ function Row(props: RowProps) {
         {props.row[0]}
       </CenteredBodyCell>
       <CenteredBodyCell {...props.getCellProps(1)} $striped={props.striped}>
-        <Tag closeable={false} variant="outlined" kind={statusToTagKind(props.row[1])}>
+        <Tag closeable={false} hierarchy="secondary" kind={statusToTagKind(props.row[1])}>
           {props.row[1]}
         </Tag>
       </CenteredBodyCell>