Manually update src dir (#5332)

manually sync `baseui/src` with `baseweb/src` update doc site app to accommodate new color tokens update doc site examples to use latest component APIs
uber · Jun 25, 2024 · d43fc06 · d43fc06
1 parent 5c41b0b
commit d43fc06
Show file tree

Hide file tree

Showing 112 changed files with 3,947 additions and 1,715 deletions.
diff --git a/documentation-site/components/search.jsx b/documentation-site/components/search.jsx
@@ -20,10 +20,10 @@ const PlainInput = themedStyled("input", ({ $theme }) => ({
   borderRightWidth: "2px",
   borderTopWidth: "2px",
   borderBottomWidth: "2px",
-  borderLeftColor: $theme.colors.inputEnhancerFill,
-  borderRightColor: $theme.colors.inputEnhancerFill,
-  borderTopColor: $theme.colors.inputEnhancerFill,
-  borderBottomColor: $theme.colors.inputEnhancerFill,
+  borderLeftColor: $theme.colors.borderOpaque,
+  borderRightColor: $theme.colors.borderOpaque,
+  borderTopColor: $theme.colors.borderOpaque,
+  borderBottomColor: $theme.colors.borderOpaque,
   borderLeftStyle: "solid",
   borderRightStyle: "solid",
   borderTopStyle: "solid",
@@ -51,7 +51,7 @@ const PlainInput = themedStyled("input", ({ $theme }) => ({
 const SearchContainer = themedStyled("div", ({ $theme }) => ({
   display: "flex",
   alignItems: "center",
-  backgroundColor: $theme.colors.inputEnhancerFill,
+  backgroundColor: $theme.colors.borderOpaque,
   position: "relative",
 }));
 

diff --git a/documentation-site/components/yard/config/tag.ts b/documentation-site/components/yard/config/tag.ts
@@ -4,7 +4,7 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-import { Tag, KIND, VARIANT, SIZE } from "baseui/tag";
+import { Tag, KIND, HIERARCHY, SIZE } from "baseui/tag";
 import { PropTypes } from "react-view";
 import type { TConfig } from "../types";
 
@@ -18,7 +18,7 @@ const TagConfig: TConfig = {
   scope: {
     Tag,
     KIND,
-    VARIANT,
+    HIERARCHY,
     SIZE,
   },
   theme: [
@@ -113,16 +113,16 @@ const TagConfig: TConfig = {
       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"],
         },
       },
     },
@@ -183,7 +183,7 @@ const TagConfig: TConfig = {
         ],
         sharedProps: {
           $kind: "kind",
-          $variant: "variant",
+          $hierarchy: "hierarchy",
           $closeable: "closeable",
           $isActive: {
             type: PropTypes.Boolean,

diff --git a/documentation-site/examples/tag/clickable-non-closeable.tsx b/documentation-site/examples/tag/clickable-non-closeable.tsx
@@ -1,20 +1,20 @@
 import * as React from "react";
-import { Tag, VARIANT } from "baseui/tag";
+import { Tag, HIERARCHY } from "baseui/tag";
 
-const variants = Object.values(VARIANT);
+const hierarchies = Object.values(HIERARCHY);
 const onClick = (kind: string) => alert(`${kind} tag is clicked`);
 
 export default function Example() {
   return (
     <React.Fragment>
-      {variants.map((variant, index) => (
+      {hierarchies.map((hierarchy, index) => (
         <React.Fragment key={index}>
           <Tag
             closeable={false}
             onClick={() => {
               onClick("neutral");
             }}
-            variant={variant}
+            hierarchy={hierarchy}
             kind="neutral"
           >
             neutral
@@ -24,7 +24,7 @@ export default function Example() {
             onClick={() => {
               onClick("primary");
             }}
-            variant={variant}
+            hierarchy={hierarchy}
             kind="primary"
           >
             primary
@@ -34,7 +34,7 @@ export default function Example() {
             onClick={() => {
               onClick("accent");
             }}
-            variant={variant}
+            hierarchy={hierarchy}
             kind="accent"
           >
             accent
@@ -44,7 +44,7 @@ export default function Example() {
             onClick={() => {
               onClick("positive");
             }}
-            variant={variant}
+            hierarchy={hierarchy}
             kind="positive"
           >
             positive
@@ -54,7 +54,7 @@ export default function Example() {
             onClick={() => {
               onClick("warning");
             }}
-            variant={variant}
+            hierarchy={hierarchy}
             kind="warning"
           >
             warning
@@ -64,7 +64,7 @@ export default function Example() {
             onClick={() => {
               onClick("negative");
             }}
-            variant={variant}
+            hierarchy={hierarchy}
             kind="negative"
           >
             negative

diff --git a/documentation-site/examples/tag/clickable.tsx b/documentation-site/examples/tag/clickable.tsx
@@ -1,19 +1,19 @@
 import * as React from "react";
-import { Tag, VARIANT } from "baseui/tag";
+import { Tag, HIERARCHY } from "baseui/tag";
 
-const variants = Object.values(VARIANT);
+const hierarchies = Object.values(HIERARCHY);
 const onClick = (kind: string) => alert(`${kind} tag is clicked`);
 
 export default function Example() {
   return (
     <React.Fragment>
-      {variants.map((variant, index) => (
+      {hierarchies.map((hierarchy, index) => (
         <React.Fragment key={index}>
           <Tag
             onClick={() => {
               onClick("neutral");
             }}
-            variant={variant}
+            hierarchy={hierarchy}
             kind="neutral"
           >
             neutral
@@ -22,7 +22,7 @@ export default function Example() {
             onClick={() => {
               onClick("primary");
             }}
-            variant={variant}
+            hierarchy={hierarchy}
             kind="primary"
           >
             primary
@@ -31,7 +31,7 @@ export default function Example() {
             onClick={() => {
               onClick("accent");
             }}
-            variant={variant}
+            hierarchy={hierarchy}
             kind="accent"
           >
             accent
@@ -40,7 +40,7 @@ export default function Example() {
             onClick={() => {
               onClick("positive");
             }}
-            variant={variant}
+            hierarchy={hierarchy}
             kind="positive"
           >
             positive
@@ -49,7 +49,7 @@ export default function Example() {
             onClick={() => {
               onClick("warning");
             }}
-            variant={variant}
+            hierarchy={hierarchy}
             kind="warning"
           >
             warning
@@ -58,7 +58,7 @@ export default function Example() {
             onClick={() => {
               onClick("negative");
             }}
-            variant={variant}
+            hierarchy={hierarchy}
             kind="negative"
           >
             negative

diff --git a/documentation-site/examples/tag/custom-color.tsx b/documentation-site/examples/tag/custom-color.tsx
@@ -1,12 +1,12 @@
 import * as React from "react";
-import { Tag, KIND, VARIANT } from "baseui/tag";
+import { Tag, KIND, HIERARCHY } from "baseui/tag";
 
 export default function Example() {
   return (
     <React.Fragment>
       <Tag
         color="#4327F1"
-        variant={VARIANT.solid}
+        hierarchy={HIERARCHY.primary}
         kind={KIND.custom}
         onClick={() => {}}
       >
@@ -19,7 +19,7 @@ export default function Example() {
       <br />
       <Tag
         color="#4327F1"
-        variant={VARIANT.outlined}
+        hierarchy={HIERARCHY.secondary}
         kind={KIND.custom}
         onClick={() => {}}
       >

diff --git a/documentation-site/examples/tag/disabled.tsx b/documentation-site/examples/tag/disabled.tsx
@@ -1,20 +1,20 @@
 import * as React from "react";
-import { Tag, VARIANT } from "baseui/tag";
+import { Tag, HIERARCHY } from "baseui/tag";
 
-const variants = Object.values(VARIANT);
+const hierarchies = Object.values(HIERARCHY);
 const onClick = (kind: string) => alert(`${kind} tag is clicked`);
 
 export default function Example() {
   return (
     <React.Fragment>
-      {variants.map((variant, index) => (
+      {hierarchies.map((hierarchy, index) => (
         <React.Fragment key={index}>
           <Tag
             disabled
             onClick={() => {
               onClick("neutral");
             }}
-            variant={variant}
+            hierarchy={hierarchy}
             kind="neutral"
           >
             neutral
@@ -24,7 +24,7 @@ export default function Example() {
             onClick={() => {
               onClick("primary");
             }}
-            variant={variant}
+            hierarchy={hierarchy}
             kind="primary"
           >
             primary
@@ -34,7 +34,7 @@ export default function Example() {
             onClick={() => {
               onClick("accent");
             }}
-            variant={variant}
+            hierarchy={hierarchy}
             kind="accent"
           >
             accent
@@ -44,7 +44,7 @@ export default function Example() {
             onClick={() => {
               onClick("positive");
             }}
-            variant={variant}
+            hierarchy={hierarchy}
             kind="positive"
           >
             positive
@@ -54,7 +54,7 @@ export default function Example() {
             onClick={() => {
               onClick("warning");
             }}
-            variant={variant}
+            hierarchy={hierarchy}
             kind="warning"
           >
             warning
@@ -64,7 +64,7 @@ export default function Example() {
             onClick={() => {
               onClick("negative");
             }}
-            variant={variant}
+            hierarchy={hierarchy}
             kind="negative"
           >
             negative

diff --git a/documentation-site/examples/tag/kinds.tsx b/documentation-site/examples/tag/kinds.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import {Tag, KIND, VARIANT} from 'baseui/tag';
+import * as React from "react";
+import { Tag, KIND, HIERARCHY } from "baseui/tag";
 
 export default function Scenario() {
   return (
@@ -23,7 +23,7 @@ export default function Scenario() {
             kind={kind}
             onClick={() => alert(`click ${kind}`)}
             onActionClick={() => alert(`action ${kind}`)}
-            variant={VARIANT.solid}
+            hierarchy={HIERARCHY.primary}
           >
             {kind}
           </Tag>

diff --git a/documentation-site/examples/tag/non-clickable.tsx b/documentation-site/examples/tag/non-clickable.tsx
@@ -1,34 +1,34 @@
 import * as React from "react";
-import { Tag, VARIANT } from "baseui/tag";
+import { Tag, HIERARCHY } from "baseui/tag";
 
-const variants = Object.values(VARIANT);
+const hierarchies = Object.values(HIERARCHY);
 
 export default function Example() {
   return (
     <React.Fragment>
-      {variants.map((variant, index) => (
+      {hierarchies.map((hierarchy, index) => (
         <React.Fragment key={index}>
-          <Tag variant={variant} kind="neutral">
+          <Tag hierarchy={hierarchy} kind="neutral">
             neutral
           </Tag>
 
-          <Tag variant={variant} kind="primary">
+          <Tag hierarchy={hierarchy} kind="primary">
             primary
           </Tag>
 
-          <Tag variant={variant} kind="accent">
+          <Tag hierarchy={hierarchy} kind="accent">
             accent
           </Tag>
 
-          <Tag variant={variant} kind="positive">
+          <Tag hierarchy={hierarchy} kind="positive">
             positive
           </Tag>
 
-          <Tag variant={variant} kind="warning">
+          <Tag hierarchy={hierarchy} kind="warning">
             warning
           </Tag>
 
-          <Tag variant={variant} kind="negative">
+          <Tag hierarchy={hierarchy} kind="negative">
             negative
           </Tag>
           <br />