Skip to content

Commit b2744cf

Browse files
benax-seLunory
benax-se
authored and
Lunory
committed
feat: add top alert to MobileHeader component (#335)
* feat: add top alert to MobileHeader component * refactor: rename types and variable related with TopAlert
1 parent ea78355 commit b2744cf

20 files changed

+211
-189
lines changed

‎src/components/AsideHeader/AsideHeader.scss‎

Lines changed: 7 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@
22

33
$block: '.#{variables.$ns}aside-header';
44

5-
.g-root {
6-
--gn-aside-top-panel-height: 0px;
7-
}
8-
95
#{$block} {
106
$class: &;
117
--gn-aside-header-min-width: 56px;
@@ -24,7 +20,7 @@ $block: '.#{variables.$ns}aside-header';
2420

2521
&__aside {
2622
position: sticky;
27-
top: var(--gn-aside-top-panel-height);
23+
top: var(--gn-top-alert-height, 0);
2824
left: 0;
2925
height: 100vh;
3026
width: inherit;
@@ -35,8 +31,8 @@ $block: '.#{variables.$ns}aside-header';
3531
var(--gn-aside-header-background-color, var(--_--background-color))
3632
);
3733
z-index: var(--gn-aside-header-z-index, 100);
38-
max-height: calc(100vh - var(--gn-aside-top-panel-height));
39-
margin-top: var(--gn-aside-top-panel-height);
34+
max-height: calc(100vh - var(--gn-top-alert-height, 0));
35+
margin-top: var(--gn-top-alert-height, 0);
4036

4137
box-sizing: border-box;
4238

@@ -205,9 +201,9 @@ $block: '.#{variables.$ns}aside-header';
205201
&__panels {
206202
z-index: var(--gn-aside-header-panel-z-index, 98);
207203
position: fixed;
208-
inset: var(--gn-aside-top-panel-height) 0 0;
204+
inset: var(--gn-top-alert-height, 0) 0 0;
209205
overflow: auto;
210-
max-height: calc(100vh - var(--gn-aside-top-panel-height));
206+
max-height: calc(100vh - var(--gn-top-alert-height, 0));
211207
}
212208

213209
&__panel {
@@ -222,38 +218,17 @@ $block: '.#{variables.$ns}aside-header';
222218
flex-direction: row;
223219
}
224220

225-
&__pane-top-divider {
226-
height: 1px;
227-
background-color: var(
228-
--gn-aside-header-divider-horizontal-color,
229-
var(--_--horizontal-divider-line-color)
230-
);
231-
margin-top: -1px;
232-
}
233-
234-
&__pane-top {
221+
&__top-alert {
235222
position: fixed;
236223
z-index: var(--gn-aside-header-pane-top-z-index, 98);
237224
top: 0;
238225
background: var(--g-color-base-background);
239226
width: 100%;
240227
}
241228

242-
&__pane-top-alert {
243-
&_centered {
244-
display: flex;
245-
justify-content: space-around;
246-
}
247-
248-
&_dense {
249-
padding-top: var(--g-spacing-2);
250-
padding-bottom: var(--g-spacing-2);
251-
}
252-
}
253-
254229
&__content {
255230
width: calc(100% - var(--gn-aside-header-size));
256231
z-index: var(--gn-aside-header-content-z-index, 95);
257-
margin-top: var(--gn-aside-top-panel-height);
232+
margin-top: var(--gn-top-alert-height, 0);
258233
}
259234
}

‎src/components/AsideHeader/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@ export const Aside: FC = () => {
175175

176176
Top Alert can be useful for displaying important information that users need to know. This alert is often appeared in all pages like call to action or warning.
177177

178-
You can customize the inner content, make alert closeable if necessary. For reading top alert height see value from CSS variable `--gn-aside-top-panel-height`.
178+
You can customize the inner content, make alert closeable if necessary. For reading top alert height see value from CSS variable `--gn-top-alert-height`.
179179

180180
| Name | Description | Type | Default |
181181
| :-------------- | :---------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------: | :----------: |
@@ -202,7 +202,7 @@ You can customize the inner content, make alert closeable if necessary. For read
202202
| `--gn-aside-header-expanded-background-color` | Expanded navigation background color | `--g-color-base-background` |
203203
| `--gn-aside-header-divider-horizontal-color` | All horizontal divider line color | `--g-color-line-generic` |
204204
| `--gn-aside-header-divider-vertical-color` | Vertical divider line color between `AsideHeader` and content | `--g-color-line-generic` |
205-
| `--gn-aside-top-panel-height` | **Read only**.`AsideHeader` top alert height | 0px |
205+
| `--gn-top-alert-height` | **Read only**.`AsideHeader` top alert height | 0px |
206206
| `--gn-aside-header-padding-top` | Navigation top padding. May be helpful when logo and subheader items hide | |
207207
| Item | | |
208208
| `--gn-aside-header-general-item-icon-color` | Icon color for Subheader and Footer items | `--g-color-text-primary` |

‎src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
eventBroker,
1212
} from '@gravity-ui/uikit';
1313

14-
import {AsideHeader, AsideHeaderTopAlertProps, FooterItem} from '../..';
14+
import {AsideHeader, FooterItem, TopAlertProps} from '../..';
1515
import {ASIDE_HEADER_ICON_SIZE} from '../../constants';
1616
import {MenuItem, OpenModalSubscriber} from '../../types';
1717
import {cn} from '../../utils/cn';
@@ -39,7 +39,7 @@ enum Panel {
3939
interface AsideHeaderShowcaseProps {
4040
multipleTooltip?: boolean;
4141
initialCompact?: boolean;
42-
topAlert?: AsideHeaderTopAlertProps;
42+
topAlert?: TopAlertProps;
4343
customBackground?: React.ReactNode;
4444
customBackgroundClassName?: string;
4545
headerDecoration?: boolean;

‎src/components/AsideHeader/components/PageLayout/PageLayout.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import {b} from '../../utils';
88

99
import '../../AsideHeader.scss';
1010

11-
const TopPanel = React.lazy(() =>
12-
import('../TopPanel').then((module) => ({default: module.TopPanel})),
11+
const TopAlert = React.lazy(() =>
12+
import('../../../TopAlert').then((module) => ({default: module.TopAlert})),
1313
);
1414

1515
export interface PageLayoutProps extends PropsWithChildren<LayoutProps> {}
@@ -28,7 +28,7 @@ const Layout = ({compact, className, children, topAlert}: PageLayoutProps) => {
2828
>
2929
{topAlert && (
3030
<Suspense fallback={null}>
31-
<TopPanel topAlert={topAlert} />
31+
<TopAlert className={b('top-alert')} alert={topAlert} />
3232
</Suspense>
3333
)}
3434
<div className={b('pane-container')}>{children}</div>

‎src/components/AsideHeader/components/TopPanel.tsx‎

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎src/components/AsideHeader/components/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
11
export {FirstPanel} from './FirstPanel';
2-
export {TopPanel} from './TopPanel';

‎src/components/AsideHeader/types.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,14 @@ import {QAProps} from '@gravity-ui/uikit';
22

33
import {RenderContentType} from '../Content';
44
import {DrawerItemProps} from '../Drawer/Drawer';
5-
import {
6-
AsideHeaderTopAlertProps,
7-
LogoProps,
8-
MenuItem,
9-
OpenModalSubscriber,
10-
SubheaderMenuItem,
11-
} from '../types';
5+
import {LogoProps, MenuItem, OpenModalSubscriber, SubheaderMenuItem, TopAlertProps} from '../types';
126

137
import {AsideHeaderContextType} from './AsideHeaderContext';
148

159
export interface LayoutProps {
1610
compact: boolean;
1711
className?: string;
18-
topAlert?: AsideHeaderTopAlertProps;
12+
topAlert?: TopAlertProps;
1913
}
2014

2115
export interface EditMenuProps {
@@ -33,7 +27,7 @@ export interface AsideHeaderGeneralProps extends QAProps {
3327
collapseTitle?: string;
3428
expandTitle?: string;
3529
menuMoreTitle?: string;
36-
topAlert?: AsideHeaderTopAlertProps;
30+
topAlert?: TopAlertProps;
3731
customBackground?: React.ReactNode;
3832
customBackgroundClassName?: string;
3933
hideCollapseButton?: boolean;

‎src/components/AsideHeader/useAsideHeaderTopPanel.tsx‎

Lines changed: 0 additions & 63 deletions
This file was deleted.

‎src/components/MobileHeader/MobileHeader.scss‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,14 @@ $block: '.#{variables.$ns}mobile-header';
99

1010
background-color: var(--g-color-base-background);
1111

12-
&__header {
13-
background-color: var(--g-color-base-background);
14-
border-bottom: 1px solid var(--g-color-line-generic);
12+
&__top {
1513
position: sticky;
1614
top: 0;
15+
background-color: var(--g-color-base-background);
16+
}
17+
18+
&__header {
19+
border-bottom: 1px solid var(--g-color-line-generic);
1720
padding: 0 10px;
1821
box-sizing: border-box;
1922
display: flex;

‎src/components/MobileHeader/MobileHeader.tsx‎

Lines changed: 27 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React, {useCallback, useEffect, useMemo, useState} from 'react';
1+
import React, {Suspense, useCallback, useEffect, useMemo, useState} from 'react';
22

33
import {useForwardRef} from '../../hooks/useForwardRef';
44
import {Content, RenderContentType} from '../Content';
55
import {Drawer, DrawerItem, DrawerItemProps} from '../Drawer/Drawer';
66
import {MobileLogo} from '../MobileLogo';
7-
import {LogoProps} from '../types';
7+
import {LogoProps, TopAlertProps} from '../types';
88
import {block} from '../utils/cn';
99

1010
import {Burger} from './Burger/Burger';
@@ -25,6 +25,10 @@ import {MobileHeaderEvent, MobileHeaderEventOptions, MobileMenuItem} from './typ
2525

2626
import './MobileHeader.scss';
2727

28+
const TopAlert = React.lazy(() =>
29+
import('../TopAlert').then((module) => ({default: module.TopAlert})),
30+
);
31+
2832
const b = block('mobile-header');
2933

3034
type PanelName = DrawerItemProps['id'] | null;
@@ -44,6 +48,7 @@ export interface MobileHeaderProps {
4448
burgerCloseTitle?: string;
4549
burgerOpenTitle?: string;
4650
panelItems?: PanelItem[];
51+
topAlert?: TopAlertProps;
4752
renderContent?: RenderContentType;
4853
sideItemRenderContent?: RenderContentType;
4954
onEvent?: (itemName: string, eventName: MobileHeaderEvent) => void;
@@ -67,6 +72,7 @@ export const MobileHeader = React.forwardRef<HTMLDivElement, MobileHeaderProps>(
6772
className,
6873
contentClassName,
6974
overlapPanel,
75+
topAlert,
7076
},
7177
ref,
7278
): React.ReactElement => {
@@ -261,24 +267,31 @@ export const MobileHeader = React.forwardRef<HTMLDivElement, MobileHeaderProps>(
261267

262268
return (
263269
<div className={b({compact}, className)} ref={targetRef}>
264-
<header className={b('header')} style={{height: size}}>
265-
<Burger
266-
opened={visiblePanel === burgerPanelItem.id}
267-
onClick={() => onPanelToggle(BURGER_PANEL_ITEM_ID)}
268-
className={b('burger')}
269-
closeTitle={burgerCloseTitle}
270-
openTitle={burgerOpenTitle}
271-
/>
272-
<MobileLogo {...logo} compact={compact} onClick={onLogoClick} />
270+
<div className={b('top')}>
271+
{topAlert && (
272+
<Suspense fallback={null}>
273+
<TopAlert alert={topAlert} mobileView />
274+
</Suspense>
275+
)}
276+
<header className={b('header')} style={{height: size}}>
277+
<Burger
278+
opened={visiblePanel === burgerPanelItem.id}
279+
onClick={() => onPanelToggle(BURGER_PANEL_ITEM_ID)}
280+
className={b('burger')}
281+
closeTitle={burgerCloseTitle}
282+
openTitle={burgerOpenTitle}
283+
/>
284+
<MobileLogo {...logo} compact={compact} onClick={onLogoClick} />
273285

274-
<div className={b('side-item')}>{sideItemRenderContent?.({size})}</div>
275-
</header>
286+
<div className={b('side-item')}>{sideItemRenderContent?.({size})}</div>
287+
</header>
288+
</div>
276289

277290
<Drawer
278291
className={b('panels')}
279292
onVeilClick={onCloseDrawer}
280293
onEscape={onCloseDrawer}
281-
style={{top: size}}
294+
style={{top: `calc(${size}px + var(--gn-top-alert-height, 0)`}}
282295
>
283296
{[burgerPanelItem, ...panelItems].map((item) => (
284297
<DrawerItem

0 commit comments

Comments
 (0)