chore: fix checkbox styling.

nl-design-system · Dec 12, 2024 · 6798ed9 · 6798ed9
1 parent c039751
commit 6798ed9
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/packages/component-library-angular/src/checkbox/component.ts b/packages/component-library-angular/src/checkbox/component.ts
@@ -17,4 +17,11 @@ export class TilburgCheckbox {
   onCheckChange(event: Event) {
     this.checkChanged.emit(event);
   }
+
+  mouseUp(event: MouseEvent) {
+    (event.target as HTMLInputElement).classList.remove('tilburg-checkbox-pressed');
+  }
+  mouseDown(event: MouseEvent) {
+    (event.target as HTMLInputElement).classList.add('tilburg-checkbox-pressed');
+  }
 }
diff --git a/packages/component-library-angular/src/checkbox/index.html b/packages/component-library-angular/src/checkbox/index.html
@@ -1,8 +1,10 @@
 <input
   type="checkbox"
   [id]="id"
-  [attr.aria-label]="ariaLabel"
+  [disabled]="disabled"
   [checked]="checked"
   (change)="onCheckChange($event)"
+  (mouseup)="mouseUp($event)"
+  (mousedown)="mouseDown($event)"
   utrecht-checkbox
 />
diff --git a/packages/component-library-angular/src/checkbox/index.scss b/packages/component-library-angular/src/checkbox/index.scss
@@ -16,7 +16,7 @@
     border-color: var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));
   }
 
-  &:focus-visible:not(:disabled) {
+  &:focus-visible:not(:disabled, [aria-disabled="true"]) {
     background-color: var(--utrecht-checkbox-focus-background-color, var(--utrecht-checkbox-background-color));
     border-color: var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));
     border-width: var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width));
@@ -46,8 +46,8 @@
       border-color: var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));
     }
 
-    &:focus,
-    &:focus-visible:not(:active) {
+    &:focus.tilburg-checkbox-pressed:active:not([aria-disabled="true"]),
+    &:focus-visible:not(:active, .tilburg-checkbox-pressed, [aria-disabled="true"]) {
       background-color: #e6f6ff;
       background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
       border-color: var(--utrecht-form-control-focus-border-color, var(--utrecht-form-control-focus-border-color));