feat: add layout type for radiogroup, checkboxgroup (EightfoldAI#207)

src/components/Selectors/CheckBox/CheckBox.stories.tsx → src/components/CheckBox/CheckBox.stories.tsx

@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
 import { Stories } from '@storybook/addon-docs';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { CheckBox, CheckBoxGroup } from '../';
-import { CheckboxValueType } from './Checkbox.types';
+import { CheckBox, CheckBoxGroup, CheckboxValueType } from './';
 
 export default {
     title: 'Check Box',
@@ -75,6 +74,13 @@ export default {
             defaultValue: true,
             control: { type: 'boolean' },
         },
+        onChange: {
+            action: 'change',
+        },
+        layout: {
+            options: ['vertical', 'horizontal'],
+            control: { type: 'radio' },
+        },
     },
 } as ComponentMeta<typeof CheckBox>;
 
@@ -90,7 +96,10 @@ const CheckBoxGroup_Story: ComponentStory<typeof CheckBoxGroup> = (args) => {
         <CheckBoxGroup
             {...args}
             value={selected}
-            onChange={(newSelected) => setSelected([...newSelected])}
+            onChange={(newSelected) => {
+                args.onChange(newSelected);
+                setSelected([...newSelected]);
+            }}
         />
     );
 };
@@ -136,4 +145,5 @@ Check_Box_Group.args = {
             id: 'test-3',
         },
     ],
+    layout: 'vertical',
 };

src/components/Selectors/CheckBox/CheckBox.test.tsx → src/components/CheckBox/CheckBox.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Enzyme, { mount } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import { CheckBox } from '../';
+import { CheckBox } from './';
 
 Enzyme.configure({ adapter: new Adapter() });
 

src/components/Selectors/CheckBox/CheckBox.tsx → src/components/CheckBox/CheckBox.tsx

@@ -1,6 +1,6 @@
 import React, { FC, Ref, useEffect, useRef, useState } from 'react';
-import { generateId, mergeClasses } from '../../../shared/utilities';
-import { CheckboxProps } from './Checkbox.types';
+import { generateId, mergeClasses } from '../../shared/utilities';
+import { CheckboxProps } from './';
 
 import styles from './checkbox.module.scss';
 

src/components/Selectors/CheckBox/CheckBoxGroup.tsx → src/components/CheckBox/CheckBoxGroup.tsx

@@ -1,17 +1,27 @@
 import React, { FC, Ref } from 'react';
