From 5423cb80520f93aae52eab4ff6a5477dcd072f09 Mon Sep 17 00:00:00 2001
From: Arturo Castillo Delgado <ac@iconstorm.com>
Date: Wed, 13 Sep 2023 16:21:37 +0200
Subject: [PATCH] fix(radio-button): ensure change event is emitted when
 clicking input-label gap (#2123)

---
 .../components/src/components/radio-button/radio-button.css  | 5 +++--
 .../radio-button-group/RadioButtonGroup.stories.mdx          | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/radio-button/radio-button.css b/packages/components/src/components/radio-button/radio-button.css
index 8f0a6396f8..c939e3fbc0 100644
--- a/packages/components/src/components/radio-button/radio-button.css
+++ b/packages/components/src/components/radio-button/radio-button.css
@@ -40,12 +40,12 @@ scale-radio-button {
   --transition-label: var(--transition);
   --font-weight-label: var(--telekom-typography-font-weight-medium);
   --color-label: var(--color-text);
+  --spacing-label: var(--telekom-spacing-composition-space-04);
 
   /*control*/
   --width-control: var(--telekom-spacing-composition-space-07);
   --height-control: var(--telekom-spacing-composition-space-07);
   --transition-control: var(--transition);
-  --spacing-control: 0 var(--telekom-spacing-composition-space-04) 0 0;
   --background-color-control: var(--telekom-color-ui-base);
   --border-control: var(--telekom-spacing-composition-space-01) solid
     var(--telekom-color-ui-border-standard);
@@ -114,6 +114,7 @@ scale-icon-alert-error {
   font-weight: var(--font-weight-label);
   cursor: pointer;
   line-height: var(--telekom-typography-line-spacing-standard);
+  padding-left: var(--spacing-label);
 }
 .radio-button input {
   width: var(--width-control);
@@ -123,7 +124,7 @@ scale-icon-alert-error {
   -webkit-appearance: none;
   background-color: var(--telekom-color-ui-state-fill-standard);
   border: var(--border-control);
-  margin: var(--spacing-control);
+  margin: 0;
   cursor: pointer;
 }
 
diff --git a/packages/storybook-vue/stories/components/radio-button-group/RadioButtonGroup.stories.mdx b/packages/storybook-vue/stories/components/radio-button-group/RadioButtonGroup.stories.mdx
index 2909e317da..e7d12e2a55 100644
--- a/packages/storybook-vue/stories/components/radio-button-group/RadioButtonGroup.stories.mdx
+++ b/packages/storybook-vue/stories/components/radio-button-group/RadioButtonGroup.stories.mdx
@@ -164,12 +164,12 @@ scale-radio-button {
   --transition-label: var(--transition);
   --font-weight-label: var(--telekom-typography-font-weight-medium);
   --color-label: var(--color-text);
+  --spacing-label: var(--telekom-spacing-composition-space-04);
 
   /*control*/
   --width-control: var(--telekom-spacing-composition-space-07);
   --height-control: var(--telekom-spacing-composition-space-07);
   --transition-control: var(--transition);
-  --spacing-control: 0 var(--telekom-spacing-composition-space-04) 0 0;
   --background-color-control: var(--telekom-color-ui-base);
   --border-control: var(--telekom-spacing-composition-space-01) solid
     var(--telekom-color-ui-border-standard);