From a31d6c53fbd4f6af0cd2f0e6c999dbb4e3bec320 Mon Sep 17 00:00:00 2001
From: Deepankar <statisticsaffinity@gmail.com>
Date: Fri, 2 Apr 2021 16:44:12 +0530
Subject: [PATCH] feat(loading): apply width & height props (#500)

* feat(loading): apply width & height props

* test(loading): test case added & updating snapshots

* fix(loading): add a string type for size prop

test(loading): update test case & snapshots

* feat(loading): support custom the ratio of spaces

* docs(loading): append size and spaceRatio

test(loading): update snapshots

Co-authored-by: unix <unix.bio@gmail.com>
---
 .../__snapshots__/index.test.tsx.snap         |  56 +++++-----
 components/loading/__tests__/index.test.tsx   |   4 +-
 components/loading/loading.tsx                |  25 +++--
 pages/en-us/components/loading.mdx            | 100 +++++++++++-------
 pages/zh-cn/components/loading.mdx            |  98 ++++++++++-------
 5 files changed, 169 insertions(+), 114 deletions(-)

diff --git a/components/loading/__tests__/__snapshots__/index.test.tsx.snap b/components/loading/__tests__/__snapshots__/index.test.tsx.snap
index 555dd6687..98a2ca6dd 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`] = `
-"<div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
+"<div class=\\"loading-container \\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
         .loading-container {
           display: inline-flex;
           align-items: center;
@@ -39,7 +39,7 @@ exports[`Loading should render correctly 1`] = `
           height: 4px;
           border-radius: 50%;
           background-color: #444;
-          margin: 0 1px;
+          margin: 0 calc(4px / 2 * 1);
           display: inline-block;
           animation: loading-blink 1.4s infinite both;
         }
@@ -71,7 +71,7 @@ exports[`Loading should render correctly 1`] = `
 exports[`Loading should render correctly 2`] = `[Function]`;
 
 exports[`Loading should work with custom styles 1`] = `
-"<div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
+"<div><div class=\\"loading-container \\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
         .loading-container {
           display: inline-flex;
           align-items: center;
@@ -109,7 +109,7 @@ exports[`Loading should work with custom styles 1`] = `
           height: 4px;
           border-radius: 50%;
           background-color: #fff;
-          margin: 0 1px;
+          margin: 0 calc(4px / 2 * 1);
           display: inline-block;
           animation: loading-blink 1.4s infinite both;
         }
@@ -135,7 +135,7 @@ exports[`Loading should work with custom styles 1`] = `
             opacity: 0.2;
           }
         }
-      </style></div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
+      </style></div><div class=\\"loading-container \\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
         .loading-container {
           display: inline-flex;
           align-items: center;
@@ -169,11 +169,11 @@ exports[`Loading should work with custom styles 1`] = `
         }
 
         i {
-          width: 4px;
-          height: 4px;
+          width: 20%;
+          height: 20%;
           border-radius: 50%;
           background-color: #444;
-          margin: 0 1px;
+          margin: 0 calc(20% / 2 * 1);
           display: inline-block;
           animation: loading-blink 1.4s infinite both;
         }
@@ -199,7 +199,7 @@ exports[`Loading should work with custom styles 1`] = `
             opacity: 0.2;
           }
         }
-      </style></div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
+      </style></div><div class=\\"loading-container \\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
         .loading-container {
           display: inline-flex;
           align-items: center;
@@ -233,11 +233,11 @@ exports[`Loading should work with custom styles 1`] = `
         }
 
         i {
-          width: 4px;
-          height: 4px;
+          width: 10px;
+          height: 10px;
           border-radius: 50%;
           background-color: #444;
-          margin: 0 1px;
+          margin: 0 calc(10px / 2 * 1);
           display: inline-block;
           animation: loading-blink 1.4s infinite both;
         }
