feat(design-system): add DsSplitButton component [AR-54024]

.changeset/real-maps-strive.md

@@ -0,0 +1,5 @@
+---
+'@drivenets/design-system': minor
+---
+
+Add `DsSplitButton` component

packages/design-system/src/components/ds-split-button/__tests__/ds-split-button.browser.test.tsx

@@ -0,0 +1,191 @@
+import { useState } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { page } from 'vitest/browser';
+import DsSplitButton from '../ds-split-button';
+import type { DsSelectProps } from '../../ds-select';
+
+const refreshOptions = [
+	{ label: '30s', value: '30' },
+	{ label: '1m', value: '60' },
+	{ label: '5m', value: '300' },
+];
+
+const defaultSelect = {
+	options: refreshOptions,
+	value: '30',
+	onValueChange: vi.fn(),
+	multiple: false,
+} as const satisfies Partial<DsSelectProps>;
+
+describe('DsSplitButton', () => {
+	it('calls slotProps.button.onClick when primary action is clicked', async () => {
+		const onClick = vi.fn();
+
+		await page.render(
+			<DsSplitButton
+				slotProps={{
+					button: {
+						icon: 'refresh',
+						'aria-label': 'Refresh',
+						onClick,
+					},
+					select: { ...defaultSelect, onValueChange: vi.fn() } as DsSelectProps,
+				}}
+			/>,
+		);
+
+		await page.getByRole('button', { name: 'Refresh' }).click();
+
+		expect(onClick).toHaveBeenCalledOnce();
+	});
+
+	it('updates select value when an option is chosen', async () => {
+		const onValueChange = vi.fn();
+
+		function Controlled() {
+			const [value, setValue] = useState('30');
+
+			return (
+				<DsSplitButton
+					slotProps={{
+						button: {
+							icon: 'refresh',
+							'aria-label': 'Refresh',
+							onClick: vi.fn(),
+						},
+						select: {
+							options: refreshOptions,
+							value,
+							onValueChange: (v) => {
+								onValueChange(v);
+								setValue(v);
+							},
+							multiple: false,
+						} as DsSelectProps,
+					}}
+				/>
+			);
+		}
+
+		await page.render(<Controlled />);
+
+		await page.getByRole('combobox').click();
+		await page.getByRole('option', { name: /1m/i }).click();
+
+		expect(onValueChange).toHaveBeenCalledWith('60');
+
+		const combobox = page.getByRole('combobox');
+		await expect.element(combobox).toHaveTextContent(/1m/);
+	});
+
+	it('disables primary button and select when disabled', async () => {
+		const onClick = vi.fn();
+		const onValueChange = vi.fn();
+
+		await page.render(
+			<DsSplitButton
+				disabled
+				slotProps={{
+					button: {
+						icon: 'refresh',
+						'aria-label': 'Refresh',
+						onClick,
+					},
+					select: {
+						options: refreshOptions,
+						value: '30',
+						onValueChange,
+						multiple: false,
+					} as DsSelectProps,
+				}}
+			/>,
+		);
+
+		const primary = page.getByRole('button', { name: 'Refresh', disabled: true });
+		const combobox = page.getByRole('combobox', { disabled: true });
+
+		await expect.element(primary).toBeDisabled();
+		await expect.element(combobox).toBeDisabled();
+
+		await primary.click({ force: true });
+		await combobox.click({ force: true });
+
+		expect(onClick).not.toHaveBeenCalled();
+		expect(onValueChange).not.toHaveBeenCalled();
+	});
+
+	it('sets loading state on primary button and blocks click', async () => {
+		const onClick = vi.fn();
+
+		await page.render(
+			<DsSplitButton
+				slotProps={{
+					button: {
+						loading: true,
+						icon: 'refresh',
+						'aria-label': 'Refresh',
+						onClick,
+					},
+					select: { ...defaultSelect, onValueChange: vi.fn() } as DsSelectProps,
+				}}
+			/>,
+		);
+
+		const primary = page.getByRole('button', { name: 'Refresh' });
+
+		await expect.element(primary).toHaveAttribute('aria-busy', 'true');
+		await expect.element(primary).toHaveAttribute('data-loading', '');
+
+		await primary.click({ force: true });
+
+		expect(onClick).not.toHaveBeenCalled();
+	});
+
+	it('keeps primary button and select the same height at medium size', async () => {
+		await page.render(
+			<DsSplitButton
+				size="medium"
+				slotProps={{
+					button: {
+						icon: 'refresh',
+						'aria-label': 'Refresh',
+					},
+					select: { ...defaultSelect, onValueChange: vi.fn() } as DsSelectProps,
+				}}
+			/>,
+		);
+
+		const buttonHeight = page
+			.getByRole('button', { name: 'Refresh' })
+			.element()
+			.getBoundingClientRect().height;
+		const selectControl = page.getByRole('combobox').element().parentElement as HTMLElement;
+		const selectHeight = selectControl.getBoundingClientRect().height;
+
+		expect(buttonHeight).toBe(selectHeight);
+	});
+
+	it('keeps primary button and select the same height at small size', async () => {
+		await page.render(
+			<DsSplitButton
+				size="small"
+				slotProps={{
+					button: {
+						icon: 'refresh',
+						'aria-label': 'Refresh',
+					},
+					select: { ...defaultSelect, onValueChange: vi.fn() } as DsSelectProps,
+				}}
+			/>,
+		);
+
+		const buttonHeight = page
+			.getByRole('button', { name: 'Refresh' })
+			.element()
+			.getBoundingClientRect().height;
+		const selectControl = page.getByRole('combobox').element().parentElement as HTMLElement;
+		const selectHeight = selectControl.getBoundingClientRect().height;
+
+		expect(buttonHeight).toBe(selectHeight);
+	});
+});

