From cdbdf6adc575d5ee9e69d4d4e2ac68320be52d2f Mon Sep 17 00:00:00 2001 From: Angelina Gadzhieva Date: Tue, 20 Feb 2024 18:44:39 +0300 Subject: [PATCH] feat(AsideHeader): add current item to CSS API (#194) * feat(AsideHeader): add current item to CSS API * chore: remove var after rebase --- README.md | 9 ++- .../__stories__/AsideHeader.stories.tsx | 5 +- src/components/CompositeBar/Item/Item.scss | 61 +++++++++++++++++-- 3 files changed, 67 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index c56533c..9e457ed 100644 --- a/README.md +++ b/README.md @@ -86,8 +86,13 @@ Used for themization Navigation's components | `--gn-aside-header-background-color` | Navigation background color | `--g-color-base-background` | | `--gn-aside-header-divider-horizontal-color` | All horizontal divider line color | `--g-color-line-generic` | | `--gn-aside-header-divider-vertical-color` | Vertical divider line color between `AsideHeader` and content | `--g-color-line-generic` | -| `--gn-aside-header-item-background-color-hover` | | `--g-color-base-simple-hover` | -| `--gn-aside-header-item-current-background-color` | | `--g-color-base-selection` | +| Item | | `--gn-aside-header-general-item-icon-color` | Icon color for Subheader and Footer items | `--g-color-text-primary` | | `--gn-aside-header-item-icon-color` | Icon color for CompositeBar items | `--g-color-text-misc` | | `--gn-aside-header-item-text-color` | | `--g-color-text-primary` | +| `--gn-aside-header-item-background-color-hover` | | `--g-color-base-simple-hover` | +| Current Item | +| `--gn-aside-header-item-current-background-color` | | `--g-color-base-selection` | +| `--gn-aside-header-item-current-icon-color` | | | +| `--gn-aside-header-item-current-text-color` | | `--g-color-text-primary` | +| `--gn-aside-header-item-current-background-color-hover` | | | diff --git a/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx b/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx index a1bb609..1640480 100644 --- a/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx +++ b/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx @@ -44,9 +44,12 @@ const CustomThemeTemplate: StoryFn = (args) => ( --gn-aside-header-divider-horizontal-color: #8e8e8e; --gn-aside-header-background-color: #fadfb2; --gn-aside-header-item-background-color-hover: #2626f75c; - --gn-aside-header-item-current-background-color: #f8ca7d; --gn-aside-header-general-item-icon-color: #4a4a4a; --gn-aside-header-item-icon-color: var(--g-color-text-primary); + --gn-aside-header-item-current-background-color: #f8ca7d; + --gn-aside-header-item-current-background-color-hover: #ffc665; + --gn-aside-header-item-current-icon-color: #8e4f34; + --gn-aside-header-item-current-text-color: #8e4f34; }`} diff --git a/src/components/CompositeBar/Item/Item.scss b/src/components/CompositeBar/Item/Item.scss index 95bed8e..9a3c06e 100644 --- a/src/components/CompositeBar/Item/Item.scss +++ b/src/components/CompositeBar/Item/Item.scss @@ -8,11 +8,15 @@ $block: '.#{variables.$ns}composite-bar-item'; --_--horizontal-divider-line-color: var(--g-color-line-generic); --_--item-background-color-hover: var(--g-color-base-simple-hover); - --_--item-selected-background-color-active: var(--g-color-base-selection); + --_--item-general-icon-color: var(--g-color-text-primary); --_--item-icon-color: var(--g-color-text-misc); --_--item-text-color: var(--g-color-text-primary); + // selected item + --_--item-selected-text-color: var(--g-color-text-primary); + --_--item-selected-background-color-active: var(--g-color-base-selection); + display: flex; width: 100%; height: 100%; @@ -22,20 +26,30 @@ $block: '.#{variables.$ns}composite-bar-item'; &__icon { color: var(--gn-aside-header-item-icon-color, var(--_--item-icon-color)); - .#{variables.$ns}footer-item &, - .#{variables.$ns}composite-bar-highlighted-item & { + #{$class}_current & { color: var( - --gn-aside-header-general-item-icon-color, - var(--_--item-general-icon-color) + --gn-aside-header-item-current-icon-color, + var(--gn-aside-header-item-icon-color, var(--_--item-icon-color)) ); } + .#{variables.$ns}footer-item &, + .#{variables.$ns}composite-bar-highlighted-item &, .#{variables.$ns}composite-bar_subheader & { color: var( --gn-aside-header-general-item-icon-color, var(--_--item-general-icon-color) ); } + + .#{variables.$ns}footer-item#{$class}_current &, + .#{variables.$ns}composite-bar-highlighted-item#{$class}_current &, + .#{variables.$ns}composite-bar_subheader #{$class}_current & { + color: var( + --gn-aside-header-item-current-icon-color, + var(--gn-aside-header-general-item-icon-color, var(--_--item-general-icon-color)) + ); + } } &__icon-place { @@ -58,6 +72,13 @@ $block: '.#{variables.$ns}composite-bar-item'; overflow: hidden; color: var(--gn-aside-header-item-text-color, var(--_--item-text-color)); + + #{$class}_current & { + color: var( + --gn-aside-header-item-current-text-color, + var(--_--item-selected-text-color) + ); + } } &__title-adornment { @@ -164,6 +185,18 @@ $block: '.#{variables.$ns}composite-bar-item'; } } + &:hover { + &#{$class}_type_regular { + background-color: var( + --gn-aside-header-item-current-background-color-hover, + var( + --gn-aside-header-item-current-background-color, + var(--_--item-selected-background-color-active) + ) + ); + } + } + &:not(#{$class}_current):hover { &#{$class}_type_regular { background-color: var( @@ -222,6 +255,24 @@ $block: '.#{variables.$ns}composite-bar-item'; } } + &:hover { + &#{$class}_type_regular { + #{$class}__btn-icon { + @include item-bg(); + + &::before { + background-color: var( + --gn-aside-header-item-current-background-color-hover, + var( + --gn-aside-header-item-current-background-color, + var(--_--item-selected-background-color-active) + ) + ); + } + } + } + } + &:not(#{$class}_current):hover { &#{$class}_type_regular { #{$class}__btn-icon {