Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(notification,alert): classprefix造成的样式问题 #1433

Merged
merged 9 commits into from
Sep 5, 2022
Merged

fix(notification,alert): classprefix造成的样式问题 #1433

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
402005a
test(collapse): add missing usage demo
carolin913 Aug 29, 2022
f55dc61
fix(select): option设置content未生效问题
carolin913 Aug 29, 2022
e3473c2
Merge remote-tracking branch 'upstream/develop' into develop
carolin913 Sep 1, 2022
95a732b
fix(notification): 集中修改多个问题
carolin913 Sep 2, 2022
575a776
feat(notification): 支持plugin模式下config设置
carolin913 Sep 2, 2022
6398c6e
docs(notification): api doc update
carolin913 Sep 2, 2022
3385bc1
Merge remote-tracking branch 'upstream/develop' into develop
carolin913 Sep 2, 2022
cef57c9
chore: n
carolin913 Sep 5, 2022
d6d3376
fix(notification,alert): 修复classsprefix，close不支持function
carolin913 Sep 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/alert/Alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
} from 'tdesign-icons-react';
import { CSSTransition } from 'react-transition-group';
import noop from '../_util/noop';
import renderTNode from '../_util/renderTNode';
import useConfig from '../hooks/useConfig';
import useGlobalIcon from '../hooks/useGlobalIcon';
import { useLocaleReceiver } from '../locale/LocalReceiver';
Expand Down Expand Up @@ -101,7 +102,7 @@ const Alert = forwardRef((props: AlertProps, ref: React.Ref<HTMLDivElement>) =>

const renderClose = () => (
<div className={`${classPrefix}-alert__close`} onClick={handleClose}>
{typeof close === 'boolean' ? <CloseIcon /> : close}
{typeof close === 'boolean' ? <CloseIcon /> : renderTNode(close)}
</div>
);

Expand Down
26 changes: 24 additions & 2 deletions src/alert/__tests__/__snapshots__/alert.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@ exports[`base.jsx 1`] = `
<DocumentFragment>
<div
class="t-space t-space-vertical"
style="gap: 16px;"
style="gap: 16px; width: 100%;"
>
<div
class="t-space-item"
Expand Down Expand Up @@ -306,6 +306,23 @@ exports[`base.jsx 1`] = `
</div>
</div>
</div>
<div
class="t-alert__close"
>
<svg
class="t-icon t-icon-close"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
</div>
</div>
</div>
<div
Expand Down Expand Up @@ -344,6 +361,11 @@ exports[`base.jsx 1`] = `
</div>
</div>
</div>
<div
class="t-alert__close"
>
关闭
</div>
</div>
</div>
<div
Expand Down Expand Up @@ -799,7 +821,7 @@ exports[`operation.jsx 1`] = `
<DocumentFragment>
<div
class="t-space t-space-vertical"
style="gap: 16px;"
style="gap: 16px; width: 100%;"
>
<div
class="t-space-item"
Expand Down
6 changes: 3 additions & 3 deletions src/alert/_example/base.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ import { Alert, Space } from 'tdesign-react';

export default function AlertBase() {
return (
<Space direction="vertical">
<Space direction="vertical" style={{ width: '100%' }}>
<Alert theme="success" message="这是一条成功的消息提示" />
<Alert theme="info" message="这是一条普通的消息提示" />
<Alert theme="warning" message="这是一条警示消息" />
<Alert theme="info" message="这是一条普通的消息提示" close />
<Alert theme="warning" message="这是一条警示消息" close={'关闭'} />
<Alert theme="error" message="高危操作/出错信息提示" />
</Space>
);
Expand Down
2 changes: 1 addition & 1 deletion src/alert/_example/operation.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Alert, Space } from 'tdesign-react';
export default function AlertOperation() {
const operation = <span>相关操作</span>;
return (
<Space direction="vertical">
<Space direction="vertical" style={{ width: '100%' }}>
<Alert
theme="success"
message="这是一条成功的消息提示"
Expand Down
21 changes: 11 additions & 10 deletions src/notification/Notification.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export const Notification = forwardRef<any, NotificationProps>((props, ref) => {
} = props;

const { classPrefix } = useConfig();
const baseClassPrefix = `${classPrefix}-notification`;
const { CloseIcon, InfoCircleFilledIcon, CheckCircleFilledIcon } = useGlobalIcon({
CloseIcon: TdCloseIcon,
InfoCircleFilledIcon: TdInfoCircleFilledIcon,
Expand All @@ -61,7 +62,7 @@ export const Notification = forwardRef<any, NotificationProps>((props, ref) => {
const renderIcon = () => {
if (typeof icon === 'boolean' && !icon) return null;

const IconWrapper = ({ children }) => <div className={`${classPrefix}-notification__icon`}>{children}</div>;
const IconWrapper = ({ children }) => <div className={`${baseClassPrefix}__icon`}>{children}</div>;

// 调整优先级，icon 优先级最高
if (React.isValidElement(icon)) {
Expand Down Expand Up @@ -90,7 +91,7 @@ export const Notification = forwardRef<any, NotificationProps>((props, ref) => {
return (
closeBtn && (
<CloseIcon
className={`${classPrefix}-icon-close`}
className={`${baseClassPrefix}-icon-close`}
onClick={(e) => {
onCloseBtnClick({ e });
}}
Expand All @@ -100,7 +101,7 @@ export const Notification = forwardRef<any, NotificationProps>((props, ref) => {
}
return (
<div
className={`${classPrefix}-close`}
className={`${baseClassPrefix}-close`}
onClick={(e) => {
onCloseBtnClick({ e });
}}
Expand All @@ -112,19 +113,19 @@ export const Notification = forwardRef<any, NotificationProps>((props, ref) => {

return (
<div
className={classNames(className, `${classPrefix}-notification`, {
[`${classPrefix}-is-${theme}`]: theme,
className={classNames(className, baseClassPrefix, {
[`${baseClassPrefix}-is-${theme}`]: theme,
})}
style={style}
>
{renderIcon()}
<div className={`${classPrefix}-notification__main`}>
<div className={`${classPrefix}-notification__title__wrap`}>
<span className={`${classPrefix}-notification__title`}>{title}</span>
<div className={`${baseClassPrefix}__main`}>
<div className={`${baseClassPrefix}__title__wrap`}>
<span className={`${baseClassPrefix}__title`}>{title}</span>
{renderCloseBtn()}
</div>
{content && <div className={`${classPrefix}-notification__content`}>{renderTNode(content)}</div>}
{footer && <div className={`${classPrefix}-notification__detail`}>{renderTNode(footer)}</div>}
{content && <div className={`${baseClassPrefix}__content`}>{renderTNode(content)}</div>}
{footer && <div className={`${baseClassPrefix}__detail`}>{renderTNode(footer)}</div>}
</div>
</div>
);
Expand Down
52 changes: 26 additions & 26 deletions src/notification/__tests__/__snapshots__/Notification.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`base.jsx 1`] = `
<DocumentFragment>
<div
class="t-notification t-is-info"
class="t-notification t-notification-is-info"
>
<div
class="t-notification__icon"
Expand Down Expand Up @@ -34,7 +34,7 @@ exports[`base.jsx 1`] = `
标题名称
</span>
<div
class="t-close"
class="t-notification-close"
/>
</div>
<div
Expand Down Expand Up @@ -95,7 +95,7 @@ exports[`content.jsx 1`] = `
class="t-space-item"
>
<div
class="t-notification t-is-info"
class="t-notification t-notification-is-info"
>
<div
class="t-notification__icon"
Expand Down Expand Up @@ -126,7 +126,7 @@ exports[`content.jsx 1`] = `
自定义内容（字符串）
</span>
<div
class="t-close"
class="t-notification-close"
/>
</div>
<div
Expand All @@ -141,7 +141,7 @@ exports[`content.jsx 1`] = `
class="t-space-item"
>
<div
class="t-notification t-is-info"
class="t-notification t-notification-is-info"
>
<div
class="t-notification__icon"
Expand Down Expand Up @@ -172,7 +172,7 @@ exports[`content.jsx 1`] = `
自定义内容
</span>
<div
class="t-close"
class="t-notification-close"
/>
</div>
<div
Expand All @@ -192,7 +192,7 @@ exports[`content.jsx 1`] = `
exports[`footer.jsx 1`] = `
<DocumentFragment>
<div
class="t-notification t-is-info"
class="t-notification t-notification-is-info"
>
<div
class="t-notification__icon"
Expand Down Expand Up @@ -223,7 +223,7 @@ exports[`footer.jsx 1`] = `
自定义底部详情
</span>
<div
class="t-close"
class="t-notification-close"
/>
</div>
<div
Expand Down Expand Up @@ -264,7 +264,7 @@ exports[`icon.jsx 1`] = `
class="t-space-item"
>
<div
class="t-notification t-is-info"
class="t-notification t-notification-is-info"
>
<div
class="t-notification__icon"
Expand Down Expand Up @@ -295,7 +295,7 @@ exports[`icon.jsx 1`] = `
普通通知
</span>
<div
class="t-close"
class="t-notification-close"
/>
</div>
<div
Expand All @@ -310,7 +310,7 @@ exports[`icon.jsx 1`] = `
class="t-space-item"
>
<div
class="t-notification t-is-error"
class="t-notification t-notification-is-error"
>
<div
class="t-notification__icon"
Expand Down Expand Up @@ -341,7 +341,7 @@ exports[`icon.jsx 1`] = `
危险通知
</span>
<div
class="t-close"
class="t-notification-close"
/>
</div>
<div
Expand All @@ -356,7 +356,7 @@ exports[`icon.jsx 1`] = `
class="t-space-item"
>
<div
class="t-notification t-is-warning"
class="t-notification t-notification-is-warning"
>
<div
class="t-notification__icon"
Expand Down Expand Up @@ -387,7 +387,7 @@ exports[`icon.jsx 1`] = `
告警通知
</span>
<div
class="t-close"
class="t-notification-close"
/>
</div>
<div
Expand All @@ -402,7 +402,7 @@ exports[`icon.jsx 1`] = `
class="t-space-item"
>
<div
class="t-notification t-is-success"
class="t-notification t-notification-is-success"
>
<div
class="t-notification__icon"
Expand Down Expand Up @@ -433,7 +433,7 @@ exports[`icon.jsx 1`] = `
成功通知
</span>
<div
class="t-close"
class="t-notification-close"
/>
</div>
<div
Expand All @@ -458,7 +458,7 @@ exports[`operation.jsx 1`] = `
class="t-space-item"
>
<div
class="t-notification t-is-info"
class="t-notification t-notification-is-info"
>
<div
class="t-notification__icon"
Expand Down Expand Up @@ -489,7 +489,7 @@ exports[`operation.jsx 1`] = `
超出的文本省略号显示
</span>
<div
class="t-close"
class="t-notification-close"
/>
</div>
<div
Expand Down Expand Up @@ -520,7 +520,7 @@ exports[`operation.jsx 1`] = `
class="t-space-item"
>
<div
class="t-notification t-is-info"
class="t-notification t-notification-is-info"
>
<div
class="t-notification__icon"
Expand Down Expand Up @@ -551,7 +551,7 @@ exports[`operation.jsx 1`] = `
自定义底部
</span>
<div
class="t-close"
class="t-notification-close"
/>
</div>
<div
Expand Down Expand Up @@ -582,7 +582,7 @@ exports[`operation.jsx 1`] = `
class="t-space-item"
>
<div
class="t-notification t-is-info"
class="t-notification t-notification-is-info"
>
<div
class="t-notification__icon"
Expand Down Expand Up @@ -618,7 +618,7 @@ exports[`operation.jsx 1`] = `
</div>
</span>
<div
class="t-close"
class="t-notification-close"
/>
</div>
<div
Expand Down Expand Up @@ -651,7 +651,7 @@ exports[`operation.jsx 1`] = `
class="t-space-item"
>
<div
class="t-notification t-is-info"
class="t-notification t-notification-is-info"
>
<div
class="t-notification__icon"
Expand Down Expand Up @@ -687,7 +687,7 @@ exports[`operation.jsx 1`] = `
</div>
</span>
<div
class="t-close"
class="t-notification-close"
/>
</div>
<div
Expand Down Expand Up @@ -728,7 +728,7 @@ exports[`operation.jsx 1`] = `
class="t-space-item"
>
<div
class="t-notification t-is-info"
class="t-notification t-notification-is-info"
>
<div
class="t-notification__icon"
Expand Down Expand Up @@ -759,7 +759,7 @@ exports[`operation.jsx 1`] = `
自定义内容
</span>
<div
class="t-close"
class="t-notification-close"
/>
</div>
<div
Expand Down
Loading