diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index e2a4479e49..e46a7b7baa 100644 --- 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 index e4ff9adcb6..1e6ab05653 100644 --- 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 = ; - - if (props.selected && props.view !== 'normal') { - content = null; - } - items.push(