From f3b2bf77bbdcbd1817a25fcbc1878695ce2b939d Mon Sep 17 00:00:00 2001 From: Angelina Gadzhieva Date: Thu, 7 Sep 2023 18:33:48 +0300 Subject: [PATCH 1/5] feat!: change default color subheader, footer icons & default icon size --- .../AsideHeader/__stories__/moc.tsx | 25 +++++++------------ src/components/CompositeBar/CompositeBar.tsx | 2 +- src/components/CompositeBar/Item/Item.scss | 6 +++++ src/components/CompositeBar/Item/Item.tsx | 4 +-- src/components/CompositeBar/constants.ts | 1 - src/components/FooterItem/FooterItem.tsx | 4 +-- .../__stories__/FooterItem.stories.tsx | 6 ++--- src/components/constants.ts | 2 +- 8 files changed, 24 insertions(+), 26 deletions(-) diff --git a/src/components/AsideHeader/__stories__/moc.tsx b/src/components/AsideHeader/__stories__/moc.tsx index fe416340..438aaf00 100644 --- 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,9 +32,8 @@ 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})); }, @@ -45,8 +41,7 @@ export const menuItemsShowcase: MenuItem[] = [ { 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 index a32c533d..2f2c5b79 100644 --- a/src/components/CompositeBar/CompositeBar.tsx +++ b/src/components/CompositeBar/CompositeBar.tsx @@ -232,7 +232,7 @@ export const CompositeBar: FC = ({ ); } else { node = ( -
+
); diff --git a/src/components/CompositeBar/Item/Item.scss b/src/components/CompositeBar/Item/Item.scss index b5b0c72b..4a23831e 100644 --- a/src/components/CompositeBar/Item/Item.scss +++ b/src/components/CompositeBar/Item/Item.scss @@ -5,6 +5,7 @@ $block: '.#{variables.$ns}composite-bar-item'; #{$block} { $class: &; --composite-bar-item-action-size: 36px; + --footer-item-icon-color: var(--g-color-text-primary); display: flex; width: 100%; @@ -14,6 +15,11 @@ $block: '.#{variables.$ns}composite-bar-item'; &__icon { color: var(--g-color-text-misc); + + .#{variables.$ns}footer-item &, + .#{variables.$ns}composite-bar_subheader & { + color: var(--footer-item-icon-color); + } } &__icon-place { diff --git a/src/components/CompositeBar/Item/Item.tsx b/src/components/CompositeBar/Item/Item.tsx index 46c9c786..f0ec3305 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 f561ff50..d16a43d0 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/FooterItem/FooterItem.tsx b/src/components/FooterItem/FooterItem.tsx index 0e7068f1..1ceca8e7 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 ( Date: Thu, 7 Sep 2023 19:06:45 +0300 Subject: [PATCH 2/5] feat!: add prefix to navigation css vars --- src/components/AsideHeader/AsideHeader.scss | 37 ++++++++++--------- .../HighlightedItem/HighlightedItem.scss | 4 +- src/components/CompositeBar/Item/Item.scss | 23 +++++++----- src/components/Content/Content.tsx | 2 +- .../__stories__/FooterItemShowcase.scss | 2 +- src/components/Logo/Logo.scss | 4 +- .../__stories__/BurgerMenuShowcase.scss | 2 +- 7 files changed, 40 insertions(+), 34 deletions(-) diff --git a/src/components/AsideHeader/AsideHeader.scss b/src/components/AsideHeader/AsideHeader.scss index 96776deb..b037f3c3 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-header-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-header-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-header-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-header-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/CompositeBar/HighlightedItem/HighlightedItem.scss b/src/components/CompositeBar/HighlightedItem/HighlightedItem.scss index b516a2da..9784b855 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 4a23831e..1c1f8db6 100644 --- a/src/components/CompositeBar/Item/Item.scss +++ b/src/components/CompositeBar/Item/Item.scss @@ -4,8 +4,7 @@ $block: '.#{variables.$ns}composite-bar-item'; #{$block} { $class: &; - --composite-bar-item-action-size: 36px; - --footer-item-icon-color: var(--g-color-text-primary); + --gn-composite-bar-item-action-size: 36px; display: flex; width: 100%; @@ -17,14 +16,18 @@ $block: '.#{variables.$ns}composite-bar-item'; 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(--footer-item-icon-color); + 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; @@ -97,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 { @@ -123,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 { @@ -160,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; @@ -169,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/Content/Content.tsx b/src/components/Content/Content.tsx index 75a3f85d..a251e247 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/__stories__/FooterItemShowcase.scss b/src/components/FooterItem/__stories__/FooterItemShowcase.scss index fd70d5f0..f8a82b55 100644 --- a/src/components/FooterItem/__stories__/FooterItemShowcase.scss +++ b/src/components/FooterItem/__stories__/FooterItemShowcase.scss @@ -1,7 +1,7 @@ @import '../../../../styles/mixins'; .footer-item-showcase { - --aside-header-min-width: 56px; + --gn-aside-header-min-width: 56px; &__content { @include text-body-3; diff --git a/src/components/Logo/Logo.scss b/src/components/Logo/Logo.scss index 872d85cb..153f2c58 100644 --- a/src/components/Logo/Logo.scss +++ b/src/components/Logo/Logo.scss @@ -11,7 +11,7 @@ $block: '.#{variables.$ns}logo'; &__logo-btn-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; @@ -23,7 +23,7 @@ $block: '.#{variables.$ns}logo'; } &__btn-logo.yc-button_view_flat.yc-button_size_l { - --yc-button-height: 38px; + --yc-button-height: var(--gn-aside-header-item-icon-background-size); } &__logo { diff --git a/src/components/MobileHeader/BurgerMenu/__stories__/BurgerMenuShowcase.scss b/src/components/MobileHeader/BurgerMenu/__stories__/BurgerMenuShowcase.scss index cb979653..40aaf156 100644 --- a/src/components/MobileHeader/BurgerMenu/__stories__/BurgerMenuShowcase.scss +++ b/src/components/MobileHeader/BurgerMenu/__stories__/BurgerMenuShowcase.scss @@ -1,7 +1,7 @@ @import '../../../../../styles/mixins'; .burger-menu-showcase { - --aside-header-min-width: 56px; + --gn-aside-header-min-width: 56px; width: 320px; From 6024e8ad725a192592b3b6c9f805dca004755e4e Mon Sep 17 00:00:00 2001 From: Angelina Gadzhieva Date: Fri, 8 Sep 2023 15:20:25 +0300 Subject: [PATCH 3/5] fix: readme and story Add css vars to readme Fix HighlightedNode in story Rename css var --gn-aside-header-header-divider-line-color --- README.md | 16 ++++++++++++++++ src/components/AsideHeader/AsideHeader.scss | 8 ++++---- .../__stories__/AsideHeaderShowcase.tsx | 2 +- 3 files changed, 21 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 245bfe37..48684a30 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 b037f3c3..f61bf890 100644 --- a/src/components/AsideHeader/AsideHeader.scss +++ b/src/components/AsideHeader/AsideHeader.scss @@ -5,7 +5,7 @@ $block: '.#{variables.$ns}aside-header'; .g-root { --gn-aside-header-background-color: var(--g-color-base-warning-light); --gn-aside-header-collapse-button-divider-line-color: var( - --gn-aside-header-header-divider-line-color + --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); @@ -15,13 +15,13 @@ $block: '.#{variables.$ns}aside-header'; .g-root_theme_light, .g-root_theme_light-hc { --gn-aside-header-divider-line-color: transparent; - --gn-aside-header-header-divider-line-color: var(--g-color-line-generic); + --gn-aside-header-subheader-divider-line-color: var(--g-color-line-generic); } .g-root_theme_dark, .g-root_theme_dark-hc { --gn-aside-header-divider-line-color: var(--g-color-line-generic-solid); - --gn-aside-header-header-divider-line-color: var(--g-color-line-generic-solid); + --gn-aside-header-subheader-divider-line-color: var(--g-color-line-generic-solid); } #{$block} { @@ -148,7 +148,7 @@ $block: '.#{variables.$ns}aside-header'; width: 100%; height: 1px; content: ''; - background-color: var(--gn-aside-header-header-divider-line-color); + background-color: var(--gn-aside-header-subheader-divider-line-color); } } diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx index affabfdc..f2cddaae 100644 --- a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx +++ b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx @@ -180,7 +180,7 @@ export const AsideHeaderShowcase: FC = ({ }, }} bringForward - openModalSubscriber={openModalSubscriber} + openModalSubscriber={isModalOpen ? openModalSubscriber : undefined} compact={compact} /> Date: Fri, 8 Sep 2023 15:30:56 +0300 Subject: [PATCH 4/5] chore: remove useless storybook assets --- .storybook/assets/add.svg | 1 - .storybook/assets/settings.svg | 1 - .../__stories__/AsideHeaderShowcase.tsx | 23 ++++++++----------- .../BurgerMenu/__stories__/moc.tsx | 17 +++++++------- .../__stories__/MobileHeaderShowcase.tsx | 18 +++++++-------- 5 files changed, 27 insertions(+), 33 deletions(-) delete mode 100644 .storybook/assets/add.svg delete mode 100644 .storybook/assets/settings.svg diff --git a/.storybook/assets/add.svg b/.storybook/assets/add.svg deleted file mode 100644 index 81d5a06a..00000000 --- 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 a1e9ff71..00000000 --- a/.storybook/assets/settings.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx index f2cddaae..3d0f9658 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'; @@ -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 = ({ = ({ @@ -98,7 +98,7 @@ export function MobileHeaderShowcase() { ); }} > - +
); @@ -129,7 +129,7 @@ export function MobileHeaderShowcase() { renderFooter: () => ( Date: Fri, 8 Sep 2023 16:44:05 +0300 Subject: [PATCH 5/5] fix: fix highlighted item in story --- .../__stories__/AsideHeaderShowcase.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx index 3d0f9658..45250a68 100644 --- a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx +++ b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx @@ -31,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, @@ -53,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)}> @@ -176,7 +176,7 @@ export const AsideHeaderShowcase: FC = ({ }, }} bringForward - openModalSubscriber={isModalOpen ? openModalSubscriber : undefined} + openModalSubscriber={openModalSubscriber} compact={compact} />