feat(button): content align to start when drop-down indicator is set (V…

…IV-2200) (#1962)

libs/components/src/lib/button/README.md

@@ -125,6 +125,37 @@ Use the `icon` slot to customise icons. If set, the icon attribute is ignored.
 </style>
 ```
 
+## CSS Variables
+
+### Button Content Alignment
+
+When `dropdown-indicator` is set button, the content alignment is set to start.  
+If center is needed, set `--button-content-alignment: center;`.
+
+```html preview
+<vwc-button
+	class="vwc-button"
+	dropdown-indicator
+	appearance="outlined-light"
+	label="aligned to start content"
+></vwc-button>
+<vwc-button
+	class="vwc-button vwc-button-center"
+	dropdown-indicator
+	appearance="outlined-light"
+	label="centered content"
+></vwc-button>
+
+<style>
+	.vwc-button {
+		inline-size: 300px;
+	}
+	.vwc-button-center {
+		--button-content-alignment: center;
+	}
+</style>
+```
+
 ## API Reference
 
 ### Properties

libs/components/src/lib/button/VARIATIONS.md

@@ -378,3 +378,7 @@ When the button is used to trigger a menu / dropdown, you can set `dropdown-indi
 	<vwc-menu-item icon="delete-line" text="Archive"></vwc-menu-item>
 </vwc-menu>
 ```
+
+<vwc-note connotation="information" icon="info-line">
+	<p>When setting <code>dropdown-indicator</code> the Button's content alignment changes from center to start. You can change it back to center using <code>--button-content-alignment</code> CSS variable </p>
+</vwc-note>

libs/components/src/lib/button/button.scss

@@ -246,6 +246,14 @@ slot[name='icon'] {
 	.control.stacked & {
 		flex-direction: column;
 	}
+
+	:host([dropdown-indicator]) & {
+		justify-content: var(#{variables.$button-content-alignment}, flex-start);
+	}
+	:host([dropdown-indicator][stacked]) & {
+		align-items: var(#{variables.$button-content-alignment}, flex-start);
+		justify-content: center;
+	}
 }
 
 :host(:not([icon])) .pending {

libs/components/src/lib/button/partials/variables.scss

@@ -4,3 +4,4 @@ $block-size: --_button-block-size;
 $button-line-clamp: --button-line-clamp;
 $button-border-radius: --_button-border-radius;
 $chevron-size: --_button-chevron-size;
+$button-content-alignment: --button-content-alignment;

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

@@ -221,11 +221,15 @@ test('should show the component', async ({ page }: { page: Page }) => {
 		<vwc-button dropdown-indicator icon="user-line" stacked appearance="filled" label="condensed" size="condensed"></vwc-button>
 		<vwc-button dropdown-indicator icon="user-line" stacked appearance="filled" label="normal" size="normal"></vwc-button>
 		<vwc-button dropdown-indicator icon="user-line" stacked appearance="filled" label="expanded" size="expanded"></vwc-button>
+	</div>
+		<div style="margin: 5px;">
+		<vwc-button dropdown-indicator icon="user-line"  appearance="filled" label="align-start" size="normal" style="width: 280px;"></vwc-button>
+		<vwc-button dropdown-indicator icon="user-line"  appearance="filled" label="keep align-center" size="normal" style="width: 280px; --button-content-alignment: center;"></vwc-button>
 	</div>
 	</div>
 	`;
 
-	await page.setViewportSize({ width: 500, height: 1200 });
+	await page.setViewportSize({ width: 600, height: 1500 });
 
 	await loadComponents({
 		page,