Update Button group component, ubook stories and docs

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/pages/components/button-group.mdx

@@ -14,6 +14,8 @@ import Dropdown from "examples/button-group/dropdown.tsx";
 import StatefulRadio from "examples/button-group/stateful-radio.tsx";
 import StatefulCheckbox from "examples/button-group/stateful-checkbox.tsx";
 import Wrappable from "examples/button-group/wrappable.tsx";
+import Scrollable from "examples/button-group/scrollable.tsx";
+import Padding from "examples/button-group/padding.tsx";
 
 import { Button } from "baseui/button";
 import { ButtonGroup } from "baseui/button-group";
@@ -76,15 +78,21 @@ You can disable the entire button group as in the example above. Or you can disa
   <DisabledButton />
 </Example>
 
-<Example title="With a dropdown" path="button-group/dropdown.tsx">
-  <Dropdown />
+<Example title="Scrollable button group" path="button-group/scrollable.tsx">
+  <Scrollable />
 </Example>
 
 <Example title="Wrappable button group" path="button-group/wrappable.tsx">
   <Wrappable />
 </Example>
 
-You can add the override `flex-wrap: wrap` to button group so as to make it wrap on smaller screens as in the example above.
+<Example title="Padding" path="button-group/padding.tsx">
+  <Padding />
+</Example>
+
+<Example title="With a dropdown" path="button-group/dropdown.tsx">
+  <Dropdown />
+</Example>
 
 <Example
   title="Stateful (uncontrolled) with radio mode"

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

@@ -0,0 +1,66 @@
+/*
+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 { Button } from '../../button';
+import { StatefulButtonGroup, MODE, ButtonGroup } from '../';
+import { HeadingMedium, HeadingXSmall } from '../../typography';
+
+export function Scenario() {
+  return (
+    <React.Fragment>
+      <HeadingMedium marginTop="0" marginBottom="0">
+        Button group A11y
+      </HeadingMedium>
+
+      <HeadingXSmall marginTop="0" marginBottom="8px">
+        Actionable button group
+      </HeadingXSmall>
+      <ButtonGroup>
+        <Button
+          onClick={() => {
+            alert('Label1 clicked');
+          }}
+        >
+          Label1
+        </Button>
+        <Button
+          onClick={() => {
+            alert('Label2 clicked');
+          }}
+        >
+          Label2
+        </Button>
+        <Button
+          onClick={() => {
+            alert('Label3 clicked');
+          }}
+        >
+          Label3
+        </Button>
+      </ButtonGroup>
+
+      <HeadingXSmall marginTop="0" marginBottom="8px">
+        Checkbox button group
+      </HeadingXSmall>
+      <StatefulButtonGroup mode={MODE.checkbox} initialState={{ selected: [1] }}>
+        <Button>Checkbox1</Button>
+        <Button>Checkbox2</Button>
+        <Button>Checkbox3</Button>
+      </StatefulButtonGroup>
+
+      <HeadingXSmall marginTop="0" marginBottom="8px">
+        Radio button group
+      </HeadingXSmall>
+      <StatefulButtonGroup mode={MODE.radio} initialState={{ selected: [1] }}>
+        <Button>Radio1</Button>
+        <Button>Radio2</Button>
+        <Button>Radio3</Button>
+      </StatefulButtonGroup>
+    </React.Fragment>
+  );
+}

src/button-group/__tests__/button-group-kinds.scenario.tsx

@@ -0,0 +1,37 @@
+/*
+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 React from 'react';
+
+import { Button } from '../../button';
+import { StatefulButtonGroup, MODE, KIND } from '..';
+import { HeadingMedium, HeadingXSmall } from '../../typography';
+
+export function Scenario() {
+  return (
+    <React.Fragment>
+      <HeadingMedium>Kind variants</HeadingMedium>
+      <HeadingXSmall>Kind: default(secondary)</HeadingXSmall>
+      <StatefulButtonGroup mode={MODE.radio}>
+        <Button>Label</Button>
+        <Button>Label</Button>
+        <Button>Label</Button>
+      </StatefulButtonGroup>
+      <HeadingXSmall>Kind: tertiary</HeadingXSmall>
+      <StatefulButtonGroup mode={MODE.radio} kind={KIND.tertiary}>
+        <Button>Label</Button>
+        <Button>Label</Button>
+        <Button>Label</Button>
+      </StatefulButtonGroup>
+      <HeadingXSmall>Kind: outline</HeadingXSmall>
+      <StatefulButtonGroup mode={MODE.radio} kind={KIND.outline}>
+        <Button>Label</Button>
+        <Button>Label</Button>
+        <Button>Label</Button>
+      </StatefulButtonGroup>
+    </React.Fragment>
+  );
+}

src/button-group/__tests__/button-group-padding-scenario.tsx

@@ -0,0 +1,73 @@
+/*
+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 { Button } from '../../button';
+import { StatefulButtonGroup, MODE, PADDING } from '..';
+import { HeadingMedium, HeadingXSmall } from '../../typography';
+
+export function Scenario() {
+  const commonOverrides = {
+    Root: {
+      style: ({ $theme }) => ({
+        backgroundColor: $theme.colors.positive,
+      }),
+    },
+  };
+
+  return (
+    <React.Fragment>
+      <HeadingMedium>Padding variants</HeadingMedium>
+
+      <HeadingXSmall>Padding: default</HeadingXSmall>
+      <StatefulButtonGroup
+        mode={MODE.radio}
+        initialState={{ selected: 0 }}
+        padding={PADDING.default}
+        overrides={commonOverrides}
+      >
+        <Button>Label</Button>
+        <Button>Label</Button>
+        <Button>Label</Button>
+      </StatefulButtonGroup>
+
+      <HeadingXSmall>Padding: none</HeadingXSmall>
+      <StatefulButtonGroup
+        mode={MODE.radio}
+        initialState={{ selected: 0 }}
+        padding={PADDING.none}
+        overrides={commonOverrides}
+      >
+        <Button>Label</Button>
+        <Button>Label</Button>
+        <Button>Label</Button>
+      </StatefulButtonGroup>
+
+      <HeadingXSmall>Padding: custom</HeadingXSmall>
+      <StatefulButtonGroup
+        mode={MODE.radio}
+        initialState={{ selected: 0 }}
+        padding={PADDING.custom}
+        overrides={{
+          Root: {
+            style: ({ $theme }) => ({
+              backgroundColor: $theme.colors.positive,
+              paddingLeft: $theme.sizing.scale1000,
+              paddingRight: $theme.sizing.scale1000,
+            }),
+          },
+        }}
+      >
+        <Button>Label</Button>
+        <Button>Label</Button>
+        <Button>Label</Button>
+        <Button>Label</Button>
+        <Button>Label</Button>
+        <Button>Label</Button>
+      </StatefulButtonGroup>
+    </React.Fragment>
+  );
+}