diff --git a/packages/zarm-icons/.svgo.yml b/packages/zarm-icons/.svgo.yml index 8ba1f9717..89817f8c5 100644 --- a/packages/zarm-icons/.svgo.yml +++ b/packages/zarm-icons/.svgo.yml @@ -2,4 +2,5 @@ plugins: - removeAttrs: attrs: - 'fill' - - 'stroke' \ No newline at end of file + - 'stroke' + - 'xmlns' \ No newline at end of file diff --git a/packages/zarm-icons/assets/icons.sketch b/packages/zarm-icons/assets/icons.sketch index a166e021b..8f0b658dd 100644 Binary files a/packages/zarm-icons/assets/icons.sketch and b/packages/zarm-icons/assets/icons.sketch differ diff --git a/packages/zarm-icons/svgr.config.js b/packages/zarm-icons/svgr.config.js index e64602808..d9a523827 100644 --- a/packages/zarm-icons/svgr.config.js +++ b/packages/zarm-icons/svgr.config.js @@ -3,7 +3,10 @@ module.exports = { typescript: true, svgProps: { fill: 'currentColor', + focusable: false, + 'aria-hidden': "true", }, + ref: true, expandProps: false, template: require('./templates/compTemplate.js'), // indexTemplate: require('./templates/indexTemplate.js'), diff --git a/packages/zarm-icons/templates/compTemplate.js b/packages/zarm-icons/templates/compTemplate.js index 9c1d56985..0315b7188 100644 --- a/packages/zarm-icons/templates/compTemplate.js +++ b/packages/zarm-icons/templates/compTemplate.js @@ -12,7 +12,7 @@ function defaultTemplate( import { Icon } from 'zarm'; import type { IconProps } from 'zarm'; -const ${componentName} = (props: IconProps) => { +const ${componentName} = (props: IconProps, svgRef?: React.Ref) => { return React.createElement(Icon, { ...props, component: () => ${jsx}}); } diff --git a/packages/zarm/src/keyboard/Keyboard.tsx b/packages/zarm/src/keyboard/Keyboard.tsx index 5039e20eb..b768ca6fa 100644 --- a/packages/zarm/src/keyboard/Keyboard.tsx +++ b/packages/zarm/src/keyboard/Keyboard.tsx @@ -1,8 +1,8 @@ import React, { PureComponent } from 'react'; import type { TouchEvent, MouseEvent } from 'react'; import classnames from 'classnames'; +import { Keyboard as KeyboardIcon, DeleteKey as DeleteKeyIcon } from '@zarm-design/icons'; import type PropsType from './PropsType'; -import Icon from '../icon'; type KeyType = Exclude; @@ -64,7 +64,7 @@ export default class Keyboard extends PureComponent { return (
this.onKeyClick(text)}> - {text === 'close' ? : text} + {text === 'close' ? : text}
); }; @@ -85,7 +85,7 @@ export default class Keyboard extends PureComponent { onMouseDown={() => this.onLongPressIn('delete')} onMouseUp={this.onLongPressOut} > - +
@@ -88,18 +90,20 @@ exports[`Keyboard snapshot renders correctly 1`] = ` class="za-keyboard__item" > @@ -179,18 +183,20 @@ exports[`Keyboard snapshot type is idcard 1`] = ` class="za-keyboard__item" > @@ -203,18 +209,20 @@ exports[`Keyboard snapshot type is idcard 1`] = ` class="za-keyboard__item" > @@ -294,18 +302,20 @@ exports[`Keyboard snapshot type is price 1`] = ` class="za-keyboard__item" > @@ -318,18 +328,20 @@ exports[`Keyboard snapshot type is price 1`] = ` class="za-keyboard__item" > diff --git a/packages/zarm/src/message/__tests__/__snapshots__/index.test.jsx.snap b/packages/zarm/src/message/__tests__/__snapshots__/index.test.jsx.snap index 3fbe9c5e1..f04120538 100644 --- a/packages/zarm/src/message/__tests__/__snapshots__/index.test.jsx.snap +++ b/packages/zarm/src/message/__tests__/__snapshots__/index.test.jsx.snap @@ -1,31 +1,70 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Message closable 1`] = ` -
-
- foo -
-
- +
+ foo +
+
+ + + + + + + + + +
-
+ `; exports[`Message hasArrow 1`] = ` @@ -44,13 +83,7 @@ exports[`Message hasArrow 1`] = `
- +
`; diff --git a/packages/zarm/src/message/__tests__/index.test.jsx b/packages/zarm/src/message/__tests__/index.test.jsx index 40cac5055..9ba64cb07 100644 --- a/packages/zarm/src/message/__tests__/index.test.jsx +++ b/packages/zarm/src/message/__tests__/index.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render, shallow } from 'enzyme'; +import { render, shallow, mount } from 'enzyme'; import toJson from 'enzyme-to-json'; import Message from '../index'; @@ -38,9 +38,9 @@ describe('Message', () => { }); it('closable', () => { - const wrapper = shallow(foo); + const wrapper = mount(foo); expect(toJson(wrapper)).toMatchSnapshot(); - wrapper.find('Icon').simulate('click'); + wrapper.find('.za-message__footer .za-icon').at(0).simulate('click'); expect(wrapper.state('visible')).toEqual(false); }); }); diff --git a/packages/zarm/src/message/index.tsx b/packages/zarm/src/message/index.tsx index db5c36551..197c49fc5 100644 --- a/packages/zarm/src/message/index.tsx +++ b/packages/zarm/src/message/index.tsx @@ -1,7 +1,7 @@ import React, { PureComponent, MouseEventHandler } from 'react'; import classnames from 'classnames'; +import { Close as CloseIcon, ArrowRight as ArrowRightIcon } from '@zarm-design/icons'; import PropsType from './PropsType'; -import Icon from '../icon'; export interface MessageProps extends PropsType { prefixCls?: string; @@ -49,8 +49,8 @@ export default class Message extends PureComponent { }); const iconRender = icon &&
{icon}
; - const renderCloseIcon = closable && ; - const renderArrow = hasArrow && ; + const renderCloseIcon = closable && ; + const renderArrow = hasArrow && ; const noFooter = !closable && !hasArrow; return ( diff --git a/packages/zarm/src/modal/ModalHeader.tsx b/packages/zarm/src/modal/ModalHeader.tsx index 34679ca2f..d20589540 100644 --- a/packages/zarm/src/modal/ModalHeader.tsx +++ b/packages/zarm/src/modal/ModalHeader.tsx @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react'; import classnames from 'classnames'; +import { Close as CloseIcon } from '@zarm-design/icons'; import { BaseModalHeaderProps } from './PropsType'; -import Icon from '../icon'; export interface ModalHeaderProps extends BaseModalHeaderProps { prefixCls?: string; @@ -17,7 +17,7 @@ export default class ModalHeader extends PureComponent { const { prefixCls, className, title, closable, onCancel, ...others } = this.props; const cls = classnames(`${prefixCls}__header`, className); const btnClose = closable && ( - + ); return (
diff --git a/packages/zarm/src/modal/__tests__/__snapshots__/index.test.jsx.snap b/packages/zarm/src/modal/__tests__/__snapshots__/index.test.jsx.snap index e723d38c8..8ace984f6 100644 --- a/packages/zarm/src/modal/__tests__/__snapshots__/index.test.jsx.snap +++ b/packages/zarm/src/modal/__tests__/__snapshots__/index.test.jsx.snap @@ -107,18 +107,20 @@ exports[`Modal renders correctly 1`] = ` 标题
@@ -197,52 +199,49 @@ exports[`Modal renders correctly 1`] = ` > 标题
- - - - - - - - + + + + - } + icon={} prefixCls="za-notice-bar" speed={50} theme="warning" @@ -54,15 +46,7 @@ exports[`NoticeBar snapshot renders correctly 1`] = ` closable={false} delay={2000} hasArrow={false} - icon={ - - } + icon={} prefixCls="za-message" size="lg" speed={50} @@ -78,47 +62,42 @@ exports[`NoticeBar snapshot renders correctly 1`] = `
- - + - - - - - - + + + +
diff --git a/packages/zarm/src/notice-bar/__tests__/index.test.tsx b/packages/zarm/src/notice-bar/__tests__/index.test.tsx index eb7923aa3..972c7c4ec 100644 --- a/packages/zarm/src/notice-bar/__tests__/index.test.tsx +++ b/packages/zarm/src/notice-bar/__tests__/index.test.tsx @@ -3,11 +3,11 @@ import React from 'react'; import { render, mount, shallow } from 'enzyme'; import toJson from 'enzyme-to-json'; import { mocked } from 'ts-jest/utils'; +import { Volume as VolumeIcon } from '@zarm-design/icons'; import NoticeBar from '../index'; import { addKeyframe, removeKeyframe, existKeyframe } from '../../utils/keyframes'; import { mockRefReturnValueOnce } from '../../../tests/utils'; import Message from '../../message'; -import Icon from '../../icon'; jest.mock('../../utils/keyframes'); @@ -59,7 +59,7 @@ describe('NoticeBar', () => { expect.objectContaining({ size: 'lg', theme: 'warning', - icon: , + icon: , hasArrow: false, closable: false, speed: 50, diff --git a/packages/zarm/src/notice-bar/index.tsx b/packages/zarm/src/notice-bar/index.tsx index 3c6177d55..cbf38dff6 100644 --- a/packages/zarm/src/notice-bar/index.tsx +++ b/packages/zarm/src/notice-bar/index.tsx @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react'; +import { Volume as VolumeIcon } from '@zarm-design/icons'; import type PropsType from './PropsType'; import Message from '../message'; -import Icon from '../icon'; import { addKeyframe, removeKeyframe, existKeyframe } from '../utils/keyframes'; const NOTICEBAR_KEYFRAME_NAME = 'za-notice-bar-scrolling'; @@ -21,7 +21,7 @@ export default class NoticeBar extends PureComponent, + icon: , hasArrow: false, closable: false, speed: 50, diff --git a/packages/zarm/src/pull/Pull.tsx b/packages/zarm/src/pull/Pull.tsx index b2dcf49ef..ff166c4dd 100644 --- a/packages/zarm/src/pull/Pull.tsx +++ b/packages/zarm/src/pull/Pull.tsx @@ -1,12 +1,12 @@ import React, { PureComponent, CSSProperties, ReactNode } from 'react'; import classnames from 'classnames'; +import { SuccessCircle as SuccessCircleIcon, WarningCircle as WarningCircleIcon } from '@zarm-design/icons'; import { REFRESH_STATE, LOAD_STATE, PullAction, PropsType } from './PropsType'; import Events from '../utils/events'; import Throttle from '../utils/throttle'; import { getScrollTop } from '../utils/dom'; import Drag from '../drag'; import ActivityIndicator from '../activity-indicator'; -import Icon from '../icon'; export interface PullProps extends PropsType { prefixCls?: string; @@ -347,7 +347,7 @@ export default class Pull extends PureComponent { case REFRESH_STATE.success: return (
- + {locale!.successText}
); @@ -355,7 +355,7 @@ export default class Pull extends PureComponent { case REFRESH_STATE.failure: return (
- + {locale!.failureText}
); @@ -391,7 +391,7 @@ export default class Pull extends PureComponent { case LOAD_STATE.failure: return (
- + {locale!.failureText}
); diff --git a/packages/zarm/src/search-bar/SearchBar.tsx b/packages/zarm/src/search-bar/SearchBar.tsx index b58da0cbd..089673765 100644 --- a/packages/zarm/src/search-bar/SearchBar.tsx +++ b/packages/zarm/src/search-bar/SearchBar.tsx @@ -1,8 +1,8 @@ import React, { PureComponent, CompositionEvent } from 'react'; import type { FormEvent } from 'react'; import classnames from 'classnames'; +import { Search as SearchIcon } from '@zarm-design/icons'; import type BaseSearchBarProps from './PropsType'; -import Icon from '../icon'; import InputBase from '../input/InputBase'; export interface SearchBarProps extends BaseSearchBarProps { @@ -222,7 +222,7 @@ export default class SearchBar extends PureComponent
- +
@@ -109,48 +111,46 @@ exports[`SearchBar snapshot renders defaultValue correctly 1`] = `
- - - - - - - - + + + +
@@ -325,48 +325,46 @@ exports[`SearchBar snapshot renders onCancel called correctly 1`] = `
- - - - - - - - + + + +
@@ -547,48 +545,46 @@ exports[`SearchBar snapshot renders onChange called correctly 1`] = `
- - - - - - - - + + + +
@@ -764,48 +760,46 @@ exports[`SearchBar snapshot renders onClear called correctly 1`] = `
- - - - - - - - + + + +
@@ -980,48 +974,46 @@ exports[`SearchBar snapshot renders onFocus called correctly 1`] = `
- - - - - - - - + + + +
@@ -1202,48 +1194,46 @@ exports[`SearchBar snapshot renders onSubmit called correctly 1`] = `
- - - - - - - - + + + +
diff --git a/packages/zarm/src/search-bar/style/component.scss b/packages/zarm/src/search-bar/style/component.scss index 2ef5078db..a0d7e6a1b 100644 --- a/packages/zarm/src/search-bar/style/component.scss +++ b/packages/zarm/src/search-bar/style/component.scss @@ -21,7 +21,6 @@ @include e(icon) { margin-right: r(4); - font-size: var(--search-bar-icon-size); color: var(--color-text-placeholder); } } diff --git a/packages/zarm/src/stepper/__tests__/__snapshots__/index.test.jsx.snap b/packages/zarm/src/stepper/__tests__/__snapshots__/index.test.jsx.snap index c9eedeadf..e6c9a8f7c 100644 --- a/packages/zarm/src/stepper/__tests__/__snapshots__/index.test.jsx.snap +++ b/packages/zarm/src/stepper/__tests__/__snapshots__/index.test.jsx.snap @@ -18,13 +18,7 @@ exports[`Stepper defaultValue 1`] = ` size="xs" theme="default" > - + - + `; @@ -71,18 +59,20 @@ exports[`Stepper renders correctly 1`] = ` > @@ -104,18 +94,20 @@ exports[`Stepper renders correctly 1`] = ` > diff --git a/packages/zarm/src/stepper/index.tsx b/packages/zarm/src/stepper/index.tsx index ba7590191..a7153cfa3 100755 --- a/packages/zarm/src/stepper/index.tsx +++ b/packages/zarm/src/stepper/index.tsx @@ -1,8 +1,8 @@ import React, { PureComponent } from 'react'; import classnames from 'classnames'; +import { Minus as MinusIcon, Plus as PlusIcon } from '@zarm-design/icons'; import PropsType from './PropsType'; import Button from '../button'; -import Icon from '../icon'; import Input from '../input'; import { InputNumberProps } from '../input/PropsType'; @@ -201,7 +201,7 @@ export default class Stepper extends PureComponent shape={shape} onClick={this.onSubClick} > - + ); diff --git a/packages/zarm/src/style/themes/default.scss b/packages/zarm/src/style/themes/default.scss index a2e386c02..f6f050cd0 100644 --- a/packages/zarm/src/style/themes/default.scss +++ b/packages/zarm/src/style/themes/default.scss @@ -314,7 +314,6 @@ // SearchBar --search-bar-font-size: 14px; - --search-bar-icon-size: 18px; --search-bar-background: #fff; --search-bar-inner-background: #f2f2f2;