feat(radiobutton): updated radiobutton with direction

Added new property for setting columndirection
AxisCommunications · Feb 22, 2023 · eee6d5f · eee6d5f
1 parent abd8f10
commit eee6d5f
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 8 deletions.
diff --git a/packages/core/src/RadioButton/RadioButton.tsx b/packages/core/src/RadioButton/RadioButton.tsx
@@ -233,6 +233,7 @@ export const RadioContainer = styled.div<{
 
 type BaseElement = HTMLInputElement
 type BaseProps = InputHTMLAttributes<BaseElement>
+type ColumnDirection = 'column' | 'row'
 
 export type RadioButtonChangeHandler = ChangeEventHandler<BaseElement>
 export type RadioButtonValueChangeHandler<V extends string = string> = (
@@ -373,9 +374,16 @@ export function RadioButton<V extends string = string>({
  * Radio Group
  */
 /* stylelint-disable no-descending-specificity  */
-const RadioButtonGroupContainer = styled.div<{ readonly compact: boolean }>`
-  display: grid;
-  grid-row-gap: ${({ compact }) => (!compact ? spacing.large : spacing.medium)};
+
+const RadioButtonGroupContainer = styled.div<{
+  readonly compact: boolean
+  readonly direction: ColumnDirection
+}>`
+  display: flex;
+  flex-direction: ${({ direction }) => (!direction ? 'column' : direction)};
+  justify-content: ${({ direction }) =>
+    direction === 'column' ? '' : 'space-between'};
+  row-gap: ${({ compact }) => (!compact ? spacing.large : spacing.medium)};
   margin: ${({ compact }) =>
     !compact ? `${spacing.medium} 0` : `${spacing.small} 0`};
 `
@@ -407,6 +415,11 @@ export interface RadioButtonGroupProps<V extends string = string>
 
    */
   readonly compact?: boolean
+  /**
+   * Aligns the menu item as a column or row.
+   * Default: `column`
+   */
+  readonly direction?: ColumnDirection
 }
 
 export function RadioButtonGroup<V extends string = string>({
@@ -417,13 +430,18 @@ export function RadioButtonGroup<V extends string = string>({
   onValueChange,
   error,
   compact: compactFromProps,
+  direction = 'column',
   ...rest
 }: RadioButtonGroupProps<V>): JSX.Element {
   const { compact: compactFromTheme } = useTheme()
   const compact = compactFromProps ?? compactFromTheme
 
   return (
-    <RadioButtonGroupContainer compact={compact} {...rest}>
+    <RadioButtonGroupContainer
+      compact={compact}
+      direction={direction}
+      {...rest}
+    >
       {options.map((option, index) => (
         <RadioButton<V>
           key={index}

diff --git a/packages/core/src/RadioButton/__snapshots__/index.test.tsx.snap b/packages/core/src/RadioButton/__snapshots__/index.test.tsx.snap
@@ -1372,8 +1372,14 @@ exports[`RadioButtons RadioButtonGroup 1`] = `
 }
 
 .c2 {
-  display: grid;
-  grid-row-gap: 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  row-gap: 16px;
   margin: 8px 0;
 }
 
@@ -1411,6 +1417,7 @@ exports[`RadioButtons RadioButtonGroup 1`] = `
     >
       <div
         className="c2"
+        direction="column"
       >
         <div
           checked={true}
@@ -1839,8 +1846,14 @@ exports[`RadioButtons RadioButtonGroup 2`] = `
 }
 
 .c2 {
-  display: grid;
-  grid-row-gap: 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  row-gap: 16px;
   margin: 8px 0;
 }
 
@@ -1878,6 +1891,7 @@ exports[`RadioButtons RadioButtonGroup 2`] = `
     >
       <div
         className="c2"
+        direction="column"
       >
         <div
           checked={false}

diff --git a/packages/docs/src/mdx/coreComponents/RadioButton.mdx b/packages/docs/src/mdx/coreComponents/RadioButton.mdx
@@ -118,6 +118,24 @@ export const DemoComponent = () => {
 />
 ```
 
+#### Group with direction set to row
+
+```typescript type="live"
+<RadioButtonGroupField
+  name="weather-group-row-test"
+  label="Grouped buttons with direction set to row"
+  options={[
+    { value: 'sunny', label: 'Sunny' },
+    { value: 'cloudy', label: 'Cloudy' },
+    { value: 'rainy', label: 'Rainy' },
+    { value: 'windy', label: 'Windy', disabled: true },
+  ]}
+  value="sunny"
+  onValueChange={() => {}}
+  direction="row"
+/>
+```
+
 ## RadioIconButton
 
 A RadioIconButton is a clickable element which will execute a command when clicked.

diff --git a/packages/docs/src/mdx/formikComponents/FormikRadioButtonGroup.mdx b/packages/docs/src/mdx/formikComponents/FormikRadioButtonGroup.mdx
@@ -26,6 +26,23 @@ A formik component that wraps a RadioButtonGroup component.
 </FormikDemo>
 ```
 
+```typescript type="demo"
+<FormikDemo initialValues={{ day: 'mon' }}>
+  <FormikRadioButtonGroupField
+    label="Row direction set to row"
+    name="dayrow"
+    options={[
+      { label: 'Monday', value: 'mon' },
+      { label: 'Tuesday', value: 'tue' },
+      { label: 'Wednesday', value: 'wed' },
+      { label: 'Thursday', value: 'thu' },
+      { label: 'Friday', value: 'fri' },
+    ]}
+    direction="row"
+  />
+</FormikDemo>
+```
+
 ## Usage in code
 
 ```typescript