fix(button): remove class icon-only with drop-down indicator (VIV-2240)…

… (#2050)

libs/components/src/lib/button/button.spec.ts

@@ -205,17 +205,35 @@ describe('vwc-button', () => {
 	});
 
 	describe('icon-only', () => {
-		it('sets correct internal icon-only style', async () => {
-			const getControlIconOnly = () =>
-				element.shadowRoot?.querySelector('.control.icon-only');
-			const controlIconOnlyBefore = getControlIconOnly();
+		it('should sets correct internal icon-only style when icon is set and label is undefined', async () => {
+			const control = element.shadowRoot?.querySelector(`.control`);
 
 			element.icon = 'home';
+			element.label = undefined;
 			await elementUpdated(element);
 
-			const controlIconOnlyAfter = getControlIconOnly();
-			expect(controlIconOnlyBefore).toBeNull();
-			expect(controlIconOnlyAfter).toBeInstanceOf(Element);
+			expect(control?.classList.contains(`icon-only`)).toBeTruthy();
+
+			element.label = 'button';
+			await elementUpdated(element);
+
+			expect(control?.classList.contains(`icon-only`)).toBeFalsy();
+		});
+
+		it('should remove icon-only when drop-down-indicator is added, icon is set and label is undefined', async () => {
+			const control = element.shadowRoot?.querySelector(`.control`);
+
+			element.icon = 'home';
+			element.label = undefined;
+			element.dropdownIndicator = true;
+			await elementUpdated(element);
+
+			expect(control?.classList.contains(`icon-only`)).toBeFalsy();
+
+			element.dropdownIndicator = false;
+			await elementUpdated(element);
+
+			expect(control?.classList.contains(`icon-only`)).toBeTruthy();
 		});
 
 		it('should set icon-only class if slot name="icon" is slotted', async () => {
@@ -231,6 +249,24 @@ describe('vwc-button', () => {
 				getControlElement(element).classList.contains('icon-only')
 			).toEqual(true);
 		});
+
+		it('should add icon-only when drop-down-indicator is added, slotted icon is set and label is undefined', async () => {
+			const control = element.shadowRoot?.querySelector(`.control`);
+
+			const slottedElement = document.createElement('span');
+			slottedElement.slot = 'icon';
+			element.appendChild(slottedElement);
+			element.label = undefined;
+			element.dropdownIndicator = true;
+
+			await elementUpdated(element);
+			expect(control?.classList.contains(`icon-only`)).toBeFalsy();
+
+			element.dropdownIndicator = false;
+			await elementUpdated(element);
+
+			expect(control?.classList.contains(`icon-only`)).toBeTruthy();
+		});
 	});
 
 	describe.each([

libs/components/src/lib/button/button.template.ts

@@ -36,6 +36,7 @@ const getClasses = ({
 	iconSlottedContent,
 	ariaExpanded,
 	active,
+	dropdownIndicator,
 }: Button) =>
 	classNames(
 		'control',
@@ -46,7 +47,10 @@ const getClasses = ({
 		],
 		[`shape-${shape}`, Boolean(shape)],
 		[`size-${size}`, Boolean(size)],
-		['icon-only', !label && !!(icon || iconSlottedContent?.length)],
+		[
+			'icon-only',
+			!label && !!(icon || iconSlottedContent?.length) && !dropdownIndicator,
+		],
 		['icon-trailing', iconTrailing],
 		['stacked', Boolean(stacked)],
 		['active', ariaExpanded === 'true' || active]

libs/components/src/lib/button/ui.test.ts

@@ -201,6 +201,11 @@ test('should show the component', async ({ page }: { page: Page }) => {
 		<vwc-button style="width: 200px" appearance="filled" dropdown-indicator label="wide"></vwc-button>
 		<vwc-button style="width: 100px" appearance="filled" dropdown-indicator label="too small for label"></vwc-button>
 		<vwc-button appearance="filled" dropdown-indicator icon="user-line"></vwc-button>
+	</div>
+		<div style="margin: 5px;">
+		<vwc-button style="width: 200px" appearance="filled" dropdown-indicator shape="pill" label="wide"></vwc-button>
+		<vwc-button style="width: 100px" appearance="filled" dropdown-indicator shape="pill" label="too small for label"></vwc-button>
+		<vwc-button appearance="filled" dropdown-indicator shape="pill" icon="user-line"></vwc-button>
 	</div>
 	<div style="margin: 5px;">
 		<vwc-button appearance="filled" dropdown-indicator label="expanded" aria-expanded="true"></vwc-button>