packages/design-system/src/components/ds-split-button/ds-split-button.module.scss

@@ -0,0 +1,98 @@
+$highlighted-z-index: 1;
+$divider-z-index: $highlighted-z-index + 1;
+$divider-width: 1px;
+$border-width: 1px;
+$button-transition-duration: 0.15s;
+
+@mixin when-button-disabled {
+	.root:has(.actionButton:disabled) & {
+		@content;
+	}
+}
+
+@mixin when-select-disabled {
+	.root:has(.select[data-disabled]) & {
+		@content;
+	}
+}
+
+@mixin when-button-highlighted {
+	.root:has(.actionButton:not(:disabled):is(:hover, :focus-visible, :active, [data-selected='true'])) & {
+		@content;
+	}
+}
+
+@mixin when-select-highlighted {
+	.root:has(
+			.select:not([data-disabled]):is(:hover, :active, [data-state='open']),
+			.select:not([data-disabled]) :focus-visible
+		)
+		& {
+		@content;
+	}
+}
+
+.root {
+	display: inline-flex;
+
+	.actionButton {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+}
+
+.actionButton {
+	@include when-button-highlighted {
+		z-index: $highlighted-z-index;
+		transition: border-color $button-transition-duration;
+	}
+
+	&:not(:disabled):is(:hover, :active, [data-selected='true']) {
+		border-right-color: var(--border-border-secondary-hover);
+	}
+
+	&:not(:disabled):focus-visible {
+		border-right-color: var(--border-border-inverse);
+	}
+}
+
+.select {
+	margin-left: -$divider-width;
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+}
+
+.dividerAnchor {
+	position: relative;
+}
+
+.dividerWrapper {
+	position: absolute;
+	top: $border-width;
+	bottom: $border-width;
+	left: -$divider-width;
+	z-index: $divider-z-index;
+	width: $divider-width;
+	padding: var(--spacing-3xs) 0;
+	background-color: var(--background-background);
+
+	@include when-button-highlighted {
+		display: none;
+	}
+	@include when-select-highlighted {
+		display: none;
+	}
+}
+
+.divider {
+	background-color: var(--color-border-secondary);
+	width: $divider-width;
+	height: 100%;
+
+	@include when-button-disabled {
+		background-color: var(--border-border-disabled);
+	}
+	@include when-select-disabled {
+		background-color: var(--border-border-disabled);
+	}
+}

packages/design-system/src/components/ds-split-button/ds-split-button.stories.tsx

@@ -0,0 +1,97 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
+import DsSplitButton from './ds-split-button';
+import { splitButtonSizes } from './ds-split-button.types';
+import type { DsSelectProps } from '../ds-select';
+
+const refreshOptions = [
+	{ label: '30s', value: '30' },
+	{ label: '1m', value: '60' },
+	{ label: '5m', value: '300' },
+	{ label: '10m', value: '600' },
+];
+
+const meta: Meta<typeof DsSplitButton> = {
+	title: 'Design System/SplitButton',
+	component: DsSplitButton,
+	parameters: {
+		layout: 'centered',
+	},
+	args: {
+		size: 'medium',
+		disabled: false,
+		slotProps: {
+			button: { icon: 'refresh' },
+			select: {
+				options: refreshOptions,
+				value: '30',
+				onValueChange: fn(),
+				multiple: false,
+			},
+		},
+	},
+	argTypes: {
+		size: { control: 'radio', options: splitButtonSizes },
+		className: { table: { disable: true } },
+		style: { table: { disable: true } },
+		ref: { table: { disable: true } },
+		slotProps: { table: { disable: true } },
+	},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DsSplitButton>;
+
+export const Default: Story = {
+	render: (args) => {
+		const [value, setValue] = useState('30');
+		const [loading, setLoading] = useState(false);
+
+		const handleAction = () => {
+			setLoading(true);
+			setTimeout(() => setLoading(false), 2000);
+		};
+
+		return (
+			<DsSplitButton
+				{...args}
+				slotProps={{
+					button: {
+						...args.slotProps.button,
+						loading,
+						icon: 'refresh',
+						onClick: handleAction,
+					},
+					select: {
+						...args.slotProps.select,
+						value,
+						onValueChange: setValue,
+					} as DsSelectProps,
+				}}
+			/>
+		);
+	},
+};
+
+export const Loading: Story = {
+	args: {
+		slotProps: {
+			button: {
+				loading: true,
+			},
+			select: {
+				options: refreshOptions,
+				value: '30',
+				onValueChange: fn(),
+			},
+		},
+	},
+};
+
+export const Disabled: Story = {
+	args: {
+		disabled: true,
+	},
+};