From 29d7be7355b71cb00940ce6dbccb1549bf66043a Mon Sep 17 00:00:00 2001 From: Roel Berends Date: Mon, 18 Nov 2024 12:02:33 +0100 Subject: [PATCH 1/2] chore: new state pressed radiobutton --- .../src/radio-button/component.ts | 8 +++++ .../src/radio-button/index.html | 2 ++ .../src/radio-button/index.scss | 36 +++++++++---------- 3 files changed, 28 insertions(+), 18 deletions(-) diff --git a/packages/component-library-angular/src/radio-button/component.ts b/packages/component-library-angular/src/radio-button/component.ts index 36656555..7a9acc90 100644 --- 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).click(); + } } diff --git a/packages/component-library-angular/src/radio-button/index.html b/packages/component-library-angular/src/radio-button/index.html index 15b19013..ab97265a 100644 --- 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 index be7188ce..ce4e30e7 100644 --- 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):checked.tilburg-radio-pressed { --_utrecht-radio-button-color: black; } } From 216a41d16282e0a9aaab25cd60f52819a383696f Mon Sep 17 00:00:00 2001 From: Roel Berends Date: Tue, 19 Nov 2024 11:08:32 +0100 Subject: [PATCH 2/2] chore: improve radio button feedback --- .../component-library-angular/src/radio-button/component.ts | 2 +- packages/component-library-angular/src/radio-button/index.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/component-library-angular/src/radio-button/component.ts b/packages/component-library-angular/src/radio-button/component.ts index 7a9acc90..f7700b4c 100644 --- a/packages/component-library-angular/src/radio-button/component.ts +++ b/packages/component-library-angular/src/radio-button/component.ts @@ -23,6 +23,6 @@ export class TilburgRadioButton { } mouseDown(event: MouseEvent) { (event.target as HTMLInputElement).classList.add('tilburg-radio-pressed'); - (event.target as HTMLInputElement).click(); + (event.target as HTMLInputElement).focus(); } } diff --git a/packages/component-library-angular/src/radio-button/index.scss b/packages/component-library-angular/src/radio-button/index.scss index ce4e30e7..43bb30fa 100644 --- a/packages/component-library-angular/src/radio-button/index.scss +++ b/packages/component-library-angular/src/radio-button/index.scss @@ -63,7 +63,7 @@ } &:focus-visible:not([aria-disabled="true"], :disabled):checked, - &:focus:not([aria-disabled="true"], :disabled):checked.tilburg-radio-pressed { + &:focus:not([aria-disabled="true"], :disabled).tilburg-radio-pressed { --_utrecht-radio-button-color: black; } }