feat(Alert): changed default Alert actions background

gravity-ui · Jan 10, 2024 · 418cb37 · 418cb37
1 parent f4a7dc5
commit 418cb37
Show file tree

Hide file tree

Showing 10 changed files with 128 additions and 76 deletions.
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
@@ -8,7 +8,9 @@ import {Icon} from '../Icon';
 import {colorText} from '../Text';
 import {Flex, spacing} from '../layout';
 
+import {AlertAction} from './AlertAction';
 import {AlertActions} from './AlertActions';
+import {AlertContextProvider} from './AlertContextProvider';
 import {AlertIcon} from './AlertIcon';
 import {AlertTitle} from './AlertTitle';
 import {DEFAULT_ICON_SIZE, bAlert} from './constants';
@@ -28,48 +30,50 @@ export const Alert = (props: AlertProps) => {
         qa,
     } = props;
 
-    const icon = props.icon || <Alert.Icon theme={theme} view={view} />;
-    const title =
-        typeof props.title === 'string' ? <Alert.Title text={props.title} /> : props.title;
-    const actions = Array.isArray(props.actions) ? (
-        <Alert.Actions items={props.actions} parentLayout={layout} />
-    ) : (
-        props.actions
-    );
-
     return (
-        <Card
-            style={style}
-            className={bAlert({corners}, spacing({py: 4, px: 5}, className))}
-            theme={theme}
-            view={view}
-            qa={qa}
-        >
-            <Flex gap="3" alignItems={align}>
-                {icon}
-                <Flex direction={layout === 'vertical' ? 'column' : 'row'} gap="5" grow>
-                    <Flex gap="2" grow className={bAlert('text-content')}>
-                        <Flex direction="column" gap="1" grow justifyContent={align}>
-                            {title}
-                            {message}
+        <AlertContextProvider layout={layout} view={view}>
+            <Card
+                style={style}
+                className={bAlert({corners}, spacing({py: 4, px: 5}, className))}
+                theme={theme}
+                view={view}
+                qa={qa}
+            >
+                <Flex gap="3" alignItems={align}>
+                    {props.icon || <Alert.Icon theme={theme} view={view} />}
+                    <Flex direction={layout === 'vertical' ? 'column' : 'row'} gap="5" grow>
+                        <Flex gap="2" grow className={bAlert('text-content')}>
+                            <Flex direction="column" gap="1" grow justifyContent={align}>
+                                {typeof props.title === 'string' ? (
+                                    <Alert.Title text={props.title} />
+                                ) : (
+                                    props.title
+                                )}
+                                {message}
+                            </Flex>
                         </Flex>
+                        {Array.isArray(props.actions) ? (
+                            <Alert.Actions items={props.actions} />
+                        ) : (
+                            props.actions
+                        )}
                     </Flex>
-                    {actions}
+                    {onClose && (
+                        <Button view="flat" onClick={onClose}>
+                            <Icon
+                                data={Xmark}
+                                size={DEFAULT_ICON_SIZE}
+                                className={colorText({color: 'secondary'})}
+                            />
+                        </Button>
+                    )}
                 </Flex>
-                {onClose && (
-                    <Button view="flat" onClick={onClose}>
-                        <Icon
-                            data={Xmark}
-                            size={DEFAULT_ICON_SIZE}
-                            className={colorText({color: 'secondary'})}
-                        />
-                    </Button>
-                )}
-            </Flex>
-        </Card>
+            </Card>
+        </AlertContextProvider>
     );
 };
 
 Alert.Icon = AlertIcon;
 Alert.Title = AlertTitle;
 Alert.Actions = AlertActions;
+Alert.Action = AlertAction;
diff --git a/src/components/Alert/AlertAction.tsx b/src/components/Alert/AlertAction.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import {Button} from '../Button';
+
+import type {AlertActionProps} from './types';
+import {useAlertContext} from './useAlertContext';
+
+export const AlertAction = (props: AlertActionProps) => {
+    const {view} = useAlertContext();
+
+    return <Button view={view === 'filled' ? 'normal-contrast' : undefined} {...props} />;
+};
diff --git a/src/components/Alert/AlertActions.tsx b/src/components/Alert/AlertActions.tsx
@@ -1,29 +1,27 @@
 import React from 'react';
 
-import {Button} from '../Button';
 import {Flex} from '../layout';
 
+import {AlertAction} from './AlertAction';
 import {bAlert} from './constants';
 import type {AlertActionsProps} from './types';
