CR changes v3

Author: mmurawski-dn

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

@@ -173,11 +173,11 @@ describe('DsButtonV3', () => {
 		expect(ref.current?.textContent).toBe('Ref');
 	});
 
-	it('is disabled and keeps normal colors when loading', async () => {
+	it('loading without disabled keeps normal colors', async () => {
 		const onClick = vi.fn();
 
 		await page.render(
-			<DsButtonV3 loading disabled={false} onClick={onClick}>
+			<DsButtonV3 loading onClick={onClick}>
 				Saving
 			</DsButtonV3>,
 		);
@@ -190,6 +190,20 @@ describe('DsButtonV3', () => {
 		expect(onClick).not.toHaveBeenCalled();
 	});
 
+	it('loading + disabled shows spinner with disabled styling', async () => {
+		await page.render(
+			<DsButtonV3 loading disabled>
+				Saving
+			</DsButtonV3>,
+		);
+
+		const button = page.getByRole('button', { name: 'Saving', disabled: true });
+
+		await expect.element(button).toBeDisabled();
+		await expect.element(button).not.toHaveClass(styles.loading);
+		await expect.element(button).toHaveAttribute('aria-busy', 'true');
+	});
+
 	it('selected + disabled does not remove selected styling', async () => {
 		await page.render(
 			<DsButtonV3 selected disabled>

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

@@ -17,6 +17,7 @@ const meta: Meta<typeof DsButtonV3> = {
 		size: { control: 'select', options: buttonV3Sizes },
 		onDark: { control: 'boolean' },
 		loading: { control: 'boolean' },
+		disabled: { control: 'boolean' },
 		className: { table: { disable: true } },
 		style: { table: { disable: true } },
 		ref: { table: { disable: true } },

packages/design-system/src/components/ds-button/versions/ds-button-v3/ds-button-v3.tsx

@@ -48,7 +48,7 @@ const DsButtonV3 = ({
 			className={classNames(
 				styles.root,
 				sizeClassMap[size],
-				{ [styles.iconOnly]: isIconOnly, [styles.loading]: loading },
+				{ [styles.iconOnly]: isIconOnly, [styles.loading]: loading && !disabled },
 				className,
 			)}
 			style={style}