Skip to content

refactor(styleguide): migrate and redesign buttons

Hannes Heine requested to merge pr2562head into pr2562base

Created by: Tirokk

alina-beck Authored by alina-beck Merged

🍰 Pullrequest

  • Migration of styleguide buttons + improved code and functionality + design changes
  • Migration of styleguide spinner (because it is used in the buttons)
  • Refactoring of the CounterIcon (because it was wrapped around a button but I would argue it should be the other way round 😉)

Old buttons Screenshot 2019-12-18 at 12 21 13 Screenshot 2019-12-18 at 12 22 41 Screenshot 2019-12-18 at 12 25 48

New buttons Screenshot 2019-12-18 at 12 23 20 Screenshot 2019-12-18 at 12 23 30 Screenshot 2019-12-18 at 12 23 43 Screenshot 2019-12-18 at 12 23 54 Screenshot 2019-12-18 at 12 24 02

Please start storybook to see them in action!

Motivation

  • I got rid of the secondary button because it is never used on the site and would disrupt the design in its current state. I don't think we need the blue color at all.
  • I changed the design of the default button because with grey text on grey background it looks disabled which can be very confusing. By the way, the vast majority of buttons on the network is set as primary (filled in green) anyway.
  • This is part of the reason why I decided to remove the ghost buttons as well. They are very rarely used and I think the new design of the default button is a good replacement – especially since ghost buttons are only ever used in combination with primary or danger buttons.
  • I introduced new color shades (primary-light and primary-dark, same for danger), so the hover and active states are now more easily distinguishable.
  • Buttons can now explicitly be set as circle shapes which was impossible before.

Issues

Questions

  • Testing: We should make this decision as a team, but I'm especially interested what @mattwr18 has to say – because you added tests for CounterIcon: What should be covered in component tests, especially for generic components? I think it would make sense to test logic, but only if there is any (in case of the CounterIcon I added a cap for the counter, so we could make sure that count values below 100 are displayed at their actual value and counts above as 99+) but I don't think it is necessary to test that all the elements are rendered. If that is something we do want to test I would maybe suggest the storybook snapshots instead. What do you think?

  • Icon Button Design: Do you think there is a use case for the below button style or should icon-only buttons by default be circles?

Screenshot 2019-12-18 at 12 39 09

ToDo

  • get the design approved 😁
  • replace <ds-button> with <base-button> throughout the project
  • use scss variables in BaseComponents

Merge request reports