Merge pull request #6710 from Sage/FE-6539

fix(loader-spinner): allow components label to extend longer than the svg wrapper
Sage · May 9, 2024 · a2adccc · a2adccc
2 parents 8b4ae5c + 15c1b34
commit a2adccc
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 39 deletions.
diff --git a/src/components/loader-spinner/loader-spinner-test.stories.tsx b/src/components/loader-spinner/loader-spinner-test.stories.tsx
@@ -57,7 +57,7 @@ export default {
 };
 
 export const Default = (props: Partial<LoaderSpinnerProps>) => (
-  <Box p={3} backgroundColor="darkgrey" width="200px" height="200px">
+  <Box p={3} backgroundColor="darkgrey" width="100%" height="200px">
     <LoaderSpinner {...props} />
   </Box>
 );

diff --git a/src/components/loader-spinner/loader-spinner.config.ts b/src/components/loader-spinner/loader-spinner.config.ts
@@ -23,15 +23,20 @@ type LoaderSpinnerSizeParams = Record<
   {
     wrapperDimensions: number;
     strokeWidth: number;
+    labelMarginTop?: number;
   }
 >;
 
 const LOADER_SPINNER_SIZE_PARAMS: LoaderSpinnerSizeParams = {
   "extra-small": { wrapperDimensions: 20, strokeWidth: 4 },
-  small: { wrapperDimensions: 32, strokeWidth: 4 },
-  medium: { wrapperDimensions: 56, strokeWidth: 3.3 },
-  large: { wrapperDimensions: 80, strokeWidth: 3.7 },
-  "extra-large": { wrapperDimensions: 104, strokeWidth: 3.7 },
+  small: { wrapperDimensions: 32, strokeWidth: 4, labelMarginTop: 12 },
+  medium: { wrapperDimensions: 56, strokeWidth: 3.3, labelMarginTop: 16 },
+  large: { wrapperDimensions: 80, strokeWidth: 3.7, labelMarginTop: 22 },
+  "extra-large": {
+    wrapperDimensions: 104,
+    strokeWidth: 3.7,
+    labelMarginTop: 26,
+  },
 };
 
 export type { LoaderSpinnerSizes, LoaderSpinnerVariants };

diff --git a/src/components/loader-spinner/loader-spinner.mdx b/src/components/loader-spinner/loader-spinner.mdx
@@ -33,7 +33,7 @@ Can be used to demonstrate a known or unknown wait time.
 Import `LoaderSpinner` into the project.
 
 ```javascript
-import LoaderSpinner from "carbon-react/lib/components/loader-spinner";
+import { LoaderSpinner } from "carbon-react/lib/components/loader-spinner";
 ```
 
 ## Examples