-import { CheckBox } from './CheckBox';
-import { mergeClasses } from '../../../shared/utilities';
-import { CheckboxGroupProps } from './Checkbox.types';
+import { mergeClasses } from '../../shared/utilities';
+import { CheckboxGroupProps, CheckBox } from './';
 
 import styles from './checkbox.module.scss';
 
 export const CheckBoxGroup: FC<CheckboxGroupProps> = React.forwardRef(
     (
-        { items = [], onChange, value, classNames, style, ariaLabel, ...rest },
+        {
+            items = [],
+            onChange,
+            value,
+            classNames,
+            style,
+            ariaLabel,
+            layout = 'vertical',
+            ...rest
+        },
         ref: Ref<HTMLDivElement>
     ) => {
         const checkboxGroupClassNames = mergeClasses([
             styles.checkboxGroup,
+            { [styles.vertical]: layout === 'vertical' },
+            { [styles.horizontal]: layout === 'horizontal' },
             classNames,
         ]);
 

src/components/Selectors/CheckBox/Checkbox.types.ts → src/components/CheckBox/Checkbox.types.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { OcBaseProps } from '../../OcBase';
+import { OcBaseProps } from '../OcBase';
 
 export type CheckboxValueType = string | number;
 
@@ -62,4 +62,9 @@ export interface CheckboxGroupProps
      * @param checkedValue
      */
     onChange?: (checkedValue: CheckboxValueType[]) => void;
+    /**
+     * Type of layout for the checkbox group
+     * @default vertical
+     */
+    layout?: 'vertical' | 'horizontal';
 }

src/components/Selectors/CheckBox/checkbox.module.scss → src/components/CheckBox/checkbox.module.scss

@@ -181,8 +181,15 @@
 }
 
 .checkbox-group {
-    .selector {
-        margin-bottom: $space-m;
+    display: flex;
+    gap: $space-m;
+
+    &.vertical {
+        flex-direction: column;
+    }
+
+    &.horizontal {
+        flex-direction: row;
     }
 }
 

src/components/CheckBox/index.ts

@@ -0,0 +1,3 @@
+export * from './Checkbox.types';
+export * from './CheckBox';
+export * from './CheckBoxGroup';

src/components/ConfigProvider/ConfigProvider.stories.tsx

@@ -14,7 +14,8 @@ import { ConfigProvider, OcThemeNames, ThemeOptions, useConfig } from './';
 import { MatchScore } from '../MatchScore';
 import { Spinner } from '../Spinner';
 import { Stack } from '../Stack';
-import { CheckBoxGroup, RadioGroup } from '../Selectors';
+import { RadioGroup } from '../RadioButton';
+import { CheckBoxGroup } from '../CheckBox';
 import { Link } from '../Link';
 import { Navbar, NavbarContent } from '../Navbar';
 

src/components/Selectors/RadioButton/Radio.types.ts → src/components/RadioButton/Radio.types.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { OcBaseProps } from '../../OcBase';
+import { OcBaseProps } from '../OcBase';
 
 export type RadioButtonValue = string | number;
 
@@ -62,4 +62,9 @@ export interface RadioGroupProps extends OcBaseProps<HTMLDivElement> {
      * The radio button onChange event handler.
      */
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Type of layout for the radio group
+     * @default vertical
+     */
+    layout?: 'vertical' | 'horizontal';
 }

src/components/Selectors/RadioButton/RadioButton.stories.tsx → src/components/RadioButton/RadioButton.stories.tsx

@@ -1,12 +1,7 @@
 import React, { useState } from 'react';
 import { Stories } from '@storybook/addon-docs';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import {
-    CheckboxValueType,
-    RadioButton,
-    RadioButtonValue,
-    RadioGroup,
-} from '../index';
+import { RadioButton, RadioButtonValue, RadioGroup } from './';
 
 export default {
     title: 'Radio Button',
@@ -104,6 +99,10 @@ export default {
         onChange: {
             action: 'change',
         },
+        layout: {
+            options: ['vertical', 'horizontal'],
+            control: { type: 'radio' },
+        },
     },
 } as ComponentMeta<typeof RadioButton>;
 
@@ -120,6 +119,7 @@ const RadioGroup_Story: ComponentStory<typeof RadioGroup> = (args) => {
             {...args}
             value={selected}
             onChange={(e) => {
+                args.onChange(e);
                 setSelected(e.target.value);
             }}
         />
@@ -153,4 +153,5 @@ Radio_Group.args = {
         name: 'group',
         id: `oea2exk-${i}`,
     })),
+    layout: 'vertical',
 };

src/components/Selectors/RadioButton/RadioButton.test.tsx → src/components/RadioButton/RadioButton.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Enzyme, { mount } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import { RadioButton } from '../';
+import { RadioButton } from './';
 
 Enzyme.configure({ adapter: new Adapter() });
 

src/components/Selectors/RadioButton/RadioButton.tsx → src/components/RadioButton/RadioButton.tsx

@@ -1,6 +1,6 @@
 import React, { FC, Ref, useEffect, useRef, useState } from 'react';
-import { RadioButtonProps } from './Radio.types';
-import { mergeClasses, generateId } from '../../../shared/utilities';
+import { RadioButtonProps } from './';
+import { mergeClasses, generateId } from '../../shared/utilities';
 import { useRadioGroup } from './RadioGroup.context';
 
 import styles from './radio.module.scss';

src/components/Selectors/RadioButton/RadioGroup.context.tsx → src/components/RadioButton/RadioGroup.context.tsx

@@ -1,9 +1,5 @@
-import React, { createContext, useEffect, useState } from 'react';
-import {
-    IRadioButtonsContext,
-    RadioButtonValue,
-    RadioGroupContextProps,
-} from './Radio.types';
+import React, { createContext } from 'react';
+import { IRadioButtonsContext, RadioGroupContextProps } from './';
 
 const RadioGroupContext = createContext<Partial<IRadioButtonsContext>>(null);
 

src/components/Selectors/RadioButton/RadioGroup.tsx → src/components/RadioButton/RadioGroup.tsx

@@ -1,18 +1,28 @@
 import React, { FC, Ref } from 'react';
-import { RadioButton } from '../';
+import { RadioButtonProps, RadioGroupProps, RadioButton } from './';
 import { RadioGroupProvider } from './RadioGroup.context';
