diff --git a/MIGRATION_GUIDE_v5.md b/MIGRATION_GUIDE_v5.md new file mode 100644 index 00000000..12b2d31c --- /dev/null +++ b/MIGRATION_GUIDE_v5.md @@ -0,0 +1,92 @@ +# Navigation v5.0 Migration Guide + +## CSS Variables Changes + +### New Zone-Based CSS Variables + +Navigation v5.0 introduces zone-based CSS variables for more granular control over styling. The navigation is divided into zones: **Top** (header/subheader area), **Main** (navigation groups), and **Bottom** (footer area). + +### Top Zone (Subheader) Variables + +New CSS variables for styling items in the Top zone (subheader area): + +| Variable | Purpose | Fallback | +| ---------------------------------------------------- | ---------------------------- | ------------------------------------------------ | +| `--gn-aside-top-decoration-background-color` | Decoration/backdrop | `--gn-aside-item-current-background-color` | +| `--gn-aside-top-divider-color` | Divider below top zone | `--gn-aside-divider-horizontal-color` | +| `--gn-aside-top-item-icon-color` | Icon color | `--gn-aside-item-icon-color` | +| `--gn-aside-top-item-current-icon-color` | Active item icon color | `--gn-aside-item-current-icon-color` | +| `--gn-aside-top-item-text-color` | Text color | `--gn-aside-item-text-color` | +| `--gn-aside-top-item-current-text-color` | Active item text color | `--gn-aside-item-current-text-color` | +| `--gn-aside-top-item-background-color` | Background color | `transparent` | +| `--gn-aside-top-item-background-color-hover` | Hover background | `--gn-aside-item-background-color-hover` | +| `--gn-aside-top-item-current-background-color` | Active item background | `--gn-aside-item-current-background-color` | +| `--gn-aside-top-item-current-background-color-hover` | Active item hover background | `--gn-aside-item-current-background-color-hover` | + +### Main Zone (Group Items) Variables + +New CSS variables for styling items inside navigation groups: + +| Variable | Purpose | Fallback | +| ----------------------------------------------------------- | ---------------------------- | ------------------------------------------------ | +| `--gn-aside-main-background-color` | Main area background | `transparent` | +| `--gn-aside-main-group-item-background-color` | Group item background | Semantic value | +| `--gn-aside-main-group-item-background-color-hover` | Hover background | `--gn-aside-item-background-color-hover` | +| `--gn-aside-main-group-item-current-background-color` | Active item background | `--gn-aside-item-current-background-color` | +| `--gn-aside-main-group-item-current-background-color-hover` | Active item hover background | `--gn-aside-item-current-background-color-hover` | +| `--gn-aside-main-group-border-color-hover` | Group border on hover | `--gn-aside-line-vertical-color-hover` | +| `--gn-aside-main-group-border-color-current` | Group border when active | `--gn-aside-current-line-vertical-color` | + +### Bottom Zone (Footer) Variables + +New CSS variables for styling the Bottom zone (footer area): + +| Variable | Purpose | Fallback | +| ------------------------------------------------------- | ---------------------------- | ------------------------------------------------ | +| `--gn-aside-bottom-background-color` | Footer container background | `--gn-aside-surface-background-color` | +| `--gn-aside-bottom-divider-color` | Divider above footer | `--gn-aside-divider-horizontal-color` | +| `--gn-aside-bottom-item-icon-color` | Icon color | `--gn-aside-item-icon-color` | +| `--gn-aside-bottom-item-current-icon-color` | Active item icon color | `--gn-aside-item-current-icon-color` | +| `--gn-aside-bottom-item-text-color` | Text color | `--gn-aside-item-text-color` | +| `--gn-aside-bottom-item-current-text-color` | Active item text color | `--gn-aside-item-current-text-color` | +| `--gn-aside-bottom-item-background-color-hover` | Hover background | `--gn-aside-item-background-color-hover` | +| `--gn-aside-bottom-item-current-background-color` | Active item background | `--gn-aside-item-current-background-color` | +| `--gn-aside-bottom-item-current-background-color-hover` | Active item hover background | `--gn-aside-item-current-background-color-hover` | + +### Usage Example + +```css +.my-app { + /* Top zone customization */ + --gn-aside-top-item-icon-color: #333; + --gn-aside-top-item-current-background-color: rgba(0, 100, 255, 0.15); + + /* Main zone (groups) customization */ + --gn-aside-main-group-item-current-background-color: rgba(0, 100, 255, 0.2); + --gn-aside-main-group-item-background-color-hover: rgba(0, 0, 0, 0.05); + + /* Bottom zone (footer) customization */ + --gn-aside-bottom-item-icon-color: #666; + --gn-aside-bottom-item-current-background-color: rgba(0, 100, 255, 0.1); +} +``` + +## Migration from v4.x + +### Deprecated Variables + +The following variables have been replaced with zone-specific alternatives: + +| Old Variable | New Variable | Zone | +| ------------------------------------------- | ------------------------------------------- | ------ | +| `--gn-aside-header-general-item-icon-color` | `--gn-aside-top-item-icon-color` | Top | +| `--gn-aside-header-item-current-icon-color` | `--gn-aside-top-item-current-icon-color` | Top | +| `--gn-aside-header-general-item-icon-color` | `--gn-aside-bottom-item-icon-color` | Bottom | +| `--gn-aside-header-item-current-icon-color` | `--gn-aside-bottom-item-current-icon-color` | Bottom | + +### Migration Steps + +1. **Subheader icons**: Replace `--gn-aside-header-general-item-icon-color` with `--gn-aside-top-item-icon-color` +2. **Footer icons**: Replace `--gn-aside-header-general-item-icon-color` with `--gn-aside-bottom-item-icon-color` +3. **Subheader current icons**: Replace `--gn-aside-header-item-current-icon-color` with `--gn-aside-top-item-current-icon-color` +4. **Footer current icons**: Replace `--gn-aside-header-item-current-icon-color` with `--gn-aside-bottom-item-current-icon-color` diff --git a/src/components/AsideHeader/AsideHeader.module.scss b/src/components/AsideHeader/AsideHeader.module.scss index d9b0ab94..4f9f19cc 100644 --- a/src/components/AsideHeader/AsideHeader.module.scss +++ b/src/components/AsideHeader/AsideHeader.module.scss @@ -151,6 +151,7 @@ $block: '.#{variables.$ns}aside-header'; width: calc(100%); padding-top: 8px; padding-bottom: 22px; + background-color: var(--gn-aside-top-decoration-background-color); #{$class}__header-divider { position: absolute; @@ -174,8 +175,11 @@ $block: '.#{variables.$ns}aside-header'; height: calc(100% - var(--gn-aside-header-header-divider-height)); content: ''; background-color: var( - --gn-aside-header-decoration-collapsed-background-color, - var(--_--decoration-collapsed-background-color) + --gn-aside-top-divider-color, + var( + --gn-aside-header-decoration-collapsed-background-color, + var(--_--decoration-collapsed-background-color) + ) ); } @@ -248,6 +252,7 @@ $block: '.#{variables.$ns}aside-header'; margin: var(--g-spacing-2) 10px; display: flex; flex-direction: column; + background-color: var(--gn-aside-bottom-background-color); } &__panels { diff --git a/src/components/AsideHeader/__snapshots__/AsideHeader.visual.test.tsx-snapshots/AsideHeader-render-story-CustomTheme-dark-chromium-linux.png b/src/components/AsideHeader/__snapshots__/AsideHeader.visual.test.tsx-snapshots/AsideHeader-render-story-CustomTheme-dark-chromium-linux.png index 4ac1ceac..b6dce75f 100644 Binary files a/src/components/AsideHeader/__snapshots__/AsideHeader.visual.test.tsx-snapshots/AsideHeader-render-story-CustomTheme-dark-chromium-linux.png and b/src/components/AsideHeader/__snapshots__/AsideHeader.visual.test.tsx-snapshots/AsideHeader-render-story-CustomTheme-dark-chromium-linux.png differ diff --git a/src/components/AsideHeader/__snapshots__/AsideHeader.visual.test.tsx-snapshots/AsideHeader-render-story-CustomTheme-dark-webkit-linux.png b/src/components/AsideHeader/__snapshots__/AsideHeader.visual.test.tsx-snapshots/AsideHeader-render-story-CustomTheme-dark-webkit-linux.png index 6f4104c8..73684c36 100644 Binary files a/src/components/AsideHeader/__snapshots__/AsideHeader.visual.test.tsx-snapshots/AsideHeader-render-story-CustomTheme-dark-webkit-linux.png and b/src/components/AsideHeader/__snapshots__/AsideHeader.visual.test.tsx-snapshots/AsideHeader-render-story-CustomTheme-dark-webkit-linux.png differ diff --git a/src/components/AsideHeader/__snapshots__/AsideHeader.visual.test.tsx-snapshots/AsideHeader-render-story-CustomTheme-light-chromium-linux.png b/src/components/AsideHeader/__snapshots__/AsideHeader.visual.test.tsx-snapshots/AsideHeader-render-story-CustomTheme-light-chromium-linux.png index 001ed9a6..0362f533 100644 Binary files a/src/components/AsideHeader/__snapshots__/AsideHeader.visual.test.tsx-snapshots/AsideHeader-render-story-CustomTheme-light-chromium-linux.png and b/src/components/AsideHeader/__snapshots__/AsideHeader.visual.test.tsx-snapshots/AsideHeader-render-story-CustomTheme-light-chromium-linux.png differ diff --git a/src/components/AsideHeader/__snapshots__/AsideHeader.visual.test.tsx-snapshots/AsideHeader-render-story-CustomTheme-light-webkit-linux.png b/src/components/AsideHeader/__snapshots__/AsideHeader.visual.test.tsx-snapshots/AsideHeader-render-story-CustomTheme-light-webkit-linux.png index 6f050f23..1248c46d 100644 Binary files a/src/components/AsideHeader/__snapshots__/AsideHeader.visual.test.tsx-snapshots/AsideHeader-render-story-CustomTheme-light-webkit-linux.png and b/src/components/AsideHeader/__snapshots__/AsideHeader.visual.test.tsx-snapshots/AsideHeader-render-story-CustomTheme-light-webkit-linux.png differ diff --git a/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx b/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx index d5023c2e..76ed96c4 100644 --- a/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx +++ b/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx @@ -371,3 +371,57 @@ GroupedMenuCollapsible.args = { multipleTooltip: false, initialCompact: false, }; + +const CustomThemesWithNewColorsTemplate: StoryFn = (args) => { + return ( + <> + + + +
+ Custom content +
+ + + ); +}; + +export const CustomThemesWithNewColors = CustomThemesWithNewColorsTemplate.bind({}); +CustomThemesWithNewColors.args = { + multipleTooltip: false, + initialCompact: false, +}; diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx index 577c0979..ef89d298 100644 --- a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx +++ b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx @@ -43,9 +43,11 @@ export interface AsideHeaderShowcaseProps { customBackgroundClassName?: string; headerDecoration?: boolean; hideCollapseButton?: boolean; + externalMenuItems?: AsideHeaderProps['menuItems']; + externalMenuGroups?: AsideHeaderProps['menuGroups']; } -export const AsideHeaderShowcase: React.FC = ({ +export const AsideHeaderShowcase: React.FC> = ({ multipleTooltip = false, initialCompact = false, topAlert, @@ -53,6 +55,9 @@ export const AsideHeaderShowcase: React.FC = ({ customBackgroundClassName, headerDecoration, hideCollapseButton, + externalMenuItems, + externalMenuGroups, + children, }) => { const ref = React.useRef(null); const [popupVisible, setPopupVisible] = React.useState(false); @@ -63,6 +68,7 @@ export const AsideHeaderShowcase: React.FC = ({ BOOLEAN_OPTIONS.Yes, ); const [isModalOpen, setIsModalOpen] = React.useState(false); + const [currentMenuGroups, setCurrentMenuGroups] = React.useState(externalMenuGroups); const openModalSubscriber = (callback: OpenModalSubscriber) => { // @ts-ignore @@ -76,8 +82,9 @@ export const AsideHeaderShowcase: React.FC = ({ }); }; - const [menuItems, setMenuItems] = - React.useState(menuItemsShowcase); + const [menuItems, setMenuItems] = React.useState( + externalMenuItems || menuItemsShowcase, + ); return (
@@ -103,6 +110,8 @@ export const AsideHeaderShowcase: React.FC = ({ } onMenuItemsChanged={setMenuItems} menuItems={menuItems} + menuGroups={currentMenuGroups} + onMenuGroupsChanged={setCurrentMenuGroups} defaultMenuItems={menuItemsShowcase} customBackground={customBackground} customBackgroundClassName={customBackgroundClassName} @@ -233,25 +242,27 @@ export const AsideHeaderShowcase: React.FC = ({ )} renderContent={() => { return ( -
- 
{placeholderText}
- { - setHeaderDecoration(event.target.value); - }} - > - - No - - - Yes - - -
-
- -
+ children || ( +
+ 
{placeholderText}
+ { + setHeaderDecoration(event.target.value); + }} + > + + No + + + Yes + + +
+
+ +
+ ) ); }} panelItems={[ diff --git a/src/components/AsideHeader/components/CompositeBar/CompositeBar.module.scss b/src/components/AsideHeader/components/CompositeBar/CompositeBar.module.scss index a33f71a7..973f50a4 100644 --- a/src/components/AsideHeader/components/CompositeBar/CompositeBar.module.scss +++ b/src/components/AsideHeader/components/CompositeBar/CompositeBar.module.scss @@ -5,12 +5,15 @@ $block: '.#{variables.$ns}composite-bar'; #{$block} { $class: &; + --gn-aside-header-item-expanded-radius: 6px; + flex: 1 1 auto; width: 100%; min-height: 40px; display: flex; flex-direction: column; - --gn-aside-header-item-expanded-radius: 6px; + + background-color: var(--gn-aside-main-background-color); & &__root-menu-item[class] { background-color: transparent; @@ -67,9 +70,18 @@ $block: '.#{variables.$ns}composite-bar'; width: 100%; height: 100%; z-index: -1; - border-left: 2px solid var(--g-color-line-generic); + border-left: 2px solid + var(--gn-aside-main-group-border-color, var(--g-color-line-generic)); border-radius: 0; transition: border-radius 0.15s ease-out; + background-color: var(--gn-aside-main-group-item-background-color, transparent); + } + + &:hover:before { + border-color: var( + --gn-aside-main-group-border-color-hover, + var(--g-color-line-generic) + ); } } diff --git a/src/components/AsideHeader/components/CompositeBar/CompositeBar.tsx b/src/components/AsideHeader/components/CompositeBar/CompositeBar.tsx index e8d40dff..6a8959ad 100644 --- a/src/components/AsideHeader/components/CompositeBar/CompositeBar.tsx +++ b/src/components/AsideHeader/components/CompositeBar/CompositeBar.tsx @@ -294,7 +294,9 @@ export const CompositeBarView: FC = ({ } return ( -
+
{hasHeader && !isUngrouped && (