Better hiding utilities for specific sizes

[Geit]

For some locations within MySky a common practice has been to hide specific sets of content at specific screen sizes. Unfortunately the u-hide-completely@[size] utilities aren't useful for this, as they hide at that size and above (from my understanding).

As such we've had to make the following local utility classes:

@include mq($from: large) {
  .u-packages-visible-at-large {
    display: block !important; // stylelint-disable-line
  }
}

@include mq($until: large) {
  .u-packages-hidden-below-large {
    display: none !important; // stylelint-disable-line
  }
}

@include mq($from: large) {
  .u-packages-hidden-above-large {
    display: none !important; // stylelint-disable-line
  }
}

@include mq($from: small, $until: large) {
  .u-packages-visible-at-medium {
    display: block !important; // stylelint-disable-line
  }
}

@include mq($until: medium) {
  .u-packages-hidden-below-medium {
    display: none !important; // stylelint-disable-line
  }
}

@include mq($from: medium) {
  .u-packages-hidden-above-medium {
    display: none !important; // stylelint-disable-line
  }
}

@include mq($until: small) {
  .u-packages-visible-at-small {
    display: block !important; // stylelint-disable-line
  }
}

@include mq($until: small) {
  .u-packages-hidden-below-small {
    display: none !important; // stylelint-disable-line
  }
}

@include mq($from: small) {
  .u-packages-hidden-above-small {
    display: none !important; // stylelint-disable-line
  }
}

It'd be nice if there was a more graceful solution included with Toolkit itself.

[steveduffin]

Bump : I've seen this exact issue in two seperate teams today. I like @StefanMcCready's suggestion of u-hide<small type selectors.

[steveduffin]

This is the meat that generates the selectors we use to generate hides going up e.g .u-hide-visually\@small https://github.com/sky-uk/toolkit/blob/master/packages/sky-toolkit-core/utilities/_hide.scss#L16

Do we want to extend the responsivize mixin it uses to take an optional direction argument? https://github.com/sky-uk/toolkit/blob/master/packages/sky-toolkit-core/tools/_mixins.scss#L148, we could then use this in the hide.scss to spit out selectors that can hide in the opposite direction e.g end up with

@media (max-width: 46.24em) {
  u-hide-visually\<small` {
...

[steveduffin]

We'd need to be mindful that currently, the @ syntax can mean either up or down, for example, it's used in c-btn to mean until, see https://github.com/sky-uk/toolkit/blob/master/packages/sky-toolkit-ui/components/_buttons.scss#L231. How do we make this unambiguous?

[StefanMcCready]

I think we just need to make a syntax decision really. Not sure what the reasoning is behind using the @ for an until query.

We could probably look to implement the below as a hard syntax rule @ means apply styles from a breakpoint < means apply styles before a breakpoint

It would then become easier to police and would lead to less ambiguity. We can always go and refactor the Button if we need to 😄