fix(TMC-26227): fix design system loading icon on safari browser (#5205)

* fix(TMC-26227): fix design system loading icon on safari browser * fix snapshots
Talend · Feb 26, 2024 · e374251 · e374251
1 parent 22bdfd9
commit e374251
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 2 deletions.
diff --git a/.changeset/orange-fishes-walk.md b/.changeset/orange-fishes-walk.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': patch
+---
+
+TMC-26227 - Fix design system loading icon on safari browser
diff --git a/packages/design-system/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap b/packages/design-system/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
@@ -151,6 +151,7 @@ exports[`Accordion should render a11y html 1`] = `
             class="theme-status__icon"
           >
             <svg
+              style="width: 100%; height: 100%;"
               viewBox="0 0 16 16"
               xmlns="http://www.w3.org/2000/svg"
             >

diff --git a/packages/design-system/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/design-system/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -75,6 +75,7 @@ exports[`Button should render a11y html 1`] = `
         <svg
           aria-hidden="true"
           data-test="button.loading"
+          style="width: 100%; height: 100%;"
           viewBox="0 0 16 16"
           xmlns="http://www.w3.org/2000/svg"
         >

diff --git a/packages/design-system/src/components/Loading/Loading.tsx b/packages/design-system/src/components/Loading/Loading.tsx
@@ -1,9 +1,15 @@
-import { HTMLAttributes, forwardRef } from 'react';
+import { forwardRef, HTMLAttributes } from 'react';
 
 export type LoadingProps = HTMLAttributes<SVGSVGElement>;
 
 export const Loading = forwardRef<SVGSVGElement, LoadingProps>((props, ref) => (
-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" ref={ref} {...props}>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		style={{ width: '100%', height: '100%' }}
+		viewBox="0 0 16 16"
+		ref={ref}
+		{...props}
+	>
 		<g>
 			<path
 				fill="currentColor"

diff --git a/packages/design-system/src/components/Loading/__snapshots__/Loading.test.tsx.snap b/packages/design-system/src/components/Loading/__snapshots__/Loading.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`Loading should render a11y html 1`] = `
 <main>
   <svg
+    style="width: 100%; height: 100%;"
     viewBox="0 0 16 16"
     xmlns="http://www.w3.org/2000/svg"
   >