diff --git a/packages/react/src/components/Spinner/Spinner.stories.tsx b/packages/react/src/components/Spinner/Spinner.stories.tsx index 9081990ab..431ff4d67 100644 --- a/packages/react/src/components/Spinner/Spinner.stories.tsx +++ b/packages/react/src/components/Spinner/Spinner.stories.tsx @@ -33,7 +33,7 @@ export const Demo: Story = {
{ /** * Size of the spinner component. - * @default 40 + * @default 32 **/ size?: number; diff --git a/packages/react/src/components/Spinner/Spinner.utils.ts b/packages/react/src/components/Spinner/Spinner.utils.ts index 3577ff2ac..4b6cdb824 100644 --- a/packages/react/src/components/Spinner/Spinner.utils.ts +++ b/packages/react/src/components/Spinner/Spinner.utils.ts @@ -22,20 +22,21 @@ export const rotateKeyframe = keyframes` } `; -export const strokeArrayKeyframe = keyframes` - 0% { - stroke-dasharray: 1px, 200px; - stroke-dashoffset: 0; - } - 50% { - stroke-dasharray: 100px, 200px; - stroke-dashoffset: -15px; - } - 100% { - stroke-dasharray: 100px, 200px; - stroke-dashoffset: -110px; - } -`; +// TODO: maybe remove +// export const strokeArrayKeyframe = keyframes` +// 0% { +// stroke-dasharray: 1px, 200px; +// stroke-dashoffset: 0; +// } +// 50% { +// stroke-dasharray: 100px, 200px; +// stroke-dashoffset: -15px; +// } +// 100% { +// stroke-dasharray: 100px, 200px; +// stroke-dashoffset: -110px; +// } +// `; export const generateStyleColorVariants = (theme: Theme) => [ { diff --git a/packages/react/src/components/Spinner/SpinnerDashRing/SpinnerDashRing.tsx b/packages/react/src/components/Spinner/SpinnerDashRing/SpinnerDashRing.tsx index b11cf2212..57a54cbaa 100644 --- a/packages/react/src/components/Spinner/SpinnerDashRing/SpinnerDashRing.tsx +++ b/packages/react/src/components/Spinner/SpinnerDashRing/SpinnerDashRing.tsx @@ -1,3 +1,5 @@ +import { useMemo } from 'react'; + import { SpinnerDashRingProps } from './SpinnerDashRing.types'; import clsx from 'clsx'; @@ -7,7 +9,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/base'; import { styled, useThemeProps } from '@mui/material/styles'; -import { generateStyleColorVariants, rotateKeyframe, strokeArrayKeyframe } from '../Spinner.utils'; +import { generateStyleColorVariants, rotateKeyframe } from '../Spinner.utils'; type SpinnerDashRingOwnerState = { classes?: SpinnerDashRingProps['classes']; @@ -35,13 +37,20 @@ const SpinnerDashRingRoot = styled('svg', { }, })<{ ownerState: SpinnerDashRingOwnerState }>(({ theme }) => ({ variants: generateStyleColorVariants(theme), + animation: `${rotateKeyframe} 1400ms linear infinite`, - '& > circle': { - stroke: 'currentColor', + '& > g > g foreignObject': { + height: '2679.16px', + width: '2679.16px', + x: '-1339.58px', + y: '-1339.58px', - '&:nth-of-type(2)': { - animation: `${strokeArrayKeyframe} 1400ms ease-in-out infinite, ${rotateKeyframe} 1400ms linear infinite`, - transformOrigin: 'center', + '& > div': { + width: '100%', + height: '100%', + background: `conic-gradient(from 90deg,rgba(109, 47, 255, 0) 0deg,rgba(109, 47, 255, 0) 48.7883deg, + rgba(109, 47, 255, 0) 60.3659deg, currentColor 240.373deg,rgba(109, 47, 255, 0) 240.411deg, + rgba(109, 47, 255, 0) 360deg)`, }, }, })); @@ -50,7 +59,7 @@ export const SpinnerDashRing = (inProps: SpinnerDashRingProps) => { const { className, sx, - size = 40, + size = 32, color = 'primary', ...props } = useThemeProps({ @@ -58,6 +67,7 @@ export const SpinnerDashRing = (inProps: SpinnerDashRingProps) => { name: 'ESSpinnerDashRing', }); + const id = useMemo(() => `SpinnerDashRing-${SpinnerDashRing.count++}`, []); const ownerState = { ...props, color }; const classes = useUtilityClasses(ownerState); @@ -68,11 +78,28 @@ export const SpinnerDashRing = (inProps: SpinnerDashRingProps) => { height={size} ownerState={ownerState} sx={sx} - viewBox="0 0 40 40" + viewBox="0 0 32 32" width={size} > - - + + + + + +
+ + + + + + + ); }; + +SpinnerDashRing.count = 0; diff --git a/packages/react/src/components/Spinner/SpinnerFadingBars/SpinnerFadingBars.tsx b/packages/react/src/components/Spinner/SpinnerFadingBars/SpinnerFadingBars.tsx index 3c878e61a..fcdcc3815 100644 --- a/packages/react/src/components/Spinner/SpinnerFadingBars/SpinnerFadingBars.tsx +++ b/packages/react/src/components/Spinner/SpinnerFadingBars/SpinnerFadingBars.tsx @@ -36,10 +36,8 @@ const SpinnerFadingBarsRoot = styled('svg', { })<{ ownerState: SpinnerFadingBarsOwnerState }>(({ theme }) => ({ variants: generateStyleColorVariants(theme), - '& > rect': { + '& > path': { fill: 'currentColor', - height: '10px', - width: '4px', animation: `${opacityKeyframe} 1000ms linear infinite`, ...generateDelayedOpacityAnimationStyles(), @@ -50,7 +48,7 @@ export const SpinnerFadingBars = (inProps: SpinnerFadingBarsProps) => { const { className, sx, - size = 40, + size = 32, color = 'primary', ...props } = useThemeProps({ @@ -69,17 +67,17 @@ export const SpinnerFadingBars = (inProps: SpinnerFadingBarsProps) => { height={size} ownerState={ownerState} sx={sx} - viewBox="0 0 40 40" + viewBox="0 0 32 32" width={size} > - - - - - - - - + + + + + + + + ); }; diff --git a/packages/react/src/components/Spinner/SpinnerFadingDots/SpinnerFadingDots.tsx b/packages/react/src/components/Spinner/SpinnerFadingDots/SpinnerFadingDots.tsx index d7de42536..35090443d 100644 --- a/packages/react/src/components/Spinner/SpinnerFadingDots/SpinnerFadingDots.tsx +++ b/packages/react/src/components/Spinner/SpinnerFadingDots/SpinnerFadingDots.tsx @@ -50,7 +50,7 @@ export const SpinnerFadingDots = (inProps: SpinnerFadingDotsProps) => { const { className, sx, - size = 40, + size = 32, color = 'primary', ...props } = useThemeProps({ @@ -68,17 +68,17 @@ export const SpinnerFadingDots = (inProps: SpinnerFadingDotsProps) => { height={size} ownerState={ownerState} sx={sx} - viewBox="0 0 40 40" + viewBox="0 0 32 32" width={size} > - - - - - - - - + + + + + + + + ); }; diff --git a/packages/react/src/components/Spinner/SpinnerFadingDoubleRing/SpinnerFadingDoubleRing.tsx b/packages/react/src/components/Spinner/SpinnerFadingDoubleRing/SpinnerFadingDoubleRing.tsx index 852c66085..b7e735622 100644 --- a/packages/react/src/components/Spinner/SpinnerFadingDoubleRing/SpinnerFadingDoubleRing.tsx +++ b/packages/react/src/components/Spinner/SpinnerFadingDoubleRing/SpinnerFadingDoubleRing.tsx @@ -38,21 +38,20 @@ const SpinnerFadingDoubleRingSpinnerRoot = styled('svg', { }, })<{ ownerState: SpinnerFadingDoubleRingPropsOwnerState }>(({ theme }) => ({ variants: generateStyleColorVariants(theme), - - transformOrigin: 'center', animation: `${rotateKeyframe} 1000ms linear infinite`, - '& > foreignObject': { + '& > g > g foreignObject': { + height: '2679.16px', + width: '2679.16px', + x: '-1339.58px', + y: '-1339.58px', + '& > div': { width: '100%', height: '100%', - }, - - '&:nth-of-type(1) > div': { - background: `conic-gradient(from 179deg, rgba(255, 255, 255, 0) 69%, currentColor 100%)`, - }, - '&:nth-of-type(2) > div': { - background: `conic-gradient(from 359deg, rgba(255, 255, 255, 0) 69%, currentColor 100%)`, + opacity: 1, + background: `conic-gradient(from 90deg, currentColor 0deg,rgba(109, 47, 255, 0) 90.5269deg, + currentColor 209.099deg, currentColor 360deg)`, }, }, })); @@ -61,7 +60,7 @@ export const SpinnerFadingDoubleRing = (inProps: SpinnerFadingDoubleRingProps) = const { className, sx, - size = 40, + size = 32, color = 'primary', ...props } = useThemeProps({ @@ -80,21 +79,32 @@ export const SpinnerFadingDoubleRing = (inProps: SpinnerFadingDoubleRingProps) = height={size} ownerState={ownerState} sx={sx} - viewBox="0 0 40 40" + viewBox="0 0 32 32" width={size} > - + + - + - -
- - -
- + + + + +
+ + + + + + + +
+ + + ); }; diff --git a/packages/react/src/components/Spinner/SpinnerFadingRing/SpinnerFadingRing.tsx b/packages/react/src/components/Spinner/SpinnerFadingRing/SpinnerFadingRing.tsx index 1463e6b69..dfe37b75f 100644 --- a/packages/react/src/components/Spinner/SpinnerFadingRing/SpinnerFadingRing.tsx +++ b/packages/react/src/components/Spinner/SpinnerFadingRing/SpinnerFadingRing.tsx @@ -45,7 +45,7 @@ const SpinnerFadingRingRoot = styled('svg', { '& > foreignObject > div': { width: '100%', height: '100%', - background: `conic-gradient(from 187deg, rgba(255, 255, 255, 0) 17%, currentColor 100%)`, + background: `conic-gradient(from 190deg, rgba(255, 255, 255, 0) 17%, currentColor 100%)`, }, })); @@ -53,7 +53,7 @@ export const SpinnerFadingRing = (inProps: SpinnerFadingRingProps) => { const { className, sx, - size = 40, + size = 32, color = 'primary', ...props } = useThemeProps({ @@ -72,17 +72,17 @@ export const SpinnerFadingRing = (inProps: SpinnerFadingRingProps) => { height={size} ownerState={ownerState} sx={sx} - viewBox="0 0 40 40" + viewBox="0 0 32 32" width={size} > - +
diff --git a/packages/react/src/components/Spinner/SpinnerRing/SpinnerRing.tsx b/packages/react/src/components/Spinner/SpinnerRing/SpinnerRing.tsx index 17bbc5b17..8822de56c 100644 --- a/packages/react/src/components/Spinner/SpinnerRing/SpinnerRing.tsx +++ b/packages/react/src/components/Spinner/SpinnerRing/SpinnerRing.tsx @@ -50,7 +50,7 @@ export const SpinnerRing = (inProps: SpinnerRingProps) => { const { className, sx, - size = 40, + size = 32, color = 'primary', ...props } = useThemeProps({ @@ -68,11 +68,11 @@ export const SpinnerRing = (inProps: SpinnerRingProps) => { height={size} ownerState={ownerState} sx={sx} - viewBox="0 0 40 40" + viewBox="0 0 32 32" width={size} > - - + + ); };