Page MenuHomePhabricator

Active Combobox, Lookup, Menu and Select components display incorrect bottom border-radius
Closed, ResolvedPublicBUG REPORT

Description

List of steps to reproduce:

  • Navigate to the demo page of the Combobox, Lookup, Menu or Select components
  • Type into the component or open it to make it display its menu

What happens?:

  • Active Combobox: The border-bottom-left-radius is 2px
  • Active Lookup: The border bottom left and right radius are 2px
  • Active Menu input: The border bottom left and right radius are 2px
  • Open Select: The border bottom left and right radius are 2px

What should have happened instead?:

All inputs should display a bottom border-radius of 0px when the menu is displayed.

Software version (if not a Wikimedia wiki), browser information, screenshots, other information, etc.:

Screenshot 2022-04-20 at 15.32.23.png (520×550 px, 23 KB)

Checked on Chrome 100.0/MacOS Monterey
Checked on Safari 15.2/MacOS Monterey

Event Timeline

Sarai-WMDE renamed this task from Active Combobox, Lookup and Select components display incorrect bottom border-radius to Active Combobox, Lookup, Menu and Select components display incorrect bottom border-radius.Apr 20 2022, 1:33 PM
Sarai-WMDE updated the task description. (Show Details)
Sarai-WMDE updated the task description. (Show Details)

aria-expanded=true seems like the simplest way forward here to me.

I have implemented the required changes above for the select, lookout and Combobox components.

Unfortunately the above request can not be completed directly on the menu component. This component is in fact just the menu box that appear below an arbitrary input or component being used. In the case of the demo, the input used is a input text, giving the assumption that the two are connected.

The only thing that I could do (to align with the designs) would be to manually assign the correct border-radius-bottom in the demo components, but this will not actually fix the usage of menu items and input components in the real world, as the use would have to manually define the margin-bottom in the parents component.

@SimoneThisDot good catch—it does seem like we may need to develop some reusable code that can be applied to a component that has a dropdown menu. I assume this will mean a conditional class following a standard pattern like .component-name--expanded, plus a Less mixin that sets the 2px border radius initially then sets the 0px border-bottom radiuses when the menu is expanded.

@Sarai-WMDE, do you think this is something we need to do to ensure that, if a library user creates a new component with a Menu, the proper border radiuses are set? Or do you think applying styles to the Menu demos is sufficient?

Hey @SimoneThisDot and @AnneT. Thanks for your comments. I'd say that just updating the Menu demos is not sufficient, since as you mention the issue would persist in context / would need to be manually solved every time. The class + mixin solution makes a lot of sense and would ensure we're propagating the right styles for the active state, so I hope we can go for that solution.

STH triaged this task as Medium priority.May 1 2022, 12:54 PM

For some reason, the gerrit review link was not automatically made.

This is the Gerrit Patch: https://gerrit.wikimedia.org/r/c/design/codex/+/789092

@SimoneThisDot I bet it's the extra space below the Bug line in the commit message

Change 789092 had a related patch set uploaded (by Simone Cuomo; author: Simone Cuomo):

[design/codex@main] styles: Use consistent border-bottom on item with dropdown menus

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

Change 789092 merged by jenkins-bot:

[design/codex@main] styles: Use consistent border-bottom on item with dropdown menus

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

Design sign off can be done: the visual bug appears to have been fully fixed. All listed issues were verified on the latest versions of Chrome, Safari and Firefox.

DAbad subscribed.

closed