From 13e3d0daf352b5fd60a68ddd894340f45d323d2c Mon Sep 17 00:00:00 2001 From: hextion <100ishundred@gmail.com> Date: Wed, 7 Aug 2024 16:04:58 +0300 Subject: [PATCH] refactor(spinner): correct gradient --- .../src/__snapshots__/Component.test.tsx.snap | 264 ++++++------------ .../src/__snapshots__/Component.test.tsx.snap | 132 +++------ .../src/__snapshots__/Component.test.tsx.snap | 132 +++------ packages/spinner/src/Component.tsx | 68 +++-- .../src/__snapshots__/Component.test.tsx.snap | 66 ++--- packages/spinner/src/index.module.css | 11 +- 6 files changed, 240 insertions(+), 433 deletions(-) diff --git a/packages/button/src/__snapshots__/Component.test.tsx.snap b/packages/button/src/__snapshots__/Component.test.tsx.snap index 7f006d1a9e..6b965398c3 100644 --- a/packages/button/src/__snapshots__/Component.test.tsx.snap +++ b/packages/button/src/__snapshots__/Component.test.tsx.snap @@ -312,59 +312,37 @@ Object { > @@ -377,59 +355,37 @@ Object { > , @@ -499,59 +455,37 @@ Object { > @@ -564,59 +498,37 @@ Object { > , diff --git a/packages/confirmation/src/__snapshots__/Component.test.tsx.snap b/packages/confirmation/src/__snapshots__/Component.test.tsx.snap index 3777143e51..0cad763a99 100644 --- a/packages/confirmation/src/__snapshots__/Component.test.tsx.snap +++ b/packages/confirmation/src/__snapshots__/Component.test.tsx.snap @@ -142,59 +142,37 @@ exports[`Confirmation Snapshot tests should match snapshot with CODE_CHECKING st > @@ -371,59 +349,37 @@ Object { > , diff --git a/packages/spinner/src/Component.tsx b/packages/spinner/src/Component.tsx index fdb06c3e8a..7c3e0fe953 100644 --- a/packages/spinner/src/Component.tsx +++ b/packages/spinner/src/Component.tsx @@ -88,7 +88,7 @@ export const SIZE_TO_CLASSNAME_MAP = { }; export const Spinner: FC = ({ - size: sizeProp = 24, + size: sizeFromProps = 24, colors = 'default', visible, id, @@ -96,25 +96,23 @@ export const Spinner: FC = ({ dataTestId, }) => { const uniqId = useId(); - const { size, padding, lineWidth } = CONFIG[sizeProp]; - - const xStart = padding + lineWidth / 2; - const xEnd = size - xStart; - const y = size / 2; - const r = y - xStart; - - const topGradientId = `${uniqId}_top`; - const bottomGradientId = `${uniqId}_bottom`; + const { size, padding, lineWidth } = CONFIG[sizeFromProps]; + const spinnerSize = size - padding * 2; + const spinnerOrigin = spinnerSize / 2 + padding; + const spinnerRadius = spinnerSize / 2 - lineWidth / 2; + const rotationAngle /* deg */ = Math.ceil( + (Math.asin(lineWidth / 2 / spinnerRadius) * 180) / Math.PI, + ); + const gap /* deg */ = 2; return ( = ({ id={id} > - - - - - - - - + + + - - - - - +
- + ); }; diff --git a/packages/spinner/src/__snapshots__/Component.test.tsx.snap b/packages/spinner/src/__snapshots__/Component.test.tsx.snap index a691e1e803..3b0d228448 100644 --- a/packages/spinner/src/__snapshots__/Component.test.tsx.snap +++ b/packages/spinner/src/__snapshots__/Component.test.tsx.snap @@ -4,59 +4,37 @@ exports[`Snapshots tests should display correctly 1`] = `
`; diff --git a/packages/spinner/src/index.module.css b/packages/spinner/src/index.module.css index 2f3788d3d5..e7b94c55f0 100644 --- a/packages/spinner/src/index.module.css +++ b/packages/spinner/src/index.module.css @@ -8,6 +8,7 @@ .spinner { display: none; + transform: rotate(-90deg); animation: spin_animation var(--spinner-animation-duration) infinite var(--spinner-animation-timing-function); } @@ -34,10 +35,16 @@ @keyframes spin_animation { from { - transform: rotate(0); + transform: rotate(-90deg); } to { - transform: rotate(360deg); + transform: rotate(270deg); } } + +.gradient { + width: 100%; + height: 100%; + background-image: conic-gradient(transparent, currentColor); +}