[components] Add size property to DefaultButton for adjusting text …

…size
sanity-io · Oct 6, 2020 · f6c20d2 · f6c20d2
1 parent 0d07a31
commit f6c20d2
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 3 deletions.
diff --git a/packages/@sanity/components/src/buttons/createButtonLike.js b/packages/@sanity/components/src/buttons/createButtonLike.js
@@ -28,7 +28,8 @@ export default function createButtonLike(Component, {displayName, defaultProps =
       tabIndex: PropTypes.number,
       padding: PropTypes.oneOf(['large', 'default', 'small', 'none']),
       bleed: PropTypes.bool,
-      selected: PropTypes.bool
+      selected: PropTypes.bool,
+      size: PropTypes.oneOf(['extra-small', 'small', 'medium', 'large', 'extra-large'])
     }
 
     static defaultProps = {
@@ -82,6 +83,7 @@ export default function createButtonLike(Component, {displayName, defaultProps =
         padding,
         bleed,
         selected,
+        size,
         ...rest
       } = this.props
 
@@ -90,7 +92,8 @@ export default function createButtonLike(Component, {displayName, defaultProps =
         styles[kind],
         styles[`padding_${padding}`],
         inverted && styles.inverted,
-        color && styles[`color__${color}`],
+        styles[`color__${color}`],
+        styles[`size__${size}`],
         bleed && styles.bleed,
         disabled && styles.disabled,
         selected && styles.selected,

diff --git a/packages/@sanity/components/src/buttons/stories/default.js b/packages/@sanity/components/src/buttons/stories/default.js
@@ -39,7 +39,13 @@ export function DefaultStory() {
     icon: boolean('Icon', undefined, 'props') ? TrashIcon : undefined,
     padding: select('Padding', ['large', 'default', 'small', 'none'], 'default', 'props'),
     bleed: boolean('Bleed', false, 'props'),
-    selected: boolean('Selected', false, 'props')
+    selected: boolean('Selected', false, 'props'),
+    size: select(
+      'Size',
+      [undefined, 'extra-small', 'small', 'medium', 'large', 'extra-large'],
+      undefined,
+      'props'
+    )
   }
 
   const children = text('Text', 'Touch Me!', 'props')

diff --git a/packages/@sanity/components/src/buttons/styles/DefaultButton.css b/packages/@sanity/components/src/buttons/styles/DefaultButton.css
@@ -318,6 +318,32 @@
   @nest &.loading > .inner {
     overflow: hidden;
   }
+
+  @nest &.size__extra-small {
+    font-size: var(--font-size-xsmall);
+    line-height: var(--line-height-xsmall);
+  }
+
+  @nest &.size__small {
+    font-size: var(--font-size-small);
+    line-height: var(--line-height-small);
+  }
+
+  @nest &.size__medium {
+    /* default */
+    /* font-size: var(--font-size-base); */
+    /* line-height: var(--line-height-base); */
+  }
+
+  @nest &.size__large {
+    font-size: var(--font-size-large);
+    line-height: var(--line-height-large);
+  }
+
+  @nest &.size__extra-large {
+    font-size: var(--font-size-huge);
+    line-height: var(--line-height-huge);
+  }
 }
 
 .inner {