[pull] main from uber:main

documentation-site/components/yard/config/button-group.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 { ButtonGroup, MODE, SIZE, SHAPE } from "baseui/button-group";
+import { ButtonGroup, MODE, SIZE, SHAPE, PADDING } from "baseui/button-group";
 import { Button } from "baseui/button";
 import { PropTypes } from "react-view";
 import type { TConfig } from "../types";
@@ -22,6 +22,7 @@ const ButtonGroupConfig: TConfig = {
     MODE,
     SIZE,
     SHAPE,
+    PADDING,
   },
   theme: [
     "buttonPrimaryFill",
@@ -79,9 +80,27 @@ const ButtonGroupConfig: TConfig = {
       description: "Defines which buttons are selected",
       hidden: true,
     },
+    wrap: {
+      value: false,
+      type: PropTypes.Boolean,
+      description: "Defines if the button group should wrap.",
+    },
+    padding: {
+      type: PropTypes.Enum,
+      options: PADDING,
+      description:
+        "Defines the padding of the buttons in the button group. 'none' by default - no padding, 'default' - 8px horizontal padding, 'custom' - expect custom padding from developer",
+      value: "PADDING.none",
+      defaultValue: "PADDING.none",
+      imports: {
+        "baseui/button-group": {
+          named: ["PADDING"],
+        },
+      },
+    },
     size: {
-      value: "SIZE.default",
-      defaultValue: "SIZE.default",
+      value: "SIZE.medium",
+      defaultValue: "SIZE.medium",
       options: SIZE,
       type: PropTypes.Enum,
       description: "Defines the size of the button.",
@@ -92,8 +111,8 @@ const ButtonGroupConfig: TConfig = {
       },
     },
     shape: {
-      value: "SHAPE.default",
-      defaultValue: "SHAPE.default",
+      value: "SHAPE.rectangular",
+      defaultValue: "SHAPE.rectangular",
       options: SHAPE,
       type: PropTypes.Enum,
       description: "Defines the shape of the button in the button group.",

documentation-site/examples/button-group/padding.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { Button } from "baseui/button";
+import { ButtonGroup, PADDING } from "baseui/button-group";
+
+export default function Example() {
+  return (
+    <div>
+      <p>Predefined Default Padding</p>
+      <div style={{ width: "400px", border: "1px solid black" }}>
+        <ButtonGroup padding={PADDING.default}>
+          <Button>Label</Button>
+          <Button>Label</Button>
+          <Button>Label</Button>
+        </ButtonGroup>
+      </div>
+
+      <p>None Padding</p>
+      <div style={{ width: "400px", border: "1px solid black" }}>
+        <ButtonGroup padding={PADDING.none}>
+          <Button>Label</Button>
+          <Button>Label</Button>
+          <Button>Label</Button>
+        </ButtonGroup>
+      </div>
+
+      <p>Customized Padding</p>
+      <div style={{ width: "400px", border: "1px solid black" }}>
+        <ButtonGroup
+          padding={PADDING.custom}
+          overrides={{
+            Root: {
+              style: ({ $theme }) => ({
+                paddingLeft: $theme.sizing.scale1000,
+                paddingRight: $theme.sizing.scale1000,
+              }),
+            },
+          }}
+        >
+          <Button>Label</Button>
+          <Button>Label</Button>
+          <Button>Label</Button>
+        </ButtonGroup>
+      </div>
+    </div>
+  );
+}

documentation-site/examples/button-group/scrollable.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { Button } from "baseui/button";
+import { ButtonGroup } from "baseui/button-group";
+
+export default function Example() {
+  return (
+    <div style={{ width: "200px", border: "1px solid black" }}>
+      <ButtonGroup wrap={false}>
+        <Button>Label</Button>
+        <Button>Label</Button>
+        <Button>Label</Button>
+        <Button>Label</Button>
+        <Button>Label</Button>
+      </ButtonGroup>
+    </div>
+  );
+}

documentation-site/examples/button-group/wrappable.tsx

@@ -4,16 +4,14 @@ import { ButtonGroup } from "baseui/button-group";
 
 export default function Example() {
   return (
-    <ButtonGroup
-      overrides={{
-        Root: {
-          style: { flexWrap: "wrap" },
-        },
-      }}
-    >
-      <Button>Label</Button>
-      <Button>Label</Button>
-      <Button>Label</Button>
-    </ButtonGroup>
+    <div style={{ width: "200px", border: "1px solid black" }}>
+      <ButtonGroup wrap={true}>
+        <Button>Label</Button>
+        <Button>Label</Button>
+        <Button>Label</Button>
+        <Button>Label</Button>
+        <Button>Label</Button>
+      </ButtonGroup>
+    </div>
   );
 }

documentation-site/examples/tag-group/hierachy.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { styled } from "baseui";
+import { Tag, SUPPORTED_KIND } from "baseui/tag";
+import { TagGroup, HIERARCHY } from "baseui/tag-group";
+
+const Container = styled("div", {
+  display: "flex",
+  flexDirection: "column",
+  gap: "32px",
+});
+
+export default function Example() {
+  return (
+    <Container>
+      {Object.values(HIERARCHY).map((hierarchy) => (
+        <TagGroup hierarchy={hierarchy} key={hierarchy}>
+          {Object.values(SUPPORTED_KIND)
+            .filter((kind) => kind !== SUPPORTED_KIND.custom)
+            .map((kind) => (
+              <Tag key={kind} kind={kind}>
+                {kind}
+              </Tag>
+            ))}
+        </TagGroup>
+      ))}
+    </Container>
+  );
+}

documentation-site/examples/tag-group/size.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { styled } from "baseui";
+import { Tag } from "baseui/tag";
+import { TagGroup, SIZE } from "baseui/tag-group";
+import { LabelSmall } from "baseui/typography";
+
+const Container = styled("div", {
+  display: "flex",
+  flexDirection: "column",
+  gap: "32px",
+});
+
+const Row = styled("div", {
+  display: "flex",
+  flexDirection: "column",
+  gap: "8px",
+});
+
+export default function Example() {
+  return (
+    <Container>
+      {Object.values(SIZE).map((size) => (
+        <Row key={size}>
+          <LabelSmall>{size}</LabelSmall>
+          <TagGroup size={size}>
+            <Tag>gray</Tag>
+            <Tag kind="red">red</Tag>
+          </TagGroup>
+        </Row>
+      ))}
+    </Container>
+  );
+}

documentation-site/examples/tag-group/wrap.tsx

@@ -0,0 +1,115 @@
+import * as React from "react";
+import { useStyletron } from "baseui";
+import { Tag, SUPPORTED_KIND } from "baseui/tag";
+import { TagGroup } from "baseui/tag-group";
+import { HeadingSmall, ParagraphSmall } from "baseui/typography";
+
+export default function Example() {
+  const [css] = useStyletron();
+  return (
+    <React.Fragment>
+      <HeadingSmall>Wrap: true (default)</HeadingSmall>
+
+      <ParagraphSmall>no width set on container</ParagraphSmall>
+      <TagGroup>
+        {Object.values(SUPPORTED_KIND)
+          .filter((kind) => kind !== SUPPORTED_KIND.custom)
+          .map((kind) => (
+            <Tag key={kind} kind={kind}>
+              {kind}
+            </Tag>
+          ))}
+      </TagGroup>
+
+      <ParagraphSmall>width set to 300px on container </ParagraphSmall>
+      <div className={css({ width: "300px" })}>
+        <TagGroup>
+          {Object.values(SUPPORTED_KIND)
+            .filter((kind) => kind !== SUPPORTED_KIND.custom)
+            .map((kind) => (
+              <Tag key={kind} kind={kind}>
+                {kind}
+              </Tag>
+            ))}
+        </TagGroup>
+      </div>
+
+      <ParagraphSmall>
+        width set to 300px on container and tag with long text{" "}
+      </ParagraphSmall>
+      <div className={css({ width: "300px" })}>
+        <TagGroup>
+          {Object.values(SUPPORTED_KIND)
+            .filter((kind) => kind !== SUPPORTED_KIND.custom)
+            .map((kind, index) => (
+              <Tag key={kind} kind={kind}>
+                {index === 1
+                  ? "A very long tag text to test wrapping behavior"
+                  : kind}
+              </Tag>
+            ))}
+        </TagGroup>
+      </div>
+
+      <ParagraphSmall>
+        width set to 100px(smaller than tag text default max width) on container
+        and tag with long text - very extreme case
+      </ParagraphSmall>
+      <div className={css({ marginBottom: "40px", width: "100px" })}>
+        <TagGroup>
+          {Object.values(SUPPORTED_KIND)
+            .filter((kind) => kind !== SUPPORTED_KIND.custom)
+            .map((kind, index) => (
+              <Tag key={kind} kind={kind}>
+                {index === 1
+                  ? "A very long tag text to test wrapping behavior"
+                  : kind}
+              </Tag>
+            ))}
+        </TagGroup>
+      </div>
+
+      <HeadingSmall>Wrap: false</HeadingSmall>
+      <ParagraphSmall>no width set on container</ParagraphSmall>
+      <TagGroup>
+        {Object.values(SUPPORTED_KIND)
+          .filter((kind) => kind !== SUPPORTED_KIND.custom)
+          .map((kind) => (
+            <Tag key={kind} kind={kind}>
+              {kind}
+            </Tag>
+          ))}
+      </TagGroup>
+
+      <ParagraphSmall>width set to 300px on container </ParagraphSmall>
+      <div className={css({ width: "300px" })}>
+        <TagGroup wrap={false}>
+          {Object.values(SUPPORTED_KIND)
+            .filter((kind) => kind !== SUPPORTED_KIND.custom)
+            .map((kind) => (
+              <Tag key={kind} kind={kind}>
+                {kind}
+              </Tag>
+            ))}
+        </TagGroup>
+      </div>
+
+      <ParagraphSmall>
+        width set to 300px on container and tag with long text{" "}
+      </ParagraphSmall>
+      <div className={css({ marginBottom: "40px", width: "300px" })}>
+        <TagGroup wrap={false}>
+          {Object.values(SUPPORTED_KIND)
+            .filter((kind) => kind !== SUPPORTED_KIND.custom)
+            .map((kind, index) => (
+              <Tag key={kind} kind={kind}>
+                {index === 1
+                  ? "A very long tag text to test wrapping behavior"
+                  : kind}
+              </Tag>
+            ))}
+        </TagGroup>
+      </div>
+    </React.Fragment>
+  );
+}

documentation-site/examples/tag/kinds.tsx

@@ -5,11 +5,16 @@ export default function Scenario() {
   return (
     <React.Fragment>
       {[
-        KIND.primary,
-        KIND.accent,
-        KIND.positive,
-        KIND.negative,
-        KIND.warning,
+        KIND.gray,
+        KIND.blue,
+        KIND.green,
+        KIND.red,
+        KIND.yellow,
+        KIND.orange,
+        KIND.purple,
+        KIND.magenta,
+        KIND.teal,
+        KIND.lime,
       ].map((kind) => (
         <div>
           <Tag