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

LF Responsive #2875

Open
wants to merge 50 commits into
base: rc
Choose a base branch
from
Open

LF Responsive #2875

wants to merge 50 commits into from

Conversation

vvalentin-lucca
Copy link
Contributor

@vvalentin-lucca vvalentin-lucca commented Jun 20, 2024 •
edited
Loading

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

@vvalentin-lucca vvalentin-lucca added the 🔖✨ Feature New feature (even a very small one) label Jun 20, 2024
@c-3po c-3po bot added the 📖 Documentation changes Requires a Prisme update label Jun 20, 2024
@LuccaIntegration
Copy link

👩‍🍳 https://lucca-front.lucca.tech/PR-2875/storybook

@CCNET-iLucca
Copy link

Tests d'interfaces

@jeremie-lucca jeremie-lucca added this to the 18.2 milestone Aug 1, 2024
@jeremie-lucca jeremie-lucca mentioned this pull request Aug 2, 2024
Merged
@jeremie-lucca
Copy link
Contributor

Could we fix the pageHeader responsive padding on this issue ?

lucca-front/packages/scss/src/components/pageHeader/component.scss

Line 4 in b257dec

padding: var(--pr-t-spacings-400) 2.5rem var(--pr-t-spacings-300);

image

@vvalentin-lucca vvalentin-lucca marked this pull request as ready for review August 19, 2024 14:24
@vvalentin-lucca vvalentin-lucca requested review from a team as code owners August 19, 2024 14:24
@LuccaIntegration
Copy link

👩‍🍳 https://lucca-front.lucca.tech/PR-2875/storybook

@CCNET-iLucca
Copy link

Tests d'interfaces

@vvalentin-lucca vvalentin-lucca marked this pull request as draft August 19, 2024 14:33
@vvalentin-lucca
Copy link
Contributor Author

@jeremie-lucca Done.

@vvalentin-lucca vvalentin-lucca marked this pull request as ready for review August 19, 2024 16:32
@LuccaIntegration
Copy link

👩‍🍳 https://lucca-front.lucca.tech/PR-2875/storybook

@LuccaIntegration
Copy link

👩‍🍳 https://lucca-front.lucca.tech/PR-2875/storybook

@CCNET-iLucca
Copy link

Tests d'interfaces

@LuccaIntegration
Copy link

👩‍🍳 https://lucca-front.lucca.tech/PR-2875/storybook

@CCNET-iLucca
Copy link

Tests d'interfaces

@LuccaIntegration
Copy link

👩‍🍳 https://lucca-front.lucca.tech/PR-2875/storybook

@CCNET-iLucca
Copy link

Tests d'interfaces

@LuccaIntegration
Copy link

👩‍🍳 https://lucca-front.lucca.tech/PR-2875/storybook

@CCNET-iLucca
Copy link

Tests d'interfaces

@LuccaIntegration
Copy link

👩‍🍳 https://lucca-front.lucca.tech/PR-2875/storybook

@LuccaIntegration
Copy link

👩‍🍳 https://lucca-front.lucca.tech/PR-2875/storybook

@CCNET-iLucca
Copy link

Tests d'interfaces

@LuccaIntegration
Copy link

👩‍🍳 https://lucca-front.lucca.tech/PR-2875/storybook

@LuccaIntegration
Copy link

👩‍🍳 https://lucca-front.lucca.tech/PR-2875/storybook

@LuccaIntegration
Copy link

👩‍🍳 https://lucca-front.lucca.tech/PR-2875/storybook

@jeremie-lucca jeremie-lucca modified the milestones: 18.3, 18.4 Oct 30, 2024
@jeremie-lucca jeremie-lucca removed this from the 19.1 milestone Dec 19, 2024
@LuccaIntegration
Copy link

👩‍🍳 https://lucca-front.lucca.tech/PR-2875/storybook

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
📖 Documentation changes Requires a Prisme update 🔖✨ Feature New feature (even a very small one) 💥 Breaking change Requires actions on products side (even a very small one)
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@vvalentin-lucca @LuccaIntegration @CCNET-iLucca @jeremie-lucca