feat(AsideHeader): add current item to CSS API (#194)

* feat(AsideHeader): add current item to CSS API * chore: remove var after rebase
gravity-ui · Feb 20, 2024 · cdbdf6a · cdbdf6a
1 parent e34ab0c
commit cdbdf6a
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 8 deletions.
diff --git 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
@@ -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;
             }`}
         </style>
         <AsideHeaderShowcase {...args} />

diff --git 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 {