diff --git a/components/loading/__tests__/__snapshots__/index.test.tsx.snap b/components/loading/__tests__/__snapshots__/index.test.tsx.snap index 83240e70c..f468ef2c5 100644 --- a/components/loading/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/loading/__tests__/__snapshots__/index.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Loading should render correctly 1`] = ` -"
" `; -exports[`Loading should render correctly 2`] = `[Function]`; - exports[`Loading should work with custom styles 1`] = ` -"
" `; -exports[`Loading should work with custom styles 2`] = `[Function]`; - exports[`Loading should work with different sizes 1`] = ` -"
" `; -exports[`Loading should work with different sizes 2`] = `[Function]`; - exports[`Loading should work with different types 1`] = ` -"
" `; - -exports[`Loading should work with different types 2`] = `[Function]`; diff --git a/components/loading/__tests__/index.test.tsx b/components/loading/__tests__/index.test.tsx index e6e8c4e9f..281c6901d 100644 --- a/components/loading/__tests__/index.test.tsx +++ b/components/loading/__tests__/index.test.tsx @@ -6,21 +6,19 @@ describe('Loading', () => { it('should render correctly', () => { const wrapper = mount() expect(wrapper.html()).toMatchSnapshot() - expect(() => wrapper.unmount()).toMatchSnapshot() }) it('should work with different types', () => { const wrapper = mount(
- - - - - + + + + +
, ) expect(wrapper.html()).toMatchSnapshot() - expect(() => wrapper.unmount()).toMatchSnapshot() }) it('should work with different sizes', () => { @@ -33,19 +31,16 @@ describe('Loading', () => { , ) expect(wrapper.html()).toMatchSnapshot() - expect(() => wrapper.unmount()).toMatchSnapshot() }) it('should work with custom styles', () => { const wrapper = mount(
- - - + +
, ) expect(wrapper.html()).toMatchSnapshot() - expect(() => wrapper.unmount()).toMatchSnapshot() }) it('should work with children', () => { diff --git a/components/loading/loading.tsx b/components/loading/loading.tsx index 28c93fca0..de9c5a9d6 100644 --- a/components/loading/loading.tsx +++ b/components/loading/loading.tsx @@ -5,65 +5,61 @@ import { NormalSizes, NormalTypes } from 'components/utils/prop-types' import { ZeitUIThemesPalette } from 'components/styles/themes' interface Props { - size?: NormalSizes - type?: NormalTypes + size?: string color?: string - width?: string - height?: string } const defaultProps = { - size: 'medium' as NormalSizes, - type: 'default' as NormalTypes, + size: 'medium', + color: 'default', } type NativeAttrs = Omit, keyof Props> export type LoadingProps = Props & typeof defaultProps & NativeAttrs -const getIconSize = (size: NormalSizes) => { +const getIconSize = (size: string) => { const sizes: { [key in NormalSizes]: string } = { - mini: '2px', - small: '3px', - medium: '4px', - large: '5px', + mini: '10px', + small: '15px', + medium: '20px', + large: '25px', } - return sizes[size] + return sizes[size as NormalSizes] || size } -const getIconBgColor = (type: NormalTypes, palette: ZeitUIThemesPalette, color?: string) => { +const getIconStrokeColor = (palette: ZeitUIThemesPalette, color: NormalTypes | string) => { const colors: { [key in NormalTypes]: string } = { - default: palette.accents_6, - primary: palette.success, + default: palette.cNeutral3, + primary: palette.cTheme5, secondary: palette.secondary, success: palette.success, warning: palette.warning, error: palette.error, } - - return color ? color : colors[type] + return colors[color as NormalTypes] || color } -const Loading: React.FC> = ({ - children, - size, - type, - color, -}) => { +const Loading: React.FC> = ({ children, size, color }) => { const theme = useTheme() const width = useMemo(() => getIconSize(size), [size]) - const bgColor = useMemo(() => getIconBgColor(type, theme.palette, color), [ - type, - theme.palette, - color, - ]) + const fill = useMemo(() => getIconStrokeColor(theme.palette, color), [theme.palette, color]) return (
{children && } - - - + + + + diff --git a/package.json b/package.json index 1f114fc6f..d9f942945 100644 --- a/package.json +++ b/package.json @@ -117,10 +117,20 @@ } }, "release": { - "plugins": ["@semantic-release/commit-analyzer", "@semantic-release/release-notes-generator", "@semantic-release/npm", "@semantic-release/github"], + "plugins": [ + "@semantic-release/commit-analyzer", + "@semantic-release/release-notes-generator", + "@semantic-release/npm", + "@semantic-release/github" + ], "branches": [ - "+([0-9])?(.{+([0-9]),x}).x", "master", - { "name": "dev", "channel": "alpha", "prerelease": "alpha" } + "+([0-9])?(.{+([0-9]),x}).x", + "master", + { + "name": "dev", + "channel": "alpha", + "prerelease": "alpha" + } ] }, "publishConfig": { diff --git a/pages/en-us/components/loading.mdx b/pages/en-us/components/loading.mdx index 1deae7f91..82c3cd1ed 100644 --- a/pages/en-us/components/loading.mdx +++ b/pages/en-us/components/loading.mdx @@ -32,7 +32,7 @@ Indicate an action running in the background. @@ -51,31 +51,45 @@ Indicate an action running in the background. + + + + + + + + `} /> + + + + + - + - + - + - + + `} /> @@ -83,14 +97,17 @@ Indicate an action running in the background. Loading.Props -| Attribute | Description | Type | Accepted values | Default | -| ---------- | --------------- | ---------------- | ------------------------------------------------------- | --------- | -| **type** | bg-color type | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` | -| **size** | loading size | `NormalSizes` | `'mini', 'small', 'medium', 'large'` | `medium` | -| **color** | custom bg color | `string` | - | - | -| **width** | custom width | `string` | - | `100%` | -| **height** | custom height | `string` | - | `100%` | -| ... | native props | `HTMLAttributes` | `'id', 'title', 'className', ...` | - | +| Attribute | Description | Type | Accepted values | Default | +| --------- | --------------- | ---------------- | ------------------------------------------------------------------------------------------- | --------- | +| **color** | indicator color | `string` | `'default','primary', 'secondary','success','error','warning' '#121212', 'rgba(1,1,1,0.1)'` | `default` | +| **size** | indicator size | `string` | `'mini', 'small', 'medium', 'large','10px' ,'10rem'`, | `medium` | +| ... | native props | `HTMLAttributes` | `'id', 'title', 'className', ...` | - | + +`color` or `size` will be attampted to match the preset string value first, passed as normal css color/length string otherwise + +Preset colors: `default`,`primary`,`secondary`,`success`,`error`,`warning` + +Preset sizes: `mini`, `small`, `medium`, `large` diff --git a/pages/zh-cn/components/loading.mdx b/pages/zh-cn/components/loading.mdx index e6bd9aace..96e150dcc 100644 --- a/pages/zh-cn/components/loading.mdx +++ b/pages/zh-cn/components/loading.mdx @@ -51,31 +51,45 @@ export const meta = { + + + + + + + + `} /> + + + + + - + - + - + - + + `} /> @@ -83,14 +97,17 @@ export const meta = { Loading.Props -| 属性 | 描述 | 类型 | 推荐值 | 默认 | -| ---------- | ------------------ | ---------------- | ------------------------------------------------------- | --------- | -| **type** | 指示器的类型 | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` | -| **size** | 指示器的大小 | `NormalSizes` | `'mini', 'small', 'medium', 'large'` | `medium` | -| **color** | 自定义指示器的色彩 | `string` | - | - | -| **width** | 定制 CSS 宽度 | `string` | - | `100%` | -| **height** | 定制 CSS 高度 | `string` | - | `100%` | -| ... | 原生属性 | `HTMLAttributes` | `'id', 'title', 'className', ...` | - | +| 属性 | 描述 | 类型 | 推荐值 | 默认 | +| --------- | ------------ | ---------------- | ------------------------------------------------------------------------------------------- | --------- | +| **color** | 指示器的颜色 | `string` | `'default','primary','secondary', 'success','error','warning' '#121212', 'rgba(1,1,1,0.1)'` | `default` | +| **size** | 指示器的大小 | `string` | `'mini', 'small', 'medium', 'large','10px' ,'10rem'`, | `medium` | +| ... | 原生属性 | `HTMLAttributes` | `'id', 'title', 'className', ...` | - | + +`color` 或 `size` 首先匹配预设值，否则按照 css 字符处理 + +color 预设值: `default`,`primary`,`secondary`,`success`,`error`,`warning` + +size 预设值: `mini`, `small`, `medium`, `large`