Merge pull request #228 from brainstormforce/select-component/option-…

…group

Added option group in Select component

README.md

@@ -14,7 +14,7 @@ Using Force UI as a dependency in package.json -
 
 ```json
 "dependencies": {
-  "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.3.3"
+  "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.3.4"
 }
 ```
 
@@ -28,7 +28,7 @@ npm install
 Or you can directly run the following command to install the package -
 
 ```bash
-npm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.3.3
+npm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.3.4
 ```
 
 <br />

changelog.txt

@@ -1,19 +1,23 @@
+Version 1.3.4 - 26th December, 2024
+- Improvement - Enhanced the UI of the Table and Line chart component for responsive design.
+- Improvement - Added option group to the Select component.
+
 Version 1.3.3 - 20th December, 2024
-Fixed - React `Each child in a list should have a unique "key" prop` console warning.
-Fixed - Toaster content overlapping with the close button.
+- Fixed - React `Each child in a list should have a unique "key" prop` console warning.
+- Fixed - Toaster content overlapping with the close button.
 
 Version 1.3.2 - 17th December, 2024
-Fixed - Adjusted the color of the Switch component label and help text.
+- Fixed - Adjusted the color of the Switch component label and help text.
 
 Version 1.3.1 - 17th December, 2024
-Fixed - The underline issue to enhance visual consistency.
-Fixed - Issue with the Select component where a check mark was displayed even when no item was selected.
-Fixed - Design mismatch in the Switch component.
-Fixed - Text, icon size, alignment, and color inconsistencies in the Date Picker to ensure a uniform appearance.
-Fixed - Input ref not pointing to the input field.
-Fixed - Icon size and alignment issues in the Menu component for better visual clarity.
-Fixed - Sidebar height not being overridable.
-Improvement - Removed backdrop blur to enhance performance and visual clarity.
+- Fixed - The underline issue to enhance visual consistency.
+- Fixed - Issue with the Select component where a check mark was displayed even when no item was selected.
+- Fixed - Design mismatch in the Switch component.
+- Fixed - Text, icon size, alignment, and color inconsistencies in the Date Picker to ensure a uniform appearance.
+- Fixed - Input ref not pointing to the input field.
+- Fixed - Icon size and alignment issues in the Menu component for better visual clarity.
+- Fixed - Sidebar height not being overridable.
+- Improvement - Removed backdrop blur to enhance performance and visual clarity.
 
 Version 1.3.0 - 16th December, 2024
 - New - Table component.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bsf/force-ui",
-    "version": "1.3.3",
+    "version": "1.3.4",
     "description": "Library of components for the BSF project",
     "main": "./dist/force-ui.js",
     "module": "./dist/force-ui.js",

src/components/select/component-style.ts

@@ -49,3 +49,11 @@ export const disabledClassNames = {
 	icon: 'group-disabled:text-icon-disabled',
 	text: 'group-disabled:text-field-color-disabled',
 };
+
+export const optionGroupDividerClassNames =
+	'h-px my-2 w-full border-border-subtle border-b border-t-0 border-solid';
+export const optionGroupDividerSizeClassNames = {
+	sm: 'w-[calc(100%+0.75rem)] translate-x-[-0.375rem]',
+	md: 'w-[calc(100%+1rem)] translate-x-[-0.5rem]',
+	lg: 'w-[calc(100%+1rem)] translate-x-[-0.5rem]',
+};

src/components/select/select-atom.stories.tsx

@@ -13,6 +13,32 @@ const options = [
 	{ id: '8', name: 'Pink' },
 ];
 
