style(alert): 修改弹窗icon样式 (#891,#845)

uiwjs · Jul 30, 2022 · b3ddf01 · b3ddf01
1 parent 40022c1
commit b3ddf01
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/packages/react-alert/README.md b/packages/react-alert/README.md
@@ -249,6 +249,7 @@ class Demo extends React.Component {
           isOpen={this.state.visible2}
           confirmText="确定按钮"
           cancelText="取消按钮"
+          icon="circle-check"
           type="success"
           onClosed={this.onClosed.bind(this, 'visible2')}
           content="这个对话框只有两个个按钮，单击“确定按钮”后，此对话框将关闭。用作通知用户重要信息。"
@@ -411,7 +412,7 @@ export default Demo
 | cancelText | 取消按钮文字， | String | - |
 | confirmText | 确认按钮文字 | String | `确认` |
 | type | 按钮类型跟 `<Button>` 组件的 `type` 参数一致，同时会影响按钮颜色。 | String | `light` |
-| icon[`<Modal>`](#/components/modal) | 设置对话框右上角图标，，设置 `type` 将图标设置不同的颜色。当前属性为 [`<Icon>`](#/components/icon) 组件的 `type` 属性，所以可以参考该组件自定义图标。 | String/ReactNode | - |
+| icon[`<Modal>`](#/components/modal) | 设置对话框左上角图标，，设置 `type` 将图标设置不同的颜色。当前属性为 [`<Icon>`](#/components/icon) 组件的 `type` 属性，所以可以参考该组件自定义图标。 | String/ReactNode | - |
 | title[`<Modal>`](#/components/modal)  | 设置标题 | Function(e) | - |
 | useButton[`<Modal>`](#/components/modal) | 是否使用默认按钮，如果设置 `false` 需要自定义按钮关闭 | Boolean | `true` |
 | isOpen[`<Modal>`](#/components/modal) | 对话框是否可见 | Boolean | `false` |

diff --git a/packages/react-alert/src/style/index.ts b/packages/react-alert/src/style/index.ts
@@ -7,7 +7,7 @@ export interface AlertStyleWarpProps extends ModalProps, ThemeVariantValueOption
 
 const typeVariant = (type: ButtonType, color: string | number) => {
   return css`
-    ${type} ${ModalHeader} > ${IconStyleBase} {
+    ${ModalHeader} > ${IconStyleBase} {
       color: ${color};
     }
   `;
@@ -46,6 +46,9 @@ export const AlertStyleWarp = styled.div<AlertStyleWarpProps>`
       font-size: 40px;
       margin-right: 0;
     }
+    > button > ${IconStyleBase} {
+      font-size: 14px;
+    }
   }
   ${ModalBody} {
     display: table-cell;

diff --git a/packages/react-modal/README.md b/packages/react-modal/README.md
@@ -140,7 +140,7 @@ export default Demo
 
 ```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
 import React from 'react';
-import { Modal, ButtonGroup, Button, Form, Input, Textarea } from 'uiw';
+import { Modal, ButtonGroup, Button, Form, Input, Textarea, Row, Col } from 'uiw';
 
 class Demo extends React.Component {
   constructor() {
@@ -351,7 +351,7 @@ export default Demo
 | onConfirm | 点击确定按钮回调 | Function(e) | - |
 | cancelText | 取消按钮文字， | String | - |
 | confirmText | 确认按钮文字 | String | `确认` |
-| icon | 设置对话框右上角图标，设置 `type` 将图标设置不同的颜色。当前属性为 [`<Icon>`](#/components/icon) 组件的 `type` 属性，所以可以参考该组件自定义图标。 | String/ReactNode | - |
+| icon | 设置对话框左上角图标，设置 `type` 将图标设置不同的颜色。当前属性为 [`<Icon>`](#/components/icon) 组件的 `type` 属性，所以可以参考该组件自定义图标。 | String/ReactNode | - |
 | useButton | 是否使用默认按钮，如果设置 `false` 需要自定义按钮关闭 | Boolean | `true` |
 | type | 按钮类型跟 `<Button>` 组件的 `type` 参数一致，同时会影响按钮颜色。 | String | `light` |
 | width | 设置弹出框宽度 | Number | - |

diff --git a/packages/react-modal/src/index.tsx b/packages/react-modal/src/index.tsx
@@ -2,6 +2,8 @@ import React, { useState, useEffect } from 'react';
 import Overlay, { OverlayProps } from '@uiw/react-overlay';
 import Button, { ButtonType, ButtonProps } from '@uiw/react-button';
 import Icon, { IconProps } from '@uiw/react-icon';
+import { Close } from '@uiw/icons/lib/Close';
+import { IconStyleBase } from '@uiw/react-icon';
 import { IProps, noop } from '@uiw/utils';
 import CallShow from './CallShow';
 import ModalWrap, { ModalBody, ModalContainer, ModalFooter, ModalHeader, ModalInner } from './style';
@@ -106,7 +108,9 @@ const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<Ov
               <ModalHeader className={`${prefixCls}-header`}>
                 {icon && <Icon type={icon} />}
                 {title && <h4>{title}</h4>}
-                {isCloseButtonShown && <Button basic onClick={(e) => handleCancel(e)} icon="close" type="light" />}
+                {isCloseButtonShown && (
+                  <Button basic onClick={(e) => handleCancel(e)} icon={<IconStyleBase as={Close} />} type="light" />
+                )}
               </ModalHeader>
             )}
             <ModalBody className={`${prefixCls}-body`} style={bodyStyle}>