fix(button): fix size in theme

A-l-y-l-e · Dec 1, 2018 · 0eb348f · 0eb348f
1 parent a98fc36
commit 0eb348f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git a/src/lib/button/button.ts b/src/lib/button/button.ts
@@ -36,7 +36,7 @@ const STYLE_PRIORITY = -2;
 
 type LyButtonSize = 'small' | 'medium' | 'large';
 
-/** @ignore */
+/** @docs-private */
 const Size: Record<LyButtonSize, any> = {
   small: (theme: ThemeVariables) => ({
     padding: '0 8px',
@@ -108,7 +108,7 @@ export class LyButton extends LyButtonMixinBase implements OnChanges, OnInit, Af
 
   @ViewChild('rippleContainer') _rippleContainer: ElementRef;
 
-  /** @ignore */
+  /** @docs-private */
   @Input('sensitive')
   get rippleSensitive(): boolean {
     return this._rippleSensitive;
@@ -128,7 +128,7 @@ export class LyButton extends LyButtonMixinBase implements OnChanges, OnInit, Af
       this._size = val;
       this._sizeClass = this._theme.addStyle(
         `lyButton.size:${val}`,
-        Size[val as any],
+        (theme: ThemeVariables) => theme.button.size[val],
         this._el.nativeElement,
         this._sizeClass,
         STYLE_PRIORITY

diff --git a/src/lib/themes/minima/base.ts b/src/lib/themes/minima/base.ts
@@ -16,15 +16,23 @@ export class MinimaBase extends LyStyleUtils {
   direction = Dir.ltr;
   button = {
     size: {
-      small: {
-        fontSize: this.pxToRem(16)
-      },
-      medium: {
-        fontSize: this.pxToRem(16)
-      },
-      large: {
-        fontSize: this.pxToRem(16)
-      }
+      small: ({
+        padding: '0 8px',
+        fontSize: this.pxToRem(this.typography.lyTyp.button.fontSize - 1),
+        minHeight: '32px',
+        minWidth: '48px'
+      }),
+      medium: ({
+        padding: '0 14px',
+        minHeight: '36px',
+        minWidth: '64px'
+      }),
+      large: ({
+        padding: '0 21px',
+        fontSize: this.pxToRem(this.typography.lyTyp.button.fontSize + 1),
+        minHeight: '40px',
+        minWidth: '96px'
+      })
     },
     appearance: {
       icon: {