Skip to content

Commit 6412e9d

Browse files
benax-sebenax-se
authored
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 6ce6b99 commit 6412e9d

20 files changed

+211
-188
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
@@ -173,7 +173,7 @@ export const Aside: FC = () => {
173173

174174
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.
175175

176-
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`.
176+
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`.
177177

178178
| Name | Description | Type | Default |
179179
| :-------------- | :----------------------------------------------------------------- | :------------------------------------------------------------------------------------------------: | :---------: |
@@ -199,7 +199,7 @@ You can customize the inner content, make alert closeable if necessary. For read
199199
| `--gn-aside-header-expanded-background-color` | Expanded navigation background color | `--g-color-base-background` |
200200
| `--gn-aside-header-divider-horizontal-color` | All horizontal divider line color | `--g-color-line-generic` |
201201
| `--gn-aside-header-divider-vertical-color` | Vertical divider line color between `AsideHeader` and content | `--g-color-line-generic` |
202-
| `--gn-aside-top-panel-height` | **Read only**.`AsideHeader` top alert height | 0px |
202+
| `--gn-top-alert-height` | **Read only**.`AsideHeader` top alert height | 0px |
203203
| `--gn-aside-header-padding-top` | Navigation top padding. May be helpful when logo and subheader items hide | |
204204
| Item | | |
205205
| `--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 & 57 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 AsideHeaderGeneralProps extends QAProps {
@@ -25,7 +19,7 @@ export interface AsideHeaderGeneralProps extends QAProps {
2519
collapseTitle?: string;
2620
expandTitle?: string;
2721
menuMoreTitle?: string;
28-
topAlert?: AsideHeaderTopAlertProps;
22+
topAlert?: TopAlertProps;
2923
customBackground?: React.ReactNode;
3024
customBackgroundClassName?: string;
3125
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)