Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
[Enhancement] Making the focus state of button text in Button block more visible #15058
This PR tries to close #15051 which reports the focus style of the button text within the button block not being clear.
The placeholder on this text input is essentially an overlay. It has a reduced opacity set so that the cursor shows up. But naturally, it barely does. This PR just reduces the opacity further only when the input is focused so that the cursor, i.e. the focus state, is more visible.
I don't think it is the most ideal approach to this, but at least it's a start. I'd request some feedback and suggestions on how we could improve it. Thanks
How has this been tested?
This PR has been tested by going through the following steps:
Types of changes
This PR just simply reduces the opacity of the placeholder on
Thank you, @nfmohit-wpmudev! This is a definite improvement. The previous layering of these elements is definitely a bug in retrospect.
Upon trying this out, I wonder if we can go a little bit further with two changes before merging this:
Here's what that would work out to:
Thank you for taking this on so quickly.
Thanks, @nfmohit-wpmudev! This is looking excellent. I found one small bug — not sure if we can fix this or not.
It'd be great if we could keep adopt the hidden placeholder text + left-aligned cursor in that case, since the cursor is still active.
Thank you very much for the quick review @kjellr
Sincere apologies if I'm missing something but the cursor doesn't stay active for me when I change the alignment of the button. I think that maybe because the focus state on the button is lost when I click elsewhere. Here's a screencast:
There's one other thing I could do - remove the
Let me know if you like it. We can even try setting a minimum width to the button in this specific scenario so that it doesn't stay shrank like that if you want.
Interesting! This only seems to happen in Safari now that I'm testing more widely. Chrome and Firefox lose focus when I click a new alignment.
kjellr left a comment •
@nfmohit-wpmudev, let's add a border like this so it has a more visible focus state:
Something like this should take care of it:
For now, we'll also need to move the
Once that's in place, this should be good to