Merge pull request #104 from kodiak-packages/unfuckup-buttons

Unfuckup buttons

src/components/Button/Button.mdx

@@ -36,9 +36,7 @@ Buttons make common actions more obvious and help users more easily perform them
 ### Button sizes
 
 <Playground>
-  <Button size="big">Click me</Button>
-  {' '}
-  <Button size="medium">Click me</Button>
+  <Button size="normal">Click me</Button>
   {' '}
   <Button size="small">Click me</Button>
 </Playground>

src/components/Button/Button.module.css

@@ -1,12 +1,17 @@
 .button {
   border-radius: var(--border-radius-small);
+  line-height: 14px;
   font-size: 14px;
-  padding: 5.5px 14px;
+  padding: 10px 14px;
   border: none;
   cursor: pointer;
   display: inline-block;
 }
 
+.smallButton {
+  padding: 3.5px 10px;
+}
+
 .typePrimary:hover {
   background-color: var(--color-primary-hover);
 }
@@ -41,24 +46,24 @@
   cursor: default;
 }
 
-.labelWithPrefixIcon {
-  margin-left: 8px;
+.label {
+  line-height: inherit;
 }
 
-.labelWithSuffixIcon {
-  margin-right: 8px;
+.smallLabel {
+  font-size: calc(var(--font-size) - 2px);
 }
 
-.medium {
-  line-height: 17px;
+.labelWithPrefixIcon {
+  margin-left: 8px;
 }
 
-.small {
-  line-height: 14px;
-  max-height: 25px;
+.labelWithSuffixIcon {
+  margin-right: 8px;
 }
 
 .spinner {
   width: 14px;
   height: 14px;
+  vertical-align: -2px;
 }

src/components/Button/Button.tsx

@@ -17,7 +17,7 @@ interface Props {
   prefixIcon?: React.ReactElement;
   suffixIcon?: React.ReactElement;
   name?: string;
-  size?: 'big' | 'medium' | 'small';
+  size?: 'normal' | 'small';
 }
 
 const Button: React.FC<Props> = ({
@@ -31,25 +31,23 @@ const Button: React.FC<Props> = ({
   prefixIcon,
   suffixIcon,
   name,
-  size = 'big',
+  size = 'normal',
 }: Props) => {
   const buttonClassNames = classNames(
     cssReset.ventura,
     styles.button,
     {
       [styles.typePrimary]: type === 'primary',
       [styles.typeSecondary]: type === 'secondary',
-      [styles.small]: size === 'small',
-      [styles.medium]: size === 'medium',
+      [styles.smallButton]: size === 'small',
     },
     className,
   );
 
-  const labelClassNames = classNames({
+  const labelClassNames = classNames(styles.label, {
     [styles.labelWithPrefixIcon]: Boolean(prefixIcon) || isLoading,
     [styles.labelWithSuffixIcon]: Boolean(suffixIcon),
-    [styles.small]: size === 'small',
-    [styles.medium]: size === 'medium',
+    [styles.smallLabel]: size === 'small',
   });
 
   return (

src/components/Button/__snapshots__/Button.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`Button button should have type="submit" 1`] = `
     type="submit"
   >
     <span
-      class=""
+      class="label"
     >
       Click me
     </span>
@@ -25,7 +25,7 @@ exports[`Button default snapshot 1`] = `
     type="button"
   >
     <span
-      class=""
+      class="label"
     >
       Click me
     </span>
@@ -56,7 +56,7 @@ exports[`Button loading button 1`] = `
       />
     </svg>
     <span
-      class="labelWithPrefixIcon"
+      class="label labelWithPrefixIcon"
     >
       Click me
     </span>
@@ -87,7 +87,7 @@ exports[`Button prefix icon button 1`] = `
       />
     </svg>
     <span
-      class="labelWithPrefixIcon"
+      class="label labelWithPrefixIcon"
     >
       Click me
     </span>
@@ -103,7 +103,7 @@ exports[`Button secondary button 1`] = `
     type="button"
   >
     <span
-      class=""
+      class="label"
     >
       Click me
     </span>
@@ -119,7 +119,7 @@ exports[`Button suffix icon button 1`] = `
     type="button"
   >
     <span
-      class="labelWithSuffixIcon"
+      class="label labelWithSuffixIcon"
     >
       Click me
     </span>

src/theme.css

@@ -44,7 +44,7 @@
   --font-size: 14px;
   --font-color: var(--color-neutral-8);
   --font-color-sub: var(--color-neutral-7);
-  --line-height: 1.8;
+  --line-height: 25px;
 
   /* Border */
   --border-radius-small: 3px;