Tweak responsive Buttons (+ Icons) implementation

jonnystening commented 7 years ago

It would be much tidier if each responsive button class was for its breakpoint (only), not using a "from this breakpoint and up" approach.

.btn-{size}-xs should be limited to the XS breakpoint, leaving other breakpoints with default sizing.

With this approach, the .btn-{size}-md (medium) option would be unnecessary.

Examples:

A button which is small for XS only should only need <a href="#" class="btn btn-primary btn-soft btn-lg-xs">Sign out</a>
A button which is large for LG only should only need <a href="#" class="btn btn-primary btn-soft btn-lg-lg">Sign out</a>
A button which is small for XS, large for LG, but the default for SM and MD breakpoints should only need <a href="#" class="btn btn-primary btn-soft btn-sm-xs btn-lg-lg">Sign out</a>

It would make sense to change over the sizing classes to the new convention whilst doing this ticket (as per https://github.com/WestpacCXTeam/GUI-source/issues/380). .btn-sm-xs --> .btn-small-xs

jonnystening commented 7 years ago

Lets bring back the "from this breakpoint and up" functionality via a new .btn-{size}-{bp}-up class

jonnystening commented 7 years ago

This new functionality can be given to Icons too.

jonnystening commented 7 years ago

fixed by WestpacCXTeam/GUI-buttons@6b9b3e8faed152ebedfd61fdef7005c3e1badfc8 and WestpacCXTeam/GUI-icons@87cad98bea56bff2ad2481b5d3fa34909c0bf5c9

justinspencer commented 6 years ago

Button groups seem to have lost their mouse-over styling.

jonnystening commented 6 years ago

Fixed that now, also check everything again. You were looking at an out of date link sorry.

justinspencer commented 6 years ago

Awesome! Works great.

WestpacCXTeam / GUI-source