fix(button): use correct border-radius for sm size

Author: dpellier

packages/ods-react/src/components/button/src/dev.stories.tsx

@@ -1,4 +1,4 @@
-import { BUTTON_COLORS, BUTTON_VARIANTS, Button } from '.';
+import { BUTTON_COLORS, BUTTON_SIZES, BUTTON_VARIANTS, Button } from '.';
 import style from './dev.module.css';
 
 export default {
@@ -52,3 +52,18 @@ export const Accessibility = () => (
     Accessibility
   </Button>
 )
+
+export const Sizes = () => (
+  <div style={{ display: 'flex', flexFlow: 'row', columnGap: '16px' }}>
+    {
+      BUTTON_SIZES.map((size) => (
+        <Button
+          style={{ alignSelf: 'center' }}
+          key={ size }
+          size={ size }>
+          Button - { size }
+        </Button>
+      ))
+    }
+  </div>
+);

packages/ods-react/src/style/_button.scss

@@ -2,6 +2,7 @@
 @use './state';
 
 $ods-button-border-radius-xs: var(--ods-border-radius-xs);
+$ods-button-border-radius-sm: var(--ods-border-radius-sm);
 $ods-button-border-radius-md: var(--ods-border-radius-md);
 $ods-button-border-radius-width: var(--ods-border-width-sm);
 $ods-button-size-xs: 24px;
@@ -40,6 +41,7 @@ $ods-button-size-md: 40px;
     font-size: 0.75rem;
   } @else if $size == 'sm' {
     column-gap: 6px;
+    border-radius: $ods-button-border-radius-sm;
     padding: 5px;
     min-width: $ods-button-size-sm;
     min-height: $ods-button-size-sm;