feat(AsideHeader): add background color to CSS API (#287)

gravity-ui · Aug 1, 2024 · f56c02b · f56c02b
1 parent 91263d7
commit f56c02b
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/src/components/AsideHeader/AsideHeader.scss b/src/components/AsideHeader/AsideHeader.scss
@@ -30,7 +30,10 @@ $block: '.#{variables.$ns}aside-header';
         width: inherit;
         display: flex;
         flex-direction: column;
-        background-color: var(--gn-aside-header-background-color, var(--_--background-color));
+        background-color: var(
+            --gn-aside-header-expanded-background-color,
+            var(--gn-aside-header-background-color, var(--_--background-color))
+        );
         z-index: var(--gn-aside-header-z-index, 100);
         max-height: calc(100vh - var(--gn-aside-top-panel-height));
         margin-top: var(--gn-aside-top-panel-height);
@@ -100,6 +103,11 @@ $block: '.#{variables.$ns}aside-header';
     }
 
     &_compact &__aside {
+        background-color: var(
+            --gn-aside-header-collapsed-background-color,
+            var(--gn-aside-header-background-color, var(--_--background-color))
+        );
+
         &-content {
             background: transparent;
         }

diff --git a/src/components/AsideHeader/README.md b/src/components/AsideHeader/README.md
@@ -129,6 +129,8 @@ export const Aside: FC = () => {
 | `--gn-aside-header-decoration-collapsed-background-color` | Decoration color for collapsed navigation                                 | `--g-color-base-warning-light` |
 | `--gn-aside-header-decoration-expanded-background-color`  | Decoration color for expanded navigation                                  | `--g-color-base-warning-light` |
 | `--gn-aside-header-background-color`                      | Navigation background color                                               |  `--g-color-base-background`   |
+| `--gn-aside-header-collapsed-background-color`            | Collapsed navigation background color                                     |  `--g-color-base-background`   |
+| `--gn-aside-header-expanded-background-color`             | Expanded 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-top-panel-height`                             | **Read only**.`AsideHeader` top alert height                              |              0px               |

diff --git a/src/components/AsideHeader/components/FirstPanel.tsx b/src/components/AsideHeader/components/FirstPanel.tsx
@@ -47,6 +47,7 @@ export const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {
                             {customBackground}
                         </div>
                     )}
+                    {/* TODO add new prop for hiding Header */}
                     {logo && <Header />}
                     {visibleMenuItems?.length ? (
                         <CompositeBar