feat(Radio): add radio buttons

e2e/__tests__/radio-group-field.test.js

@@ -3,6 +3,7 @@ import { baisy } from '../setup/TestSuiter';
 
 const SUITES = [
   baisy.suite('Components/Radio', 'common'),
+  baisy.suite('Components/Radio', 'button'),
   baisy.suite('Components/Radio', 'with custom gap'),
 ];
 

e2e/__tests__/radio.test.js

@@ -3,6 +3,7 @@ import { baisy } from '../setup/TestSuiter';
 
 const SUITES = [
   baisy.suite('Components/RadioGroupField', 'default story'),
+  baisy.suite('Components/RadioGroupField', 'button'),
   baisy.suite('Components/RadioGroupField', 'disabled story'),
   baisy.suite('Components/RadioGroupField', 'with error'),
 ];

src/components/Radio/Radio.stories.js

@@ -32,6 +32,22 @@ common.story = {
   name: 'common',
 };
 
+export const button = () => (
+  <RadioState>
+    { ({ value, changeValue }) => (
+      <Radio.Group value={ value } onChange={ changeValue } direction="row" gap="none">
+        <Radio.Button label="Radio" value={ 1 } />
+        <Radio.Button label="Radio" value={ 2 } />
+        <Radio.Button label="Radio" value={ 3 } />
+      </Radio.Group>
+    ) }
+  </RadioState>
+);
+
+button.story = {
+  name: 'button',
+};
+
 export const withCustomGap = () => (
   <Row gap="md">
     <Radio.Group value={ 1 } gap="none">

src/components/Radio/Radio.theme.js

@@ -84,6 +84,27 @@ const [RadioWrapperTag, themeRadioWrapper] = createThemeTag(`${name}Wrapper`, {
   },
 });
 
+const [RadioButtonTag, themeRadioButton] = createThemeTag(`${name}Button`, {
+  root: {
+    flex: 1,
+
+    '&:first-child > *': {
+      borderRightStyle: 'unset',
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0,
+    },
+
+    '&:last-child > *': {
+      borderLeftStyle: 'unset',
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+    },
+
+    '&:not(:first-child):not(:last-child) > *': {
+      borderRadius: 0,
+    },
+  },
+});
 
 const [RadioTag, themeRadio] = createThemeTag(name, {
   root: {
@@ -98,6 +119,7 @@ const theme = {
   ...themeCircleInner,
   ...themeText,
   ...themeRadioWrapper,
+  ...themeRadioButton,
   ...themeRadio,
 };
 
@@ -108,5 +130,6 @@ export {
   RadioTag,
   RadioWrapperTag,
   RadioCircleInnerTag,
+  RadioButtonTag,
   RadioTextTag,
 };

src/components/Radio/RadioButton.js

@@ -0,0 +1,63 @@
+// @flow
+
+import React, { useCallback } from 'react';
+import { RadioTag, RadioButtonTag } from './Radio.theme';
+
+import { Button } from '../Button';
+
+type EqualsFuncArgument = {
+  selectedValue?: string | number,
+  value: string | number,
+};
+
+type RadioButtonClonedProps = {
+  /** private cloned props */
+  name?: string,
+  /** private cloned props */
+  onChange?: (string | number, SyntheticInputEvent<HTMLInputElement>) => void,
+  /** private cloned props */
+  selectedValue?: string | number,
+  /** then true when show error styles */
+  hasError?: boolean,
+};
+
+type RadioButtonProps = {
+  /** text of the label */
+  label?: string,
+  /** radio value */
+  value: string | number,
+  /** when true then disable radio */
+  disabled?: boolean,
+  /** custom function to check the equals */
+  equalsFunc?: (EqualsFuncArgument) => boolean,
+};
+
+const RadioButton = ({
+  onChange,
+  value,
+  disabled,
+  selectedValue,
+  equalsFunc = ({ selectedValue, value }: EqualsFuncArgument) => selectedValue === value,
+  name,
+  label,
+  ...rest
+}: RadioButtonProps & RadioButtonClonedProps) => {
+  const handleChange = useCallback((event) => {
+    if (typeof onChange === 'function' && !disabled) {
+      onChange(value, event);
+    }
+  }, [disabled, onChange, value]);
+
+  const checked = value !== undefined && equalsFunc && equalsFunc({ selectedValue, value });
+
+  return (
+    <RadioButtonTag tagName="label">
+      <Button tagName="div" { ...(checked ? {} : { variant: 'outlined' }) } disabled={ disabled } { ...rest }>
+        <RadioTag tagName="input" type="radio" name={ name } onChange={ handleChange } checked={ checked } />
+        { label }
+      </Button>
+    </RadioButtonTag>
+  );
+};
+
+export { RadioButton };

src/components/Radio/RadioGroup.js

@@ -23,6 +23,8 @@ type RadioProps = {
   options?: Array<({ value: any, label: string })>,
   /** disabled */
   disabled?: boolean,
+  /** stretch */
+  stretch?: boolean,
 }
 
 class RadioGroup extends PureComponent<RadioProps> {
@@ -57,10 +59,10 @@ class RadioGroup extends PureComponent<RadioProps> {
   }
 
   render() {
-    const { children, value, direction, gap, onChange, hasError, disabled, ...rest } = this.props;
+    const { children, value, direction, gap, onChange, hasError, disabled, stretch, ...rest } = this.props;
 
     return (
-      <FlexLayout { ...rest } direction={ direction } gap={ gap }>
+      <FlexLayout { ...rest } direction={ direction } gap={ gap } stretch={ stretch } inline>
         {
           React.Children.map(this.renderChildren(), child =>
             React.cloneElement(child, {

src/components/Radio/index.js

@@ -1,10 +1,12 @@
 // @flow
 
 import { RadioItem } from './RadioItem';
+import { RadioButton } from './RadioButton';
 import { RadioGroup } from './RadioGroup';
 import { theme } from './Radio.theme';
 
 const Radio = {
+  Button: RadioButton,
   Item: RadioItem,
   Group: RadioGroup,
 };

src/components/RadioGroupField/RadioGroupField.js

@@ -24,6 +24,8 @@ type RadioGroupFieldProps = {
   options?: Array<({ value: any, label: string })>,
   /** disabled */
   disabled?: boolean,
+  /** stretch */
+  stretch?: boolean,
 };
 
 const RadioGroupField = ({
@@ -35,6 +37,7 @@ const RadioGroupField = ({
   meta,
   options,
   disabled,
+  stretch,
   ...rest
 }: RadioGroupFieldProps) => {
   const { name, value, onChange } = input;
@@ -52,6 +55,7 @@ const RadioGroupField = ({
         options={ options }
         value={ value }
         disabled={ disabled }
+        stretch={ stretch }
       >
         { children }
       </Radio.Group>

src/components/RadioGroupField/RadioGroupField.stories.js

@@ -19,6 +19,18 @@ defaultStory.story = {
   name: 'default',
 };
 
+export const button = () => (
+  <RadioGroupField direction="row" input={{ value: 1 }} meta={{}} gap="none">
+    <Radio.Button label="Radio" value={ 1 } />
+    <Radio.Button label="Radio" value={ 2 } />
+    <Radio.Button label="Radio" value={ 3 } />
+  </RadioGroupField>
+);
+
+button.story = {
+  name: 'button',
+};
+
 export const disabledStory = () => (
   <RadioGroupField direction="row" input={{ value: 1 }} meta={{}} disabled>
     <Radio.Item label="Radio" value={ 1 } />