LF Responsive

.storybook/styles.scss

@@ -2,6 +2,12 @@
 @import '../packages/scss/src/main-all';
 @import '../packages/ng/styles/main';
 
+storybook-root,
+[ng-version] {
+	// Apply block display by default to story root for @container purposes
+	display: block;
+}
+
 .demo-utilityWrapper {
 	display: flex;
 	gap: var(--pr-t-spacings-100);

README.md

@@ -31,64 +31,11 @@ In your file styles.scss, add imports files and components you want to import to
 @forward '@lucca-front/scss/src/main';
 @forward '@lucca-front/ng/src/main';
 
-// Import SCSS components
-@forward '@lucca-front/scss/src/components/box';
-@forward '@lucca-front/scss/src/components/breadcrumbs';
-@forward '@lucca-front/scss/src/components/button';
-@forward '@lucca-front/scss/src/components/buttonGroup';
-@forward '@lucca-front/scss/src/components/callout';
-@forward '@lucca-front/scss/src/components/card';
-@forward '@lucca-front/scss/src/components/checkbox';
-@forward '@lucca-front/scss/src/components/chip';
-@forward '@lucca-front/scss/src/components/clear';
-@forward '@lucca-front/scss/src/components/code';
-@forward '@lucca-front/scss/src/components/collapse';
-@forward '@lucca-front/scss/src/components/container';
-@forward '@lucca-front/scss/src/components/contentSection';
-@forward '@lucca-front/scss/src/components/divider';
-@forward '@lucca-front/scss/src/components/errorPage';
-@forward '@lucca-front/scss/src/components/field';
-@forward '@lucca-front/scss/src/components/file';
-@forward '@lucca-front/scss/src/components/filters';
-@forward '@lucca-front/scss/src/components/form';
-@forward '@lucca-front/scss/src/components/formLabel';
-@forward '@lucca-front/scss/src/components/gauge';
-@forward '@lucca-front/scss/src/components/grid';
-@forward '@lucca-front/scss/src/components/header';
-@forward '@lucca-front/scss/src/components/label';
-@forward '@lucca-front/scss/src/components/layout';
-@forward '@lucca-front/scss/src/components/link';
-@forward '@lucca-front/scss/src/components/list';
-@forward '@lucca-front/scss/src/components/loading';
-@forward '@lucca-front/scss/src/components/main';
-@forward '@lucca-front/scss/src/components/menu';
-@forward '@lucca-front/scss/src/components/navSide';
-@forward '@lucca-front/scss/src/components/notchBox';
-@forward '@lucca-front/scss/src/components/pageHeader';
-@forward '@lucca-front/scss/src/components/pagination';
-@forward '@lucca-front/scss/src/components/progress';
-@forward '@lucca-front/scss/src/components/radio';
-@forward '@lucca-front/scss/src/components/radioButtons';
-@forward '@lucca-front/scss/src/components/section';
-@forward '@lucca-front/scss/src/components/sortableList';
-@forward '@lucca-front/scss/src/components/statusBadge';
-@forward '@lucca-front/scss/src/components/switch';
-@forward '@lucca-front/scss/src/components/table';
-@forward '@lucca-front/scss/src/components/tableFixed';
-@forward '@lucca-front/scss/src/components/tableOfContent';
-@forward '@lucca-front/scss/src/components/tableSorted';
-@forward '@lucca-front/scss/src/components/tableSticked';
-@forward '@lucca-front/scss/src/components/tag';
-@forward '@lucca-front/scss/src/components/textfield';
-@forward '@lucca-front/scss/src/components/timeline';
-@forward '@lucca-front/scss/src/components/timepicker';
-@forward '@lucca-front/scss/src/components/title';
-@forward '@lucca-front/scss/src/components/titleSection';
-@forward '@lucca-front/scss/src/components/toast';
-@forward '@lucca-front/scss/src/components/verticalNavigation';
-```
-
-Then comment unused components to reduce LF’s distribution size and compilation time.
+// Import SCSS components you use to reduce LF’s distribution size and compilation time.
+@use '@lucca-front/scss/src/components/componentA';
+@use '@lucca-front/scss/src/components/componentB';
+@use '@lucca-front/scss/src/components/componentC';
+```
 
 To import all components, replace the previous code by the 3 following lines (not recommended):
 

packages/icons/src/icon/exports.scss

@@ -1,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

packages/ng/comment/comment-block/comment-block.component.scss

@@ -0,0 +1,3 @@
+lu-comment-block {
+	display: block;
+}

packages/ng/comment/comment-block/comment-block.component.ts

@@ -9,7 +9,7 @@ import { COMMENT_BLOCK_INSTANCE, COMMENT_CHAT_INSTANCE } from '../token';
 	standalone: true,
 	imports: [NgTemplateOutlet],
 	templateUrl: './comment-block.component.html',
-
+	styleUrl: './comment-block.component.scss',
 	encapsulation: ViewEncapsulation.None,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 

packages/ng/empty-state/empty-state-page/empty-state-page.component.scss

@@ -1,6 +1,6 @@
 @use '@lucca-front/scss/src/components/emptyState';
 
-.emptyState-wrapper {
+lu-empty-state-page {
 	display: flex;
 	flex-direction: column;
 	flex-grow: 1;

packages/ng/empty-state/empty-state-page/empty-state-page.component.ts

@@ -11,9 +11,6 @@ import { LuSafeExternalSvgPipe } from '@lucca-front/ng/safe-content';
 	styleUrl: './empty-state-page.component.scss',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	encapsulation: ViewEncapsulation.None,
-	host: {
-		class: 'emptyState-wrapper',
-	},
 })
 export class EmptyStatePageComponent {
 	@Input()

packages/ng/empty-state/empty-state-section/empty-state-section.component.scss

@@ -1 +1,5 @@
 @use '@lucca-front/scss/src/components/emptyState';
+
+lu-empty-state-section {
+	display: block;
+}

packages/scss/src/commons/utils/container.scss

@@ -1,77 +1,117 @@
+@use 'sass:string';
 @use '@lucca-front/scss/src/commons/utils/media';
 
-// dans cette page tous les mixins sont des raccourcis vers media.query et media.queries
+@mixin auto($containerName) {
+	*:has(> .#{$containerName}:not(.rwd-disableAutoContainer)) {
+		container-type: inline-size;
+		container-name: string.unquote($containerName);
+	}
+}
+
+// dans ce qui suit tous les mixins sont des raccourcis vers media.query et media.queries
 
 // les raccourcis des requêtes simples et multiples
 
-@mixin query($breakpoint, $property: 'width', $max: false, $name: '') {
-	@include media.query($breakpoint: $breakpoint, $property: $property, $max: $max, $at: 'container', $name: $name) {
-		@content;
+@mixin query($breakpoint, $breakpoint2, $axis: 'width', $inverted: false, $containerName: '') {
+	// si on breakpoint supplémentaire est passé, c’est queries qu’il faut appeler
+	@if $breakpoint2 != null {
+		@include queries(
+			$breakpoint1: $breakpoint,
+			$breakpoint2: $breakpoint2,
+			$axis: $axis,
+			$at: 'container',
+			$containerName: $containerName,
+			$inverted: $inverted
+		) {
+			@content;
+		}
+	} @else {
+		@include media.query($breakpoint: $breakpoint, $axis: $axis, $inverted: $inverted, $at: 'container', $containerName: $containerName) {
+			@content;
+		}
 	}
 }
 
-@mixin queries($breakpoint1, $breakpoint2, $property: 'width', $name: '') {
-	@include media.queries($breakpoint1, $breakpoint2, $property: $property, $at: 'container', $name: $name) {
+@mixin queries($breakpoint1, $breakpoint2, $inverted: false, $axis: 'width', $containerName: '') {
+	@include media.queries($breakpoint1, $breakpoint2, $inverted: $inverted, $axis: $axis, $at: 'container', $containerName: $containerName) {
 		@content;
 	}
 }
 
-// les raccourcis pour min/max/between
+// les raccourcis pour min/max/inside/outside
+
+@mixin min($breakpoint, $axis: 'width', $containerName: '') {
+	@include media.query($breakpoint: $breakpoint, $axis: $axis, $at: 'container', $containerName: $containerName) {
+		@content;
+	}
+}
 
-@mixin min($breakpoint, $property: 'width', $name: '') {
-	@include media.query($breakpoint: $breakpoint, $property: $property, $at: 'container', $name: $name) {
+@mixin max($breakpoint, $axis: 'width', $containerName: '') {
+	@include media.query($breakpoint, $axis: $axis, $inverted: true, $at: 'container', $containerName: $containerName) {
 		@content;
 	}
 }
 
-@mixin max($breakpoint, $property: 'width', $name: '') {
-	@include media.query($breakpoint, $property: $property, $max: true, $at: 'container', $name: $name) {
+@mixin inside($breakpoint1, $breakpoint2, $axis: 'width', $containerName: '') {
+	@include media.queries($breakpoint1, $breakpoint2, $axis: $axis, $at: 'container', $containerName: $containerName) {
 		@content;
 	}
 }
 
-@mixin between($breakpoint1, $breakpoint2, $property: 'width', $name: '') {
-	@include media.queries($breakpoint1, $breakpoint2, $property: $property, $at: 'container', $name: $name) {
+@mixin outside($breakpoint1, $breakpoint2, $axis: 'width', $containerName: '') {
+	@include media.queries($breakpoint1, $breakpoint2, $axis: $axis, $at: 'container', $containerName: $containerName, $inverted: true) {
 		@content;
 	}
 }
 
-// les raccourcis pour minWidth/maxWidth/betweenWidths
+// les raccourcis pour minWidth/maxWidth/insideWidths/outsideWidths
 
-@mixin minWidth($breakpoint, $name: '') {
-	@include media.query($breakpoint, $at: 'container', $name: $name) {
+@mixin minWidth($breakpoint, $containerName: '') {
+	@include media.query($breakpoint, $at: 'container', $containerName: $containerName) {
 		@content;
 	}
 }
 
-@mixin maxWidth($breakpoint, $name: '') {
-	@include media.query($breakpoint, $max: true, $at: 'container', $name: $name) {
+@mixin maxWidth($breakpoint, $containerName: '') {
+	@include media.query($breakpoint, $inverted: true, $at: 'container', $containerName: $containerName) {
 		@content;
 	}
 }
 
-@mixin betweenWidths($breakpoint1, $breakpoint2, $name: '') {
-	@include media.queries($breakpoint1, $breakpoint2, $at: 'container', $name: $name) {
+@mixin insideWidths($breakpoint1, $breakpoint2, $containerName: '') {
+	@include media.queries($breakpoint1, $breakpoint2, $at: 'container', $containerName: $containerName) {
 		@content;
 	}
 }
 
-// les raccourcis pour minHeight/maxHeight/betweenHeights
+@mixin outsideWidths($breakpoint1, $breakpoint2, $containerName: '') {
+	@include media.queries($breakpoint1, $breakpoint2, $at: 'container', $containerName: $containerName, $inverted: true) {
+		@content;
+	}
+}
+
+// les raccourcis pour minHeight/maxHeight/insideHeights/outsideHeights
+
+@mixin minHeight($breakpoint, $containerName: '') {
+	@include media.query($breakpoint, $axis: 'height', $at: 'container', $containerName: $containerName) {
+		@content;
+	}
+}
 
-@mixin minHeight($breakpoint, $name: '') {
-	@include media.query($breakpoint, $property: 'height', $at: 'container', $name: $name) {
+@mixin maxHeight($breakpoint, $containerName: '') {
+	@include media.query($breakpoint, $inverted: true, $axis: 'height', $at: 'container', $containerName: $containerName) {
 		@content;
 	}
 }
 
-@mixin maxHeight($breakpoint, $name: '') {
-	@include media.query($breakpoint, $max: true, $property: 'height', $at: 'container', $name: $name) {
+@mixin insideHeights($breakpoint1, $breakpoint2, $containerName: '') {
+	@include media.queries($breakpoint1, $breakpoint2, $axis: 'height', $at: 'container', $containerName: $containerName) {
 		@content;
 	}
 }
 
-@mixin betweenHeights($breakpoint1, $breakpoint2, $name: '') {
-	@include media.queries($breakpoint1, $breakpoint2, $property: 'height', $at: 'container', $name: $name) {
+@mixin outsideHeights($breakpoint1, $breakpoint2, $containerName: '') {
+	@include media.queries($breakpoint1, $breakpoint2, $axis: 'height', $at: 'container', $containerName: $containerName, $inverted: true) {
 		@content;
 	}
 }