LF Responsive - Githubissues

vvalentin-lucca commented 3 months ago

Description

With this PR, we introduce the possibility of controlling the responsive behavior of each component from outside LF.

You can (for each component independently) :

disable default responsive ;
change the default breakpoint (with a predefined breakpoint or a custom value) ;
define two breakpoints;
switch from @media to @container behavior (and vice versa);
invert a request (from min-width to max-width for example);
refer to height rather than width;
do all this globally or specifically.

Each responsive component now has :

a mixin in its index that controls all its behavior ;
in a responsive file, the mixins that modify its appearance.

A few breakings:

between becomes inside (1 inside Cleemy)
$name becomes $containerName (1 inside Cleemy)
all @forward becomes @use in styles.scss (everyone)

The target behaviors are coded in LF, to avoid breakings (and give you time to switch over smoothly), you will have to configure the responsive components in this way:

@use 'footer' with (
    $defaultResponsive: false
);

@include footer.responsive($at: 'media');

Some examples of use:

// change breakpoint for indexTable
@use 'indexTable' with (
    $defaultResponsive: false
);
@include indexTable.responsive($at: 'media', $breakpoint: 'XS');

// define two levels and trigger outside them for errorPage
@use 'errorPage' with (
    $defaultResponsive: false
);
@include errorPage.responsive($at: 'media', $breakpoint: 'S', $breakpoint2: 'M', $inverted: true);

// create behavior for a specific emptyState
@use 'emptyState' with (
    $defaultResponsive: false
);
@include emptyState.responsive($at: 'media');
@include emptyState.responsive($at: 'media', $breakpoint: '42em', $responsiveSelector: 'at42em'); // generate class .emptyState.rwd-at42em