diff --git a/src/components/loader-spinner/loader-spinner.pw.tsx b/src/components/loader-spinner/loader-spinner.pw.tsx
@@ -63,7 +63,7 @@ test.describe("Prop checks for Loader Spinner component", () => {
   );
 
   sizes.forEach((spinnerSizes) => {
-    test(`when the 'size' prop is passed as '${spinnerSizes}' the svg circle wrapper has the correct dimensions`, async ({
+    test(`when the 'size' prop is passed as '${spinnerSizes}' the svg circle wrapper has the correct height`, async ({
       mount,
       page,
     }) => {
@@ -73,15 +73,11 @@ test.describe("Prop checks for Loader Spinner component", () => {
         "height",
         `${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].wrapperDimensions}px`
       );
-      await expect(loaderSpinnerSvg(page)).toHaveCSS(
-        "width",
-        `${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].wrapperDimensions}px`
-      );
     });
   });
 
   sizes.forEach((spinnerSizes) => {
-    test(`when the 'size' prop is passed as '${spinnerSizes}' the svg circle wrapper has the correct minimum dimensions`, async ({
+    test(`when the 'size' prop is passed as '${spinnerSizes}' the svg circle wrapper has the correct minimum height`, async ({
       mount,
       page,
     }) => {
@@ -91,10 +87,6 @@ test.describe("Prop checks for Loader Spinner component", () => {
         "min-height",
         `${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].wrapperDimensions}px`
       );
-      await expect(loaderSpinnerSvg(page)).toHaveCSS(
-        "min-width",
-        `${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].wrapperDimensions}px`
-      );
     });
   });
 
@@ -140,15 +132,15 @@ test.describe("Prop checks for Loader Spinner component", () => {
 
   (["small", "medium", "large", "extra-large"] as const).forEach(
     (spinnerSizes) => {
-      test(`when the 'size' prop is passed as '${spinnerSizes}' the label has the correct width`, async ({
+      test(`when the 'size' prop is passed as '${spinnerSizes}' the label has the correct margin-top`, async ({
         mount,
         page,
       }) => {
         await mount(<LoaderSpinnerComponent size={spinnerSizes} />);
 
         await expect(loaderSpinnerVisibleLabel(page)).toHaveCSS(
-          "width",
-          `${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].wrapperDimensions}px`
+          "margin-top",
+          `${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].labelMarginTop}px`
         );
       });
     }

diff --git a/src/components/loader-spinner/loader-spinner.spec.tsx b/src/components/loader-spinner/loader-spinner.spec.tsx
@@ -100,29 +100,23 @@ describe("LoaderSpinner", () => {
     );
 
     it.each(sizes)(
-      "when the 'size' prop is passed as `%s` the svg circle wrapper has the correct dimensions",
+      "when the 'size' prop is passed as `%s` the svg circle wrapper has the correct height",
       (spinnerSizes) => {
         render(<LoaderSpinner size={spinnerSizes} />);
         const svgCircleElement = screen.getByRole("presentation");
 
-        expect(svgCircleElement).toHaveStyle(
-          `width: ${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].wrapperDimensions}px`
-        );
         expect(svgCircleElement).toHaveStyle(
           `height: ${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].wrapperDimensions}px`
         );
       }
     );
 
     it.each(sizes)(
-      "when the 'size' prop is passed as `%s` the svg circle wrapper has the correct minimum dimensions",
+      "when the 'size' prop is passed as `%s` the svg circle wrapper has the correct minimum height",
       (spinnerSizes) => {
         render(<LoaderSpinner size={spinnerSizes} />);
         const svgCircleElement = screen.getByRole("presentation");
 
-        expect(svgCircleElement).toHaveStyle(
-          `min-width: ${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].wrapperDimensions}px`
-        );
         expect(svgCircleElement).toHaveStyle(
           `min-height: ${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].wrapperDimensions}px`
         );
@@ -168,14 +162,14 @@ describe("LoaderSpinner", () => {
       "large",
       "extra-large",
     ] as LoaderSpinnerSizes[])(
-      "when the 'size' prop is passed as `%s` the label has the correct width",
+      "when the 'size' prop is passed as `%s` the label has the correct margin-top",
       (spinnerSizes) => {
         render(<LoaderSpinner size={spinnerSizes} />);
         const visibleLabelElement = screen.getByTestId("visible-label");
 
-        expect(visibleLabelElement).toHaveStyle(
-          `width: ${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].wrapperDimensions}px`
-        );
+        expect(visibleLabelElement).toHaveStyle({
+          marginTop: `${LOADER_SPINNER_SIZE_PARAMS[spinnerSizes].labelMarginTop}px`,
+        });
       }
     );
 

diff --git a/src/components/loader-spinner/loader-spinner.stories.tsx b/src/components/loader-spinner/loader-spinner.stories.tsx
@@ -22,13 +22,22 @@ const meta: Meta<typeof LoaderSpinner> = {
 export default meta;
 type Story = StoryObj<typeof LoaderSpinner>;
 
-export const Default: Story = () => <LoaderSpinner />;
+export const Default: Story = () => (
+  <Box display="flex">
+    <LoaderSpinner />
+  </Box>
+);
 Default.storyName = "Default";
 
 export const OverrideSpinnerLabel: Story = () => (
   <Box display="flex">
     <LoaderSpinner mx="3" spinnerLabel="Processing..." variant="action" />
     <LoaderSpinner mx="3" spinnerLabel="Saving..." variant="neutral" />
+    <LoaderSpinner
+      mx="3"
+      spinnerLabel="Loading... This can take a few seconds... Or a few minutes..."
+      variant="action"
+    />
   </Box>
 );
 OverrideSpinnerLabel.storyName = "Override Spinner Label";
@@ -45,7 +54,9 @@ export const Sizes: Story = () => {
 Sizes.storyName = "Sizes";
 
 export const ShowSpinnerLabel: Story = () => (
-  <LoaderSpinner showSpinnerLabel={false} />
+  <Box display="flex">
+    <LoaderSpinner showSpinnerLabel={false} />
+  </Box>
 );
 ShowSpinnerLabel.storyName = "Show Spinner Label";
 
@@ -82,7 +93,11 @@ export const HasMotion: Story = () => (
 );
 HasMotion.storyName = "Has Motion";
 
-export const IsTracked: Story = () => <LoaderSpinner isTracked />;
+export const IsTracked: Story = () => (
+  <Box display="flex">
+    <LoaderSpinner isTracked />
+  </Box>
+);
 IsTracked.storyName = "Is Tracked";
 
 export const AnimationTime: Story = () => (

diff --git a/src/components/loader-spinner/loader-spinner.style.ts b/src/components/loader-spinner/loader-spinner.style.ts
@@ -38,9 +38,10 @@ export const StyledLabel = styled(Typography)<
     css`
       display: flex;
       justify-content: center;
-      ${size !== "extra-small" &&
-      `width: ${LOADER_SPINNER_SIZE_PARAMS[size].wrapperDimensions}px`};
-      ${size === "extra-small" && `margin-left: var(--spacing100)`};
+      text-align: center;
+      ${size === "extra-small"
+        ? "margin-left: var(--spacing100)"
+        : `margin-top: ${LOADER_SPINNER_SIZE_PARAMS[size].labelMarginTop}px`};
     `}
 `;
 
@@ -64,9 +65,7 @@ export const StyledSpinnerCircleSvg = styled.svg<StyledSpinnerCircleSvgProps>`
     return (
       size &&
       css`
-        width: ${dimensions};
         height: ${dimensions};
-        min-width: ${dimensions};
         min-height: ${dimensions};
 
         circle[data-role="outer-arc"] {