feat(Button)!: add selected state for all views (#755)

gravity-ui · Jul 14, 2023 · 8658b39 · 8658b39
1 parent 49418ab
commit 8658b39
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 16 deletions.
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
@@ -147,13 +147,6 @@ $iconWidth: 16px;
             --yc-button-background-color-hover: var(--yc-color-base-generic-hover);
 
             @include button-text-color(var(--yc-color-text-primary));
-
-            &#{$block}_selected {
-                --yc-button-background-color: var(--yc-color-base-selection);
-                --yc-button-background-color-hover: var(--yc-color-base-selection-hover);
-
-                @include button-text-color(var(--yc-color-text-special));
-            }
         }
 
         &_action {
@@ -307,6 +300,42 @@ $iconWidth: 16px;
         }
     }
 
+    &_view {
+        &_normal,
+        &_action,
+        &_outlined,
+        &_outlined-info,
+        &_raised,
+        &_flat,
+        &_flat-secondary,
+        &_flat-info {
+            &#{$block}_selected {
+                --yc-button-background-color: var(--yc-color-base-selection);
+                --yc-button-background-color-hover: var(--yc-color-base-selection-hover);
+
+                @include button-text-color(var(--yc-my-color-brand-text));
+
+                &::before {
+                    border: none;
+                }
+            }
+        }
+
+        &_outlined-danger,
+        &_flat-danger {
+            &#{$block}_selected {
+                --yc-button-background-color: var(--yc-color-base-danger);
+                --yc-button-background-color-hover: var(--yc-color-base-danger-hover);
+
+                @include button-text-color(var(--yc-color-text-danger));
+
+                &::before {
+                    border: none;
+                }
+            }
+        }
+    }
+
     @include mixins.pin($block, ('::before', '::after'), var(--yc-button-border-radius));
 
     &__text {

diff --git a/src/components/Button/__stories__/ButtonShowcase.tsx b/src/components/Button/__stories__/ButtonShowcase.tsx
@@ -125,22 +125,15 @@ function renderViewGrid() {
                     props.children = 'Button';
                 }
 
-                let content: React.ReactElement | null = <Button {...props} />;
-
-                if (props.selected && props.view !== 'normal') {
-                    content = null;
-                }
-
                 items.push(
                     <div
                         key={key}
                         style={{
-                            backgroundColor:
-                                view.endsWith('contrast') && content ? contrastColor : '',
+                            backgroundColor: view.endsWith('contrast') ? contrastColor : '',
                         }}
                         className={b('grid-cell')}
                     >
-                        {content}
+                        <Button {...props} />
                     </div>,
                 );
             }