-import { mergeClasses } from '../../../shared/utilities';
-import { RadioButtonProps, RadioGroupProps } from './Radio.types';
+import { mergeClasses } from '../../shared/utilities';
 
 import styles from './radio.module.scss';
 
 export const RadioGroup: FC<RadioGroupProps> = React.forwardRef(
     (
-        { onChange, items, classNames, style, ariaLabel, value, ...rest },
+        {
+            onChange,
+            items,
+            classNames,
+            style,
+            ariaLabel,
+            value,
+            layout = 'vertical',
+            ...rest
+        },
         ref: Ref<HTMLDivElement>
     ) => {
         const radioGroupClasses: string = mergeClasses([
             styles.radioGroup,
+            { [styles.vertical]: layout === 'vertical' },
+            { [styles.horizontal]: layout === 'horizontal' },
             classNames,
         ]);
 

src/components/RadioButton/index.ts

@@ -0,0 +1,3 @@
+export * from './Radio.types';
+export * from './RadioButton';
+export * from './RadioGroup';

src/components/Selectors/RadioButton/radio.module.scss → src/components/RadioButton/radio.module.scss

@@ -179,8 +179,15 @@
 }
 
 .radio-group {
-    .selector {
-        margin-bottom: $space-m;
+    display: flex;
+    gap: $space-m;
+
+    &.vertical {
+        flex-direction: column;
+    }
+
+    &.horizontal {
+        flex-direction: row;
     }
 }
 

src/components/Table/Hooks/useFilter/FilterDropdown.tsx

@@ -11,7 +11,8 @@ import { Menu } from '../../../Menu';
 import type { MenuProps } from '../../../Menu';
 import Tree from '../../../Tree';
 import type { DataNode, EventDataNode } from '../../../Tree';
-import { CheckBox, RadioButton } from '../../../Selectors';
+import { RadioButton } from '../../../RadioButton';
+import { CheckBox } from '../../../CheckBox';
 import { Dropdown } from '../../../Dropdown';
 import { Empty } from '../../../Empty';
 import type {

src/components/Table/Hooks/useSelection.tsx

@@ -10,8 +10,8 @@ import type {
 import { INTERNAL_COL_DEFINE } from '../Internal';
 import type { FixedType } from '../Internal/OcTable.types';
 import { useMergedState } from '../../../hooks/useMergedState';
-import type { CheckboxProps } from '../../Selectors';
-import { CheckBox, RadioButton } from '../../Selectors';
+import { RadioButton } from '../../RadioButton';
+import { CheckBox, CheckboxProps } from '../../CheckBox';
 import { Dropdown } from '../../Dropdown';
 import { Icon, IconName, IconSize } from '../../Icon';
 import { Menu } from '../../Menu';

src/components/Table/Table.types.tsx

@@ -6,8 +6,8 @@ import type {
     OcTableProps,
 } from './Internal/OcTable.types';
 import { GetRowKey, ExpandableConfig } from './Internal/OcTable.types';
-import type { TooltipProps } from '../Tooltip/Tooltip.types';
-import type { CheckboxProps } from '../Selectors';
+import type { TooltipProps } from '../Tooltip';
+import type { CheckboxProps } from '../CheckBox';
 import type { PaginationProps } from '../Pagination';
 import type { Breakpoint } from '../../shared/utilities';
 import { tuple } from '../../shared/utilities';

src/components/Table/Tests/Table.rowSelection.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import Enzyme, { mount } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import Table from '../index';
-import { CheckBox } from '../../Selectors';
+import { CheckBox } from '../../CheckBox';
 
 Enzyme.configure({ adapter: new Adapter() });
 

src/octuple.ts

@@ -18,7 +18,7 @@ import {
     TwoStateButton,
 } from './components/Button';
 
-import { CheckBox, CheckBoxGroup } from './components/Selectors';
+import { CheckBox, CheckBoxGroup } from './components/CheckBox';
 
 import { ConfigProvider } from './components/ConfigProvider';
 
@@ -75,7 +75,7 @@ import { Panel, PanelPlacement, PanelSize } from './components/Panel';
 
 import { Portal } from './components/Portal';
 
-import { RadioButton, RadioGroup } from './components/Selectors';
+import { RadioButton, RadioGroup } from './components/RadioButton';
 
 import Table, {
     ColumnGroupType,