Skip to content

Commit

Permalink
fix(Toast): Fixed loading ring alignment when zooming in Safari. (#1503)
Browse files Browse the repository at this point in the history
Co-authored-by: Nikita Orliak <[email protected]>
  • Loading branch information
nikitaorliak-cengage and Nikita Orliak authored Oct 21, 2024
1 parent 6aed7bc commit e447c8a
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 3 deletions.
5 changes: 5 additions & 0 deletions .changeset/fix-toast-loading-ring-misaligned.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'react-magma-dom': patch
---

fix(Toast): Fixed loading ring alignment when zooming in Safari.
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ export interface ProgressRingProps

const Circle = styled.circle`
transition: stroke-dashoffset 0.35s;
`;

const Svg = styled.svg`
transform: rotate(-90deg);
transform-origin: 50% 50%;
`;
Expand Down Expand Up @@ -64,7 +67,7 @@ export const ProgressRing = React.forwardRef<HTMLDivElement, ProgressRingProps>(

return (
<div {...other} ref={ref} data-testid={testId}>
<svg height={radius * 2} width={radius * 2}>
<Svg height={radius * 2} width={radius * 2}>
<Circle
cx={radius}
cy={radius}
Expand All @@ -73,9 +76,9 @@ export const ProgressRing = React.forwardRef<HTMLDivElement, ProgressRingProps>(
stroke={color ? color : theme.colors.neutral}
strokeWidth={strokeWidth}
strokeDasharray={`${circumference} ${circumference}`}
style={{ strokeDashoffset }}
strokeDashoffset={strokeDashoffset}
/>
</svg>
</Svg>
</div>
);
}
Expand Down

2 comments on commit e447c8a

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.