diff --git a/packages/components/src/components/radio-button/radio-button.css b/packages/components/src/components/radio-button/radio-button.css index c939e3fbc0..49165ce00f 100644 --- 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 index 939a051c17..0dab024edf 100644 --- 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 elements, // otherwise they stayed `checked` after being clicked once, forever. uncheckSiblings() { @@ -137,7 +128,7 @@ export class RadioButton { return ( -
+
- + {!!this.helperText && (