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/ds-split-button.module.scss

@@ -0,0 +1,107 @@
+$highlighted-z-index: 1;
+$divider-z-index: $highlighted-z-index + 1;
+$divider-width: 1px;
+$border-width: 1px;
+
+@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)) & {
+		@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: none !important; // TODO: remove once DsButtonV3 is used
+}
+
+.root .actionButton:disabled .actionContent {
+	border-color: var(--color-border-disabled); // TODO: remove once DsButtonV3 is used
+}
+
+.actionButton {
+	.actionContent {
+		height: 36px !important; // TODO: remove once DsButtonV3 is used
+		width: 36px !important; // TODO: remove once DsButtonV3 is used
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+
+		@include when-button-highlighted {
+			z-index: $highlighted-z-index;
+		}
+	}
+}
+
+.select {
+	margin-left: -$divider-width;
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+
+	// TODO: remove once PR is merged https://github.com/drivenets/design-system/pull/346
+	@include when-select-disabled {
+		background-color: var(--background-background);
+
+		& * {
+			color: var(--color-font-disabled) !important;
+		}
+	}
+}
+
+.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(--color-border-disabled);
+	}
+	@include when-select-disabled {
+		background-color: var(--color-border-disabled);
+	}
+}

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

@@ -0,0 +1,5 @@
+@use '../../styles/root_updated';
+
+.spinner {
+	color: var(--background-background-primary);
+}

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

@@ -0,0 +1,110 @@
+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 { DsIcon } from '../ds-icon';
+import { DsSpinner } from '../ds-spinner';
+import styles from './ds-split-button.stories.module.scss';
+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: {
+				children: <DsIcon icon="refresh" size="small" />,
+				'aria-label': 'Refresh now',
+			},
+			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,
+						children: loading ? (
+							<DsSpinner size="small" className={styles.spinner} />
+						) : (
+							<DsIcon icon="refresh" size="small" />
+						),
+						onClick: handleAction,
+						disabled: loading,
+						'aria-label': loading ? 'Refreshing' : 'Refresh now',
+					},
+					select: {
+						...args.slotProps.select,
+						value,
+						onValueChange: setValue,
+					} as DsSelectProps,
+				}}
+			/>
+		);
+	},
+};
+
+export const Loading: Story = {
+	args: {
+		slotProps: {
+			button: {
+				children: <DsSpinner size="small" className={styles.spinner} />,
+				disabled: true,
+				'aria-label': 'Refreshing',
+			},
+			select: {
+				options: refreshOptions,
+				value: '30',
+				onValueChange: fn(),
+			},
+		},
+	},
+};
+
+export const Disabled: Story = {
+	args: {
+		disabled: true,
+	},
+};

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

@@ -0,0 +1,59 @@
+import classNames from 'classnames';
+import { DsButton } from '../ds-button';
+import { DsSelect } from '../ds-select';
+import styles from './ds-split-button.module.scss';
+import type { DsSplitButtonProps } from './ds-split-button.types';
+import { getSelectSize } from './ds-split-button.utils';
+
+const DsSplitButton = ({
+	ref,
+	className,
+	style,
+	size = 'medium',
+	disabled,
+	slotProps,
+}: DsSplitButtonProps) => {
+	const {
+		className: buttonClassName,
+		contentClassName,
+		size: buttonSize,
+		disabled: buttonDisabled,
+		...buttonRest
+	} = slotProps.button;
+
+	const {
+		className: selectClassName,
+		size: selectSize,
+		disabled: selectDisabled,
+		...selectRest
+	} = slotProps.select;
+
+	return (
+		<div ref={ref} className={classNames(styles.root, className)} style={style}>
+			<DsButton
+				{...buttonRest}
+				design="v1.2"
+				buttonType="secondary"
+				size={buttonSize ?? size}
+				disabled={buttonDisabled ?? disabled}
+				className={classNames(styles.actionButton, buttonClassName)}
+				contentClassName={classNames(styles.actionContent, contentClassName)}
+			/>
+
+			<div className={styles.dividerAnchor}>
+				<div className={styles.dividerWrapper}>
+					<div className={styles.divider} />
+				</div>
+			</div>
+
+			<DsSelect
+				{...selectRest}
+				size={selectSize ?? getSelectSize(size)}
+				disabled={selectDisabled ?? disabled}
+				className={classNames(styles.select, selectClassName)}
+			/>
+		</div>
+	);
+};
+
+export default DsSplitButton;

packages/design-system/src/components/ds-split-button/ds-split-button.types.ts

@@ -0,0 +1,22 @@
+import type { CSSProperties, Ref } from 'react';
+import type { DsButtonUnifiedProps } from '../ds-button';
+import type { DsSelectProps } from '../ds-select';
+
+type ButtonV12Props = Extract<DsButtonUnifiedProps, { design: 'v1.2' }>;
+
+export const splitButtonSizes = ['medium', 'small'] as const;
+export type SplitButtonSize = (typeof splitButtonSizes)[number];
+
+export interface DsSplitButtonSlotProps {
+	button: Partial<ButtonV12Props>;
+	select: DsSelectProps;
+}
+
+export interface DsSplitButtonProps {
+	ref?: Ref<HTMLDivElement>;
+	className?: string;
+	style?: CSSProperties;
+	size?: SplitButtonSize;
+	disabled?: boolean;
+	slotProps: DsSplitButtonSlotProps;
+}

packages/design-system/src/components/ds-split-button/ds-split-button.utils.ts

@@ -0,0 +1,6 @@
+import type { SelectSize } from '../ds-select';
+import type { SplitButtonSize } from './ds-split-button.types';
+
+export const getSelectSize = (size: SplitButtonSize): SelectSize => {
+	return size === 'medium' ? 'default' : 'small';
+};

packages/design-system/src/components/ds-split-button/index.ts

@@ -0,0 +1,2 @@
+export { default as DsSplitButton } from './ds-split-button';
+export type { DsSplitButtonProps, DsSplitButtonSlotProps } from './ds-split-button.types';

packages/design-system/src/index.ts

@@ -42,6 +42,7 @@ export * from './components/ds-select';
 export * from './components/ds-skeleton';
 export * from './components/ds-smart-tabs';
 export * from './components/ds-spinner';
+export * from './components/ds-split-button';
 export * from './components/ds-status-badge';
 export * from './components/ds-stepper';
 export * from './components/ds-system-status';