Skip to content

Commit

Permalink
feat(alert): add alert component (#1415)
Browse files Browse the repository at this point in the history 
Co-authored-by: zhujiahong <zhujiahong@growingio.com>
  • Loading branch information
@zhuzilv
zhuzilv and zhujiahong committed Nov 2, 2021
1 parent 269efbc commit 601e069
Show file tree
Hide file tree
Showing 13 changed files with 460 additions and 96 deletions.
23 changes: 10 additions & 13 deletions src/alert/Alert.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React, { useState } from 'react';
import classnames from 'classnames';
import { usePrefixCls, useSize } from '@gio-design/utils';

import { usePrefixCls } from '@gio-design/utils';
import _ from 'lodash';
import {
CheckCircleFilled,
Expand All @@ -10,28 +9,25 @@ import {
CloseCircleFilled,
CloseOutlined,
} from '@gio-design/icons';
import { PaletteGreen7, PaletteYellow7, PaletteRed5, PaletteBlue6 } from '@gio-design/tokens';
import { AlertProps } from './interfaces';

export const Alert: React.FC<AlertProps> = (props: AlertProps) => {
const prefixCls = usePrefixCls('alert');
const prefixCls = usePrefixCls('alert-new');
const [alertStatus, setAlertStatus] = useState(true);
const { message, description, closeable, showIcon = false, onClose, icon, type, size: customizeSize, style } = props;
const { message, description, closeable, showIcon = false, onClose, icon, type, style } = props;

const size = useSize();
const mergedSize = customizeSize ?? size;
const getIcon = () => {
switch (type) {
case 'success':
return <CheckCircleFilled color={PaletteGreen7} />;
return <CheckCircleFilled />;
case 'warning':
return <WarningCircleFilled color={PaletteYellow7} />;
return <WarningCircleFilled />;
case 'error':
return <CloseCircleFilled color={PaletteRed5} />;
return <CloseCircleFilled />;
case 'info':
return <InfoCircleFilled color={PaletteBlue6} />;
return <InfoCircleFilled />;
default:
return icon || <InfoCircleFilled color={PaletteBlue6} />;
return icon || <InfoCircleFilled />;
}
};

Expand All @@ -41,10 +37,11 @@ export const Alert: React.FC<AlertProps> = (props: AlertProps) => {
};

return alertStatus ? (
<div style={style} className={classnames(prefixCls, `${prefixCls}-${mergedSize}`, `${prefixCls}-${type}`)}>
<div style={style} className={classnames(prefixCls, `${prefixCls}-${type}`)}>
{showIcon && <div className={classnames(`${prefixCls}-icon`)}>{getIcon()}</div>}
<div className={classnames(`${prefixCls}-content`)}>
{message && <div className={classnames(`${prefixCls}-content-title`)}>{message}</div>}
{message && description && <div className={classnames(`${prefixCls}-content-gap`)} />}
{description && <div className={classnames(`${prefixCls}-content-description`)}>{description}</div>}
</div>
{closeable && (
Expand Down
39 changes: 23 additions & 16 deletions src/alert/demos/Alert.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,59 +7,66 @@ import { AlertProps } from '../interfaces';
import '../style';

export default {
title: 'Components/Alert',
title: 'Upgraded/Alert',
component: Alert,
parameters: {
design: {
type: 'figma',
url: 'https://www.figma.com/file/lLYusioN7e9ifkQnIXeT4G/GIO-Design-(Running-File)?node-id=4093%3A45313',
allowFullscreen: true,
},
docs: {
page: Docs,
},
},
} as Meta;

const Template: Story<AlertProps> = (args) => (
<div style={{ width: 320 }}>
<Alert {...args} type="info" size="small" />
<div>
<Alert {...args} type="info" style={{ width: '%100' }} onClose={action('close')} />
<br />
<Alert {...args} type="warning" size="small" />
<Alert {...args} type="warning" style={{ width: 800 }} onClose={action('close')} />
<br />
<Alert {...args} type="success" size="small" />
<Alert {...args} type="success" style={{ width: 500 }} onClose={action('close')} />
<br />
<Alert {...args} type="error" size="small" onClose={action('我被关闭了')} />
<Alert {...args} type="error" style={{ width: 300 }} onClose={action('close')} />
</div>
);

export const Default = Template.bind({});
Default.args = {
showIcon: true,
closeable: true,
message: '标题',
description: '提示正文',
message: 'This is an example of an embedded banner',
description:
'Use this if you want to put it inside of another thing like this panel. Heres how you would format it, syntax.',
};

export const NoDescription = Template.bind({});
NoDescription.args = {
showIcon: true,
closeable: true,
message: '标题',
message: 'This is an example of an embedded banner',
};

export const NoTitle = Template.bind({});
NoTitle.args = {
showIcon: true,
closeable: true,
description: '提示正文',
description:
'Use this if you want to put it inside of another thing like this panel. Heres how you would format it, syntax.',
};

export const NoIcon = Template.bind({});
NoIcon.args = {
closeable: true,
message: '标题',
description: '提示正文',
message: 'This is an example of an embedded banner',
description:
'Use this if you want to put it inside of another thing like this panel. Heres how you would format it, syntax.',
};

export const NoClose = Template.bind({});
NoClose.args = {
showIcon: true,
message: '标题',
description: '提示正文',
message: 'This is an example of an embedded banner',
description:
'Use this if you want to put it inside of another thing like this panel. Heres how you would format it, syntax.',
};
23 changes: 16 additions & 7 deletions src/alert/demos/AlertPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,33 +12,42 @@ export default function ListPage() {
<p>
{formatMessage({
defaultMessage:
'当某个页面需要向用户显示警告、提示的信息时使用，这部分信息是用户必须了解的，例如未对公众号进行授权则影响某些功能的使用。通常为页面级提示信息，提示重要性高，通常位置在页面或弹窗顶部。Alert宽度根据不同使用场景，可以设置为固定宽度，内容超长时，换行展示。',
'当某个页面需要向用户显示警告、提示的信息时使用，这部分信息是用户必须了解的，例如未对公众号进行授权则影响某些功能的使用。 通常为页面级提示信息，提示重要性高，通常位置在页面或弹窗顶部。Alert宽度根据不同使用场景，可以设置为固定宽度，内容超长时，换行展示。',
})}
</p>
<p>
<a href="https://www.figma.com/file/lLYusioN7e9ifkQnIXeT4G/GIO-Design-(Running-File)?node-id=4093%3A45313">
Figma
</a>
</p>
<p>Upgrading Guide</p>
<ul>
<li>移除size样式控制</li>
</ul>
<Heading>{formatMessage({ defaultMessage: '代码演示' })}</Heading>
<Subheading>{formatMessage({ defaultMessage: 'Icon、标题、正文、关闭按钮' })}</Subheading>
<Subheading>{formatMessage({ defaultMessage: 'default' })}</Subheading>
<Canvas>
<Story id="components-alert--default" />
<Story id="upgraded-alert--default" />
</Canvas>

<Subheading>{formatMessage({ defaultMessage: 'Icon & 标题 & 关闭' })}</Subheading>
<Canvas>
<Story id="components-alert--no-description" />
<Story id="upgraded-alert--no-description" />
</Canvas>

<Subheading>{formatMessage({ defaultMessage: 'Icon & 正文 & 关闭' })}</Subheading>
<Canvas>
<Story id="components-alert--no-title" />
<Story id="upgraded-alert--no-title" />
</Canvas>

<Subheading>{formatMessage({ defaultMessage: '标题 & 正文 & 关闭' })}</Subheading>
<Canvas>
<Story id="components-alert--no-icon" />
<Story id="upgraded-alert--no-icon" />
</Canvas>

<Subheading>{formatMessage({ defaultMessage: 'Icon & 标题 & 正文 ' })}</Subheading>
<Canvas>
<Story id="components-alert--no-close" />
<Story id="upgraded-alert--no-close" />
</Canvas>

<Heading>{formatMessage({ defaultMessage: '参数说明' })}</Heading>
Expand Down
4 changes: 0 additions & 4 deletions src/alert/interfaces.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,6 @@ export interface AlertProps {
指定警告提示的样式
*/
type?: 'success' | 'info' | 'warning' | 'error';
/**
指定警告的尺寸
*/
size?: 'small' | 'middle';
/**
是否显示关闭按钮
*/
Expand Down
84 changes: 28 additions & 56 deletions src/alert/style/index.less
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,42 @@
@import '../../stylesheet/index.less';
@import '../../stylesheet/variables/index.less';

@alert-prefix-cls: ~'@{component-prefix}-alert';
@alert-prefix-cls: ~'@{component-prefix}-alert-new';

.@{alert-prefix-cls} {
display: flex;
align-items: center;
box-sizing: border-box;
width: 100%;
padding: 16px 16px;
border-radius: 6px;
padding: 20px;
border-radius: 8px;
transition: all ease 0.8s;

& &-icon {
flex-shrink: 0;
align-self: flex-start;
height: 100%;
padding-top: 1px;
}

& .@{alert-prefix-cls}-content {
flex: 1;
margin: 0 8px;
color: @color-text-alert-content;
font-size: @size-font-14;
font-family: @font-family-primary;
line-height: 22px;
color: @gray-5;

& .@{alert-prefix-cls}-content-title {
width: 100%;
overflow: hidden;
font-weight: @weight-font-medium;
font-weight: 500;
font-size: 14px;
font-style: normal;
line-height: 22px;
text-overflow: ellipsis;
}

& .@{alert-prefix-cls}-content-gap {
height: 8px;
}
& .@{alert-prefix-cls}-content-description {
width: 100%;
letter-spacing: 0;
.text-body1();
}
}

Expand All @@ -44,6 +45,9 @@
align-self: flex-start;
font-weight: @weight-font-semi-bold;
cursor: pointer;
svg {
fill: @gray-5;
}
}
}

Expand All @@ -52,65 +56,33 @@
}

.@{alert-prefix-cls}-info {
background-color: @color-background-alert-information;

& .@{alert-prefix-cls}-closeIcon {
svg {
fill: @palette-blue-6;
}
}

background-color: @blue-1;
border: 1px solid @blue-3;
& .@{alert-prefix-cls}-icon {
svg {
fill: @palette-blue-6;
}
color: @blue-3;
}
}

.@{alert-prefix-cls}-success {
background-color: @color-background-alert-success;

& .@{alert-prefix-cls}-closeIcon {
fill: @palette-green-6;
}

background-color: @green-1;
border: 1px solid @green-3;
& .@{alert-prefix-cls}-icon {
fill: @palette-green-6;
color: @green-3;
}
}

.@{alert-prefix-cls}-warning {
background-color: @color-background-alert-warning;

& .@{alert-prefix-cls}-closeIcon {
svg {
fill: @palette-yellow-6;
}
}

background-color: @yellow-1;
border: 1px solid @yellow-3;
& .@{alert-prefix-cls}-icon {
svg {
fill: @palette-yellow-6;
}
color: @yellow-3;
}
}

.@{alert-prefix-cls}-error {
background-color: @color-background-alert-error;

& .@{alert-prefix-cls}-closeIcon {
fill: @palette-red-6;
}

background-color: @red-1;
border: 1px solid @red-3;
& .@{alert-prefix-cls}-icon {
fill: @palette-red-6;
}
}

.@{alert-prefix-cls}-small {
padding: 8px 16px;

& .@{alert-prefix-cls}-content {
font-size: @size-font-12;
color: @red-3;
}
}

1 comment on commit 601e069

@vercel
Copy link

@vercel vercel bot commented on 601e069 Nov 2, 2021

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

Please sign in to comment.