Upgrade bitstyles to 5.0.0

[angelikatyborska]

Upgrade bitstyles from 4.3.0 to 5.0.0

The current default version of bitstyles in this project is 4.3.0. The next smallest version jump takes it to 5.0.0.

📚 IMPORTANT: before doing anything, read the document about bitstyles version compatibility in this project. It contains detailed instructions on how to approach bitstyles upgrades, including how to test them.

In this ticket, you should

• Analyze all the changes done in bitstyles in versions 5.0.0-alpha-1 and 5.0.0.
• Decide which one of those changes are actionable in this project and apply them.
• A short skimming reveals that button changes will likely be the biggest chunk of work in this ticket. They will also affect other components that use buttons, like tabs and sidebar.

This ticket supersedes #107 and its PR #113

How to approach the button changes

Buttons were rewritten from having a single "type" (in bitstyles_phoenix, a variant attribute) to instead allow combining "color" and "shape" attributes.

• Add new color and shape attributes. Neither of them is required.
  • Mention in the documentation that those attributes only work when used with bitstyles 5.0.0.
  • If bitstyles phoenix is used with bitstyles >= 5.0.0
    • Use attributes to apply a.button--#{shape} and a.button--#{color} classes.
  • If bitstyles phoenix is used with bitstyles < 5.0.0
    • Print a warning that this attribute is ignored when used with bitstyles 5.0.0
    • Ignore attributes.
• Deprecate the variant attribute.
  • Mention in the documentation that this attribute is deprecated from bitstyles 5.0.0.
  • If bitstyles phoenix is used with bitstyles >= 5.0.0

    • Print a warning about the deprecation whenever this attribute is used on a button

    • Translate the old variant value into a color + shape pair of values like so:

      old "type"/"variant"	new shape	new color
      danger	-	danger
      icon-reversed	square	transparent
      icon	square	secondary
      menu	menu	?
      mode	?	?
      nav-large	-	transparent
      nav	-	transparent
      small	small	-
      tab	tab	tab
      ui	-	secondary

      note: - means no value, which will fallback to the default shape/color. ? means I have no idea.

  • If bitstyles phoenix is used with bitstyles < 5.0.0
    • Use this attribute to apply a a.button--#{variant} class.
• Update button component stories to make sense for the new buttons (e.g. delete "UI button") but still keep some unit tests for the old variant attribute. See how tests for the deprecation of the to attribute were written.