Add new radio-v2 component

documentation-site/components/yard/config/radio-v2.ts

@@ -0,0 +1,190 @@
+/*
+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 pick from "just-pick";
+
+import { Radio, RadioGroup, ALIGN, LABEL_PLACEMENT } from "baseui/radio-v2";
+import { PropTypes } from "react-view";
+import type { TConfig } from "../types";
+
+import { changeHandlers } from "./common/common";
+
+const RadioGroupConfig: TConfig = {
+  componentName: "RadioGroup",
+  imports: {
+    "baseui/radio-v2": { named: ["RadioGroup"] },
+  },
+  scope: {
+    Radio,
+    RadioGroup,
+    ALIGN,
+    LABEL_PLACEMENT,
+  },
+  theme: [
+    "tickFill",
+    "tickFillHover",
+    "tickFillActive",
+    "tickFillSelected",
+    "tickFillSelectedHover",
+    "tickFillSelectedHoverActive",
+    "tickFillError",
+    "tickFillErrorHover",
+    "tickFillErrorHoverActive",
+    "tickFillErrorSelected",
+    "tickFillErrorSelectedHover",
+    "tickFillErrorSelectedHoverActive",
+    "tickFillDisabled",
+    "tickBorder",
+    "tickBorderError",
+    "tickMarkFill",
+    "tickMarkFillError",
+    "tickMarkFillDisabled",
+  ],
+  props: {
+    value: {
+      value: "2",
+      type: PropTypes.String,
+      description: "Passed to the input element value attribute",
+      stateful: true,
+    },
+    onChange: {
+      value: "e => setValue(e.currentTarget.value)",
+      type: PropTypes.Function,
+      description: "Handler for change events on trigger element.",
+      propHook: {
+        what: "e.target.value",
+        into: "value",
+      },
+    },
+    children: {
+      value: `<Radio value="1">One</Radio>
+<Radio
+  value="2"
+  description="This is a radio-v2 description"
+>
+  Two
+</Radio>
+<Radio value="3">
+  Three
+</Radio>`,
+      type: PropTypes.ReactNode,
+      description: "Radios within the RadioGroup",
+      imports: {
+        "baseui/radio-v2": { named: ["Radio"] },
+      },
+    },
+    name: {
+      value: "number",
+      type: PropTypes.String,
+      description:
+        "String value for the name of RadioGroup, it is used to group buttons. If missed default is random ID string.",
+      hidden: false,
+    },
+    align: {
+      value: "ALIGN.vertical",
+      type: PropTypes.Enum,
+      options: ALIGN,
+      description: "How to position radio-v2 buttons in the group.",
+      imports: {
+        "baseui/radio-v2": {
+          named: ["ALIGN"],
+        },
+      },
+    },
+    labelPlacement: {
+      value: "LABEL_PLACEMENT.right",
+      type: PropTypes.Enum,
+      options: LABEL_PLACEMENT,
+      enumName: "LABEL_PLACEMENT",
+      description:
+        "How to position radio-v2 label relative to the radio itself.",
+      imports: {
+        "baseui/radio-v2": {
+          named: ["LABEL_PLACEMENT"],
+        },
+      },
+    },
+    disabled: {
+      value: false,
+      type: PropTypes.Boolean,
+      description:
+        "Disabled all radio-v2 group from being changed. To disable some of radios provide disabled flag in each of them.",
+    },
+    error: {
+      value: false,
+      type: PropTypes.Boolean,
+      description: "Sets radio-v2 group into error state.",
+    },
+    required: {
+      value: false,
+      type: PropTypes.Boolean,
+      description: "Set if the control is required to be checked.",
+      hidden: true,
+    },
+    autoFocus: {
+      value: false,
+      type: PropTypes.Boolean,
+      description: "Set to be focused (active) on selectedchecked radio-v2.",
+      hidden: true,
+    },
+    containsInteractiveElement: {
+      value: false,
+      type: PropTypes.Boolean,
+      description:
+        "Indicates the radio-v2 contains an interactive element, and the default label behavior should be prevented for child elements.",
+      hidden: true,
+    },
+    "aria-label": {
+      value: undefined,
+      type: PropTypes.String,
+      description: `Sets aria-label attribute.`,
+      hidden: true,
+    },
+    "aria-labelledby": {
+      value: undefined,
+      type: PropTypes.String,
+      description: `Sets aria-labelledby attribute.`,
+      hidden: true,
+    },
+    ...pick(changeHandlers, [
+      "onBlur",
+      "onFocus",
+      "onMouseLeave",
+      "onMouseEnter",
+    ]),
+    overrides: {
+      value: undefined,
+      type: PropTypes.Custom,
+      description: "Lets you customize all aspects of the component.",
+      custom: {
+        names: ["Root"],
+        sharedProps: {
+          $isFocused: {
+            type: PropTypes.Boolean,
+            description: "True when the component is focused.",
+          },
+          $isHovered: {
+            type: PropTypes.Boolean,
+            description: "True when the component is hovered.",
+          },
+          $isActive: {
+            type: PropTypes.Boolean,
+            description: "True when the component is active.",
+          },
+          $error: "error",
+          $checked: {
+            type: PropTypes.Boolean,
+            description: "True when the component is active.",
+          },
+          $required: "required",
+          $disabled: "disabled",
+        },
+      },
+    },
+  },
+};
+
+export default RadioGroupConfig;

documentation-site/examples/radio-v2/basic.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { Radio, RadioGroup } from "baseui/radio-v2";
+
+export default function Example() {
+  const [value, setValue] = React.useState("1");
+  return (
+    <RadioGroup
+      name="basic usage"
+      onChange={(e) => setValue(e.target.value)}
+      value={value}
+    >
+      <Radio value="1">First</Radio>
+      <Radio
+        value="2"
+        description="This is a radio description, it gives a little more in-yo-face context about what this is."
+      >
+        Second
+      </Radio>
+      <Radio value="3">Third</Radio>
+    </RadioGroup>
+  );
+}

documentation-site/examples/radio-v2/disabled.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { Radio, RadioGroup } from "baseui/radio-v2";
+
+export default function Example() {
+  return (
+    <RadioGroup disabled name="disabled" value="1">
+      <Radio value="1">Checked</Radio>
+      <Radio value="2">Unchecked</Radio>
+    </RadioGroup>
+  );
+}

documentation-site/examples/radio-v2/error.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { Radio, RadioGroup } from "baseui/radio-v2";
+
+export default function Example() {
+  const [value, setValue] = React.useState("1");
+  return (
+    <RadioGroup
+      error
+      name="error"
+      onChange={(e) => setValue(e.target.value)}
+      value={value}
+    >
+      <Radio value="1">First</Radio>
+      <Radio value="2">Second</Radio>
+      <Radio value="3">Third</Radio>
+    </RadioGroup>
+  );
+}

documentation-site/examples/radio-v2/horizontal-align.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { Radio, RadioGroup } from "baseui/radio-v2";
+
+export default function Example() {
+  const [value, setValue] = React.useState("1");
+  return (
+    <RadioGroup
+      align="horizontal"
+      name="horizontal"
+      onChange={(e) => setValue(e.target.value)}
+      value={value}
+    >
+      <Radio value="1">First</Radio>
+      <Radio value="2">Second</Radio>
+      <Radio value="3">Third</Radio>
+    </RadioGroup>
+  );
+}

documentation-site/examples/radio-v2/overrides.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { Radio, RadioGroup } from "baseui/radio-v2";
+import { RadioOverrides } from "baseui/radio-v2";
+
+export default function Example() {
+  const [value, setValue] = React.useState("1");
+  const radioOverrides: RadioOverrides = {
+    RadioMarkOuter: {
+      style: ({ $theme }) => ({
+        backgroundColor: $theme.colors.positive,
+      }),
+    },
+  };
+  return (
+    <RadioGroup
+      name="overrides"
+      onChange={(e) => setValue(e.target.value)}
+      value={value}
+    >
+      <Radio overrides={radioOverrides} value="1">
+        Custom label for value 1
+      </Radio>
+      <Radio overrides={radioOverrides} value="2">
+        Custom label for value 2
+      </Radio>
+      <Radio overrides={radioOverrides} value="3">
+        Custom label for value 3
+      </Radio>
+    </RadioGroup>
+  );
+}

documentation-site/examples/radio-v2/stateful.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { Radio, StatefulRadioGroup } from "baseui/radio-v2";
+
+export default function Example() {
+  return (
+    <StatefulRadioGroup name="stateful" initialState={{ value: "2" }}>
+      <Radio value="1">First</Radio>
+      <Radio value="2">Second</Radio>
+      <Radio value="3">Third</Radio>
+    </StatefulRadioGroup>
+  );
+}

documentation-site/pages/components/radio-v2.mdx

@@ -0,0 +1,62 @@
+import Example from "../../components/example";
+import Layout from "../../components/layout";
+import Exports from "../../components/exports";
+
+import Basic from "examples/radio-v2/basic.tsx";
+import Stateful from "examples/radio-v2/stateful.tsx";
+import HorizontalAlign from "examples/radio-v2/horizontal-align.tsx";
+import Error from "examples/radio-v2/error.tsx";
+import Customization from "examples/radio-v2/overrides.tsx";
+import Disabled from "examples/radio-v2/disabled.tsx";
+
+import { Radio, StatefulRadioGroup } from "baseui/radio-v2";
+import * as RadioExports from "baseui/radio-v2";
+
+import Yard from "../../components/yard/index";
+import radioYardConfig from "../../components/yard/config/radio-v2";
+
+export default Layout;
+
+# Radio
+
+<Yard placeholderHeight={122} {...radioYardConfig} />
+
+## Notes
+
+- Radios are used when only one choice may be selected in a series of options.
+- Label placement is default to right to the control. Description label is optional.
+- We support both stateful and stateless radiogroup components to group radios in addition to some built in features: keyboard navigation, a11y support.
+
+## Examples
+
+<Example title="Basic usage" path="radio-v2/basic.tsx">
+  <Basic />
+</Example>
+
+<Example title="Disabled radios" path="radio-v2/disabled.tsx">
+  <Disabled />
+</Example>
+
+<Example title="Horizontal alignment" path="radio-v2/horizontal-align.tsx">
+  <HorizontalAlign />
+</Example>
+
+<Example title="Error state" path="radio-v2/error.tsx">
+  <Error />
+</Example>
+
+<Example title="Overrides usage" path="radio-v2/overrides.tsx">
+  <Customization />
+</Example>
+
+<Example title="Stateful (uncontrolled) usage" path="radio-v2/stateful.tsx">
+  <Stateful />
+</Example>
+
+As with many of our components, there is also an [uncontrolled](https://reactjs.org/docs/uncontrolled-components.html) version, `StatefulRadioGroup`, which manages its own state.
+
+<Exports
+  component={RadioExports}
+  title="Radio exports"
+  path="baseui/radio-v2"
+/>

documentation-site/pages/components/radio.mdx

@@ -15,8 +15,22 @@ import * as RadioExports from "baseui/radio";
 import Yard from "../../components/yard/index";
 import radioYardConfig from "../../components/yard/config/radio";
 
+import { Notification, KIND as NOTIFICATION_KIND } from "baseui/notification";
+
 export default Layout;
 
+<Notification
+  overrides={{ Body: { style: { width: "auto", margin: "16px 0 0 0" } } }}
+  kind={NOTIFICATION_KIND.warning}
+>
+  This Radio component is about to be deprecated in favor of the new Radio-v2
+  component. The supported apis keep almost same, so the migration just requires
+  minimal efforts(most likely only change import path) but gains much more
+  benefits. We encouraged you to start new implementations with Radio-v2
+  depending your use case and design. Any migrations from Radio to Radio-v2 or
+  Switch are recommended.
+</Notification>
+
 # Radio
 
 <Yard placeholderHeight={122} {...radioYardConfig} />