fix(plasma-core): add default uniqId for Spinner

salute-developers · Apr 25, 2023 · ff10511 · ff10511
1 parent e240bd9
commit ff10511
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/...nner/SpinnerBase.component-test.tsx/plasma-core Spinner -- many colors.snap.png b/...nner/SpinnerBase.component-test.tsx/plasma-core Spinner -- many colors.snap.png
diff --git a/packages/plasma-core/src/components/Spinner/Spinner.component-test.tsx b/packages/plasma-core/src/components/Spinner/Spinner.component-test.tsx
@@ -54,4 +54,17 @@ describe('plasma-core: Spinner', () => {
         );
         cy.matchImageSnapshot();
     });
+
+    it('many colors', () => {
+        mount(
+            <CypressTestDecorator>
+                <Spin size={32} color="green" />
+                <PadMe />
+                <Spin size={32} color="blue" />
+                <PadMe />
+                <Spin size={32} color="red" />
+            </CypressTestDecorator>,
+        );
+        cy.matchImageSnapshot();
+    });
 });
diff --git a/packages/plasma-core/src/components/Spinner/Spinner.tsx b/packages/plasma-core/src/components/Spinner/Spinner.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import styled, { keyframes, css } from 'styled-components';
 
 import { accent } from '../../tokens';
+import { useUniqId } from '../../hooks';
 
 import { SpinnerSvg } from './SpinnerSvg';
 
@@ -48,11 +49,13 @@ const sizeFormatting = (size: number | string, deviceScale = 1): string => {
  */
 export const Spinner: React.FC<SpinnerProps> = (props) => {
     const { id, size = 56, color = accent, deviceScale, ...rest } = props;
+    const uniqId = useUniqId();
+    const innerId = id || uniqId;
     const currentSize = sizeFormatting(size, deviceScale);
 
     return (
-        <StyledRoot id={id} $size={currentSize} {...rest}>
-            <SpinnerSvg id={id} width={size} height={size} color={color} />
+        <StyledRoot id={innerId} $size={currentSize} {...rest}>
+            <SpinnerSvg id={innerId} width={size} height={size} color={color} />
         </StyledRoot>
     );
 };