From ef4ec2a9ce7fccac6711801953d4644c82cef270 Mon Sep 17 00:00:00 2001 From: Angelina Gadzhieva Date: Thu, 15 Feb 2024 21:10:50 +0300 Subject: [PATCH 1/2] feat(AsideHeader): add current item to CSS API --- README.md | 9 ++- .../__stories__/AsideHeader.stories.tsx | 5 +- src/components/CompositeBar/Item/Item.scss | 62 +++++++++++++++++-- 3 files changed, 68 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index c56533c2..9e457ed4 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 a1bb6095..16404800 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 95bed8ea..deb7a0dd 100644 --- a/src/components/CompositeBar/Item/Item.scss +++ b/src/components/CompositeBar/Item/Item.scss @@ -7,12 +7,17 @@ $block: '.#{variables.$ns}composite-bar-item'; --gn-composite-bar-item-action-size: 36px; --_--horizontal-divider-line-color: var(--g-color-line-generic); + --_--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 +27,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 +73,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 +186,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 +256,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 { From 74ac1658096e5ee48d342c91b7b31963ca643b21 Mon Sep 17 00:00:00 2001 From: Angelina Gadzhieva Date: Fri, 16 Feb 2024 14:00:08 +0300 Subject: [PATCH 2/2] chore: remove var after rebase --- src/components/CompositeBar/Item/Item.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/CompositeBar/Item/Item.scss b/src/components/CompositeBar/Item/Item.scss index deb7a0dd..9a3c06ed 100644 --- a/src/components/CompositeBar/Item/Item.scss +++ b/src/components/CompositeBar/Item/Item.scss @@ -7,7 +7,6 @@ $block: '.#{variables.$ns}composite-bar-item'; --gn-composite-bar-item-action-size: 36px; --_--horizontal-divider-line-color: var(--g-color-line-generic); - --_--horizontal-divider-line-color: var(--g-color-line-generic); --_--item-background-color-hover: var(--g-color-base-simple-hover); --_--item-general-icon-color: var(--g-color-text-primary);