Merge pull request #492 from Infineon/287-design-review-component-rad…

…io-button radio-button design review updates
Infineon · Sep 11, 2023 · 7b4ea88 · 7b4ea88
2 parents 21ec1cb + 63ef51d
commit 7b4ea88
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 22 deletions.
diff --git a/packages/components/src/components/radio-button/radio-button.e2e.ts b/packages/components/src/components/radio-button/radio-button.e2e.ts
@@ -12,17 +12,6 @@ describe('ifx-radio-button', () => {
 
 
 
-  it('renders changes to the error prop', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<ifx-radio-button>Error Test</ifx-radio-button>');
-    const component = await page.find('ifx-radio-button');
-
-    component.setProperty('error', true);
-    await page.waitForChanges();
-    const element = await page.find('ifx-radio-button >>> .label');
-    expect(element).toHaveClass('error');
-  });
-
 
 
   it('handleRadioButtonClick should emit ifxChange event if not disabled and not in error', async () => {

diff --git a/packages/components/src/components/radio-button/radio-button.scss b/packages/components/src/components/radio-button/radio-button.scss
@@ -1,4 +1,5 @@
 @use "~@infineon/design-system-tokens/dist/tokens";
+@use "../../global/font.scss";
 
 .radioButton__container {
     box-sizing: border-box;
@@ -53,7 +54,7 @@
         }
 
         &:hover {
-            border-color: #0A8276;
+            background-color: tokens.$ifxColorEngineering200;
         }
 
         &.disabled {
@@ -90,10 +91,10 @@
 
 
             &:hover {
-                border-color: #08665C;
+                border-color: tokens.$ifxColorOcean600;
 
                 & .radioButton__wrapper-mark {
-                    background-color: #08665C;
+                    background-color: tokens.$ifxColorOcean600;
                 }
             }
 
@@ -124,7 +125,6 @@
     .label {
         display: flex;
         align-items: center;
-        width: 25px;
         height: tokens.$ifxSize250;
         font-style: normal;
         font-weight: 400;
@@ -135,13 +135,17 @@
         order: 1;
         flex-grow: 0;
 
+        &.label-m {
+            height: tokens.$ifxSize300;
+            font-size: tokens.$ifxFontSizeM;
+            line-height: tokens.$ifxLineHeightM;
+        }
+
         &.disabled {
             color: #BFBBBB;
         }
 
-        &.error {
-            color: #CD002F;
-        }
+
 
         &:hover {
             cursor: pointer;

diff --git a/packages/components/src/components/radio-button/radio-button.tsx b/packages/components/src/components/radio-button/radio-button.tsx
@@ -34,7 +34,7 @@ export class RadioButton {
 
 
   handleRadioButtonClick() {
-    if (!this.disabled) {
+    if (!this.disabled && !this.error) {
       this.internalValue = !this.internalValue;
       this.el.shadowRoot.querySelector('.radioButton__wrapper').focus();
       this.ifxChange.emit(this.internalValue);
@@ -48,13 +48,16 @@ export class RadioButton {
         onClick={this.handleRadioButtonClick.bind(this)}
       >
         <div
-          class={`radioButton__wrapper ${this.internalValue ? 'checked' : ''} ${this.disabled ? 'disabled' : ''} ${this.error ? 'error' : ''}`}
+          class={`radioButton__wrapper 
+          ${this.internalValue ? 'checked' : ''} 
+          ${this.disabled ? 'disabled' : ''} 
+          ${this.error ? 'error' : ''}`}
           tabIndex={this.disabled ? -1 : 0}
         >
           {this.internalValue && <div class="radioButton__wrapper-mark"></div>}
         </div>
         {this.hasSlot && (
-          <div class={`label ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}`}>
+          <div class={`label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}`}>
             <slot />
           </div>
         )}

diff --git a/packages/components/src/index.html b/packages/components/src/index.html
@@ -21,7 +21,6 @@
 
 <body>
 
-
 </body>
 
 </html>