From d338ff9e43481b0fce144a2211eac34d7c20bbee Mon Sep 17 00:00:00 2001
From: Andrey Morozov <amje@yandex-team.ru>
Date: Tue, 11 Jul 2023 13:42:28 +0300
Subject: [PATCH] feat(Button): added new views (#805)

---
 src/components/Button/Button.scss             | 131 +++++++++++++-----
 src/components/Button/Button.tsx              |   8 +-
 .../Button/__stories__/Button.new.stories.tsx |   8 +-
 .../Button/__stories__/ButtonShowcase.tsx     |   9 +-
 4 files changed, 116 insertions(+), 40 deletions(-)

diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index e7b143e634..37671b4198 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -20,7 +20,8 @@ $iconWidth: 16px;
 
 #{$block} {
     --yc-button-background-color: transparent;
-    --yc-button-background-color-hover: transparent;
+    --yc-button-background-color-hover: var(--g-color-base-simple-hover);
+    --yc-button-outline-color: var(--g-color-line-misc);
     --yc-button-icon-space: calc(
         var(--yc-button-padding) + var(--yc-button-icon-size) + var(--yc-button-icon-offset)
     );
@@ -64,11 +65,11 @@ $iconWidth: 16px;
     }
 
     &:focus::before {
-        box-shadow: 0 0 0 2px var(--g-color-line-misc);
+        outline: 2px solid var(--yc-button-outline-color);
     }
 
     &:focus:not(:focus-visible)::before {
-        box-shadow: none;
+        outline: none;
     }
 
     &::after {
@@ -159,13 +160,6 @@ $iconWidth: 16px;
             @include button-text-color(var(--g-color-text-brand-contrast));
         }
 
-        &_outlined,
-        &_outlined-info,
-        &_outlined-danger {
-            --yc-button-background-color: transparent;
-            --yc-button-background-color-hover: var(--g-color-base-simple-hover);
-        }
-
         &_outlined {
             @include button-text-color(var(--g-color-text-primary));
 
@@ -182,6 +176,22 @@ $iconWidth: 16px;
             }
         }
 
+        &_outlined-success {
+            @include button-text-color(var(--g-color-text-positive));
+
+            &::before {
+                border: 1px solid var(--g-color-line-positive);
+            }
+        }
+
+        &_outlined-warning {
+            @include button-text-color(var(--g-color-text-warning));
+
+            &::before {
+                border: 1px solid var(--g-color-line-warning);
+            }
+        }
+
         &_outlined-danger {
             @include button-text-color(var(--g-color-text-danger));
 
@@ -190,6 +200,14 @@ $iconWidth: 16px;
             }
         }
 
+        &_outlined-action {
+            @include button-text-color(var(--g-color-text-brand));
+
+            &::before {
+                border: 1px solid var(--g-color-line-brand);
+            }
+        }
+
         &_raised {
             --yc-button-background-color: var(--g-color-base-float);
             --yc-button-background-color-hover: var(--g-color-base-float-hover);
@@ -200,50 +218,43 @@ $iconWidth: 16px;
                 box-shadow: 0 3px 5px var(--g-color-sfx-shadow);
             }
 
-            &:focus:not(:focus-visible)::before {
-                box-shadow: 0 3px 5px var(--g-color-sfx-shadow);
-            }
-
             &:active::before {
                 box-shadow: 0 1px 2px var(--g-color-sfx-shadow);
             }
-
-            &:active:focus::before {
-                box-shadow: 0 0 0 2px var(--g-color-line-misc);
-            }
-
-            &:active:focus:not(:focus-visible)::before {
-                box-shadow: 0 1px 2px var(--g-color-sfx-shadow);
-            }
-        }
-
-        &_flat,
-        &_flat-info,
-        &_flat-danger,
-        &_flat-secondary {
-            --yc-button-background-color: transparent;
-            --yc-button-background-color-hover: var(--g-color-base-simple-hover);
         }
 
         &_flat {
             @include button-text-color(var(--g-color-text-primary));
         }
 
+        &_flat-secondary {
+            @include button-text-color(var(--g-color-text-secondary), var(--g-color-text-primary));
+        }
+
         &_flat-info {
             @include button-text-color(var(--g-color-text-info));
         }
 
+        &_flat-success {
+            @include button-text-color(var(--g-color-text-positive));
+        }
+
+        &_flat-warning {
+            @include button-text-color(var(--g-color-text-warning));
+        }
+
         &_flat-danger {
             @include button-text-color(var(--g-color-text-danger));
         }
 
