feat(spinner): add extra small size for spinner

innovaccer · Nov 12, 2024 · 16ab49f · 16ab49f
1 parent 4d5267b
commit 16ab49f
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 33 deletions.
diff --git a/core/components/atoms/button/Button.tsx b/core/components/atoms/button/Button.tsx
@@ -140,6 +140,8 @@ const ButtonElement = React.forwardRef<HTMLButtonElement, ButtonProps>((props, r
     [`Button-regularIcon--${iconAlign}`]: children && iconAlign && size === 'regular' && !expanded,
   });
 
+  const spinnerSize = size === 'large' && children ? 'small' : 'xsmall';
+
   return (
     <button
       data-test="DesignSystem-Button"
@@ -153,7 +155,7 @@ const ButtonElement = React.forwardRef<HTMLButtonElement, ButtonProps>((props, r
       {loading ? (
         <>
           <Spinner
-            size="small"
+            size={spinnerSize}
             appearance={appearance === 'basic' || appearance === 'transparent' ? 'secondary' : 'white'}
             data-test="DesignSystem-Button--Spinner"
             className="Button-spinner"

diff --git a/core/components/atoms/button/__stories__/Loading.story.jsx b/core/components/atoms/button/__stories__/Loading.story.jsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Button } from '@/index';
 
-export const LoaderInButton = () => <Button appearance="primary" loading={true} aria-label="loading" />;
+export const LoaderInButton = () => <Button loading={true} aria-label="loading" />;
 
 export default {
   title: 'Components/Button/Button/Loader In Button',

diff --git a/core/components/atoms/button/__tests__/Button.test.tsx b/core/components/atoms/button/__tests__/Button.test.tsx
@@ -221,6 +221,43 @@ describe('Button component with icon', () => {
       expect(getByTestId('DesignSystem-Button--Spinner')).toHaveClass('Button-spinner');
     });
 
+    it('Should have Spinner--xsmall class when loading state for button size=tiny', () => {
+      const { getByTestId } = render(
+        <Button loading={true} size="tiny">
+          Button
+        </Button>
+      );
+      expect(getByTestId('DesignSystem-Button--Spinner')).toHaveClass('Spinner--xsmall');
+    });
+
+    it('Should have Spinner--xsmall class when loading state for button size=regular', () => {
+      const { getByTestId } = render(
+        <Button loading={true} size="regular">
+          Button
+        </Button>
+      );
+      expect(getByTestId('DesignSystem-Button--Spinner')).toHaveClass('Spinner--xsmall');
+    });
+
+    it('Should have Spinner--small class when loading state for button size=large', () => {
+      const { getByTestId } = render(
+        <Button loading={true} size="large">
+          Button
+        </Button>
+      );
+      expect(getByTestId('DesignSystem-Button--Spinner')).toHaveClass('Spinner--small');
+    });
+
+    it('Should have Spinner--xsmall class when loading state for icon button', () => {
+      const { getByTestId } = render(<Button loading={true} icon="places" />);
+      expect(getByTestId('DesignSystem-Button--Spinner')).toHaveClass('Spinner--xsmall');
+    });
+
+    it('Should have Spinner--xsmall class when loading state for large icon button', () => {
+      const { getByTestId } = render(<Button loading={true} icon="places" size="large" />);
+      expect(getByTestId('DesignSystem-Button--Spinner')).toHaveClass('Spinner--xsmall');
+    });
+
     it('Should have no Button-spinner class when no loading state', () => {
       const { getByTestId } = render(<Button loading={false}>Button</Button>);
       expect(getByTestId('DesignSystem-Button')).not.toHaveClass('Button-spinner');

diff --git a/core/components/atoms/button/__tests__/__snapshots__/Button.test.tsx.snap b/core/components/atoms/button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -73,7 +73,7 @@ exports[`Button component
       tabindex="0"
     >
       <svg
-        class="Spinner Spinner--small Button-spinner"
+        class="Spinner Spinner--xsmall Button-spinner"
         data-test="DesignSystem-Button--Spinner"
         viewBox="0 0 50 50"
       >
@@ -84,7 +84,7 @@ exports[`Button component
           fill="none"
           r="20"
           stroke-miterlimit="10"
-          stroke-width="4"
+          stroke-width="8"
         />
       </svg>
       <span
@@ -191,7 +191,7 @@ exports[`Button component
       tabindex="0"
     >
       <svg
-        class="Spinner Spinner--small Button-spinner"
+        class="Spinner Spinner--xsmall Button-spinner"
         data-test="DesignSystem-Button--Spinner"
         viewBox="0 0 50 50"
       >
@@ -202,7 +202,7 @@ exports[`Button component
           fill="none"
           r="20"
           stroke-miterlimit="10"
-          stroke-width="4"
+          stroke-width="8"
         />
       </svg>
       <span
@@ -309,7 +309,7 @@ exports[`Button component
       tabindex="0"
     >
       <svg
-        class="Spinner Spinner--small Button-spinner"
+        class="Spinner Spinner--xsmall Button-spinner"
         data-test="DesignSystem-Button--Spinner"
         viewBox="0 0 50 50"
       >
@@ -320,7 +320,7 @@ exports[`Button component
           fill="none"
           r="20"
           stroke-miterlimit="10"
-          stroke-width="4"
+          stroke-width="8"
         />
       </svg>
       <span
@@ -427,7 +427,7 @@ exports[`Button component
       tabindex="0"
     >
       <svg
-        class="Spinner Spinner--small Button-spinner"
+        class="Spinner Spinner--xsmall Button-spinner"
         data-test="DesignSystem-Button--Spinner"
         viewBox="0 0 50 50"
       >
@@ -438,7 +438,7 @@ exports[`Button component
           fill="none"
           r="20"
           stroke-miterlimit="10"
-          stroke-width="4"
+          stroke-width="8"
         />
       </svg>
       <span
@@ -904,7 +904,7 @@ exports[`Button component with no children
       tabindex="0"
     >
       <svg
-        class="Spinner Spinner--small Button-spinner"
+        class="Spinner Spinner--xsmall Button-spinner"
         data-test="DesignSystem-Button--Spinner"
         viewBox="0 0 50 50"
       >
@@ -915,7 +915,7 @@ exports[`Button component with no children
           fill="none"
           r="20"
           stroke-miterlimit="10"
-          stroke-width="4"
+          stroke-width="8"
         />
       </svg>
       <span
@@ -939,7 +939,7 @@ exports[`Button component with no children
       tabindex="0"
     >
       <svg
-        class="Spinner Spinner--small Button-spinner"
+        class="Spinner Spinner--xsmall Button-spinner"
         data-test="DesignSystem-Button--Spinner"
         viewBox="0 0 50 50"
       >
@@ -950,7 +950,7 @@ exports[`Button component with no children
           fill="none"
           r="20"
           stroke-miterlimit="10"
-          stroke-width="4"
+          stroke-width="8"
         />
       </svg>
       <span
@@ -974,7 +974,7 @@ exports[`Button component with no children
       tabindex="0"
     >
       <svg
-        class="Spinner Spinner--small Button-spinner"
+        class="Spinner Spinner--xsmall Button-spinner"
         data-test="DesignSystem-Button--Spinner"
         viewBox="0 0 50 50"
       >
@@ -985,7 +985,7 @@ exports[`Button component with no children
           fill="none"
           r="20"
           stroke-miterlimit="10"
-          stroke-width="4"
+          stroke-width="8"
         />
       </svg>
       <span
@@ -1009,7 +1009,7 @@ exports[`Button component with no children
       tabindex="0"
     >
       <svg
-        class="Spinner Spinner--small Button-spinner"
+        class="Spinner Spinner--xsmall Button-spinner"
         data-test="DesignSystem-Button--Spinner"
         viewBox="0 0 50 50"
       >
@@ -1020,7 +1020,7 @@ exports[`Button component with no children
           fill="none"
           r="20"
           stroke-miterlimit="10"
-          stroke-width="4"
+          stroke-width="8"
         />
       </svg>
       <span

diff --git a/core/components/atoms/spinner/Spinner.tsx b/core/components/atoms/spinner/Spinner.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 
 export type SpinnerAppearance = 'primary' | 'secondary' | 'white';
-export type SpinnerSize = 'small' | 'medium' | 'large';
+export type SpinnerSize = 'xsmall' | 'small' | 'medium' | 'large';
 
 export interface SpinnerProps extends BaseProps {
   /**
@@ -30,6 +30,7 @@ export const Spinner = (props: SpinnerProps) => {
     },
     className
   );
+
   const circleClasses = classNames({
     Circle: true,
     [`Circle--${appearance}`]: appearance,
@@ -38,13 +39,21 @@ export const Spinner = (props: SpinnerProps) => {
   const svgProps = {
     viewBox: '0 0 50 50',
   };
+
+  const strokeWidthMapping = {
+    xsmall: 8,
+    small: 6,
+    medium: 4,
+    large: 4,
+  };
+
   const circleProps = {
     cx: 25,
     cy: 25,
     r: 20,
     fill: 'none',
     strokeMiterlimit: '10',
-    strokeWidth: '4',
+    strokeWidth: strokeWidthMapping[size],
   };
 
   return (

diff --git a/core/components/atoms/spinner/__stories__/Size.story.jsx b/core/components/atoms/spinner/__stories__/Size.story.jsx
@@ -3,7 +3,7 @@ import { Spinner, Text } from '@/index';
 
 // CSF format story
 export const size = () => {
-  const sizes = ['small', 'medium', 'large'];
+  const sizes = ['xsmall', 'small', 'medium', 'large'];
   return (
     <div className="d-flex">
       {sizes.map((SpinnerSize, ind) => {

diff --git a/core/components/atoms/spinner/__tests__/Spinner.test.tsx b/core/components/atoms/spinner/__tests__/Spinner.test.tsx
@@ -4,7 +4,7 @@ import Spinner, { SpinnerProps as Props } from '../Spinner';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
 
 const appearance = ['primary', 'secondary', 'white'];
-const size = ['small', 'medium', 'large'];
+const size = ['xsmall', 'small', 'medium', 'large'];
 
 describe('Spinner component', () => {
   const mapper = {

diff --git a/core/components/atoms/spinner/__tests__/__snapshots__/Spinner.test.tsx.snap b/core/components/atoms/spinner/__tests__/__snapshots__/Spinner.test.tsx.snap
@@ -131,7 +131,30 @@ exports[`Spinner component
         fill="none"
         r="20"
         stroke-miterlimit="10"
-        stroke-width="4"
+        stroke-width="6"
+      />
+    </svg>
+  </div>
+</body>
+`;
+
+exports[`Spinner component 
+  size: "xsmall"
+ 1`] = `
+<body>
+  <div>
+    <svg
+      class="Spinner Spinner--xsmall"
+      viewBox="0 0 50 50"
+    >
+      <circle
+        class="Circle Circle--primary"
+        cx="25"
+        cy="25"
+        fill="none"
+        r="20"
+        stroke-miterlimit="10"
+        stroke-width="8"
       />
     </svg>
   </div>

diff --git a/css/src/components/button.css b/css/src/components/button.css
@@ -227,16 +227,6 @@
   z-index: 1;
 }
 
-.Button--tiny .Spinner--small {
-  height: var(--font-size-s);
-  width: var(--font-size-s);
-}
-
-.Button--large .Spinner--small {
-  height: var(--font-size-l);
-  width: var(--font-size-l);
-}
-
 .Button--selected {
   background: var(--primary-lightest);
   color: var(--primary-dark);

diff --git a/css/src/components/spinner.css b/css/src/components/spinner.css
@@ -26,6 +26,11 @@
   animation: rotate 2s linear infinite;
 }
 
+.Spinner--xsmall {
+  height: var(--spacing-l);
+  width: var(--spacing-l);
+}
+
 .Spinner--small {
   height: var(--spacing-2);
   width: var(--spacing-2);