From 83c122a2346891ad583159d08246260d00302a84 Mon Sep 17 00:00:00 2001 From: Luke Brennan Date: Thu, 27 Jun 2024 09:32:13 -0700 Subject: [PATCH] fix tag hierarchy issues (#5333) --- documentation-site/examples/input/with-tags.tsx | 4 ++-- .../examples/table-grid/nested.tsx | 4 ++-- .../pages/blog/base-web-v7/index.mdx | 2 +- .../live-editor-tag.jsx | 16 ++++++++-------- documentation-site/pages/components/tag.mdx | 6 +++--- .../__tests__/table-grid-jobs.scenario.tsx | 4 ++-- 6 files changed, 18 insertions(+), 18 deletions(-) diff --git a/documentation-site/examples/input/with-tags.tsx b/documentation-site/examples/input/with-tags.tsx index 441b2364d8..0f5adb91be 100644 --- 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) => ( removeTag(tag)} key={index} > diff --git a/documentation-site/examples/table-grid/nested.tsx b/documentation-site/examples/table-grid/nested.tsx index 7d3a61a68c..c5245a9fde 100644 --- 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[] }) { {task[1]} @@ -184,7 +184,7 @@ function Row({ striped, row }: any) { {row[1]} diff --git a/documentation-site/pages/blog/base-web-v7/index.mdx b/documentation-site/pages/blog/base-web-v7/index.mdx index 2bbeaae36f..a53560adce 100644 --- 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 index bc4c0d9f37..0be3359c46 100644 --- 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 index 1ad3a8cff0..164846c5ff 100644 --- 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`. - - + + diff --git a/src/table-grid/__tests__/table-grid-jobs.scenario.tsx b/src/table-grid/__tests__/table-grid-jobs.scenario.tsx index 90f9161d80..e6a8659f78 100644 --- 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[] }) { <> {task[0]} - + {task[1]} @@ -205,7 +205,7 @@ function Row(props: RowProps) { {props.row[0]} - + {props.row[1]}