-        &_flat-secondary {
-            @include button-text-color(var(--g-color-text-secondary), var(--g-color-text-primary));
+        &_flat-action {
+            @include button-text-color(var(--g-color-text-brand));
         }
 
         &_normal-contrast {
             --yc-button-background-color: var(--g-color-base-light);
             --yc-button-background-color-hover: var(--g-color-base-light-hover);
+            --yc-button-outline-color: var(--g-color-line-light);
 
             @include button-text-color(var(--g-color-text-dark-primary));
         }
@@ -251,6 +262,7 @@ $iconWidth: 16px;
         &_outlined-contrast {
             --yc-button-background-color: transparent;
             --yc-button-background-color-hover: var(--g-color-base-light-simple-hover);
+            --yc-button-outline-color: var(--g-color-line-light);
 
             @include button-text-color(var(--g-color-text-light-primary));
 
@@ -262,13 +274,18 @@ $iconWidth: 16px;
         &_flat-contrast {
             --yc-button-background-color: transparent;
             --yc-button-background-color-hover: var(--g-color-base-light-simple-hover);
+            --yc-button-outline-color: var(--g-color-line-light);
 
             @include button-text-color(var(--g-color-text-light-primary));
         }
 
         &_flat,
+        &_flat-secondary,
         &_flat-info,
-        &_flat-danger {
+        &_flat-success,
+        &_flat-warning,
+        &_flat-danger,
+        &_flat-action {
             &#{$block}_disabled:not(#{$block}_loading),
             &#{$block}_disabled:not(#{$block}_loading) {
                 --yc-button-background-color: transparent;
@@ -304,11 +321,11 @@ $iconWidth: 16px;
         &_normal,
         &_action,
         &_outlined,
-        &_outlined-info,
+        &_outlined-action,
         &_raised,
         &_flat,
         &_flat-secondary,
-        &_flat-info {
+        &_flat-action {
             &#{$block}_selected {
                 --yc-button-background-color: var(--g-color-base-selection);
                 --yc-button-background-color-hover: var(--g-color-base-selection-hover);
@@ -321,13 +338,55 @@ $iconWidth: 16px;
             }
         }
 
+        &_outlined-info,
+        &_flat-info {
+            &#{$block}_selected {
+                --yc-button-background-color: var(--g-color-base-info-light);
+                --yc-button-background-color-hover: var(--g-color-base-info-light-hover);
+
+                @include button-text-color(var(--g-color-text-info-heavy));
+
+                &::before {
+                    border: none;
+                }
+            }
+        }
+
+        &_outlined-success,
+        &_flat-success {
+            &#{$block}_selected {
+                --yc-button-background-color: var(--g-color-base-positive-light);
+                --yc-button-background-color-hover: var(--g-color-base-positive-light-hover);
+
+                @include button-text-color(var(--g-color-text-positive-heavy));
+
+                &::before {
+                    border: none;
+                }
+            }
+        }
+
+        &_outlined-warning,
+        &_flat-warning {
+            &#{$block}_selected {
+                --yc-button-background-color: var(--g-color-base-warning-light);
+                --yc-button-background-color-hover: var(--g-color-base-warning-light-hover);
+
+                @include button-text-color(var(--g-color-text-warning-heavy));
+
+                &::before {
+                    border: none;
+                }
+            }
+        }
+
         &_outlined-danger,
         &_flat-danger {
             &#{$block}_selected {
                 --yc-button-background-color: var(--g-color-base-danger-light);
                 --yc-button-background-color-hover: var(--g-color-base-danger-light-hover);
 
-                @include button-text-color(var(--g-color-text-danger));
+                @include button-text-color(var(--g-color-text-danger-heavy));
 
                 &::before {
                     border: none;
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 3677488355..0edf252625 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -15,12 +15,18 @@ export type ButtonView =
     | 'action' // Branded background, no border
     | 'outlined' // No background, grey border
     | 'outlined-info' // No background, with info-type border color
+    | 'outlined-success' // No background, with success-type border color
+    | 'outlined-warning' // No background, with warning-type border color
     | 'outlined-danger' // No background, with danger-type border color
+    | 'outlined-action' // No background, with branded border color
     | 'raised' // With white background and shadow
     | 'flat' // No background, no border
+    | 'flat-secondary' // No background, no border, secondary-type text color
     | 'flat-info' // No background, no border, info-type text color
+    | 'flat-success' // No background, no border, success-type text color
+    | 'flat-warning' // No background, no border, warning-type text color
     | 'flat-danger' // No background, no border, danger-type text color
-    | 'flat-secondary' // No background, no border, secondary-type text color
+    | 'flat-action' // No background, no border, branded text color
     | 'normal-contrast' // normal button appearance with contrast background
     | 'outlined-contrast' // outlined button appearance with contrast background
     | 'flat-contrast'; // flat button appearance with contrast background
diff --git a/src/components/Button/__stories__/Button.new.stories.tsx b/src/components/Button/__stories__/Button.new.stories.tsx
index 486686f83b..876ff68493 100644
--- a/src/components/Button/__stories__/Button.new.stories.tsx
+++ b/src/components/Button/__stories__/Button.new.stories.tsx
@@ -23,12 +23,18 @@ export default {
                 'action',
                 'outlined',
                 'outlined-info',
+                'outlined-success',
+                'outlined-warning',
                 'outlined-danger',
+                'outlined-action',
                 'raised',
                 'flat',
+                'flat-secondary',
                 'flat-info',
+                'flat-success',
+                'flat-warning',
                 'flat-danger',
-                'flat-secondary',
+                'flat-action',
                 'normal-contrast',
                 'outlined-contrast',
                 'flat-contrast',
diff --git a/src/components/Button/__stories__/ButtonShowcase.tsx b/src/components/Button/__stories__/ButtonShowcase.tsx
index 1e6ab05653..7ea7a27f6c 100644
--- a/src/components/Button/__stories__/ButtonShowcase.tsx
+++ b/src/components/Button/__stories__/ButtonShowcase.tsx
@@ -56,12 +56,17 @@ function renderViewGrid() {
         'action',
         'outlined',
         'outlined-info',
+        'outlined-success',
+        'outlined-warning',
         'outlined-danger',
+        'outlined-action',
         'raised',
         'flat',
-        'flat-info',
-        'flat-danger',
         'flat-secondary',
+        'flat-info',
+        'flat-success',
+        'flat-warning',
+        'flat-action',
         'normal-contrast',
         'outlined-contrast',
         'flat-contrast',