Skip to content

Update expand/collapse toggle location and style

Created by: christinaforney

Background

From the slack thread.

Some quick research (we should try to follow standards and best practices and look at existing research where we can): User research article: https://www.viget.com/articles/testing-accordion-menu-designs-iconography/ It also looks like many results talk about/demonstrate that for direction carats are sideways (> or <) for closed and down for open. Another good article: https://www.smashingmagazine.com/2017/06/designing-perfect-accordion-checklist/

Additionally, @slimsag suggested following the GitHub standard (which is the same as the articles and I were recommending).

Open: image Closed: image

Proposed changes

  • Make the collapsed icon be the sideways carat: >
  • Expanded carat should stay down facing carat: /
  • Move carat toggle from the far right side to the far left side by the merge status symbol image