From f56c02b99494070e587c18c875613de75acc2410 Mon Sep 17 00:00:00 2001 From: Angelina Gadzhieva Date: Thu, 1 Aug 2024 13:58:34 +0300 Subject: [PATCH] feat(AsideHeader): add background color to CSS API (#287) --- src/components/AsideHeader/AsideHeader.scss | 10 +++++++++- src/components/AsideHeader/README.md | 2 ++ src/components/AsideHeader/components/FirstPanel.tsx | 1 + 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/AsideHeader/AsideHeader.scss b/src/components/AsideHeader/AsideHeader.scss index 53652e3..da11730 100644 --- 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 index 3489ee1..6a17aa2 100644 --- 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 index 5cf4f49..f50c7a7 100644 --- a/src/components/AsideHeader/components/FirstPanel.tsx +++ b/src/components/AsideHeader/components/FirstPanel.tsx @@ -47,6 +47,7 @@ export const FirstPanel = React.forwardRef((_props, ref) => { {customBackground} )} + {/* TODO add new prop for hiding Header */} {logo &&
} {visibleMenuItems?.length ? (