Page MenuHomePhabricator

UI consistency issues of Variation C
Closed, ResolvedPublic


  • As of current, the active topic elements are signified by Accent50, but all our selected button-like elements are Accent10

image.png (320×503 px, 36 KB)

  • All interactive elements besides radios and toggle switches have border-radius: 0.25em assigned, should have 2px
  • transitions on buttons and radios are unified in our interfaces, here they are distinct? Was that a design requirement?

Event Timeline

Change 481149 had a related patch set uploaded (by Sbisson; owner: Sbisson):
[mediawiki/extensions/GrowthExperiments@master] Welcome survey C: fix toggles style

SBisson moved this task from Incoming to Code Review on the Growth-Team (Current Sprint) board.

@Volker_E Please take a look at the patch above

hi @Volker - re: the last item you added about the different transition in the task description after @SBisson's patch - we can use the standard transition

Change 481149 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Welcome survey C: fix toggles style

Etonkovidova added a subscriber: Etonkovidova.

@RHo - two things:
(1) Accent10 and Accent50 - it's ok to have them both on the same form? Accent50 for buttons (indicating clickability) and Accent10 for selected options.

IMG_6670.PNG (1×640 px, 89 KB)
IMG_6672.PNG (1×640 px, 77 KB)
IMG_6671.PNG (1×640 px, 70 KB)

(2) Checked UI for mobile, Safari, and IE11, FF - all looks fine. But the checkboxes are visible in Chrome (the screenshot is a gif - click on it for animation) :
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

Chrome-checkboxes.gif (569×1 px, 137 KB)

Thanks @Etonkovidova for the screenshots.
Answering (1): That's our current standard interaction pattern, Accent10 for actively clicked/selected/toggled interaction elements, Accent50 for primary, progressive buttons.

Thanks @Etonkovidova - I think it is acceptable to have the visible checkboxes on Chrome, and per @Volker_E 's the "selected button" using Accent10 is expected (an oversight on my part earlier). LGTM to sign-off.

Volker_E removed a project: Patch-For-Review.
Volker_E updated the task description. (Show Details)
Volker_E removed a subscriber: gerritbot.