Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add button groups for use in cookie banner #2114

Merged
merged 3 commits into from
Jan 27, 2021
Merged

Add button groups for use in cookie banner #2114

merged 3 commits into from
Jan 27, 2021

Commits on Jan 26, 2021

  1. Add button groups objects 

    Add a new button groups object which can be used to group buttons and
links together.

Within a button group:
 - links are styled to line up visually with the buttons, including
   being centre-aligned on mobile
 - spacing between the buttons and links is handled automatically,
   including when they wrap across multiple lines

The button group object will then be used to group the 'Accept cookies',
'Reject cookies' and 'View and set cookie preferences' buttons and links
in the cookie banner component.

The button group object uses flexbox and align-items to align the
buttons and links along the 'cross axis' – centre-aligning on mobile and
aligning rows along the baseline on tablet and above.

align-items is in theory supported in IE11 and above, but our use of
autoprefixer means that IE10-compatible flexbox properties are also
included, and in testing it works as well in IE10 as it does in IE11.

In browsers that do not support flexbox [1] or align-items [2] the
spacing between buttons and links is different (as whitespace between
inline blocks is not handled) and they are not aligned along the
cross-axis, but the general layout is still applied.

[1]: https://caniuse.com/flexbox
[2]: https://caniuse.com/mdn-css_properties_align-items_flex_context
    @36degrees
    36degrees committed Jan 26, 2021
    Configuration menu
    Copy the full SHA
    4c17b6d View commit details
    Browse the repository at this point in the history

  2. Fix links overflowing their container in IE10/11 

    Set max-width to fix links overflowing in IE10/11 in the mobile viewport.

https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container
    @36degrees
    36degrees committed Jan 26, 2021
    Configuration menu
    Copy the full SHA
    e5f50d7 View commit details
    Browse the repository at this point in the history

  3. Update confirm delete example to use button group

    @36degrees
    36degrees committed Jan 26, 2021
    Configuration menu
    Copy the full SHA
    b650d2d View commit details
    Browse the repository at this point in the history