Changed default button size

RocketChat · Jan 7, 2020 · 73952b7 · 73952b7
1 parent 751e9b2
commit 73952b7
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 17 deletions.
diff --git a/packages/fuselage/src/components/Button/styles.scss b/packages/fuselage/src/components/Button/styles.scss
@@ -97,12 +97,13 @@
   text-decoration: none;
 
   @include clickable;
-  @include use-text-style(c2);
   @include use-text-ellipsis;
 
+  @include use-text-style(p2);
+
   @include with-rectangular-size(
-    $height: $sizes-x36,
-    $padding-x: $spaces-x12,
+    $height: $sizes-x40,
+    $padding-x: calc( #{$spaces-x12} ),
     $line-height: $text-styles-p2-line-height,
   );
 
@@ -118,19 +119,19 @@
     );
   }
 
-  &--large {
-    @include use-text-style(p2);
+  &--medium {
+    @include use-text-style(c2);
 
     @include with-rectangular-size(
-      $height: $sizes-x40,
-      $padding-x: calc( #{$spaces-x12} ),
+      $height: $sizes-x36,
+      $padding-x: $spaces-x12,
       $line-height: $text-styles-p2-line-height,
     );
   }
 
   &--square {
     @include with-squared-size(
-      $size: $spaces-x32,
+      $size: $spaces-x40,
     );
   }
 
@@ -140,9 +141,9 @@
     );
   }
 
-  &--large-square {
+  &--medium-square {
     @include with-squared-size(
-      $size: $spaces-x40,
+      $size: $spaces-x32,
     );
   }
 

diff --git a/packages/fuselage/src/components/Button2/base.js b/packages/fuselage/src/components/Button2/base.js
@@ -10,7 +10,7 @@ export const Button2 = forwardRef(function Button2({
   is = 'button',
   rel,
   small,
-  large,
+  medium,
   square,
   ...props
 }, ref) {
@@ -27,10 +27,10 @@ export const Button2 = forwardRef(function Button2({
     is={is}
     ref={ref}
     mod-small={small}
-    mod-large={large}
+    mod-medium={medium}
     mod-square={square}
     mod-small-square={small && square}
-    mod-large-square={large && square}
+    mod-medium-square={medium && square}
     {...extraProps}
     {...props}
   />;

diff --git a/packages/fuselage/src/components/Button2/stories.mdx b/packages/fuselage/src/components/Button2/stories.mdx
@@ -118,8 +118,8 @@ Indicates an actionable user action.
     }}
     yAxis={{
       small: { small: true },
-      default: {},
-      large: { large: true },
+      medium: { medium: true },
+      default: { },
     }}
   />
 </Story>
@@ -174,8 +174,8 @@ Indicates an actionable user action.
     common={{ onClick: action('click') }}
     xAxis={{
       text: { children: 'Button' },
-      'square + icon': { square: true, children: <Icon name='circled-arrow-down' size='x8' /> },
-      'text + icon': { children: <><Icon name='circled-arrow-down' size='x8' /> Button</> },
+      'square + icon': { square: true, children: <Icon name='circled-arrow-down' size='x20' /> },
+      'text + icon': { children: <><Icon name='circled-arrow-down' size='x16' /> Button</> },
     }}
     yAxis={{
       default: {},