Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from
Sep 8, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f3b2bf7
feat!: change default color subheader, footer icons & default icon size
Lunory Sep 7, 2023
35f3954
feat!: add prefix to navigation css vars
Lunory Sep 7, 2023
6024e8a
fix: readme and story
Lunory Sep 8, 2023
7d9a989
chore: remove useless storybook assets
Lunory Sep 8, 2023
b50b6ed
fix: fix highlighted item in story
Lunory Sep 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .storybook/assets/add.svg
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion .storybook/assets/settings.svg
View file
Open in desktop

This file was deleted.

16 changes: 16 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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` |
37 changes: 20 additions & 17 deletions src/components/AsideHeader/AsideHeader.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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)
);
}
Expand All @@ -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;
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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);
}
}

Expand Down Expand Up @@ -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;
}

Expand All @@ -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) {
Expand Down
41 changes: 18 additions & 23 deletions src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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,
Expand All @@ -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)}>
Expand All @@ -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,
Expand All @@ -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);
Expand All @@ -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,
Expand All @@ -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')}>
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand Down
25 changes: 9 additions & 16 deletions src/components/AsideHeader/__stories__/moc.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import settingsIcon from '../../../../.storybook/assets/settings.svg';
import addIcon from '../../../../.storybook/assets/add.svg';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we remove old assets?

import {Gear, Plus} from '@gravity-ui/icons';

import {MenuItem} from 'src/components/types';

function renderTag(tag: string) {
Expand All @@ -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',
Expand All @@ -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}));
Expand All @@ -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}));
Expand All @@ -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}));
Expand Down
2 changes: 1 addition & 1 deletion src/components/CompositeBar/CompositeBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions src/components/CompositeBar/HighlightedItem/HighlightedItem.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Loading