+import {useAlertContext} from './useAlertContext';
+
+export const AlertActions = ({items, children, className}: AlertActionsProps) => {
+    const {layout} = useAlertContext();
 
-export const AlertActions = ({
-    items,
-    children,
-    parentLayout = 'vertical',
-    className,
-}: AlertActionsProps) => {
     return (
         <Flex
-            className={bAlert('actions', {minContent: parentLayout === 'horizontal'}, className)}
+            className={bAlert('actions', {minContent: layout === 'horizontal'}, className)}
             direction="row"
             gap="3"
             wrap
-            alignItems={parentLayout === 'horizontal' ? 'center' : 'flex-start'}
+            alignItems={layout === 'horizontal' ? 'center' : 'flex-start'}
         >
             {items?.map(({handler, text}, i) => (
-                <Button key={i} onClick={handler}>
+                <AlertAction key={i} onClick={handler}>
                     {text}
-                </Button>
+                </AlertAction>
             )) || children}
         </Flex>
     );

diff --git a/src/components/Alert/AlertContext.tsx b/src/components/Alert/AlertContext.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+import type {AlertContextType} from './types';
+
+export const AlertContext = React.createContext<AlertContextType | null>(null);
diff --git a/src/components/Alert/AlertContextProvider.tsx b/src/components/Alert/AlertContextProvider.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+
+import {AlertContext} from './AlertContext';
+import type {AlertContextProviderProps} from './types';
+
+export const AlertContextProvider = ({layout, view, children}: AlertContextProviderProps) => {
+    return <AlertContext.Provider value={{layout, view}}>{children}</AlertContext.Provider>;
+};
diff --git a/src/components/Alert/README.md b/src/components/Alert/README.md
@@ -93,19 +93,19 @@ of text.
 <!--LANDING_BLOCK
 <ExampleBlock
     code={`
-<Alert layout="vertical" title="Vertical" message="Vertical direction" actions={<Button>button</Button>} />
-<Alert layout="horizontal" title="Horizontal" message="Horizontal direction" actions={<Button>button</Button>} />
+<Alert layout="vertical" title="Vertical" message="Vertical direction" actions={<Alert.Action>button</Alert.Action>} />
+<Alert layout="horizontal" title="Horizontal" message="Horizontal direction" actions={<Alert.Action>button</Alert.Action>} />
 `}>
-    <UIKit.Alert layout="vertical" title="Vertical" message="Vertical direction" actions={<UIKit.Button>button</UIKit.Button>} />
-    <UIKit.Alert layout="horizontal" title="Horizontal" message="Horizontal direction" actions={<UIKit.Button>button</UIKit.Button>} />
+    <UIKit.Alert layout="vertical" title="Vertical" message="Vertical direction" actions={<UIKit.Alert.Action>button</UIKit.Alert.Action>} />
+    <UIKit.Alert layout="horizontal" title="Horizontal" message="Horizontal direction" actions={<UIKit.Alert.Action>button</UIKit.Alert.Action>} />
 </ExampleBlock>
 LANDING_BLOCK-->
 
 <!--GITHUB_BLOCK-->
 
 ```tsx
-<Alert layout="vertical" title="Vertical" message="Vertical direction" actions={<Button>button</Button>}/>
-<Alert layout="horizontal" title="Horizontal" message="Horizontal direction" actions={<Button>button</Button>}/>
+<Alert layout="vertical" title="Vertical" message="Vertical direction" actions={<Alert.Action>button</Alert.Action>}/>
+<Alert layout="horizontal" title="Horizontal" message="Horizontal direction" actions={<Alert.Action>button</Alert.Action>}/>
 ```
 
 <!--/GITHUB_BLOCK-->
@@ -202,19 +202,19 @@ or if the icon must be in the middle of the card.
 <!--LANDING_BLOCK
 <ExampleBlock
     code={`
-<Alert align="baseline" theme="info" title="Baseline" message="Baseline align" actions={<Button>button</Button>} />
-<Alert align="center" theme="info" title="Center" message="Center align" actions={<Button>button</Button>} align="center"/>
+<Alert align="baseline" theme="info" title="Baseline" message="Baseline align" actions={<Alert.Action>button</Alert.Action>} />
+<Alert align="center" theme="info" title="Center" message="Center align" actions={<Alert.Action>button</Alert.Action>} align="center"/>
 `}>
-    <UIKit.Alert align="baseline" theme="info" title="Baseline" message="Baseline align" actions={<UIKit.Button>button</UIKit.Button>} />
-    <UIKit.Alert align="center" theme="info" title="Center" message="Center align" actions={<UIKit.Button>button</UIKit.Button>} align="center"/>
+    <UIKit.Alert align="baseline" theme="info" title="Baseline" message="Baseline align" actions={<UIKit.Alert.Action>button</UIKit.Alert.Action>} />
+    <UIKit.Alert align="center" theme="info" title="Center" message="Center align" actions={<UIKit.Alert.Action>button</UIKit.Alert.Action>} align="center"/>
 </ExampleBlock>
 LANDING_BLOCK-->
 
 <!--GITHUB_BLOCK-->
 
 ```tsx
-<Alert align="vertical" title="Vertical" message="Vertical direction" actions={<Button>button</Button>}/>
-<Alert align="horizontal" title="Horizontal" message="Horizontal direction" actions={<Button>button</Button>}/>
+<Alert align="vertical" title="Vertical" message="Vertical direction" actions={<Alert.Action>button</Alert.Action>}/>
+<Alert align="horizontal" title="Horizontal" message="Horizontal direction" actions={<Alert.Action>button</Alert.Action>}/>
 ```
 
 <!--/GITHUB_BLOCK-->

diff --git a/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/src/components/Alert/__snapshots__/Alert.test.tsx.snap
@@ -60,7 +60,7 @@ exports[`Alert has predicted styles if inline layout rendered 1`] = `
           style="flex-direction: row; flex-wrap: wrap; column-gap: 12px; row-gap: 12px; align-items: center;"
         >
           <button
-            class="yc-button yc-button_view_normal yc-button_size_m yc-button_pin_round-round"
+            class="yc-button yc-button_view_normal-contrast yc-button_size_m yc-button_pin_round-round"
             type="button"
           >
             <span

diff --git a/src/components/Alert/__stories__/Alert.stories.tsx b/src/components/Alert/__stories__/Alert.stories.tsx
@@ -25,7 +25,7 @@ const stories: AlertProps[] = [
         theme: 'danger',
         view: 'filled',
         onClose: () => alert('Close button pressed'),
-        actions: <Button>{right}</Button>,
+        actions: <Alert.Action>{right}</Alert.Action>,
     },
     {
         title: <div dangerouslySetInnerHTML={{__html: '<b>Some html title</b>'}} />,
@@ -35,13 +35,20 @@ const stories: AlertProps[] = [
         view: 'outlined',
         onClose: () => alert('Close button pressed'),
     },
+    {
+        title,
+        message,
+        view: 'outlined',
+        onClose: () => alert('Close button pressed'),
+        actions: [{text: left}, {text: center}, {text: left}],
+    },
     {
         message,
         theme: 'info',
         view: 'filled',
         actions: (
             <Alert.Actions>
-                <Button>{center}</Button>
+                <Alert.Action>{center}</Alert.Action>
             </Alert.Actions>
         ),
     },
@@ -81,8 +88,8 @@ const stories: AlertProps[] = [
         corners: 'square',
         onClose: () => {},
         actions: (
-            <Alert.Actions parentLayout="horizontal">
-                <Button view="outlined">{left}</Button>
+            <Alert.Actions>
+                <Alert.Action view="outlined">{left}</Alert.Action>
             </Alert.Actions>
         ),
     },
@@ -92,7 +99,7 @@ const stories: AlertProps[] = [
         theme: 'warning',
         view: 'outlined',
         layout: 'horizontal',
-        actions: <Button>{right}</Button>,
+        actions: <Alert.Action>{right}</Alert.Action>,
     },
     {
         message,

diff --git a/src/components/Alert/types.ts b/src/components/Alert/types.ts
@@ -1,5 +1,6 @@
 import type React from 'react';
 
+import type {ButtonProps} from '../Button';
 import type {QAProps} from '../types';
 
 export type AlertTheme =
@@ -11,9 +12,24 @@ export type AlertTheme =
     | 'danger'
     | 'utility';
 export type AlertView = 'filled' | 'outlined';
+export type AlertLayout = 'vertical' | 'horizontal';
 export type AlertCorners = 'rounded' | 'square';
 
-export interface AlertProps extends QAProps {
+export type AlertContextType = {
+    /**
+     * Override actions position
+     *
+     * variants:
+     * - `vertical` - bottom (default);
+     * - `horizontal` - right;
+     */
+    layout: AlertLayout;
+    view: AlertView;
+};
+
+export type AlertContextProviderProps = React.PropsWithChildren<AlertContextType>;
+
+export interface AlertProps extends QAProps, Partial<AlertContextType> {
     title?: React.ReactNode;
     message?: React.ReactNode;
     theme?: AlertTheme;
@@ -25,15 +41,6 @@ export interface AlertProps extends QAProps {
      * @default - normal
      */
     corners?: AlertCorners;
-    /**
-     * Override actions position
-     *
-     * variants:
-     * - `vertical` - bottom (default);
-     * - `horizontal` - right;
-     */
-    layout?: 'vertical' | 'horizontal';
-    view?: AlertView;
     onClose?: () => void;
     /**
      * Add you Actions to alert component:
@@ -45,7 +52,7 @@ export interface AlertProps extends QAProps {
      * ```tsx
      * actions: (
      *  <Alert.Actions>
-     *      <Button onClick={...}>...</Button>
+     *      <Alert.Action onClick={...}>...</Alert.Action>
      *  </Alert.Actions>
      * )
      * ```
@@ -88,8 +95,8 @@ export interface AlertActionsProps {
     className?: string;
     items?: AlertAction[];
     children?: React.ReactNode | React.ReactNode[];
-    parentLayout?: 'vertical' | 'horizontal';
 }
+export interface AlertActionProps extends ButtonProps {}
 export interface AlertTitleProps {
     className?: string;
     text: string;

diff --git a/src/components/Alert/useAlertContext.tsx b/src/components/Alert/useAlertContext.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import {AlertContext} from './AlertContext';
+
+export const useAlertContext = () => {
+    const context = React.useContext(AlertContext);
+
+    if (!context) throw new Error('Alert: `useAlertContext` hook is used out of "AlertContext"');
+
+    return context;
+};