feat!: change defaults, add prefix to css vars (#99)

* feat!: change default color subheader, footer icons & default icon size * feat!: add prefix to navigation css vars * fix: readme and story Add css vars to readme Fix HighlightedNode in story Rename css var --gn-aside-header-header-divider-line-color * chore: remove useless storybook assets * fix: fix highlighted item in story
gravity-ui · Sep 8, 2023 · 08a812a · 08a812a
1 parent f8c06a1
commit 08a812a
Show file tree

Hide file tree

Showing 20 changed files with 114 additions and 100 deletions.
diff --git a/.storybook/assets/add.svg b/.storybook/assets/add.svg
diff --git a/.storybook/assets/settings.svg b/.storybook/assets/settings.svg
diff --git a/README.md b/README.md
@@ -30,3 +30,19 @@ npm install --dev @gravity-ui/uikit@^3.0.2 @bem-react/[email protected] react@^16.
 ```ts
 import {AsideHeader} from '@gravity-ui/navigation';
 ```
+
+## CSS variables
+
+Used for themization Navigation's components
+
+### AsideHeader vars
+
+| Name                                                   | Description                                                      | Default                                                                |
+| :----------------------------------------------------- | :--------------------------------------------------------------- | :--------------------------------------------------------------------- |
+| `--gn-aside-header-background-color`                   | Сolor of decorations and selected items                          | `--g-color-base-warning-light`                                         |
+| `--gn-aside-header-subheader-divider-line-color`       | Divider line color for withDecoration and expanded `AsideHeader` | `--g-color-base-warning-light`                                         |
+| `--gn-aside-header-collapse-button-divider-line-color` |                                                                  | `--gn-aside-header-subheader-divider-line-color`                       |
+| `--gn-aside-header-footer-item-icon-color`             |                                                                  | `--g-color-text-primary`                                               |
+| `--gn-aside-header-subheader-item-icon-color`          |                                                                  | `--g-color-text-primary`                                               |
+| `--gn-aside-header-item-icon-background-size`          | Background size used when `AsideHeader` is compact               | `38px`                                                                 |
+| `--gn-aside-header-divider-line-color`                 | Vertical color divider between `AsideHeader` and content         | Light theme: `transparent`, Dark theme: `--g-color-line-generic-solid` |
diff --git a/src/components/AsideHeader/AsideHeader.scss b/src/components/AsideHeader/AsideHeader.scss
@@ -3,27 +3,30 @@
 $block: '.#{variables.$ns}aside-header';
 
 .g-root {
-    --aside-header-background-color: var(--g-color-base-warning-light);
-    --aside-header-collapse-button-divider-line-color: var(
-        --aside-header-header-divider-line-color
+    --gn-aside-header-background-color: var(--g-color-base-warning-light);
+    --gn-aside-header-collapse-button-divider-line-color: var(
+        --gn-aside-header-subheader-divider-line-color
     );
+    --gn-aside-header-footer-item-icon-color: var(--g-color-text-primary);
+    --gn-aside-header-subheader-item-icon-color: var(--g-color-text-primary);
+    --gn-aside-header-item-icon-background-size: 38px;
 }
 
 .g-root_theme_light,
 .g-root_theme_light-hc {
-    --aside-header-divider-line-color: transparent;
-    --aside-header-header-divider-line-color: var(--g-color-line-generic);
+    --gn-aside-header-divider-line-color: transparent;
+    --gn-aside-header-subheader-divider-line-color: var(--g-color-line-generic);
 }
 
 .g-root_theme_dark,
 .g-root_theme_dark-hc {
-    --aside-header-divider-line-color: var(--g-color-line-generic-solid);
-    --aside-header-header-divider-line-color: var(--g-color-line-generic-solid);
+    --gn-aside-header-divider-line-color: var(--g-color-line-generic-solid);
+    --gn-aside-header-subheader-divider-line-color: var(--g-color-line-generic-solid);
 }
 
 #{$block} {
     $class: &;
-    --aside-header-min-width: 56px;
+    --gn-aside-header-min-width: 56px;
 
     height: 100%;
     width: 100%;
@@ -51,7 +54,7 @@ $block: '.#{variables.$ns}aside-header';
             width: 1px;
             height: 100%;
             content: '';
-            background-color: var(--aside-header-divider-line-color);
+            background-color: var(--gn-aside-header-divider-line-color);
         }
 
         &-popup-anchor {
@@ -93,7 +96,7 @@ $block: '.#{variables.$ns}aside-header';
         &-content_with-decoration {
             background: linear-gradient(
                 180deg,
-                var(--aside-header-background-color) calc(var(--gradient-height) * 0.33),
+                var(--gn-aside-header-background-color) calc(var(--gradient-height) * 0.33),
                 transparent calc(var(--gradient-height) * 0.88)
             );
         }
@@ -106,7 +109,7 @@ $block: '.#{variables.$ns}aside-header';
     }
 
     &__header {
-        --aside-header-header-divider-height: 29px;
+        --gn-aside-header-header-divider-height: 29px;
 
         position: relative;
         z-index: 1;
@@ -122,7 +125,7 @@ $block: '.#{variables.$ns}aside-header';
             left: 0;
             z-index: -2;
             display: none;
-            color: var(--aside-header-background-color);
+            color: var(--gn-aside-header-background-color);
         }
 
         &_with-decoration::before {
@@ -132,9 +135,9 @@ $block: '.#{variables.$ns}aside-header';
             z-index: -2;
             display: none;
             width: 100%;
-            height: calc(100% - var(--aside-header-header-divider-height));
+            height: calc(100% - var(--gn-aside-header-header-divider-height));
             content: '';
-            background-color: var(--aside-header-background-color);
+            background-color: var(--gn-aside-header-background-color);
         }
 
         &::after {
@@ -145,7 +148,7 @@ $block: '.#{variables.$ns}aside-header';
             width: 100%;
             height: 1px;
             content: '';
-            background-color: var(--aside-header-header-divider-line-color);
+            background-color: var(--gn-aside-header-subheader-divider-line-color);
         }
     }
 
