feat: add line-clamp at MobileHeader's TopAlert; fix types

gravity-ui · Nov 13, 2024 · 304b454 · 304b454
1 parent 817f3b9
commit 304b454
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 18 deletions.
diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx
@@ -11,7 +11,7 @@ import {
     eventBroker,
 } from '@gravity-ui/uikit';
 
-import {AsideHeader, AsideHeaderTopAlertProps, FooterItem} from '../..';
+import {AsideHeader, FooterItem, TopAlertProps} from '../..';
 import {ASIDE_HEADER_ICON_SIZE} from '../../constants';
 import {MenuItem, OpenModalSubscriber} from '../../types';
 import {cn} from '../../utils/cn';
@@ -39,7 +39,7 @@ enum Panel {
 interface AsideHeaderShowcaseProps {
     multipleTooltip?: boolean;
     initialCompact?: boolean;
-    topAlert?: AsideHeaderTopAlertProps;
+    topAlert?: TopAlertProps;
     customBackground?: React.ReactNode;
     customBackgroundClassName?: string;
     headerDecoration?: boolean;

diff --git a/src/components/AsideHeader/components/PageLayout/PageLayout.tsx b/src/components/AsideHeader/components/PageLayout/PageLayout.tsx
@@ -28,7 +28,7 @@ const Layout = ({compact, className, children, topAlert}: PageLayoutProps) => {
             >
                 {topAlert && (
                     <Suspense fallback={null}>
-                        <TopAlert className={b('top-alert')} alert={topAlert} withBottomBorder />
+                        <TopAlert className={b('top-alert')} alert={topAlert} />
                     </Suspense>
                 )}
                 <div className={b('pane-container')}>{children}</div>

diff --git a/src/components/AsideHeader/types.tsx b/src/components/AsideHeader/types.tsx
@@ -2,20 +2,14 @@ import {QAProps} from '@gravity-ui/uikit';
 
 import {RenderContentType} from '../Content';
 import {DrawerItemProps} from '../Drawer/Drawer';
-import {
-    AsideHeaderTopAlertProps,
-    LogoProps,
-    MenuItem,
-    OpenModalSubscriber,
-    SubheaderMenuItem,
-} from '../types';
+import {LogoProps, MenuItem, OpenModalSubscriber, SubheaderMenuItem, TopAlertProps} from '../types';
 
 import {AsideHeaderContextType} from './AsideHeaderContext';
 
 export interface LayoutProps {
     compact: boolean;
     className?: string;
-    topAlert?: AsideHeaderTopAlertProps;
+    topAlert?: TopAlertProps;
 }
 
 export interface AsideHeaderGeneralProps extends QAProps {
@@ -25,7 +19,7 @@ export interface AsideHeaderGeneralProps extends QAProps {
     collapseTitle?: string;
     expandTitle?: string;
     menuMoreTitle?: string;
-    topAlert?: AsideHeaderTopAlertProps;
+    topAlert?: TopAlertProps;
     customBackground?: React.ReactNode;
     customBackgroundClassName?: string;
     hideCollapseButton?: boolean;

diff --git a/src/components/MobileHeader/MobileHeader.tsx b/src/components/MobileHeader/MobileHeader.tsx
@@ -270,7 +270,7 @@ export const MobileHeader = React.forwardRef<HTMLDivElement, MobileHeaderProps>(
                 <div className={b('top')}>
                     {topAlert && (
                         <Suspense fallback={null}>
-                            <TopAlert alert={topAlert} />
+                            <TopAlert alert={topAlert} mobileView />
                         </Suspense>
                     )}
                     <header className={b('header')} style={{height: size}}>

diff --git a/src/components/TopAlert/TopAlert.tsx b/src/components/TopAlert/TopAlert.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Alert} from '@gravity-ui/uikit';
+import {Alert, Text} from '@gravity-ui/uikit';
 
 import {TopAlertProps} from '../types';
 import {block} from '../utils/cn';
@@ -14,10 +14,10 @@ const b = block('top-alert');
 type Props = {
     alert?: TopAlertProps;
     className?: string;
-    withBottomBorder?: boolean;
+    mobileView?: boolean;
 };
 
-export const TopAlert = ({alert, className, withBottomBorder = false}: Props) => {
+export const TopAlert = ({alert, className, mobileView = false}: Props) => {
     const {alertRef, updateTopSize} = useTopAlertHeight({alert});
 
     const [opened, setOpened] = React.useState(true);
@@ -40,7 +40,7 @@ export const TopAlert = ({alert, className, withBottomBorder = false}: Props) =>
     return (
         <div
             ref={alertRef}
-            className={b('wrapper', {'with-bottom-border': withBottomBorder && opened}, className)}
+            className={b('wrapper', {'with-bottom-border': !mobileView && opened}, className)}
         >
             {opened && (
                 <Alert
@@ -55,7 +55,15 @@ export const TopAlert = ({alert, className, withBottomBorder = false}: Props) =>
                     view={alert.view}
                     icon={alert.icon}
                     title={alert.title}
-                    message={alert.message}
+                    message={
+                        mobileView ? (
+                            <Text ellipsisLines={5} variant="body-2">
+                                {alert.message}
+                            </Text>
+                        ) : (
+                            alert.message
+                        )
+                    }
                     actions={alert.actions}
                     onClose={alert.closable ? handleClose : undefined}
                 />

diff --git a/src/components/types.ts b/src/components/types.ts
@@ -75,6 +75,7 @@ export interface LogoProps {
 }
 
 export interface TopAlertProps {
+    align?: AlertProps['align'];
     message: AlertProps['message'];
     title?: AlertProps['title'];
     icon?: AlertProps['icon'];