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>

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;
         }

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()

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;
         }