fix: button: ensures the height of buttons and clarifies class names (E…

…ightfoldAI#112) * fix: button: ensures the height of buttons and clarifies class names Adds additional chevron icons to mdi and fixes snackbar button alignment * chore: button: removes unused selectors
thiyagaraj-eightfold · May 11, 2022 · 7ddf69c · 7ddf69c
1 parent e1fc3fb
commit 7ddf69c
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 67 deletions.
diff --git a/src/__snapshots__/storybook.test.js.snap b/src/__snapshots__/storybook.test.js.snap
diff --git a/src/components/Button/BaseButton.tsx b/src/components/Button/BaseButton.tsx
@@ -58,24 +58,24 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
         const buttonBaseSharedClassNames: string = mergeClasses([
             classNames,
             {
-                [styles.buttonPadding3]:
+                [styles.buttonSize3]:
                     size === ButtonSize.Flex && largeScreenActive,
             },
             {
-                [styles.buttonPadding2]:
+                [styles.buttonSize2]:
                     size === ButtonSize.Flex && mediumScreenActive,
             },
             {
-                [styles.buttonPadding2]:
+                [styles.buttonSize2]:
                     size === ButtonSize.Flex && smallScreenActive,
             },
             {
-                [styles.buttonPadding1]:
+                [styles.buttonSize1]:
                     size === ButtonSize.Flex && xSmallScreenActive,
             },
-            { [styles.buttonPadding1]: size === ButtonSize.Large },
-            { [styles.buttonPadding2]: size === ButtonSize.Medium },
-            { [styles.buttonPadding3]: size === ButtonSize.Small },
+            { [styles.buttonSize1]: size === ButtonSize.Large },
+            { [styles.buttonSize2]: size === ButtonSize.Medium },
+            { [styles.buttonSize3]: size === ButtonSize.Small },
             { [styles.pillShape]: shape === ButtonShape.Pill },
             { [styles.dropShadow]: dropShadow },
             { [styles.dark]: theme === ButtonTheme.dark },
@@ -99,19 +99,25 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
         ]);
 
         const buttonTextClassNames: string = mergeClasses([
-            { [styles.button3]: size === ButtonSize.Flex && largeScreenActive },
             {
-                [styles.button2]:
+                [styles.buttonText3]:
+                    size === ButtonSize.Flex && largeScreenActive,
+            },
+            {
+                [styles.buttonText2]:
                     size === ButtonSize.Flex && mediumScreenActive,
             },
-            { [styles.button2]: size === ButtonSize.Flex && smallScreenActive },
             {
-                [styles.button1]:
+                [styles.buttonText2]:
+                    size === ButtonSize.Flex && smallScreenActive,
+            },
+            {
+                [styles.buttonText1]:
                     size === ButtonSize.Flex && xSmallScreenActive,
             },
-            { [styles.button1]: size === ButtonSize.Large },
-            { [styles.button2]: size === ButtonSize.Medium },
-            { [styles.button3]: size === ButtonSize.Small },
+            { [styles.buttonText1]: size === ButtonSize.Large },
+            { [styles.buttonText2]: size === ButtonSize.Medium },
+            { [styles.buttonText3]: size === ButtonSize.Small },
         ]);
 
         const getButtonIconSize = (): IconSize => {

diff --git a/src/components/Button/SplitButton/SplitButton.tsx b/src/components/Button/SplitButton/SplitButton.tsx
@@ -46,24 +46,24 @@ export const SplitButton: FC<SplitButtonProps> = React.forwardRef(
             classNames,
             styles.splitButton,
             {
-                [styles.buttonPadding3]:
+                [styles.buttonSize3]:
                     size === ButtonSize.Flex && largeScreenActive,
             },
             {
-                [styles.buttonPadding2]:
+                [styles.buttonSize2]:
                     size === ButtonSize.Flex && mediumScreenActive,
             },
             {
-                [styles.buttonPadding2]:
+                [styles.buttonSize2]:
                     size === ButtonSize.Flex && smallScreenActive,
             },
             {
-                [styles.buttonPadding1]:
+                [styles.buttonSize1]:
                     size === ButtonSize.Flex && xSmallScreenActive,
             },
-            { [styles.buttonPadding1]: size === ButtonSize.Large },
-            { [styles.buttonPadding2]: size === ButtonSize.Medium },
-            { [styles.buttonPadding3]: size === ButtonSize.Small },
+            { [styles.buttonSize1]: size === ButtonSize.Large },
+            { [styles.buttonSize2]: size === ButtonSize.Medium },
+            { [styles.buttonSize3]: size === ButtonSize.Small },
             { [styles.pillShape]: shape === ButtonShape.Pill },
             { [styles.dropShadow]: dropShadow },
             { [styles.splitRight]: split },

diff --git a/src/components/Button/TwoStateButton/TwoStateButton.tsx b/src/components/Button/TwoStateButton/TwoStateButton.tsx
@@ -57,24 +57,24 @@ export const TwoStateButton: FC<TwoStateButtonProps> = React.forwardRef(
             styles.twoStateButton,
             { [styles.checked]: checked },
             {
-                [styles.buttonPadding3]:
+                [styles.buttonSize3]:
                     size === ButtonSize.Flex && largeScreenActive,
             },
             {
-                [styles.buttonPadding2]:
+                [styles.buttonSize2]:
                     size === ButtonSize.Flex && mediumScreenActive,
             },
             {
-                [styles.buttonPadding2]:
+                [styles.buttonSize2]:
                     size === ButtonSize.Flex && smallScreenActive,
             },
             {
-                [styles.buttonPadding1]:
+                [styles.buttonSize1]:
                     size === ButtonSize.Flex && xSmallScreenActive,
             },
-            { [styles.buttonPadding1]: size === ButtonSize.Large },
-            { [styles.buttonPadding2]: size === ButtonSize.Medium },
-            { [styles.buttonPadding3]: size === ButtonSize.Small },
+            { [styles.buttonSize1]: size === ButtonSize.Large },
+            { [styles.buttonSize2]: size === ButtonSize.Medium },
+            { [styles.buttonSize3]: size === ButtonSize.Small },
             { [styles.buttonStretch]: buttonWidth === ButtonWidth.fill },
             { [styles.pillShape]: shape === ButtonShape.Pill },
             { [styles.dropShadow]: dropShadow },
@@ -85,19 +85,25 @@ export const TwoStateButton: FC<TwoStateButtonProps> = React.forwardRef(
         ]);
 
         const buttonTextClassNames: string = mergeClasses([
-            { [styles.button3]: size === ButtonSize.Flex && largeScreenActive },
             {
-                [styles.button2]:
+                [styles.buttonText3]:
+                    size === ButtonSize.Flex && largeScreenActive,
+            },
+            {
+                [styles.buttonText2]:
                     size === ButtonSize.Flex && mediumScreenActive,
             },
-            { [styles.button2]: size === ButtonSize.Flex && smallScreenActive },
             {
-                [styles.button1]:
+                [styles.buttonText2]:
+                    size === ButtonSize.Flex && smallScreenActive,
+            },
+            {
+                [styles.buttonText1]:
                     size === ButtonSize.Flex && xSmallScreenActive,
             },
-            { [styles.button1]: size === ButtonSize.Large },
-            { [styles.button2]: size === ButtonSize.Medium },
-            { [styles.button3]: size === ButtonSize.Small },
+            { [styles.buttonText1]: size === ButtonSize.Large },
+            { [styles.buttonText2]: size === ButtonSize.Medium },
+            { [styles.buttonText3]: size === ButtonSize.Small },
         ]);
 
         const counterClassNames: string = mergeClasses([

diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
@@ -55,6 +55,7 @@
     border-radius: $corner-radius-s;
     cursor: pointer;
     display: inline-block;
+    min-height: max-content;
     min-width: max-content;
     transition: all $motion-duration-extra-fast $motion-easing-easeinout 0s;
     white-space: nowrap;
@@ -65,15 +66,15 @@
         flex-direction: row;
     }
 
-    .icon + .button1:not(:empty) {
+    .icon + .button-text-1:not(:empty) {
         margin-left: $button-spacer-large;
     }
 
-    .icon + .button2:not(:empty) {
+    .icon + .button-text-2:not(:empty) {
         margin-left: $button-spacer-medium;
     }
 
-    .icon + .button3:not(:empty) {
+    .icon + .button-text-3:not(:empty) {
         margin-left: $button-spacer-small;
     }
 
@@ -161,13 +162,12 @@
     }
 }
 
-.button1 {
+.button-text-1 {
     // Button 1 (Mobile L)
     font-family: 'Source Sans Pro', sans-serif;
     font-weight: $text-font-weight-semibold;
     font-size: $text-font-size-5;
     line-height: $text-line-height-3;
-    max-height: 44px;
 
     &.counter {
         font-size: $text-font-size-4;
@@ -182,13 +182,12 @@
     }
 }
 
-.button2 {
+.button-text-2 {
     // Button 2 (Mobile M, Desktop L)
     font-family: 'Source Sans Pro', sans-serif;
     font-weight: $text-font-weight-semibold;
     font-size: $text-font-size-3;
     line-height: $text-line-height-2;
-    max-height: 36px;
 
     &.counter {
         font-size: $text-font-size-2;
@@ -204,13 +203,12 @@
     }
 }
 
-.button3 {
+.button-text-3 {
     // Button 3 (Desktop M)
     font-family: 'Source Sans Pro', sans-serif;
     font-weight: $text-font-weight-semibold;
     font-size: $text-font-size-2;
     line-height: $text-line-height-1;
-    max-height: 28px;
 
     &.counter {
         font-size: $text-font-size-1;
@@ -226,36 +224,21 @@
     }
 }
 
-.button-padding-1 {
+.button-size-1 {
+    height: 44px;
     padding: $button-padding-vertical-large $button-padding-horizontal-large;
 }
 
-.button-padding-1-default,
-.button-padding-1-neutral {
-    padding: $button-padding-vertical-default-large
-        $button-padding-horizontal-default-large;
-}
-
-.button-padding-2 {
+.button-size-2 {
+    height: 36px;
     padding: $button-padding-vertical-medium $button-padding-horizontal-medium;
 }
 
-.button-padding-2-default,
-.button-padding-2-neutral {
-    padding: $button-padding-vertical-default-medium
-        $button-padding-horizontal-default-medium;
-}
-
-.button-padding-3 {
+.button-size-3 {
+    height: 28px;
     padding: $button-padding-vertical-small $button-padding-horizontal-small;
 }
 
-.button-padding-3-default,
-.button-padding-3-neutral {
-    padding: $button-padding-vertical-default-small
-        $button-padding-horizontal-default-small;
-}
-
 .button-primary {
     background-color: var(--button-primary-default-background-color);
     border-color: var(--button-primary-default-border-color);

diff --git a/src/components/Icon/mdi.ts b/src/components/Icon/mdi.ts
@@ -123,6 +123,10 @@ export enum IconName {
     mdiChevronLeft = 'M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z',
     mdiChevronRight = 'M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z',
     mdiChevronUp = 'M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z',
+    mdiChevronDoubleDown = 'M16.59,5.59L18,7L12,13L6,7L7.41,5.59L12,10.17L16.59,5.59M16.59,11.59L18,13L12,19L6,13L7.41,11.59L12,16.17L16.59,11.59Z',
+    mdiChevronDoubleLeft = 'M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z',
+    mdiChevronDoubleRight = 'M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z',
+    mdiChevronDoubleUp = 'M7.41,18.41L6,17L12,11L18,17L16.59,18.41L12,13.83L7.41,18.41M7.41,12.41L6,11L12,5L18,11L16.59,12.41L12,7.83L7.41,12.41Z',
     mdiCircle = 'M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z',
     mdiCircleOutline = 'M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z',
     mdiClipboardCheck = 'M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M19,3H14.82C14.4,1.84 13.3,1 12,1C10.7,1 9.6,1.84 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3Z',

diff --git a/src/components/Snackbar/snackbar.module.scss b/src/components/Snackbar/snackbar.module.scss
@@ -1,4 +1,5 @@
 .snackbar {
+    align-items: center;
     box-shadow: $shadow-object-l;
     border: none;
     border-left: solid $space-xs var(--info-color);