fix(NcActionButtonGroup): Do not use icon but primary color to mark s…

…elected button

Signed-off-by: Ferdinand Thiessen <[email protected]>

src/components/NcActionButtonGroup/NcActionButtonGroup.vue

@@ -29,19 +29,22 @@ This should be used sparingly for accessibility.
 		<NcActions>
 			<NcActionButtonGroup name="Text alignment">
 				<NcActionButton aria-label="Align left"
-					@click="showMessage('Align left')">
+					:pressed="alignment === 'l'"
+					@click="alignment = 'l'">
 					<template #icon>
 						<AlignLeft :size="20" />
 					</template>
 				</NcActionButton>
 				<NcActionButton aria-label="Align center"
-					@click="showMessage('Align center')">
+					:pressed="alignment === 'c'"
+					@click="alignment = 'c'">
 					<template #icon>
 						<AlignCenter :size="20" />
 					</template>
 				</NcActionButton>
 				<NcActionButton aria-label="Align right"
-					@click="showMessage('Align Right')">
+					:pressed="alignment === 'r'"
+					@click="alignment = 'r'">
 					<template #icon>
 						<AlignRight :size="20" />
 					</template>
@@ -70,6 +73,9 @@ export default {
 		AlignCenter,
 		Plus,
 	},
+	data() {
+		return { alignment: 'l' }
+	},
 	methods: {
 		showMessage(msg) {
 			alert(msg)
@@ -121,6 +127,7 @@ export default defineComponent({
 
 	ul.nc-button-group-content {
 		display: flex;
+		gap: 4px; // required for the focus-visible outline
 		justify-content: space-between;
 		li {
 			flex: 1 1;
@@ -132,6 +139,20 @@ export default defineComponent({
 			width: 100%;
 			display: flex;
 			justify-content: center;
+
+			&.action-button--active {
+				background-color: var(--color-primary-element);
+				border-radius: var(--border-radius-large);
+				color: var(--color-primary-element-text);
+
+				&:hover, &:focus, &:focus-within {
+					background-color: var(--color-primary-element-hover);
+				}
+			}
+
+			.action-button__pressed-icon {
+				display: none;
+			}
 		}
 	}
 }