Feat/new angular components storybook pressed radio (#198)

We now have better focus visual behaviour
nl-design-system · Nov 20, 2024 · e325381 · e325381
1 parent 7890e86
commit e325381
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 18 deletions.
diff --git a/packages/component-library-angular/src/radio-button/component.ts b/packages/component-library-angular/src/radio-button/component.ts
@@ -16,5 +16,13 @@ export class TilburgRadioButton {
   @Input() invalid: boolean = false;
   @Input() disabled: boolean = false;
   @Input() checked: boolean = false;
+
   constructor() {}
+  mouseUp(event: MouseEvent) {
+    (event.target as HTMLInputElement).classList.remove('tilburg-radio-pressed');
+  }
+  mouseDown(event: MouseEvent) {
+    (event.target as HTMLInputElement).classList.add('tilburg-radio-pressed');
+    (event.target as HTMLInputElement).focus();
+  }
 }
diff --git a/packages/component-library-angular/src/radio-button/index.html b/packages/component-library-angular/src/radio-button/index.html
@@ -8,5 +8,7 @@
   [attr.value]="value"
   [formControl]="control"
   [checked]="checked"
+  (mouseup)="mouseUp($event)"
+  (mousedown)="mouseDown($event)"
   utrecht-radio-button
 />
diff --git a/packages/component-library-angular/src/radio-button/index.scss b/packages/component-library-angular/src/radio-button/index.scss
@@ -18,8 +18,15 @@
       filter: brightness(90%);
     }
 
-    &:focus,
-    &:focus-visible {
+    &:focus-visible:not([aria-disabled="true"], :disabled, .tilburg-radio-pressed) {
+      background-color: var(--utrecht-radio-button-disabled-background-color);
+      border-color: var(--utrecht-form-control-focus-border-color);
+      border-width: 1px;
+      outline: dashed black thin;
+    }
+
+    &:focus.tilburg-radio-pressed,
+    &:focus-visible:not(.tilburg-radio-pressed) {
       --utrecht-radio-button-color: black;
       --_utrecht-radio-button-color: black;
       --utrecht-radio-button-background-color: #e6f6ff;
@@ -43,27 +50,20 @@
 
       background-color: #e6f6ff;
     }
-  }
-
-  &:invalid:not(:checked) {
-    background-color: #ffe1e0;
-  }
 
-  &:focus-visible:not([aria-disabled="true"], :disabled) {
-    background-color: var(--utrecht-radio-button-disabled-background-color);
-    border-color: var(--utrecht-form-control-focus-border-color);
-    border-width: 1px;
-    outline: dashed black thin;
-  }
+    &:focus:not([aria-disabled="true"], :disabled) {
+      background-color: var(--utrecht-radio-button-disabled-background-color);
+      border-color: var(--utrecht-form-control-focus-border-color);
+      border-width: 1px;
+    }
 
-  &:focus:not([aria-disabled="true"], :disabled) {
-    background-color: var(--utrecht-radio-button-disabled-background-color);
-    border-color: var(--utrecht-form-control-focus-border-color);
-    border-width: 1px;
+    &:invalid:not(:checked) {
+      background-color: #ffe1e0;
+    }
   }
 
   &:focus-visible:not([aria-disabled="true"], :disabled):checked,
-  &:focus:not([aria-disabled="true"], :disabled):checked {
+  &:focus:not([aria-disabled="true"], :disabled).tilburg-radio-pressed {
     --_utrecht-radio-button-color: black;
   }
 }