Merge pull request #2470 from habx/feature/Button

APP-34091: feat(Button): add size `tiny`
habx · Nov 29, 2022 · 80880b3 · 80880b3
2 parents 904e04a + e08fe0d
commit 80880b3
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/src/Button/Button.interface.ts b/src/Button/Button.interface.ts
@@ -63,6 +63,11 @@ export interface ButtonProps
    */
   small?: boolean
 
+  /**
+   * Tiny size
+   */
+  tiny?: boolean
+
   /**
    * @ignore
    */

diff --git a/src/Button/Button.style.ts b/src/Button/Button.style.ts
@@ -77,6 +77,17 @@ export const ButtonContainer = styled.button`
     }
   }
 
+  &[data-tiny='true'] {
+    font-size: ${fontScale.asteroid.size}px;
+    padding: 0 12px;
+    --button-height: 36px;
+    --button-side-element-margin: 8px;
+
+    & ${SideElementContainer} {
+      font-size: 20px;
+    }
+  }
+
   &[data-mode='${ButtonModes.solid}'] {
     background-color: ${theme.color('primary', { dynamic: true })};
     color: ${theme.color('primary', {

diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
@@ -20,6 +20,7 @@ const InnerButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
       ghost = false,
       link = false,
       small = false,
+      tiny = false,
       fullWidth = false,
       dangerouslySetInnerHTML,
       type = 'button',
@@ -49,6 +50,7 @@ const InnerButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
         data-loading={loading}
         data-mode={mode}
         data-small={small}
+        data-tiny={tiny}
         data-full-width={fullWidth}
         type={type}
         {...rest}