diff --git a/.storybook/assets/add.svg b/.storybook/assets/add.svg deleted file mode 100644 index 81d5a06..0000000 --- a/.storybook/assets/add.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/.storybook/assets/settings.svg b/.storybook/assets/settings.svg deleted file mode 100644 index a1e9ff7..0000000 --- a/.storybook/assets/settings.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/README.md b/README.md index 245bfe3..48684a3 100644 --- a/README.md +++ b/README.md @@ -30,3 +30,19 @@ npm install --dev @gravity-ui/uikit@^3.0.2 @bem-react/classname@1.6.0 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 index 96776de..f61bf89 100644 --- 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 index affabfd..45250a6 100644 --- 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 = ({ multipleTooltip = false, initialCompact = false, @@ -52,6 +44,15 @@ export const AsideHeaderShowcase: FC = ({ const navRef = React.useRef(null); + const openModalSubscriber = (callback: OpenModalSubscriber) => { + // @ts-ignore + eventBroker.subscribe((data: EventBrokerData<{layersCount: number}>) => { + if (data?.eventId === 'layerschange') { + callback(data?.meta?.layersCount !== 0 && isModalOpen); + } + }); + }; + return (
setIsModalOpen(false)}> @@ -73,9 +74,8 @@ export const AsideHeaderShowcase: FC = ({ { 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 = ({ item: { id: 'services', title: 'Services', - icon: menuItemIcon, - iconSize: 20, + icon: Gear, onItemClick: () => { setVisiblePanel(undefined); setSubheaderPopupVisible(!subheaderPopupVisible); @@ -113,9 +112,8 @@ export const AsideHeaderShowcase: FC = ({ 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 = ({ compact={compact} item={{ id: 'infra', - icon: menuItemIcon, - iconSize: 20, + icon: Gear, current: popupVisible, title: (
@@ -166,8 +163,7 @@ export const AsideHeaderShowcase: FC = ({ = ({ = ({ ); } else { node = ( -
+
); diff --git a/src/components/CompositeBar/HighlightedItem/HighlightedItem.scss b/src/components/CompositeBar/HighlightedItem/HighlightedItem.scss index b516a2d..9784b85 100644 --- 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); diff --git a/src/components/CompositeBar/Item/Item.scss b/src/components/CompositeBar/Item/Item.scss index b5b0c72..1c1f8db 100644 --- a/src/components/CompositeBar/Item/Item.scss +++ b/src/components/CompositeBar/Item/Item.scss @@ -4,7 +4,7 @@ $block: '.#{variables.$ns}composite-bar-item'; #{$block} { $class: &; - --composite-bar-item-action-size: 36px; + --gn-composite-bar-item-action-size: 36px; display: flex; width: 100%; @@ -14,11 +14,20 @@ $block: '.#{variables.$ns}composite-bar-item'; &__icon { color: var(--g-color-text-misc); + + .#{variables.$ns}footer-item &, + .#{variables.$ns}composite-bar-highlighted-item & { + color: var(--gn-aside-header-footer-item-icon-color); + } + + .#{variables.$ns}composite-bar_subheader & { + color: var(--gn-aside-header-subheader-item-icon-color); + } } &__icon-place { flex-shrink: 0; - width: var(--aside-header-min-width); + width: var(--gn-aside-header-min-width); display: flex; align-items: center; justify-content: center; @@ -91,11 +100,11 @@ $block: '.#{variables.$ns}composite-bar-item'; &_type_action { justify-content: center; - height: var(--composite-bar-item-action-size); + height: var(--gn-composite-bar-item-action-size); margin: 0 10px 8px; background: var(--g-color-base-float); box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.03), 0px 5px 6px rgba(0, 0, 0, 0.12); - border-radius: var(--composite-bar-item-action-size); + border-radius: var(--gn-composite-bar-item-action-size); transition: transform 0.1s ease-out, background-color 0.15s linear; &:focus { @@ -117,7 +126,7 @@ $block: '.#{variables.$ns}composite-bar-item'; } & #{$class}__icon-place { - width: var(--composite-bar-item-action-size); + width: var(--gn-composite-bar-item-action-size); } & #{$class}__title { @@ -154,8 +163,8 @@ $block: '.#{variables.$ns}composite-bar-item'; top: 50%; left: 50%; z-index: -1; - width: 38px; - height: 38px; + width: var(--gn-aside-header-item-icon-background-size); + height: var(--gn-aside-header-item-icon-background-size); margin-top: -19px; margin-left: -19px; border-radius: 7px; @@ -163,7 +172,7 @@ $block: '.#{variables.$ns}composite-bar-item'; } &#{$class}_type_action { - width: var(--composite-bar-item-action-size); + width: var(--gn-composite-bar-item-action-size); & #{$class}__title { margin: 0; diff --git a/src/components/CompositeBar/Item/Item.tsx b/src/components/CompositeBar/Item/Item.tsx index 46c9c78..f0ec330 100644 --- a/src/components/CompositeBar/Item/Item.tsx +++ b/src/components/CompositeBar/Item/Item.tsx @@ -5,11 +5,11 @@ import {List, Icon, Popup, PopupPlacement, PopupProps, Tooltip} from '@gravity-u import {MakeItemParams, MenuItem} from '../../types'; import {getSelectedItemIndex} from '../utils'; +import {ASIDE_HEADER_ICON_SIZE} from '../../constants'; import { COLLAPSE_ITEM_ID, POPUP_ITEM_HEIGHT, POPUP_PLACEMENT, - ICON_SIZE, ITEM_TYPE_REGULAR, } from '../constants'; @@ -105,7 +105,7 @@ export const Item: React.FC = (props) => { const current = item.current || false; const tooltipText = item.tooltipText || item.title; const icon = item.icon; - const iconSize = item.iconSize || ICON_SIZE; + const iconSize = item.iconSize || ASIDE_HEADER_ICON_SIZE; const collapsedItem = item.id === COLLAPSE_ITEM_ID; const onClose = React.useCallback( diff --git a/src/components/CompositeBar/constants.ts b/src/components/CompositeBar/constants.ts index f561ff5..d16a43d 100644 --- a/src/components/CompositeBar/constants.ts +++ b/src/components/CompositeBar/constants.ts @@ -1,6 +1,5 @@ import {PopupPlacement} from '@gravity-ui/uikit'; -export const ICON_SIZE = 24; export const ITEM_HEIGHT = 40; export const ITEM_TYPE_REGULAR = 'regular'; export const COLLAPSE_ITEM_ID = 'collapse-item-id'; diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx index 75a3f85..a251e24 100644 --- a/src/components/Content/Content.tsx +++ b/src/components/Content/Content.tsx @@ -25,7 +25,7 @@ RenderContent.displayName = 'RenderContent'; export const Content: React.FC = ({ size, // TODO: move to context when MobileHeader will support it className, - cssSizeVariableName = '--aside-header-size', + cssSizeVariableName = '--gn-aside-header-size', renderContent, }) => { return ( diff --git a/src/components/FooterItem/FooterItem.tsx b/src/components/FooterItem/FooterItem.tsx index 0e7068f..1ceca8e 100644 --- a/src/components/FooterItem/FooterItem.tsx +++ b/src/components/FooterItem/FooterItem.tsx @@ -2,7 +2,7 @@ import React from 'react'; import {block} from '../utils/cn'; import {Item, ItemProps} from '../CompositeBar/Item/Item'; -import {ASIDE_HEADER_FOOTER_ICON_SIZE} from '../constants'; +import {ASIDE_HEADER_ICON_SIZE} from '../constants'; import './FooterItem.scss'; @@ -16,7 +16,7 @@ export const FooterItem: React.FC = ({item, ...props}) => { return ( @@ -98,7 +98,7 @@ export function MobileHeaderShowcase() { ); }} > - +
); @@ -129,7 +129,7 @@ export function MobileHeaderShowcase() { renderFooter: () => (