feat(button): review fix

Signed-off-by: astagnol <[email protected]>
ovh · Oct 16, 2024 · cd5bdea · cd5bdea
1 parent 0cf46f8
commit cd5bdea
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 7 deletions.
diff --git a/packages/ods/src/components/button/src/components/ods-button/ods-button.scss b/packages/ods/src/components/button/src/components/ods-button/ods-button.scss
@@ -1,12 +1,16 @@
 @use '../../../../../style/button';
 
+// Ensure the hit area of the web-component is the same as the inside button (for hover triggering for example)
 :host(.ods-button) {
-  // Ensure the hit area of the web-component is the same as the inside button (for hover triggering for example)
   display: inline-block;
-  border-radius: button.$ods-button-border-radius;
+  border-radius: button.$ods-button-border-radius-md;
   height: inherit;
 }
 
+:host(.ods-button__border-radius--xs) {
+  border-radius: button.$ods-button-border-radius-xs;
+}
+
 .ods-button {
   &__button {
     $button: &;

diff --git a/packages/ods/src/components/button/src/components/ods-button/ods-button.tsx b/packages/ods/src/components/button/src/components/ods-button/ods-button.tsx
@@ -37,7 +37,10 @@ export class OdsButton {
   render(): FunctionalComponent {
     return (
       <Host
-        class="ods-button"
+        class={`
+          ods-button
+          ods-button--${this.size}
+        `}
         disabled={ this.isDisabled || this.isLoading }>
         <button
           class={`
@@ -55,7 +58,7 @@ export class OdsButton {
             <ods-spinner
               class="ods-button__button__spinner"
               color={ ODS_SPINNER_COLOR.neutral }
-              size={ this.size === 'xs' ? ODS_SPINNER_SIZE.xs : ODS_SPINNER_SIZE.sm }>
+              size={ this.size === ODS_BUTTON_SIZE.xs ? ODS_SPINNER_SIZE.xs : ODS_SPINNER_SIZE.sm }>
             </ods-spinner>
           }
 

diff --git a/packages/ods/src/style/_button.scss b/packages/ods/src/style/_button.scss
@@ -1,7 +1,8 @@
 @use './focus';
 @use './state';
 
-$ods-button-border-radius: var(--ods-border-radius-md);
+$ods-button-border-radius-xs: var(--ods-border-radius-xs);
+$ods-button-border-radius-md: var(--ods-border-radius-md);
 $ods-button-size-xs: 24px;
 $ods-button-size-sm: 32px;
 $ods-button-size-md: 40px;
@@ -10,7 +11,7 @@ $ods-button-size-md: 40px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: $ods-button-border-radius;
+  border-radius: $ods-button-border-radius-md;
   cursor: pointer;
   overflow: hidden;
   font-family: inherit;
@@ -30,7 +31,7 @@ $ods-button-size-md: 40px;
 @mixin ods-button-size($size) {
   @if $size == 'xs' {
     grid-column-gap: 6px;
-    border-radius: 2px;
+    border-radius: $ods-button-border-radius-xs;
     padding: 6px;
     min-width: $ods-button-size-xs;
     min-height: $ods-button-size-xs;

diff --git a/packages/themes/src/default/_variables.scss b/packages/themes/src/default/_variables.scss
@@ -166,6 +166,7 @@ $ods-color-form-element-border-focus-default: $ods-color-neutral-500;
 $ods-color-form-element-border-critical: $ods-color-critical-500;
 $ods-color-form-element-text-default: $ods-color-text;
 $ods-color-form-element-text-placeholder-default: $ods-color-neutral-600;
+$ods-border-radius-xs: 2px;
 $ods-border-radius-sm: 4px;
 $ods-border-radius-md: 8px;
 $ods-border-radius-lg: 16px;

diff --git a/packages/themes/src/default/index.scss b/packages/themes/src/default/index.scss
@@ -7,6 +7,7 @@
 @import '../../assets/fonts/source-sans-pro';
 
 :root {
+  --ods-border-radius-xs: #{var.$ods-border-radius-xs};
   --ods-border-radius-sm: #{var.$ods-border-radius-sm};
   --ods-border-radius-md: #{var.$ods-border-radius-md};
   --ods-border-radius-lg: #{var.$ods-border-radius-lg};