@@ -269,7 +269,7 @@ 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`] = `
-"<div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
+"<div><div class=\\"loading-container \\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
         .loading-container {
           display: inline-flex;
           align-items: center;
@@ -307,7 +307,7 @@ exports[`Loading should work with different sizes 1`] = `
           height: 2px;
           border-radius: 50%;
           background-color: #444;
-          margin: 0 1px;
+          margin: 0 calc(2px / 2 * 1);
           display: inline-block;
           animation: loading-blink 1.4s infinite both;
         }
@@ -333,7 +333,7 @@ exports[`Loading should work with different sizes 1`] = `
             opacity: 0.2;
           }
         }
-      </style></div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
+      </style></div><div class=\\"loading-container \\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
         .loading-container {
           display: inline-flex;
           align-items: center;
@@ -371,7 +371,7 @@ exports[`Loading should work with different sizes 1`] = `
           height: 3px;
           border-radius: 50%;
           background-color: #444;
-          margin: 0 1px;
+          margin: 0 calc(3px / 2 * 1);
           display: inline-block;
           animation: loading-blink 1.4s infinite both;
         }
@@ -397,7 +397,7 @@ exports[`Loading should work with different sizes 1`] = `
             opacity: 0.2;
           }
         }
-      </style></div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
+      </style></div><div class=\\"loading-container \\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
         .loading-container {
           display: inline-flex;
           align-items: center;
@@ -435,7 +435,7 @@ exports[`Loading should work with different sizes 1`] = `
           height: 4px;
           border-radius: 50%;
           background-color: #444;
-          margin: 0 1px;
+          margin: 0 calc(4px / 2 * 1);
           display: inline-block;
           animation: loading-blink 1.4s infinite both;
         }
@@ -461,7 +461,7 @@ exports[`Loading should work with different sizes 1`] = `
             opacity: 0.2;
           }
         }
-      </style></div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
+      </style></div><div class=\\"loading-container \\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
         .loading-container {
           display: inline-flex;
           align-items: center;
@@ -499,7 +499,7 @@ exports[`Loading should work with different sizes 1`] = `
           height: 5px;
           border-radius: 50%;
           background-color: #444;
-          margin: 0 1px;
+          margin: 0 calc(5px / 2 * 1);
           display: inline-block;
           animation: loading-blink 1.4s infinite both;
         }
@@ -531,7 +531,7 @@ 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`] = `
-"<div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
+"<div><div class=\\"loading-container \\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
         .loading-container {
           display: inline-flex;
           align-items: center;
@@ -569,7 +569,7 @@ exports[`Loading should work with different types 1`] = `
           height: 4px;
           border-radius: 50%;
           background-color: #0070f3;
-          margin: 0 1px;
+          margin: 0 calc(4px / 2 * 1);
           display: inline-block;
           animation: loading-blink 1.4s infinite both;
         }
@@ -595,7 +595,7 @@ exports[`Loading should work with different types 1`] = `
             opacity: 0.2;
           }
         }
-      </style></div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
+      </style></div><div class=\\"loading-container \\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
         .loading-container {
           display: inline-flex;
           align-items: center;
@@ -633,7 +633,7 @@ exports[`Loading should work with different types 1`] = `
           height: 4px;
           border-radius: 50%;
           background-color: #666;
-          margin: 0 1px;
+          margin: 0 calc(4px / 2 * 1);
           display: inline-block;
           animation: loading-blink 1.4s infinite both;
         }
@@ -659,7 +659,7 @@ exports[`Loading should work with different types 1`] = `
             opacity: 0.2;
           }
         }
-      </style></div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
+      </style></div><div class=\\"loading-container \\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
         .loading-container {
           display: inline-flex;
           align-items: center;
@@ -697,7 +697,7 @@ exports[`Loading should work with different types 1`] = `
           height: 4px;
           border-radius: 50%;
           background-color: #f5a623;
-          margin: 0 1px;
+          margin: 0 calc(4px / 2 * 1);
           display: inline-block;
           animation: loading-blink 1.4s infinite both;
         }