@@ -200,7 +203,7 @@ $block: '.#{variables.$ns}aside-header';
     }
 
     &__content {
-        width: calc(100% - var(--aside-header-size));
+        width: calc(100% - var(--gn-aside-header-size));
         z-index: 95;
     }
 
@@ -220,7 +223,7 @@ $block: '.#{variables.$ns}aside-header';
         flex: none;
         width: 100%;
         height: 20px;
-        border-top: 1px solid var(--aside-header-collapse-button-divider-line-color);
+        border-top: 1px solid var(--gn-aside-header-collapse-button-divider-line-color);
         margin-top: auto;
 
         &:not(&_compact) {

diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx
@@ -1,13 +1,14 @@
 import React, {FC} from 'react';
 
+import {RadioButton, Radio, Modal, Button, eventBroker, EventBrokerData} from '@gravity-ui/uikit';
+import {Gear, Magnifier} from '@gravity-ui/icons';
+
 import {AsideHeader, FooterItem} from '../..';
 import {cn} from '../../utils/cn';
 import {menuItemsShowcase, text as placeholderText} from './moc';
 import {OpenModalSubscriber} from 'src/components/CompositeBar/HighlightedItem/HighlightedItem';
-import {RadioButton, Radio, Modal, Button, eventBroker, EventBrokerData} from '@gravity-ui/uikit';
 
 import logoIcon from '../../../../.storybook/assets/logo.svg';
-import menuItemIcon from '../../../../.storybook/assets/settings.svg';
 
 import './AsideHeaderShowcase.scss';
 
@@ -30,15 +31,6 @@ interface AsideHeaderShowcaseProps {
     initialCompact?: boolean;
 }
 
-const openModalSubscriber = (callback: OpenModalSubscriber) => {
-    // @ts-ignore
-    eventBroker.subscribe((data: EventBrokerData<{layersCount: number}>) => {
-        if (data?.eventId === 'layerschange') {
-            callback(data?.meta?.layersCount !== 0);
-        }
-    });
-};
-
 export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
     multipleTooltip = false,
     initialCompact = false,
@@ -52,6 +44,15 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
 
     const navRef = React.useRef<AsideHeader>(null);
 
+    const openModalSubscriber = (callback: OpenModalSubscriber) => {
+        // @ts-ignore
+        eventBroker.subscribe((data: EventBrokerData<{layersCount: number}>) => {
+            if (data?.eventId === 'layerschange') {
+                callback(data?.meta?.layersCount !== 0 && isModalOpen);
+            }
+        });
+    };
+
     return (
         <div className={b()}>
             <Modal open={isModalOpen} onClose={() => setIsModalOpen(false)}>
@@ -73,9 +74,8 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
                     {
                         id: 'components',
                         title: 'Components',
-                        icon: menuItemIcon,
+                        icon: Gear,
                         current: visiblePanel === Panel.Components,
-                        iconSize: 20,
                         onItemClick: () =>
                             setVisiblePanel(
                                 visiblePanel === Panel.Components ? undefined : Panel.Components,
@@ -87,8 +87,7 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
                         item: {
                             id: 'services',
                             title: 'Services',
-                            icon: menuItemIcon,
-                            iconSize: 20,
+                            icon: Gear,
                             onItemClick: () => {
                                 setVisiblePanel(undefined);
                                 setSubheaderPopupVisible(!subheaderPopupVisible);
@@ -113,9 +112,8 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
                         item: {
                             id: 'search',
                             title: 'Search',
-                            icon: menuItemIcon,
+                            icon: Magnifier,
                             current: visiblePanel === Panel.Search,
-                            iconSize: 20,
                             onItemClick: () =>
                                 setVisiblePanel(
                                     visiblePanel === Panel.Search ? undefined : Panel.Search,
@@ -131,8 +129,7 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
                             compact={compact}
                             item={{
                                 id: 'infra',
-                                icon: menuItemIcon,
-                                iconSize: 20,
+                                icon: Gear,
                                 current: popupVisible,
                                 title: (
                                     <div className={b('infra-text')}>
@@ -166,8 +163,7 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
                         <FooterItem
                             item={{
                                 id: 'project-settings',
-                                icon: menuItemIcon,
-                                iconSize: 20,
+                                icon: Gear,
                                 title: 'Settings with panel',
                                 tooltipText: 'Settings with panel',
                                 current: visiblePanel === Panel.ProjectSettings,
@@ -186,8 +182,7 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
                         <FooterItem
                             item={{
                                 id: 'user-settings',
-                                icon: menuItemIcon,
-                                iconSize: 20,
+                                icon: Gear,
                                 title: 'User Settings with panel',
                                 tooltipText: 'User Settings with panel',
                                 current: visiblePanel === Panel.UserSettings,

diff --git a/src/components/AsideHeader/__stories__/moc.tsx b/src/components/AsideHeader/__stories__/moc.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import settingsIcon from '../../../../.storybook/assets/settings.svg';
-import addIcon from '../../../../.storybook/assets/add.svg';
+import {Gear, Plus} from '@gravity-ui/icons';
+
 import {MenuItem} from 'src/components/types';
 
 function renderTag(tag: string) {
@@ -11,21 +11,18 @@ export const menuItemsShowcase: MenuItem[] = [
     {
         id: 'overview',
         title: 'Overview',
-        icon: settingsIcon,
-        iconSize: 20,
+        icon: Gear,
     },
     {
         id: 'operations',
         title: 'Operations',
-        icon: settingsIcon,
-        iconSize: 20,
+        icon: Gear,
         rightAdornment: renderTag('New'),
     },
     {
         id: 'templates',
         title: 'Main notifications long menu title',
-        icon: settingsIcon,
-        iconSize: 20,
+        icon: Gear,
     },
     {
         id: 'divider',
@@ -35,18 +32,16 @@ export const menuItemsShowcase: MenuItem[] = [
     {
         id: 'notifications',
         title: 'Main notifications long long long long menu title',
-        icon: settingsIcon,
+        icon: Gear,
         current: true,
-        iconSize: 20,
         onItemClick({id, title, current}) {
             alert(JSON.stringify({id, title, current}));
         },
     },
     {
         id: 'dashboard',
         title: 'Dashboard',
-        icon: settingsIcon,
-        iconSize: 20,
+        icon: Gear,
         rightAdornment: renderTag('New'),
         onItemClick({id, title, current}) {
             alert(JSON.stringify({id, title, current}));
@@ -61,8 +56,7 @@ export const menuItemsShowcase: MenuItem[] = [
         id: 'id1',
         title: 'Objects',
         tooltipText: 'Custom tooltip text',
-        icon: settingsIcon,
-        iconSize: 20,
+        icon: Gear,
         pinned: true,
         onItemClick({id, title, current}) {
             alert(JSON.stringify({id, title, current}));
@@ -81,8 +75,7 @@ export const menuItemsShowcase: MenuItem[] = [
         id: 'action2',
         title: 'Create smth',
         type: 'action',
-        icon: addIcon,
-        iconSize: 14,
+        icon: Plus,
         afterMoreButton: true,
         onItemClick({id, title, current}) {
             alert(JSON.stringify({id, title, current}));

diff --git a/src/components/CompositeBar/CompositeBar.tsx b/src/components/CompositeBar/CompositeBar.tsx
@@ -232,7 +232,7 @@ export const CompositeBar: FC<CompositeBarProps> = ({
         );
     } else {
         node = (
-            <div className={b()}>
+            <div className={b({subheader: true})}>
                 <CompositeBarView type="subheader" items={items} onItemClick={onItemClick} />
             </div>
         );

diff --git a/src/components/CompositeBar/HighlightedItem/HighlightedItem.scss b/src/components/CompositeBar/HighlightedItem/HighlightedItem.scss
@@ -11,8 +11,8 @@ $block: '.#{variables.$ns}composite-bar-highlighted-item';
     justify-content: center;
 
     &__icon {
-        width: 38px;
-        height: 38px;
+        width: var(--gn-aside-header-item-icon-background-size);
+        height: var(--gn-aside-header-item-icon-background-size);
         border-radius: 7px;
         cursor: pointer;
         background-color: var(--g-color-base-background);