fix(radio-button): polish click handling and hover/active states (#2131)

telekom · Sep 19, 2023 · 9ea4c6a · 9ea4c6a
1 parent 2f41b30
commit 9ea4c6a
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 17 deletions.
diff --git a/packages/components/src/components/radio-button/radio-button.css b/packages/components/src/components/radio-button/radio-button.css
@@ -74,7 +74,6 @@ scale-radio-button {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  cursor: pointer;
   width: fit-content;
 }
 
@@ -128,15 +127,15 @@ scale-icon-alert-error {
   cursor: pointer;
 }
 
-.radio-button:hover input:not(:checked):not([disabled]) {
+.radio-button input:not(:checked):not([disabled]):hover {
   box-shadow: none;
   border-color: var(--telekom-color-ui-border-hovered);
   background-color: var(--telekom-color-ui-state-fill-hovered);
 }
-.radio-button:hover input:not(:checked):not([disabled]) ~ label {
+.radio-button input:not(:checked):not([disabled]):hover ~ label {
   color: var(--color-primary-hover);
 }
-.radio-button:active input:not(:checked):not([disabled]) {
+.radio-button input:not(:checked):not([disabled]):active {
   border-color: var(--telekom-color-ui-border-pressed);
   background-color: var(--telekom-color-ui-state-fill-pressed);
 }

diff --git a/packages/components/src/components/radio-button/radio-button.tsx b/packages/components/src/components/radio-button/radio-button.tsx
@@ -93,15 +93,6 @@ export class RadioButton {
     }
   };
 
-  // Prevent click event being fired twice when the target is the label.
-  handleClick = (event: any) => {
-    event.stopPropagation();
-    if (!this.disabled) {
-      this.checked = true;
-      this.uncheckSiblings();
-    }
-  };
-
   // We manually set `checked` to false on sibling <scale-radio-button> elements,
   // otherwise they stayed `checked` after being clicked once, forever.
   uncheckSiblings() {
@@ -137,7 +128,7 @@ export class RadioButton {
 
     return (
       <Host>
-        <div class={this.getCssClassMap()} onClick={this.handleClick}>
+        <div class={this.getCssClassMap()}>
           <input
             type="radio"
             name={this.name}
@@ -149,9 +140,7 @@ export class RadioButton {
             {...ariaInvalidAttr}
             {...(this.helperText ? ariaDescribedByAttr : {})}
           />
-          <label htmlFor={this.inputId} onClick={this.handleClick}>
-            {this.label}
-          </label>
+          <label htmlFor={this.inputId}>{this.label}</label>
           {!!this.helperText && (
             <div
               class="radio-button__meta"