Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Spinner colors #2309

Merged
merged 2 commits into from
Jul 16, 2024
Merged

fix: Spinner colors #2309

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8c2c9be
fix: Spinner colors
chaitanyadeorukhkar Jul 15, 2024
747c86a
Create grumpy-keys-listen.md
chaitanyadeorukhkar Jul 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/grumpy-keys-listen.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@razorpay/blade": patch
---

fix: Spinner colors
6 changes: 3 additions & 3 deletions packages/blade/src/components/Spinner/BaseSpinner/BaseSpinner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,10 @@ const getColor = ({ color, theme }: { color: BaseSpinnerProps['color']; theme: T
if (color && color === 'white') {
return getIn(theme.colors, 'interactive.icon.staticWhite.subtle');
}
if (color && color !== 'primary') {
return getIn(theme.colors, `feedback.background.${color}.intense`);
if (color && color !== 'neutral') {
return getIn(theme.colors, `interactive.icon.${color}.subtle`);
}
return getIn(theme.colors, 'surface.background.primary.intense');
return getIn(theme.colors, 'interactive.icon.gray.subtle');
};
Comment on lines 52 to 58
Copy link
Member

Choose a reason for hiding this comment

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

Spinner should have surface.icon* colors no? since its not interactive element 🤔

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Good point... on figma its using interactive though

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Asking design


const BaseSpinner = ({
Expand Down
48 changes: 24 additions & 24 deletions ...c/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.native.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions .../src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.ssr.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label 1`] = `"<div id="root"><div data-blade-component="spinner" class="BaseBox-bmPWx"><div aria-label="Loading" role="progressbar" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><div data-blade-component="base-box" class="BaseBox-bmPWx SpinningBoxweb__SpinningBox-zswieh-0 jQoaqB"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z" fill="hsla(211, 29%, 26%, 1)" fill-opacity="0.2" data-blade-component="svg-path"></path><path d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z" fill="hsla(211, 29%, 26%, 1)" data-blade-component="svg-path"></path><path d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z" fill="hsla(211, 29%, 26%, 1)" data-blade-component="svg-path"></path></svg></div><div data-blade-component="base-box" class="BaseBox-bmPWx kgcqKG"><p class="StyledBaseText-dVBfTO kAzdjS" data-blade-component="text">Loading</p></div></div></div></div>"`;
exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label 1`] = `"<div id="root"><div data-blade-component="spinner" class="BaseBox-bmPWx"><div aria-label="Loading" role="progressbar" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><div data-blade-component="base-box" class="BaseBox-bmPWx SpinningBoxweb__SpinningBox-zswieh-0 jQoaqB"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z" fill="hsla(211, 26%, 34%, 1)" fill-opacity="0.2" data-blade-component="svg-path"></path><path d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path></svg></div><div data-blade-component="base-box" class="BaseBox-bmPWx kgcqKG"><p class="StyledBaseText-dVBfTO kAzdjS" data-blade-component="text">Loading</p></div></div></div></div>"`;

exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label 2`] = `
.c0.c0.c0.c0.c0 {
Expand Down Expand Up @@ -81,18 +81,18 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label
<path
d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z"
data-blade-component="svg-path"
fill="hsla(211, 29%, 26%, 1)"
fill="hsla(211, 26%, 34%, 1)"
fill-opacity="0.2"
/>
<path
d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
data-blade-component="svg-path"
fill="hsla(211, 29%, 26%, 1)"
fill="hsla(211, 26%, 34%, 1)"
/>
<path
d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
data-blade-component="svg-path"
fill="hsla(211, 29%, 26%, 1)"
fill="hsla(211, 26%, 34%, 1)"
/>
</svg>
</div>
Expand Down
Loading
Loading