From b96ad1267689dd649f0a8bf82bedcbeff7e60983 Mon Sep 17 00:00:00 2001 From: yuxuanhuo Date: Tue, 25 Aug 2020 15:26:11 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20ue=E6=A0=B7=E5=BC=8F=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui-theme/src/antd-vars-patch.less | 3 +- packages/ui/alert/src/index.less | 5 +++ packages/ui/back-top/src/index.less | 2 +- packages/ui/button/src/index.less | 8 ++-- packages/ui/button/src/index.tsx | 9 ++-- packages/ui/button/stories/index.stories.tsx | 21 +++++----- packages/ui/collapse/src/index.less | 18 ++++---- packages/ui/collapse/src/index.tsx | 6 ++- packages/ui/select/src/index.less | 2 +- packages/ui/tag/stories/index.stories.tsx | 44 ++------------------ 10 files changed, 47 insertions(+), 71 deletions(-) diff --git a/packages/ui-theme/src/antd-vars-patch.less b/packages/ui-theme/src/antd-vars-patch.less index b9536b28..489f6c86 100644 --- a/packages/ui-theme/src/antd-vars-patch.less +++ b/packages/ui-theme/src/antd-vars-patch.less @@ -32,7 +32,7 @@ @font-size-base: 14px; @font-size-lg: 16px; @font-size-sm: 12px; -@line-height-base: 1.5; +@line-height-base: 1.5715; @border-radius-base: 4px; @border-radius-sm: 2px; @@ -147,6 +147,7 @@ @btn-disable-border: var(--color-gray-4); @btn-primary-color: var(--color-gray-1); @btn-primary-bg: var(--color-brand-6); +@btn-shadow: 0 2px 0 rgba(0, 0, 0, 0); // Tooltip // --- diff --git a/packages/ui/alert/src/index.less b/packages/ui/alert/src/index.less index 69c05a8d..b2ef6bd2 100644 --- a/packages/ui/alert/src/index.less +++ b/packages/ui/alert/src/index.less @@ -15,6 +15,11 @@ font-size: 14px; font-weight: bold; } + + .ant-alert-close-icon { + // 由于alert-with-description的icon现在是小的，所以有description时，距离上面要和.ant-alert-icon一样 + top: 11px; + } } &.ant-alert-warning { diff --git a/packages/ui/back-top/src/index.less b/packages/ui/back-top/src/index.less index 6a6ccd77..ea2d704a 100644 --- a/packages/ui/back-top/src/index.less +++ b/packages/ui/back-top/src/index.less @@ -13,7 +13,7 @@ } svg { - height: 20px; + height: 24px; margin-top: 4px; color: var(--color-gray-1); } diff --git a/packages/ui/button/src/index.less b/packages/ui/button/src/index.less index 464c7e93..e4d3d814 100644 --- a/packages/ui/button/src/index.less +++ b/packages/ui/button/src/index.less @@ -35,7 +35,7 @@ } &[disabled] { - color: var(--color-gray-6); + color: var(--theme-disabled-color); background: var(--color-gray-1); border-color: var(--color-gray-4); } @@ -68,7 +68,7 @@ } &[disabled] { - color: var(--color-gray-6); + color: var(--theme-disabled-color); background: var(--color-gray-1); border-color: var(--color-gray-5); @@ -100,7 +100,7 @@ } &[disabled] { - color: var(--color-gray-6); + color: var(--theme-disabled-color); background: var(--color-gray-1); border-color: var(--color-gray-4); } @@ -128,7 +128,7 @@ } &[disabled] { - color: var(--color-gray-6); + color: var(--theme-disabled-color); background: var(--color-gray-1); border-color: var(--color-gray-4); } diff --git a/packages/ui/button/src/index.tsx b/packages/ui/button/src/index.tsx index eabfecbe..1f77eb9d 100644 --- a/packages/ui/button/src/index.tsx +++ b/packages/ui/button/src/index.tsx @@ -7,7 +7,7 @@ import './index.less'; const clsPrefix = 'osui-button'; export interface ButtonProps extends Omit { - type?: ButtonType | 'image-text'; + type?: ButtonType | 'image-text' | 'strong' | 'icon' | 'only-icon'; } const OSUIButton: React.FC = props => { @@ -18,8 +18,11 @@ const OSUIButton: React.FC = props => { btnText = props.children; } return ( - // @ts-ignore - + {btnText} ); diff --git a/packages/ui/button/stories/index.stories.tsx b/packages/ui/button/stories/index.stories.tsx index ae78ef07..73571617 100644 --- a/packages/ui/button/stories/index.stories.tsx +++ b/packages/ui/button/stories/index.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; +import {IconSearch} from '@osui/icons'; +import {HomeOutlined} from '@ant-design/icons'; import OSUIButton from '../src'; -// eslint-disable-next-line @reskript/import-order -import {SearchOutlined, HomeOutlined} from '@ant-design/icons'; export default { title: 'OSUI-Button', @@ -9,7 +9,7 @@ export default { export const Demo = () => { return ( -
+ <>
普通样式 普通样式 @@ -30,14 +30,14 @@ export const Demo = () => { 文字按钮
- } style={{'margin': '0 20px 20px 0'}} /> - } style={{'margin': '0 20px 20px 0'}} /> - } style={{'margin': '0 20px 20px 0'}} /> + } style={{'margin': '0 20px 20px 0'}} /> + } style={{'margin': '0 20px 20px 0'}} /> + } style={{'margin': '0 20px 20px 0'}} />
- } style={{'margin': '0 20px 20px 0'}} /> - } style={{'margin': '0 20px 20px 0'}} /> - } style={{'margin': '0 20px 20px 0'}} /> + } style={{'margin': '0 20px 20px 0'}} /> + } style={{'margin': '0 20px 20px 0'}} /> + } style={{'margin': '0 20px 20px 0'}} />
} style={{'margin': '0 20px 20px 0'}}> @@ -50,5 +50,6 @@ export const Demo = () => { 图文按钮
-
); + + ); }; diff --git a/packages/ui/collapse/src/index.less b/packages/ui/collapse/src/index.less index 0ea65f2a..1490577b 100644 --- a/packages/ui/collapse/src/index.less +++ b/packages/ui/collapse/src/index.less @@ -1,6 +1,10 @@ @osui-collapse-class-prefix: osui-collapse; .@{osui-collapse-class-prefix} { + .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow { + font-size: 0; + } + .ant-collapse-item { .ant-collapse-header { color: var(--theme-heading-color); @@ -11,23 +15,19 @@ height: 32px; line-height: 32px; - .anticon-right { + .icon-wrapper { background: var(--collapse-expand-icon-bg); width: 16px; height: 16px; - padding-top: 3px; - border-radius: 9px; - - svg { - font-size: 10px; - color: var(--theme-text-color); - } + border-radius: 50%; + color: var(--theme-text-color); } } } .ant-collapse-item.ant-collapse-item-disabled { - .ant-collapse-header { + .ant-collapse-header, + .ant-collapse-arrow { color: var(--theme-disabled-color); } } diff --git a/packages/ui/collapse/src/index.tsx b/packages/ui/collapse/src/index.tsx index f19c6364..b3cc3242 100644 --- a/packages/ui/collapse/src/index.tsx +++ b/packages/ui/collapse/src/index.tsx @@ -22,7 +22,11 @@ const Collapse: CollapseInterface = ({className, ...restProps}) => { const expandIcon = useCallback( panelProps => { - return panelProps.isActive ? : ; + return ( + panelProps.isActive + ? + : + ); }, [] ); diff --git a/packages/ui/select/src/index.less b/packages/ui/select/src/index.less index 0a171df0..d9ad13f2 100644 --- a/packages/ui/select/src/index.less +++ b/packages/ui/select/src/index.less @@ -14,7 +14,7 @@ } .ant-select-arrow svg { - color: var(--color-gray-6); + color: var(--theme-disabled-color); } } diff --git a/packages/ui/tag/stories/index.stories.tsx b/packages/ui/tag/stories/index.stories.tsx index 82800c67..3d357c12 100644 --- a/packages/ui/tag/stories/index.stories.tsx +++ b/packages/ui/tag/stories/index.stories.tsx @@ -8,22 +8,8 @@ export default { }; export const Demo = () => { - - const { CheckableTag } = Tag; - - const tagsData = ['Movies', 'Books', 'Music', 'Sports']; - - // eslint-disable-next-line react-hooks/rules-of-hooks - const [selectedTags, setSelectedTags] = React.useState(['Books']); - - const handleChange = (tag: string, checked: any) => { - const nextSelectedTags = checked ? [...selectedTags, tag] : selectedTags.filter(t => t !== tag); - console.log('You are interested in: ', nextSelectedTags); - setSelectedTags(nextSelectedTags); - }; - return ( -
+ <> {/* success */} 基本 标签 @@ -40,30 +26,6 @@ export const Demo = () => { > 标签 - - {/* 焦点状态 */} - 可选择状态 - {tagsData.map(tag => ( - handleChange(tag, checked)} - > - {tag} - - ))} - - {/* 多彩标签 */} - 多彩标签(已修改属性，其他可用原生) - blue - red - purple - red - teal - yellow - - 自定义颜色 - #f50 - #2db7f5 -
); + + ); }; -- Gitee