Page MenuHomePhabricator

Update disabled state for buttons
Closed, InvalidPublic

Description

Update the buttons styling to reflect the new spec-

Details

Reference
bz71209

Event Timeline

bzimport raised the priority of this task from to Needs Triage.Nov 22 2014, 3:51 AM
bzimport set Reference to bz71209.

I want to discuss a few things before implementing this-

  1. Buttons right now don't have borders on the side so that the bevel that shows up on hover reaches till the corners - I00f905690e2934e972cc4ffc26631ead7c2d7567. The width of the disabled buttons will change if we don't add the borders on the side.
  1. We can't use the 'lighten' mixin that sass provides for these colors. They'll have to be defined in variables.less. We will also have to move the declaration of the disabled pseudo class from /src/mediawiki.less/mediawiki.ui/mixins.less to /src/mediawiki.ui/components/buttons.less and define it for each button (constructive, progressive…) separately.

If we are fine with these two points I can get a patch ready.

If a buttons goes from enabled to disabled and is in the toolbar it'll make everything shift. This will happen with the "Add Topic" button in Flow.

Disabled buttons #EEE

Attached:

With the previous mock up, I wanted to keep the same uninviting look as the Neutral disabled on other colored buttons, but it seems like keeping the solid background on disabled is less busy and the change from disabled to active more drastic.

Instead of all outlined disabled button, it will be all solid disabled buttons regardless of neutral of progressive.

I'd like us to be very purposeful with color, in a mostly monochrome, color is a powerful tool for drawing the users attention, I think with colorful (even slightly less so) disabled elements we really muddle the glanceability of where should i focus my attention, and what is my next step, so +1

(In reply to Prateek Saxena from comment #1)

  1. We can't use the 'lighten' mixin that sass provides for these colors.

How come? lessphp provides it too, and we're using it in anchors.less (https://git.wikimedia.org/blob/mediawiki%2Fcore.git/2daac5f36a4de903c5e6978711ffb9fe696458f1/resources%2Fsrc%2Fmediawiki.ui%2Fcomponents%2Fanchors.less#L16).

(In reply to Matthew Flaschen from comment #7)

How come? lessphp provides it too, and we're using it in anchors.less

I tried using it but it wasn't producing the light color according to May. It makes it look neon.

We tried to generate lighter colors mathematically but there wasn't a reliable way to generate something that we can appropriately use. Like Prateek mentioned, it appeared too neon if we tweaked the HSB value. Some color values are already maxed out on HSB value and wasn't possible to plus or minus from the HSB.

Still finding a way to make this better. For now, we're relying on actual values for most of them.

(In reply to May from comment #9)

We tried to generate lighter colors mathematically but there wasn't a
reliable way to generate something that we can appropriately use. Like
Prateek mentioned, it appeared too neon if we tweaked the HSB value. Some
color values are already maxed out on HSB value and wasn't possible to plus
or minus from the HSB.
Still finding a way to make this better. For now, we're relying on actual
values for most of them.

Thanks, I appreciate the information.

May, the new spec just has a gray background for all disabled states, right?

(In reply to Prateek Saxena from comment #11)

May, the new spec just has a gray background for all disabled states, right?

Yep, all buttons look the same on disabled state.

Prtksxna triaged this task as Normal priority.Dec 3 2014, 10:45 AM
Prtksxna updated the task description. (Show Details)
Prtksxna set Security to None.

Change 183193 had a related patch set uploaded (by Prtksxna):
mw.ui: button: Update the disabled button state

https://gerrit.wikimedia.org/r/183193

Patch-For-Review

Prtksxna added a comment.EditedJan 7 2015, 2:06 AM

@violetto I don't want to add another set of colors for this. I tried to do it using the lighten method instead. Are these colors acceptable? The green is the worst.

Prtksxna moved this task from Unsorted to Doing… on the UI-Standardization board.Jan 7 2015, 3:53 AM
Prtksxna closed this task as Invalid.Jan 8 2015, 11:16 PM

Change 183193 abandoned by Prtksxna:
mw.ui: button: Update the disabled button state

https://gerrit.wikimedia.org/r/183193

(This spec is out of date)

Danny_B moved this task from Doing… to Unsorted on the UI-Standardization board.May 20 2016, 9:03 PM