+const groupedOptions = [
+	{
+		label: 'Warm Colors',
+		options: [
+			{ id: '1', name: 'Red' },
+			{ id: '2', name: 'Orange' },
+			{ id: '3', name: 'Yellow' },
+		],
+	},
+	{
+		label: 'Cool Colors',
+		options: [
+			{ id: '4', name: 'Green' },
+			{ id: '5', name: 'Cyan' },
+			{ id: '6', name: 'Blue' },
+		],
+	},
+	{
+		label: 'Other Colors',
+		options: [
+			{ id: '7', name: 'Purple' },
+			{ id: '8', name: 'Pink' },
+		],
+	},
+];
+
 const meta: Meta<typeof Select> = {
 	title: 'Atoms/Select',
 	component: Select,
@@ -21,6 +47,7 @@ const meta: Meta<typeof Select> = {
 		'Select.Portal': Select.Portal,
 		'Select.Options': Select.Options,
 		'Select.Option': Select.Option,
+		'Select.OptionGroup': Select.OptionGroup,
 	} as Record<string, React.ComponentType<unknown>>,
 	parameters: {
 		layout: 'centered',
@@ -267,3 +294,76 @@ SelectWithSearchWithoutPortal.args = {
 	combobox: true,
 	disabled: false,
 };
+
+const GroupedSelectTemplate: Story = ( {
+	size,
+	multiple,
+	combobox,
+	disabled,
+} ) => (
+	<div className="w-80">
+		<Select
+			key={ `${ size }-${ multiple }-${ combobox }-${ disabled }` }
+			size={ size }
+			multiple={ multiple }
+			combobox={ combobox }
+			disabled={ disabled }
+			onChange={ ( value ) => value }
+		>
+			<Select.Button
+				placeholder={
+					multiple ? 'Select multiple options' : 'Select an option'
+				}
+				label={ multiple ? 'Select Multiple Colors' : 'Select a Color' }
+			/>
+			<Select.Portal>
+				<Select.Options>
+					{ groupedOptions.map( ( group ) => (
+						<Select.OptionGroup
+							key={ group.label }
+							label={ group.label }
+						>
+							{ group.options.map( ( option ) => (
+								<Select.Option key={ option.id } value={ option }>
+									{ option.name }
+								</Select.Option>
+							) ) }
+						</Select.OptionGroup>
+					) ) }
+				</Select.Options>
+			</Select.Portal>
+		</Select>
+	</div>
+);
+
+export const GroupedSelect = GroupedSelectTemplate.bind( {} );
+GroupedSelect.args = {
+	size: 'md',
+	multiple: false,
+	combobox: false,
+	disabled: false,
+};
+
+export const GroupedSelectWithSearch = GroupedSelectTemplate.bind( {} );
+GroupedSelectWithSearch.args = {
+	size: 'md',
+	multiple: false,
+	combobox: true,
+	disabled: false,
+};
+
+GroupedSelect.play = async ( { canvasElement } ) => {
+	const canvas = within( canvasElement );
+	const selectButton = await canvas.findByRole( 'combobox' );
+	await userEvent.click( selectButton );
+
+	const listBox = await screen.findByRole( 'listbox' );
+	expect( listBox ).toHaveTextContent( 'Warm Colors' );
+	expect( listBox ).toHaveTextContent( 'Cool Colors' );
+	expect( listBox ).toHaveTextContent( 'Red' );
+
+	const allOptions = await screen.findAllByRole( 'option' );
+	await userEvent.click( allOptions[ 0 ] );
+
+	expect( selectButton ).toHaveTextContent( 'Red' );
+};

src/components/select/select-types.ts

@@ -99,8 +99,17 @@ export interface SelectButtonProps extends AriaAttributes {
 	className?: string;
 }
 
+export interface SelectOptionGroupProps {
+	/** Label for the option group */
+	label: string;
+	/** Children options */
+	children: ReactNode;
+	/** Additional class name for the option group */
+	className?: string;
+}
+
 export interface SelectOptionsProps {
-	/** Expects the `Select.Option` children of the Select.Options Component. */
+	/** Expects the `Select.Option` or `Select.OptionGroup` children */
 	children?: ReactNode;
 	/** Key used to identify searched value using the key. Default is 'id'. */
 	searchBy?: string;