New: Added support for new Vanilla button color mixins (fixes #145)

[kirsty-hames]

Fixes #145

New

• Added support for new Vanilla button color mixins PR. Default button style set to filled to mimic current Vanilla and outline as optional style. The implementation allows for additional styles to be created for custom themes.
• Focus state added.
• Legacy support added to prevent breaking change. AFAIK, this is the first plugin to be updated to support the new Vanilla buttons. Are we happy to apply the same fallback implementation for other plugins?

Testing legacy support

1. Install Vanilla master.
2. There should be no change in styling.

Testing new Vanilla buttons

1. Install Vanilla PR.
2. Hotgrid item button style can be changed via the @item-color-style variable in less/_defaults/_btn-style.less. Test both filled and outline styles.
3. Check all states styles apply (default, hover, focus and visited).

[swashbuck]

👍 Works as expected.

Question... Should the checkmark icon take on the button styles since it's more of an information icon rather than a clickable button? Technically speaking, should the icon be changed from btn-icon to btn-ui-icon? The former uses @nav-btn-border-radius for the rounding whereas the latter uses @ui-btn-controls-border-radius.

[kirsty-hames]

👍 Works as expected.

Question... Should the checkmark icon take on the button styles since it's more of an information icon rather than a clickable button? Technically speaking, should the icon be changed from btn-icon to btn-ui-icon? The former uses @nav-btn-border-radius for the rounding whereas the latter uses @ui-btn-controls-border-radius.

Hey @swashbuck, good question. I think item-ui-color would be most suitable? This would be in keeping with Hotgraphic too. We could then update border-radius: 50%; to use @item-ui-border-radius instead?

[swashbuck]

👍 Works as expected.
Question... Should the checkmark icon take on the button styles since it's more of an information icon rather than a clickable button? Technically speaking, should the icon be changed from btn-icon to btn-ui-icon? The former uses @nav-btn-border-radius for the rounding whereas the latter uses @ui-btn-controls-border-radius.

Hey @swashbuck, good question. I think item-ui-color would be most suitable? This would be in keeping with Hotgraphic too. We could then update border-radius: 50%; to use @item-ui-border-radius instead?

@kirsty-hames Yep, that sounds good.

[guywillis]

👀

[kirsty-hames]

Hi @swashbuck, I finally got round to updating this PR as per your suggestion. Assuming I've understood correctly, I've separated the icon (plus/checkmark) from inheriting the @item-color-style and instead this uses @item-ui-color-style in be374f0. By default, these inherit the same colours from Vanilla but now they're setup so we can easily change the colours.

I also realised @item-color-focus was a new variable added during the Vanilla buttons PR so I've added a fallback variable for this too.

[swashbuck]

👍

[github-actions]

🎉 This PR is included in version 4.8.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