[pull] main from uber:main

documentation-site/components/yard/config/button.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 { Button, KIND, SIZE, SHAPE } from "baseui/button";
+import { Button, KIND, SIZE, SHAPE, WIDTH_TYPE } from "baseui/button";
 import { PropTypes } from "react-view";
 import type { TConfig } from "../types";
 
@@ -20,6 +20,7 @@ const ButtonConfig: TConfig = {
     KIND,
     SIZE,
     SHAPE,
+    WIDTH_TYPE,
   },
   theme: [
     "buttonPrimaryFill",
@@ -84,8 +85,8 @@ const ButtonConfig: TConfig = {
       },
     },
     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.",
@@ -96,8 +97,8 @@ const ButtonConfig: 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.",
@@ -107,6 +108,19 @@ const ButtonConfig: TConfig = {
         },
       },
     },
+    widthType: {
+      value: "WIDTH_TYPE.hug",
+      defaultValue: "WIDTH_TYPE.hug",
+      options: WIDTH_TYPE,
+      type: PropTypes.Enum,
+      description: `Controls the button's width behavior.`,
+      imports: {
+        "baseui/button": {
+          named: ["WIDTH_TYPE"],
+        },
+      },
+      enumName: "WIDTH_TYPE",
+    },
     colors: {
       value: undefined,
       defaultValue: '{backgroundColor: "#03703c", color: "white"}',
@@ -123,6 +137,11 @@ const ButtonConfig: TConfig = {
       type: PropTypes.Boolean,
       description: "Indicates that the button is selected.",
     },
+    backgroundSafe: {
+      value: false,
+      type: PropTypes.Boolean,
+      description: "Applies styles for a floating action button.",
+    },
     overrides: {
       value: undefined,
       type: PropTypes.Custom,

documentation-site/examples/button/backgroundSafe.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { Button, KIND } from "baseui/button";
+import { Upload, ArrowRight } from "baseui/icon";
+
+export default function Example() {
+  return (
+    <React.Fragment>
+      <p>
+        <Button
+          kind={KIND.secondary}
+          startEnhancer={() => <ArrowRight size={24} title="" />}
+          endEnhancer={() => <Upload size={24} title="" />}
+        >
+          BackgroundSafe: off
+        </Button>
+      </p>
+      <p>
+        <Button
+          kind={KIND.secondary}
+          startEnhancer={() => <ArrowRight size={24} title="" />}
+          endEnhancer={() => <Upload size={24} title="" />}
+          backgroundSafe
+        >
+          BackgroundSafe: on
+        </Button>
+      </p>
+    </React.Fragment>
+  );
+}

documentation-site/examples/button/kinds.tsx

@@ -1,15 +1,14 @@
 import * as React from "react";
-import { Block } from "baseui/block";
 import { Button, KIND } from "baseui/button";
 
 export default function Example() {
   return (
-    <React.Fragment>
-      <Button kind={KIND.primary}>Primary</Button>
-      <Block marginBottom="scale300" />
-      <Button kind={KIND.secondary}>Secondary</Button>
-      <Block marginBottom="scale300" />
-      <Button kind={KIND.tertiary}>Tertiary</Button>
-    </React.Fragment>
+    <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
+      {Object.values(KIND).map((kind) => (
+        <Button key={kind} kind={kind}>
+          {kind.charAt(0).toUpperCase() + kind.slice(1)}
+        </Button>
+      ))}
+    </div>
   );
 }

documentation-site/examples/button/shapes.tsx

@@ -6,10 +6,10 @@ export default function Example() {
   return (
     <React.Fragment>
       <p>
-        <Button>Default shape</Button>
+        <Button>Rectangular shape</Button>
       </p>
       <p>
-        <Button shape={SHAPE.pill}>Pill shape</Button>
+        <Button shape={SHAPE.rounded}>Rounded shape</Button>
       </p>
       <p>
         <Button shape={SHAPE.square}>

documentation-site/examples/button/sizes.tsx

@@ -6,12 +6,19 @@ export default function Example() {
   const [css, theme] = useStyletron();
   const space = css({ marginBottom: theme.sizing.scale300 });
   return (
-    <React.Fragment>
-      <Button size={SIZE.compact}>Compact size</Button>
-      <div className={space} />
-      <Button size={SIZE.default}>Default size</Button>
-      <div className={space} />
-      <Button size={SIZE.large}>Large size</Button>
-    </React.Fragment>
+    <div
+      style={{
+        display: "flex",
+        gap: "8px",
+        flexWrap: "wrap",
+        alignItems: "flex-start",
+      }}
+    >
+      {Object.values(SIZE).map((size) => (
+        <Button key={size} size={size}>
+          {size.charAt(0).toUpperCase() + size.slice(1)}
+        </Button>
+      ))}
+    </div>
   );
 }

documentation-site/examples/button/widthTypes.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { Button, WIDTH_TYPE } from "baseui/button";
+import { Upload, ArrowRight } from "baseui/icon";
+
+export default function Example() {
+  return (
+    <React.Fragment>
+      <p>
+        <Button
+          startEnhancer={() => <ArrowRight size={24} title="" />}
+          endEnhancer={() => <Upload size={24} title="" />}
+        >
+          Width type: hug(default)
+        </Button>
+      </p>
+      <p>
+        <Button
+          startEnhancer={() => <ArrowRight size={24} title="" />}
+          endEnhancer={() => <Upload size={24} title="" />}
+          widthType={WIDTH_TYPE.fill}
+        >
+          Width type: fill
+        </Button>
+      </p>
+    </React.Fragment>
+  );
+}

documentation-site/examples/tag/primitive.tsx

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

documentation-site/pages/components/button.mdx

@@ -11,7 +11,10 @@ import States from "examples/button/states.tsx";
 import Shapes from "examples/button/shapes.tsx";
 import Dropdown from "examples/button/dropdown.tsx";
 import ButtonAsAnAnchor from "examples/button/as-an-anchor.tsx";
+import WidthTypes from "examples/button/widthTypes.tsx";
+import BackgroundSafe from "examples/button/backgroundSafe.tsx";
 
+import { Notification, KIND as NOTIFICATION_KIND } from "baseui/notification";
 import { Button, KIND } from "baseui/button";
 import * as ButtonExports from "baseui/button";
 import Upload from "baseui/icon/upload";
@@ -31,6 +34,17 @@ export default Layout;
 
 <Yard placeholderHeight={52} {...buttonYardConfig} />
 
+<Notification
+  overrides={{ Body: { style: { width: "auto", margin: "16px 0 0 0" } } }}
+  kind={NOTIFICATION_KIND.warning}
+>
+  Some variants will be deprecated in next major release, please avoid using them in new codes. We encourage you to migrate your current implementations to equivalent or similar variants.
+  <ul>
+    <li>Shape: default -> rectangular, pill -> rounded, round will be removed.</li>
+    <li>Size: mini -> xSmall, compact -> small, default -> medium.</li>
+  </ul>
+</Notification>
+
 Buttons provide cues for actions and events. These fundamental components allow users to process actions or navigate an experience.
 
 ## When to use
@@ -40,7 +54,7 @@ When a person:
 - submits a form,
 - starts a new task / action.
 
-The Button component has 4 different `kind` variants: `primary`, `secondary` and `tertiary`.
+The Button component has 6 different `kind` variants: `primary`, `secondary`, `tertiary`, `dangerPrimary`, `dangerSecondary` and `dangerTertiary`.
 
 **Primary** buttons are intended to be used as the leading trigger or cue of action. Primary buttons are
 bold with a dominant color background and white text/icons. These are to be used sparingly as the
@@ -78,6 +92,14 @@ primary button action. As the name implies, it’s offered to supplement to crea
   <WithEnhancer />
 </Example>
 
+<Example title="Width Types" path="button/widthTypes.tsx">
+  <WidthTypes />
+</Example>
+
+<Example title="BackgroundSafe" path="button/backgroundSafe.tsx">
+  <BackgroundSafe />
+</Example>
+
 <Example title="As a dropdown" path="button/dropdown.tsx">
   <Dropdown />
 </Example>

src/button/__tests__/button-a11y.scenario.tsx

@@ -0,0 +1,76 @@
+/*
+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 * as React from 'react';
+import { useStyletron } from '../../';
+import { Button, SHAPE } from '..';
+import ArrowRight from '../../icon/arrow-right';
+import ArrowLeft from '../../icon/arrow-left';
+import { HeadingMedium, HeadingXSmall } from '../../typography';
+
+export function Scenario() {
+  const [css] = useStyletron();
+  const [isSelected, setIsSelected] = React.useState(false);
+
+  console.log('isSelected', isSelected);
+
+  return (
+    <React.Fragment>
+      <HeadingMedium marginTop="0" marginBottom="0">
+        Button A11y
+      </HeadingMedium>
+
+      <HeadingXSmall marginTop="0" marginBottom="8px">
+        Text only button
+      </HeadingXSmall>
+      <div className={css({ margin: '16px 0' })}>
+        <Button>Edit</Button>
+      </div>
+
+      <HeadingXSmall marginTop="0" marginBottom="8px">
+        Icon only button
+      </HeadingXSmall>
+      <div className={css({ margin: '16px 0' })}>
+        <Button aria-label="Next" shape={SHAPE.circle}>
+          <ArrowRight />
+        </Button>
+      </div>
+
+      <HeadingXSmall marginTop="0" marginBottom="8px">
+        Icon and text button
+      </HeadingXSmall>
+      <div className={css({ margin: '16px 0' })}>
+        <Button
+          endEnhancer={({ isHovered, isPressed, isFocused, artworkSize }) => {
+            if (isHovered || isPressed || isFocused) {
+              return <ArrowRight size={artworkSize} />;
+            }
+            return <ArrowLeft size={artworkSize} />;
+          }}
+
+          startEnhancer={({ isHovered, isPressed, isFocused, artworkSize }) => {
+            if (isHovered || isPressed || isFocused) {
+              return <ArrowLeft size={artworkSize} />;
+            }
+            return <ArrowRight size={artworkSize} />;
+          }}
+        >
+          Notification
+        </Button>
+      </div>
+
+      <HeadingXSmall marginTop="0" marginBottom="8px">
+        Toggle button
+      </HeadingXSmall>
+      <div className={css({ margin: '16px 0' })}>
+        <Button isSelected={isSelected} onClick={() => setIsSelected(!isSelected)}>
+          Mute
+        </Button>
+      </div>
+    </React.Fragment>
+  );
+}