question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

FIX THE SPINNER COLOR ON BUTTONS

See original GitHub issue

The Problem

Currently, we have an issue with buttons that contain spinners that have non-white backgrounds. Play here.

You’ll want to change the background color of a spinning button in the playground to be something non-white to see the issue.

image

The Fix

./src/Button/Button.tsx should style the <Spinner /> in it to be <Spinner color={readableTextColor(buttonColor)} />.

-<Spinner />
+<Spinner color={readableTextColor(buttonColor)} />

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
TejasQcommented, Aug 6, 2018

I think using currentColor:

a) is unpredictable and breaks opinionation of Operational UI, rendering spinners that magically take the text color of their containers,

b) does not clearly describe intent to color the spinner at the codebase level.

For these reasons, I do not think using currentColor makes sense and recommend explicity setting values in order to avoid surprises going forward, while maintaining the opinionated-nature of Operational.

0reactions
TejasQcommented, Aug 6, 2018

I see your point. I agree. Let’s use currentColor.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to change spinner button color in Android? - Stack Overflow
I'm trying to change the spinner button ...
Read more >
Spinner Color Problem ? - Google Groups
Option 1: Redefine the attributes of the Button class to be the color you want. The downside of this approach is that it...
Read more >
Changing spinbutton colors independantly or creating a ...
One way to do this is to create two images that look just like the spin buttons, then associate each with a macro....
Read more >
::-webkit-inner-spin-button - CSS: Cascading Style Sheets | MDN
The ::-webkit-inner-spin-button CSS pseudo-element is used to style the inner part of the spinner button of number picker input elements. Syntax.
Read more >
hakimel/Ladda: Buttons with built-in loading indicators. - GitHub
Buttons with built-in loading indicators. ... defaults to dynamic size based on the button height; data-spinner-color: a hex code or any named CSS...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found