From 1ceaac97cf84c274b208ab5d90ccd4c8d1fd77a8 Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Mon, 24 Jun 2019 01:11:48 +0900 Subject: [PATCH 01/18] #289 Icon: mv .js -> .tsx --- src/scripts/{Icon.js => Icon.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/scripts/{Icon.js => Icon.tsx} (100%) diff --git a/src/scripts/Icon.js b/src/scripts/Icon.tsx similarity index 100% rename from src/scripts/Icon.js rename to src/scripts/Icon.tsx From 4aff67655b1b5cb26557a48d19ba7ae221a53f2d Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Mon, 24 Jun 2019 01:57:33 +0900 Subject: [PATCH 02/18] #289 Icon: Install @types/svg4everybody --- package.json | 1 + yarn.lock | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/package.json b/package.json index d73933461..befce714f 100644 --- a/package.json +++ b/package.json @@ -76,6 +76,7 @@ "@types/storybook__addon-actions": "^3.4.2", "@types/storybook__addon-knobs": "^5.0.0", "@types/storybook__react": "^4.0.1", + "@types/svg4everybody": "^2.1.1", "@types/uuid": "^3.4.4", "@typescript-eslint/eslint-plugin": "^1.5.0", "babel-core": "^7.0.0-bridge.0", diff --git a/yarn.lock b/yarn.lock index 162ebcb3e..3874e6609 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1835,6 +1835,11 @@ "@types/react" "*" "@types/webpack-env" "*" +"@types/svg4everybody@^2.1.1": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@types/svg4everybody/-/svg4everybody-2.1.1.tgz#6ea08165445651ab70a540715acb0f061f2b3f44" + integrity sha512-ZWJfUtTAySJVp6V87xB39MTiAQ0K5q2XfipDnOpOm1xjfyViIRn+oCn4vS0TecwKlFM0hB2BjAcHVXsKM0vx3A== + "@types/unist@*", "@types/unist@^2.0.0": version "2.0.3" resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e" From 73728f55c7a232440764f6f7b282d2cb44b68838 Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Mon, 24 Jun 2019 03:14:47 +0900 Subject: [PATCH 03/18] #289 Icon: Convert propTypes to TypeScript types --- src/scripts/Icon.tsx | 95 ++++++++++++++++++++++++-------------------- 1 file changed, 53 insertions(+), 42 deletions(-) diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx index 851523289..e3aad462b 100644 --- a/src/scripts/Icon.tsx +++ b/src/scripts/Icon.tsx @@ -1,8 +1,9 @@ -import React, { Component } from 'react'; +import React, { Component, HTMLAttributes, SVGAttributes } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import svg4everybody from 'svg4everybody'; import { registerStyle, getAssetRoot } from './util'; +import { ComponentSettingsContext } from './ComponentSettings'; svg4everybody(); @@ -89,18 +90,57 @@ weeklyview,world,zoomin,zoomout .split(/[\s,]+/); /* eslint-enable max-len */ -export default class Icon extends Component { - constructor(props) { +export type IconProps = { + className?: string; + containerClassName?: string; + category?: 'action' | 'custom' | 'doctype' | 'standard' | 'utility'; + icon: string; + size?: 'x-small' | 'small' | 'medium' | 'large'; + container?: boolean | ('default' | 'circle'); + color?: string; + textColor?: 'default' | 'warning' | 'error'; + tabIndex?: number; + fillColor?: string; +}; + +export type IconState = { + iconColor?: string; +}; + +export default class Icon extends Component< + IconProps & SVGAttributes, + IconState +> { + static contextTypes = { assetRoot: PropTypes.string }; + + static ICONS = { + STANDARD_ICONS, + CUSTOM_ICONS, + ACTION_ICONS, + DOCTYPE_ICONS, + UTILITY_ICONS, + }; + + // eslint-disable-next-line react/sort-comp + context!: Pick; + + iconContainer: HTMLSpanElement | null; + + svgIcon: SVGElement | null; + + constructor(props: Readonly>) { super(props); this.state = {}; + this.iconContainer = null; + this.svgIcon = null; registerStyle('icon', [['.slds-icon use', '{ pointer-events: none; }']]); } componentDidMount() { this.checkIconColor(); const svgEl = this.svgIcon; - if (svgEl) { - svgEl.setAttribute('focusable', this.props.tabIndex >= 0); + if (svgEl && this.props.tabIndex !== undefined) { + svgEl.setAttribute('focusable', (this.props.tabIndex >= 0).toString()); } } @@ -108,7 +148,11 @@ export default class Icon extends Component { this.checkIconColor(); } - getIconColor(fillColor, category, icon) { + getIconColor( + fillColor: string | undefined, + category: string | undefined, + icon: string + ) { /* eslint-disable no-unneeded-ternary */ /* eslint-disable max-len */ return this.state.iconColor @@ -143,6 +187,7 @@ export default class Icon extends Component { if (!el) { return; } + // @ts-ignore const bgColorStyle = getComputedStyle(el)['background-color']; // if no background color set to the icon if (/^(transparent|rgba\(0,\s*0,\s*0,\s*0\))$/.test(bgColorStyle)) { @@ -162,7 +207,7 @@ export default class Icon extends Component { style, assetRoot, ...props - }) { + }: any) { const iconColor = this.getIconColor(fillColor, category, icon); const iconClassNames = classnames( { @@ -201,7 +246,7 @@ export default class Icon extends Component { let { category, icon } = props; if (icon.indexOf(':') > 0) { - [category, icon] = icon.split(':'); + [category, icon] = icon.split(':') as [IconProps['category'], string]; } if (container) { const { containerClassName, fillColor, ...pprops } = props; @@ -232,37 +277,3 @@ export default class Icon extends Component { return this.renderSVG({ ...props, category, icon, assetRoot }); } } - -Icon.propTypes = { - className: PropTypes.string, - containerClassName: PropTypes.string, - category: PropTypes.oneOf([ - 'action', - 'custom', - 'doctype', - 'standard', - 'utility', - ]), - icon: PropTypes.string, - size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']), - container: PropTypes.oneOfType([ - PropTypes.bool, - PropTypes.oneOf(['default', 'circle']), - ]), - color: PropTypes.string, - textColor: PropTypes.oneOf(['default', 'warning', 'error']), - tabIndex: PropTypes.number, - fillColor: PropTypes.string, -}; - -Icon.contextTypes = { - assetRoot: PropTypes.string, -}; - -Icon.ICONS = { - STANDARD_ICONS, - CUSTOM_ICONS, - ACTION_ICONS, - DOCTYPE_ICONS, - UTILITY_ICONS, -}; From 426058fd44af21a6217d8dbc4227a0d78f0dca9c Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Mon, 24 Jun 2019 04:00:55 +0900 Subject: [PATCH 04/18] #289 Icon: Add non-null assertion when passing `icon` props in ButtonIcon --- src/scripts/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scripts/Button.tsx b/src/scripts/Button.tsx index e28061d2a..b4fdd2301 100644 --- a/src/scripts/Button.tsx +++ b/src/scripts/Button.tsx @@ -177,7 +177,7 @@ export const ButtonIcon: React.FC = ({ return ( Date: Mon, 24 Jun 2019 04:01:44 +0900 Subject: [PATCH 05/18] #289 Icon: Avoid passing textColor={null} in ButtonIcon --- src/scripts/Button.tsx | 1 - test/button-spec.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/src/scripts/Button.tsx b/src/scripts/Button.tsx index b4fdd2301..3396b0579 100644 --- a/src/scripts/Button.tsx +++ b/src/scripts/Button.tsx @@ -178,7 +178,6 @@ export const ButtonIcon: React.FC = ({ diff --git a/test/button-spec.tsx b/test/button-spec.tsx index ba6572771..f1c33678e 100644 --- a/test/button-spec.tsx +++ b/test/button-spec.tsx @@ -142,7 +142,6 @@ describe('ButtonIcon', () => { const expectedProps = { icon: 'test', test: 'test', - textColor: null, className: 'slds-button__icon', }; From e68bd889ee063bd160d1d84541d86439685977e5 Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Mon, 24 Jun 2019 04:02:42 +0900 Subject: [PATCH 06/18] #289 Icon: `pointerEvents` should not be included in `style` --- src/scripts/Button.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scripts/Button.tsx b/src/scripts/Button.tsx index 3396b0579..a1d886159 100644 --- a/src/scripts/Button.tsx +++ b/src/scripts/Button.tsx @@ -173,12 +173,12 @@ export const ButtonIcon: React.FC = ({ inverseClassName, className ); - const iconStyle = { ...style, pointerEvents: 'none' }; return ( ); From 77f13f7cef14bb339d87f44b45d3c28710b175a0 Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Mon, 24 Jun 2019 04:03:28 +0900 Subject: [PATCH 07/18] #289 Icon: Fix type error of `getComputedStyle` --- src/scripts/Icon.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx index e3aad462b..2bc1ab661 100644 --- a/src/scripts/Icon.tsx +++ b/src/scripts/Icon.tsx @@ -187,10 +187,12 @@ export default class Icon extends Component< if (!el) { return; } - // @ts-ignore - const bgColorStyle = getComputedStyle(el)['background-color']; + const bgColorStyle = getComputedStyle(el).backgroundColor; // if no background color set to the icon - if (/^(transparent|rgba\(0,\s*0,\s*0,\s*0\))$/.test(bgColorStyle)) { + if ( + bgColorStyle && + /^(transparent|rgba\(0,\s*0,\s*0,\s*0\))$/.test(bgColorStyle) + ) { this.setState({ iconColor: 'standard-default' }); } } From 218d48311ab8db5b9b49831ab4e5dd398f027682 Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Tue, 2 Jul 2019 03:13:27 +0900 Subject: [PATCH 08/18] #289 Button: Change `icon` of ButtonIcon to required props --- src/scripts/Button.tsx | 8 ++++---- test/button-spec.tsx | 12 +++++++----- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/scripts/Button.tsx b/src/scripts/Button.tsx index a1d886159..16067ab38 100644 --- a/src/scripts/Button.tsx +++ b/src/scripts/Button.tsx @@ -71,7 +71,7 @@ export class Button extends Component { const inverse = inv || /-?inverse$/.test(type || ''); return ( { const adjoining = icon && (iconAlign === 'right' || !(label || children)); const iconMoreSize = this.props.iconMoreSize || adjoining ? 'x-small' : 'small'; - return ; + return ; } render() { @@ -143,7 +143,7 @@ export class Button extends Component { export type ButtonIconProps = { className?: string; - icon?: string; + icon: string; align?: ButtonIconAlign; size?: ButtonIconSize; inverse?: boolean; @@ -176,7 +176,7 @@ export const ButtonIcon: React.FC = ({ return ( { describe('ButtonIcon', () => { it('should render button icon with className', () => { - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.prop('className')).toEqual('slds-button__icon'); }); it('should render button icon with specific className', () => { const className = 'test'; - const wrapper = shallow(); + const wrapper = shallow( + + ); expect(wrapper.hasClass(className)).toBe(true); }); it('should render button icon based on align', () => { const align = 'right'; - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.hasClass(`slds-button__icon--${align}`)).toBe(true); }); it('should render button icon based on size', () => { const size = 'medium'; - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.hasClass(`slds-button__icon--${size}`)).toBe(true); }); it('should render button icon inversed', () => { - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.hasClass('slds-button__icon--inverse')).toBe(true); }); From 893353b5bcf138b0d2c01b044f31e20d6b641646 Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Tue, 2 Jul 2019 03:14:03 +0900 Subject: [PATCH 09/18] #289 Icon: HTMLAttributes is unused --- src/scripts/Icon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx index 2bc1ab661..44d2e6d7a 100644 --- a/src/scripts/Icon.tsx +++ b/src/scripts/Icon.tsx @@ -1,4 +1,4 @@ -import React, { Component, HTMLAttributes, SVGAttributes } from 'react'; +import React, { Component, SVGAttributes } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import svg4everybody from 'svg4everybody'; From 3ab2940ac60b0e24a6c52d2e0cfa7ff7bd733188 Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Tue, 2 Jul 2019 03:15:59 +0900 Subject: [PATCH 10/18] #289 Icon: Accept null in `textColor` --- src/scripts/Button.tsx | 1 + src/scripts/Icon.tsx | 2 +- test/button-spec.tsx | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/scripts/Button.tsx b/src/scripts/Button.tsx index 16067ab38..41c06e9d7 100644 --- a/src/scripts/Button.tsx +++ b/src/scripts/Button.tsx @@ -177,6 +177,7 @@ export const ButtonIcon: React.FC = ({ { const expectedProps = { icon: 'test', test: 'test', + textColor: null, className: 'slds-button__icon', }; From 230c7f55d16bc286fe5fbfc1b69e6c4c2c920dbc Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Tue, 2 Jul 2019 03:21:58 +0900 Subject: [PATCH 11/18] #289 Icon: Update snapshot --- .../__snapshots__/storyshots.test.js.snap | 504 +++--------------- 1 file changed, 84 insertions(+), 420 deletions(-) diff --git a/test/storyshots/__snapshots__/storyshots.test.js.snap b/test/storyshots/__snapshots__/storyshots.test.js.snap index 90865d996..d93e7c15c 100644 --- a/test/storyshots/__snapshots__/storyshots.test.js.snap +++ b/test/storyshots/__snapshots__/storyshots.test.js.snap @@ -267,11 +267,7 @@ exports[`Storyshots Button Button Icon 1`] = ` Date: Tue, 2 Jul 2019 03:22:37 +0900 Subject: [PATCH 12/18] #289 Icon: mv story .js -> .tsx --- stories/{IconStories.js => IconStories.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename stories/{IconStories.js => IconStories.tsx} (100%) diff --git a/stories/IconStories.js b/stories/IconStories.tsx similarity index 100% rename from stories/IconStories.js rename to stories/IconStories.tsx From ffac4b8182065baed8a57d981300873dcd9c33d7 Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Mon, 1 Jul 2019 20:49:57 -0700 Subject: [PATCH 13/18] #289 Icon: Fix story type errors --- src/scripts/Icon.tsx | 18 ++++++++++++++---- stories/IconStories.tsx | 32 +++++++++++++++++++++++--------- 2 files changed, 37 insertions(+), 13 deletions(-) diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx index 2850514b5..c862cad10 100644 --- a/src/scripts/Icon.tsx +++ b/src/scripts/Icon.tsx @@ -90,15 +90,25 @@ weeklyview,world,zoomin,zoomout .split(/[\s,]+/); /* eslint-enable max-len */ +export type IconCategory = + | 'action' + | 'custom' + | 'doctype' + | 'standard' + | 'utility'; +export type IconSize = 'x-small' | 'small' | 'medium' | 'large'; +export type IconContainer = boolean | 'default' | 'circle'; +export type IconTextColor = 'default' | 'warning' | 'error' | null; + export type IconProps = { className?: string; containerClassName?: string; - category?: 'action' | 'custom' | 'doctype' | 'standard' | 'utility'; + category?: IconCategory; icon: string; - size?: 'x-small' | 'small' | 'medium' | 'large'; - container?: boolean | ('default' | 'circle'); + size?: IconSize; + container?: IconContainer; color?: string; - textColor?: 'default' | 'warning' | 'error' | null; + textColor?: IconTextColor; tabIndex?: number; fillColor?: string; }; diff --git a/stories/IconStories.tsx b/stories/IconStories.tsx index bd7d09e9f..a258b1102 100644 --- a/stories/IconStories.tsx +++ b/stories/IconStories.tsx @@ -4,6 +4,12 @@ import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { text, select } from '@storybook/addon-knobs'; import { Icon } from '../src/scripts'; +import { + IconCategory, + IconContainer, + IconSize, + IconTextColor, +} from '../src/scripts/Icon'; const iconListItemStyle = { float: 'left', @@ -11,38 +17,46 @@ const iconListItemStyle = { height: '5rem', padding: '1.5rem', textAlign: 'center', -}; +} as const; storiesOf('Icon', module) .add( 'Controlled with knobs', () => { const categoryOptions = { - '': '(none)', + '(none)': '', standard: 'standard', custom: 'custom', action: 'action', doctype: 'doctype', utility: 'utility', }; - const category = select('category', categoryOptions, 'standard'); + const category = select( + 'category', + categoryOptions, + 'standard' + ) as IconCategory; const sizeOptions = { - '': '(none)', + '(none)': '', 'x-small': 'x-small', small: 'small', medium: 'medium', large: 'large', }; - const size = select('size', sizeOptions, 'medium'); + const size = select('size', sizeOptions, 'medium') as IconSize; const icon = text('icon', 'account'); - const textColor = text('textColor'); - const fillColor = text('fillColor'); + const textColor = text('textColor', '') as IconTextColor; + const fillColor = text('fillColor', ''); const containerOptions = { - '': '(none)', + '(none)': '', default: 'default', circle: 'circle', }; - const container = select('container', containerOptions); + const container = select( + 'container', + containerOptions, + '' + ) as IconContainer; return ( Date: Mon, 1 Jul 2019 20:50:15 -0700 Subject: [PATCH 14/18] #289 Icon: Delete unnecessary eslint-disable comments --- src/scripts/Icon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx index c862cad10..269e0f801 100644 --- a/src/scripts/Icon.tsx +++ b/src/scripts/Icon.tsx @@ -164,7 +164,6 @@ export default class Icon extends Component< icon: string ) { /* eslint-disable no-unneeded-ternary */ - /* eslint-disable max-len */ return this.state.iconColor ? this.state.iconColor : category === 'doctype' @@ -180,6 +179,7 @@ export default class Icon extends Component< : category === 'action' && /^new_custom/.test(icon) ? icon.replace(/^new_custom/, 'custom-') : `${category}-${(icon || '').replace(/_/g, '-')}`; + /* eslint-enable no-unneeded-ternary */ } checkIconColor() { From d6c549267b205ba97ccca611ebecf298b74ce500 Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Mon, 1 Jul 2019 21:46:49 -0700 Subject: [PATCH 15/18] #289 Icon: mv test .js -> .tsx --- test/{icon-spec.js => icon-spec.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename test/{icon-spec.js => icon-spec.tsx} (100%) diff --git a/test/icon-spec.js b/test/icon-spec.tsx similarity index 100% rename from test/icon-spec.js rename to test/icon-spec.tsx From 617903acf2ace49a4bb997f63d808070f5a386c4 Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Mon, 1 Jul 2019 21:49:23 -0700 Subject: [PATCH 16/18] #289 Icon: Install @types/power-assert --- package.json | 1 + yarn.lock | 18 ++++++++++++++++++ 2 files changed, 19 insertions(+) diff --git a/package.json b/package.json index befce714f..e023895cd 100644 --- a/package.json +++ b/package.json @@ -72,6 +72,7 @@ "@types/classnames": "^2.2.7", "@types/enzyme": "^3.9.1", "@types/jest": "^24.0.11", + "@types/power-assert": "^1.5.0", "@types/react": "^16.8.12", "@types/storybook__addon-actions": "^3.4.2", "@types/storybook__addon-knobs": "^5.0.0", diff --git a/yarn.lock b/yarn.lock index 3874e6609..770d82223 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1761,6 +1761,11 @@ resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.7.tgz#fb68cc9be8487e6ea5b13700e759bfbab7e0fefd" integrity sha512-rzOhiQ55WzAiFgXRtitP/ZUT8iVNyllEpylJ5zHzR4vArUvMB39GTk+Zon/uAM0JxEFAWnwsxC2gH8s+tZ3Myg== +"@types/empower@*": + version "1.2.30" + resolved "https://registry.yarnpkg.com/@types/empower/-/empower-1.2.30.tgz#c7cfc14b3a61e54c74c674c1fbc91ba2df0d1392" + integrity sha1-x8/BSzph5Ux0xnTB+8kbot8NE5I= + "@types/enzyme@^3.9.1": version "3.9.1" resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.9.1.tgz#3a0ce07e30066dbc26cd3474c8e680af2d249e26" @@ -1791,6 +1796,19 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-11.12.0.tgz#ec5594728811dc2797e42396cfcdf786f2052c12" integrity sha512-Lg00egj78gM+4aE0Erw05cuDbvX9sLJbaaPwwRtdCdAMnIudqrQZ0oZX98Ek0yiSK/A2nubHgJfvII/rTT2Dwg== +"@types/power-assert-formatter@*": + version "1.4.28" + resolved "https://registry.yarnpkg.com/@types/power-assert-formatter/-/power-assert-formatter-1.4.28.tgz#25b8fddb6322259c6b91c35338d39b0f8e524252" + integrity sha1-Jbj922MiJZxrkcNTONObD45SQlI= + +"@types/power-assert@^1.5.0": + version "1.5.0" + resolved "https://registry.yarnpkg.com/@types/power-assert/-/power-assert-1.5.0.tgz#4cc43717127cd81901555f905c55f02938120dcb" + integrity sha512-KPoeO2vSMGOOL1g8p/d7mvTTz7SCW7RRcpavqxhFwKZoqsDd1nwPGE9QICIt50b348/9MJYuBdwjUK34Y09XJw== + dependencies: + "@types/empower" "*" + "@types/power-assert-formatter" "*" + "@types/prop-types@*": version "15.7.0" resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.0.tgz#4c48fed958d6dcf9487195a0ef6456d5f6e0163a" From 581065abea2195af7e503715f46a0b4737feadf8 Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Sat, 6 Jul 2019 01:29:32 -0700 Subject: [PATCH 17/18] #289 Icon: Quit default export --- src/scripts/Button.tsx | 2 +- src/scripts/DateInput.js | 2 +- src/scripts/DropdownMenu.js | 2 +- src/scripts/Icon.tsx | 2 +- src/scripts/Input.js | 2 +- src/scripts/Lookup.js | 2 +- src/scripts/Notification.js | 2 +- src/scripts/Picklist.js | 2 +- src/scripts/Pill.js | 2 +- src/scripts/SalesPath.js | 2 +- src/scripts/Table.js | 2 +- src/scripts/index.js | 3 +-- stories/IconStories.tsx | 2 +- test/button-spec.tsx | 2 +- test/icon-spec.tsx | 2 +- 15 files changed, 15 insertions(+), 16 deletions(-) diff --git a/src/scripts/Button.tsx b/src/scripts/Button.tsx index 41c06e9d7..3fc8087ca 100644 --- a/src/scripts/Button.tsx +++ b/src/scripts/Button.tsx @@ -1,6 +1,6 @@ import React, { Component, ReactNode, ButtonHTMLAttributes } from 'react'; import classnames from 'classnames'; -import Icon from './Icon'; +import { Icon } from './Icon'; import { Spinner } from './Spinner'; type Omit = Pick>; diff --git a/src/scripts/DateInput.js b/src/scripts/DateInput.js index b81278166..2d0d5ec5d 100644 --- a/src/scripts/DateInput.js +++ b/src/scripts/DateInput.js @@ -5,7 +5,7 @@ import moment from 'moment'; import autoAlign from './AutoAlign'; import { FormElement } from './FormElement'; import Input from './Input'; -import Icon from './Icon'; +import { Icon } from './Icon'; import Datepicker from './Datepicker'; import { uuid, isElInChildren, registerStyle } from './util'; diff --git a/src/scripts/DropdownMenu.js b/src/scripts/DropdownMenu.js index 2440cf7fc..1bfb30268 100644 --- a/src/scripts/DropdownMenu.js +++ b/src/scripts/DropdownMenu.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import Icon from './Icon'; +import { Icon } from './Icon'; import autoAlign from './AutoAlign'; import { PicklistItem } from './Picklist'; diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx index 269e0f801..cb1b8d471 100644 --- a/src/scripts/Icon.tsx +++ b/src/scripts/Icon.tsx @@ -117,7 +117,7 @@ export type IconState = { iconColor?: string; }; -export default class Icon extends Component< +export class Icon extends Component< IconProps & SVGAttributes, IconState > { diff --git a/src/scripts/Input.js b/src/scripts/Input.js index 03cc430e0..2d2f3c30b 100644 --- a/src/scripts/Input.js +++ b/src/scripts/Input.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import keycoder from 'keycoder'; -import Icon from './Icon'; +import { Icon } from './Icon'; import { FormElement } from './FormElement'; import { Text } from './Text'; import { uuid, registerStyle } from './util'; diff --git a/src/scripts/Lookup.js b/src/scripts/Lookup.js index 598ba2065..23d2f2d3a 100644 --- a/src/scripts/Lookup.js +++ b/src/scripts/Lookup.js @@ -4,7 +4,7 @@ import classnames from 'classnames'; import autoAlign from './AutoAlign'; import { FormElement } from './FormElement'; import Input from './Input'; -import Icon from './Icon'; +import { Icon } from './Icon'; import { Spinner } from './Spinner'; import Pill from './Pill'; import DropdownButton from './DropdownButton'; diff --git a/src/scripts/Notification.js b/src/scripts/Notification.js index 47150b540..bafe42d31 100644 --- a/src/scripts/Notification.js +++ b/src/scripts/Notification.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import { Button } from './Button'; -import Icon from './Icon'; +import { Icon } from './Icon'; const NOTIFICATION_TYPES = ['alert', 'toast']; diff --git a/src/scripts/Picklist.js b/src/scripts/Picklist.js index d3027db92..2c5952648 100644 --- a/src/scripts/Picklist.js +++ b/src/scripts/Picklist.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import { FormElement } from './FormElement'; -import Icon from './Icon'; +import { Icon } from './Icon'; import { Button } from './Button'; import DropdownMenu, { DropdownMenuItem } from './DropdownMenu'; import { uuid, isElInChildren } from './util'; diff --git a/src/scripts/Pill.js b/src/scripts/Pill.js index b80e45099..c0fcf9f27 100644 --- a/src/scripts/Pill.js +++ b/src/scripts/Pill.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import Icon from './Icon'; +import { Icon } from './Icon'; import { Button } from './Button'; class Pill extends Component { diff --git a/src/scripts/SalesPath.js b/src/scripts/SalesPath.js index b45ee974d..2e489f6bc 100644 --- a/src/scripts/SalesPath.js +++ b/src/scripts/SalesPath.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import Icon from './Icon'; +import { Icon } from './Icon'; class SalesPath extends React.Component { constructor() { diff --git a/src/scripts/Table.js b/src/scripts/Table.js index ee4b4b579..42563dced 100644 --- a/src/scripts/Table.js +++ b/src/scripts/Table.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import Icon from './Icon'; +import { Icon } from './Icon'; export class TableHeader extends Component { renderBaseHeaderRow() { diff --git a/src/scripts/index.js b/src/scripts/index.js index a25b6f868..b857c4b0a 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -1,7 +1,6 @@ // TODO: revert // changed // because of https://github.com/gaearon/react-hot-loader/issues/158 -import Icon from './Icon'; import DropdownButton from './DropdownButton'; import DropdownMenu, { DropdownMenuItem, @@ -47,7 +46,6 @@ export { Notification, Alert, Toast, - Icon, DropdownButton, DropdownMenu, DropdownMenuItem, @@ -103,6 +101,7 @@ export * from './BreadCrumbs'; export * from './Button'; export * from './ButtonGroup'; export * from './Container'; +export * from './Icon'; export * from './MediaObject'; export * from './Radio'; export * from './RadioGroup'; diff --git a/stories/IconStories.tsx b/stories/IconStories.tsx index a258b1102..053af2f68 100644 --- a/stories/IconStories.tsx +++ b/stories/IconStories.tsx @@ -3,8 +3,8 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { text, select } from '@storybook/addon-knobs'; -import { Icon } from '../src/scripts'; import { + Icon, IconCategory, IconContainer, IconSize, diff --git a/test/button-spec.tsx b/test/button-spec.tsx index c7d30809a..9a8e34f49 100644 --- a/test/button-spec.tsx +++ b/test/button-spec.tsx @@ -7,7 +7,7 @@ import { ButtonIconAlign, ButtonIconSize, } from '../src/scripts/Button'; -import Icon from '../src/scripts/Icon'; +import { Icon } from '../src/scripts/Icon'; describe('Button', () => { it('should render button with className', () => { diff --git a/test/icon-spec.tsx b/test/icon-spec.tsx index 53e287b12..f6c486a0f 100644 --- a/test/icon-spec.tsx +++ b/test/icon-spec.tsx @@ -2,7 +2,7 @@ import assert from 'power-assert'; import React from 'react'; import { shallow } from 'enzyme'; -import Icon from '../src/scripts/Icon'; +import { Icon } from '../src/scripts/Icon'; describe('Icon', () => { it('should render icon', () => { From 5bacf620bb7ecb541c24ad3c0d21a7ff45394e4f Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Fri, 12 Jul 2019 21:26:04 -0700 Subject: [PATCH 18/18] #289 Icon: Assign null as initial value of class property --- src/scripts/Icon.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx index cb1b8d471..1735666e6 100644 --- a/src/scripts/Icon.tsx +++ b/src/scripts/Icon.tsx @@ -134,15 +134,13 @@ export class Icon extends Component< // eslint-disable-next-line react/sort-comp context!: Pick; - iconContainer: HTMLSpanElement | null; + iconContainer: HTMLSpanElement | null = null; - svgIcon: SVGElement | null; + svgIcon: SVGElement | null = null; constructor(props: Readonly>) { super(props); this.state = {}; - this.iconContainer = null; - this.svgIcon = null; registerStyle('icon', [['.slds-icon use', '{ pointer-events: none; }']]); }