@@ -723,7 +723,7 @@ exports[`Loading should work with different types 1`] = `
             opacity: 0.2;
           }
         }
-      </style></div><div class=\\"loading-container\\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
+      </style></div><div class=\\"loading-container \\"><span class=\\"loading\\"><i></i><i></i><i></i></span><style>
         .loading-container {
           display: inline-flex;
           align-items: center;
@@ -761,7 +761,7 @@ exports[`Loading should work with different types 1`] = `
           height: 4px;
           border-radius: 50%;
           background-color: #e00;
-          margin: 0 1px;
+          margin: 0 calc(4px / 2 * 1);
           display: inline-block;
           animation: loading-blink 1.4s infinite both;
         }
diff --git a/components/loading/__tests__/index.test.tsx b/components/loading/__tests__/index.test.tsx
index f7f34b937..670ca936c 100644
--- a/components/loading/__tests__/index.test.tsx
+++ b/components/loading/__tests__/index.test.tsx
@@ -39,8 +39,8 @@ describe('Loading', () => {
     const wrapper = mount(
       <div>
         <Loading color="#fff" />
-        <Loading width="20%" />
-        <Loading height="10px" />
+        <Loading size="20%" />
+        <Loading size="10px" />
       </div>,
     )
     expect(wrapper.html()).toMatchSnapshot()
diff --git a/components/loading/loading.tsx b/components/loading/loading.tsx
index 5f1a3cfa8..6d4b64709 100644
--- a/components/loading/loading.tsx
+++ b/components/loading/loading.tsx
@@ -4,30 +4,34 @@ import withDefaults from '../utils/with-defaults'
 import { NormalSizes, NormalTypes } from 'components/utils/prop-types'
 import { GeistUIThemesPalette } from 'components/themes/presets'
 
+type LoadingSizes = NormalSizes | string
+
 interface Props {
-  size?: NormalSizes
+  size?: LoadingSizes
   type?: NormalTypes
   color?: string
-  width?: string
-  height?: string
+  className?: string
+  spaceRatio?: number
 }
 
 const defaultProps = {
-  size: 'medium' as NormalSizes,
+  size: 'medium' as LoadingSizes,
   type: 'default' as NormalTypes,
+  className: '',
+  spaceRatio: 1,
 }
 
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type LoadingProps = Props & typeof defaultProps & NativeAttrs
 
-const getIconSize = (size: NormalSizes) => {
-  const sizes: { [key in NormalSizes]: string } = {
+const getIconSize = (size: LoadingSizes) => {
+  const sizes: { [key in LoadingSizes]: string } = {
     mini: '2px',
     small: '3px',
     medium: '4px',
     large: '5px',
   }
-  return sizes[size]
+  return sizes[size] || size
 }
 
 const getIconBgColor = (
@@ -51,6 +55,9 @@ const Loading: React.FC<React.PropsWithChildren<LoadingProps>> = ({
   size,
   type,
   color,
+  className,
+  spaceRatio,
+  ...props
 }) => {
   const theme = useTheme()
   const width = useMemo(() => getIconSize(size), [size])
@@ -61,7 +68,7 @@ const Loading: React.FC<React.PropsWithChildren<LoadingProps>> = ({
   ])
 
   return (
-    <div className="loading-container">
+    <div className={`loading-container ${className}`} {...props}>
       <span className="loading">
         {children && <label>{children}</label>}
         <i />
@@ -106,7 +113,7 @@ const Loading: React.FC<React.PropsWithChildren<LoadingProps>> = ({
           height: ${width};
           border-radius: 50%;
           background-color: ${bgColor};
-          margin: 0 1px;
+          margin: 0 calc(${width} / 2 * ${spaceRatio});
           display: inline-block;
           animation: loading-blink 1.4s infinite both;
         }
diff --git a/pages/en-us/components/loading.mdx b/pages/en-us/components/loading.mdx
index 1deae7f91..db8b12f46 100644
--- a/pages/en-us/components/loading.mdx
+++ b/pages/en-us/components/loading.mdx
@@ -1,5 +1,5 @@
 import { Layout, Playground, Attributes } from 'lib/components'
-import { Loading, Spacer, Row } from 'components'
+import { Loading, Spacer, Row, Grid } from 'components'
 
 export const meta = {
   title: 'Loading',
@@ -33,64 +33,88 @@ Indicate an action running in the background.
 <Playground
   title="sizes"
   desc="Components of different sizes."
-  scope={{ Loading, Row, Spacer }}
+  scope={{ Loading, Grid }}
   code={`
-<>
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+<Grid.Container gap={2.5}>
+  <Grid xs={24}>
     <Loading size="mini" />
-  </Row>
-  <Spacer y={.5} />
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+  </Grid>
+  <Grid xs={24}>
     <Loading size="small" />
-  </Row>
-  <Spacer y={.5} />
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+  </Grid>
+  <Grid xs={24}>
     <Loading size="medium" />
-  </Row>
-  <Spacer y={.5} />
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+  </Grid>
+   <Grid xs={24}>
     <Loading size="large" />
-  </Row>
-</>
+  </Grid>
+  <Grid xs={24}>
+    <Loading size="10px" />
+  </Grid>
+</Grid.Container>
 `}
 />
 
 <Playground
-  title="type"
+  title="types"
   desc="Loading indicators in different states."
-  scope={{ Loading, Row, Spacer }}
+  scope={{ Loading, Grid }}
   code={`
-<>
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+<Grid.Container gap={2.5}>
+  <Grid xs={24}>
     <Loading type="success" />
-  </Row>
-  <Spacer y={.5} />
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+  </Grid>
+  <Grid xs={24}>
     <Loading type="secondary" />
-  </Row>
-  <Spacer y={.5} />
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+  </Grid>
+  <Grid xs={24}>
     <Loading type="warning" />
-  </Row>
-  <Spacer y={.5} />
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+  </Grid>
+   <Grid xs={24}>
     <Loading type="error" />
-  </Row>
-</>
+  </Grid>
+</Grid.Container>
+`}
+/>
+
+<Playground
+  title="spaces"
+  desc="Customize the space between points. (the ratio is relative to the current `size`)"
+  scope={{ Loading, Grid }}
+  code={`
+<Grid.Container gap={2.5}>
+  <Grid xs={24}>
+    <Loading spaceRatio={2.5} />
+  </Grid>
+  <Grid xs={24}>
+    <Loading size="8px" spaceRatio={0.5} />
+  </Grid>
+</Grid.Container>
 `}
 />
 
 <Attributes edit="/pages/en-us/components/loading.mdx">
 <Attributes.Title>Loading.Props</Attributes.Title>
 
-| 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   |
+| -------------- | ---------------------------------- | ---------------- | --------------------------------- | --------- |
+| **type**       | bg-color type                      | `NormalTypes`    | [NormalTypes](#mormaltypes)       | `default` |
+| **size**       | loading size                       | `LoadingSizes`   | [LoadingSizes](#loadingsizes)     | `medium`  |
+| **color**      | custom bg color                    | `string`         | -                                 | -         |
+| **spaceRatio** | percentage of space between points | `number`         | -                                 | 1         |
+| ...            | native props                       | `HTMLAttributes` | `'id', 'title', 'className', ...` | -         |
+
+<Attributes.Title>NormalTypes</Attributes.Title>
+
+```ts
+type NormalTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+```
+
+<Attributes.Title>LoadingSizes</Attributes.Title>
+
+```ts
+type LoadingSizes = 'mini' | 'small' | 'medium' | 'large' | string
+```
 
 </Attributes>
 
diff --git a/pages/zh-cn/components/loading.mdx b/pages/zh-cn/components/loading.mdx
index e6bd9aace..d91764f09 100644
--- a/pages/zh-cn/components/loading.mdx
+++ b/pages/zh-cn/components/loading.mdx
@@ -1,5 +1,5 @@
 import { Layout, Playground, Attributes } from 'lib/components'
-import { Loading, Spacer, Row } from 'components'
+import { Loading, Spacer, Row, Grid } from 'components'
 
 export const meta = {
   title: '加载中 Loading',
@@ -33,64 +33,88 @@ export const meta = {
 <Playground
   title="大小"
   desc="不同大小的组件。"
-  scope={{ Loading, Row, Spacer }}
+  scope={{ Loading, Grid }}
   code={`
-<>
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+<Grid.Container gap={2.5}>
+  <Grid xs={24}>
     <Loading size="mini" />
-  </Row>
-  <Spacer y={.5} />
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+  </Grid>
+  <Grid xs={24}>
     <Loading size="small" />
-  </Row>
-  <Spacer y={.5} />
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+  </Grid>
+  <Grid xs={24}>
     <Loading size="medium" />
-  </Row>
-  <Spacer y={.5} />
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+  </Grid>
+   <Grid xs={24}>
     <Loading size="large" />
-  </Row>
-</>
+  </Grid>
+  <Grid xs={24}>
+    <Loading size="10px" />
+  </Grid>
+</Grid.Container>
 `}
 />
 
 <Playground
   title="类型"
   desc="加载指示器在不同状态下的表现。"
-  scope={{ Loading, Row, Spacer }}
+  scope={{ Loading, Grid }}
   code={`
-<>
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+<Grid.Container gap={2.5}>
+  <Grid xs={24}>
     <Loading type="success" />
-  </Row>
-  <Spacer y={.5} />
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+  </Grid>
+  <Grid xs={24}>
     <Loading type="secondary" />
-  </Row>
-  <Spacer y={.5} />
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+  </Grid>
+  <Grid xs={24}>
     <Loading type="warning" />
-  </Row>
-  <Spacer y={.5} />
-  <Row style={{ padding: '10px 0', width: '50px' }}>
+  </Grid>
+   <Grid xs={24}>
     <Loading type="error" />
-  </Row>
-</>
+  </Grid>
+</Grid.Container>
+`}
+/>
+
+<Playground
+  title="空间"
+  desc="自定义点与点之间的间隔比例。(比例是相对于当前大小 `size`)"
+  scope={{ Loading, Grid }}
+  code={`
+<Grid.Container gap={2.5}>
+  <Grid xs={24}>
+    <Loading spaceRatio={2.5} />
+  </Grid>
+  <Grid xs={24}>
+    <Loading size="8px" spaceRatio={0.5} />
+  </Grid>
+</Grid.Container>
 `}
 />
 
 <Attributes edit="/pages/zh-cn/components/loading.mdx">
 <Attributes.Title>Loading.Props</Attributes.Title>
 
-| 属性       | 描述               | 类型             | 推荐值                                                  | 默认      |
-| ---------- | ------------------ | ---------------- | ------------------------------------------------------- | --------- |
-| **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', ...`                       | -         |
+| 属性           | 描述               | 类型             | 推荐值                            | 默认      |
+| -------------- | ------------------ | ---------------- | --------------------------------- | --------- |
+| **type**       | 指示器的类型       | `NormalTypes`    | [NormalTypes](#mormaltypes)       | `default` |
+| **size**       | 指示器的大小       | `LoadingSizes`   | [LoadingSizes](#loadingsizes)     | `medium`  |
+| **color**      | 自定义指示器的色彩 | `string`         | -                                 | -         |
+| **spaceRatio** | 点之间的空间比例   | `number`         | -                                 | 1         |
+| ...            | 原生属性           | `HTMLAttributes` | `'id', 'title', 'className', ...` | -         |
+
+<Attributes.Title>NormalTypes</Attributes.Title>
+
+```ts
+type NormalTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
+```
+
+<Attributes.Title>LoadingSizes</Attributes.Title>
+
+```ts
+type LoadingSizes = 'mini' | 'small' | 'medium' | 'large' | string
+```
 
 </Attributes>