feat(design): add vertical layout support for CheckboxGroup and Radio…

…Group (#2252)
dream-num · May 16, 2024 · c638477 · c638477
1 parent e1f4a37
commit c638477
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 4 deletions.
diff --git a/packages/design/src/components/checkbox-group/CheckboxGroup.stories.tsx b/packages/design/src/components/checkbox-group/CheckboxGroup.stories.tsx
@@ -47,3 +47,20 @@ export const Playground = {
  );
  },
 };
+
+export const CheckboxGroupVertical = {
+ render() {
+ const [value, setValue] = useState<string[]>([]);
+
+ function handleChange(value: Array<string | number | boolean>) {
+ setValue(value as string[]);
+ }
+
+ return (
+ <CheckboxGroup value={value} onChange={handleChange} direction="vertical">
+ <Checkbox value="test">test</Checkbox>
+ <Checkbox value="test1">test1</Checkbox>
+ </CheckboxGroup>
+ );
+ },
+};
diff --git a/packages/design/src/components/checkbox-group/CheckboxGroup.tsx b/packages/design/src/components/checkbox-group/CheckboxGroup.tsx
@@ -44,6 +44,12 @@ export interface ICheckboxGroupProps {
  */
  disabled?: boolean;
 
+ /**
+ * Direction of the radio group
+ * @default 'horizontal'
+ */
+ direction?: 'horizontal' | 'vertical';
+
  /**
  * The callback function triggered when switching options
  */
@@ -54,7 +60,7 @@ export interface ICheckboxGroupProps {
  * CheckboxGroup Component
  */
 export function CheckboxGroup(props: ICheckboxGroupProps) {
- const { children, className, style, value, disabled, onChange } = props;
+ const { children, className, style, value, disabled, direction = 'horizontal', onChange } = props;
 
  const handleChange = (item: string | number | boolean) => {
  if (value.includes(item)) {
@@ -64,7 +70,9 @@ export function CheckboxGroup(props: ICheckboxGroupProps) {
  }
  };
 
- const _className = clsx(className, styles.checkboxGroup);
+ const _className = clsx(className, styles.checkboxGroup, {
+ [styles.checkboxGroupDirectionVertical]: direction === 'vertical',
+ });
 
  return (
  <div className={_className} style={style}>

diff --git a/packages/design/src/components/checkbox-group/index.module.less b/packages/design/src/components/checkbox-group/index.module.less
@@ -1,4 +1,10 @@
 .checkbox-group {
  display: flex;
  gap: var(--margin-sm);
+
+ &-direction {
+ &-vertical {
+ flex-direction: column;
+ }
+ }
 }
diff --git a/packages/design/src/components/radio-group/RadioGroup.stories.tsx b/packages/design/src/components/radio-group/RadioGroup.stories.tsx
@@ -47,3 +47,20 @@ export const Playground = {
  );
  },
 };
+
+export const RadioGroupVertical = {
+ render() {
+ const [value, setValue] = useState('');
+
+ function handleChange(value: string | number | boolean) {
+ setValue(value as string);
+ }
+
+ return (
+ <RadioGroup value={value} onChange={handleChange} direction="vertical">
+ <Radio value="test">test</Radio>
+ <Radio value="test1">test1</Radio>
+ </RadioGroup>
+ );
+ },
+};
diff --git a/packages/design/src/components/radio-group/RadioGroup.tsx b/packages/design/src/components/radio-group/RadioGroup.tsx
@@ -16,12 +16,23 @@
 
 import React from 'react';
 
+import clsx from 'clsx';
 import type { IRadioProps } from '../radio/Radio';
 import styles from './index.module.less';
 
 export interface IRadioGroupProps {
  children: React.ReactNode[];
 
+ /**
+ * The class name of the checkbox group
+ */
+ className?: string;
+
+ /**
+ * The style of the checkbox group
+ */
+ style?: React.CSSProperties;
+
  /**
  * Define which radio is selected
  */
@@ -33,6 +44,12 @@ export interface IRadioGroupProps {
  */
  disabled?: boolean;
 
+ /**
+ * Direction of the radio group
+ * @default 'horizontal'
+ */
+ direction?: 'horizontal' | 'vertical';
+
  /**
  * The callback function triggered when switching options
  */
@@ -43,14 +60,18 @@ export interface IRadioGroupProps {
  * RadioGroup Component
  */
 export function RadioGroup(props: IRadioGroupProps) {
- const { children, value, disabled = false, onChange } = props;
+ const { children, className, style, value, disabled = false, direction = 'horizontal', onChange } = props;
 
  const handleChange = (value: string | number | boolean) => {
  onChange(value);
  };
 
+ const _className = clsx(className, styles.radioGroup, {
+ [styles.radioGroupDirectionVertical]: direction === 'vertical',
+ });
+
  return (
- <div className={styles.radioGroup}>
+ <div className={_className} style={style}>
  {React.Children.map(children, (child, index) => {
  if (React.isValidElement<IRadioProps>(child)) {
  return React.cloneElement(child, {

diff --git a/packages/design/src/components/radio-group/index.module.less b/packages/design/src/components/radio-group/index.module.less
@@ -1,4 +1,10 @@
 .radio-group {
  display: flex;
  gap: var(--margin-sm);
+
+ &-direction {
+ &-vertical {
+ flex-direction: column;
+ }
+ }
 }