@lucca-front/scss 21.4.0 → 21.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "21.4.0",
+  "version": "21.4.2",
   "description": "A Sass framework for Lucca products.",
   "main": "src/main.scss",
   "scripts": {},
@@ -24,7 +24,7 @@
     "normalize.css": "^8.0.0"
   },
   "peerDependencies": {
-    "@lucca-front/icons": "21.4.0",
-    "@lucca/prisme": "21.4.0"
+    "@lucca-front/icons": "21.4.2",
+    "@lucca/prisme": "21.4.2"
   }
 }

package/src/components/comment/component.scss

@@ -77,6 +77,7 @@
 			margin-block-end: 0;
 			overflow-wrap: anywhere;
 			font: var(--components-comment-text-font);
+			white-space: var(--components-comment-text-whiteSpace);
 		}
 
 		.comment-content-textContainerOptional {

package/src/components/comment/index.scss

@@ -17,6 +17,10 @@
 			@include noAvatar;
 		}
 
+		&.mod-plainText {
+			@include plainText;
+		}
+
 		&:has(.comment-infos) {
 			@include container.max(25rem, $name: 'comment') {
 				@include narrow;

package/src/components/comment/mods.scss

@@ -57,3 +57,7 @@
 		margin-inline: 0 var(--components-comment-content-margin);
 	}
 }
+
+@mixin plainText {
+	--components-comment-text-whiteSpace: pre-line;
+}

package/src/components/comment/vars.scss

@@ -1,5 +1,6 @@
 @mixin vars {
 	--components-comment-max-width: 66ch;
+	--components-comment-text-whiteSpace: normal;
 	--components-comment-text-font: var(--pr-t-font-body-M);
 	--components-comment-margin: 0;
 	--components-comment-content-margin: calc(1.5rem + var(--pr-t-spacings-100)); // 1.5rem for the width of the avatar and 0.5rem for the gap

package/src/components/dialog/component.scss

@@ -158,6 +158,7 @@
 			padding-inline: var(--components-dialog-insideContent-paddingInline);
 			grid-area: overflow;
 			overflow: var(--components-dialog-insideContent-overflow);
+			flex-grow: var(--components-dialog-insideContent-flexGrow);
 			display: block;
 			outline: none;
 		}

package/src/components/dialog/mods.scss

@@ -155,6 +155,7 @@
 
 @mixin withHorizontalNavigation {
 	--components-dialog-insideContent-overflow: none;
+	--components-dialog-insideContent-flexGrow: 1;
 	--components-dialog-inside-header-boxShadow: none;
 	--components-dialog-inside-header-paddingBlock: var(--pr-t-spacings-200) 0;
 }

package/src/components/dialog/vars.scss

@@ -20,6 +20,7 @@
 	--components-dialog-insideContent-paddingInline: var(--pr-t-spacings-300);
 	--components-dialog-insideContent-paddingBlock: var(--pr-t-spacings-200);
 	--components-dialog-insideContent-overflow: auto;
+	--components-dialog-insideContent-flexGrow: 0;
 	--components-dialog-level: 0;
 	--components-dialog-translate-spacing: var(--pr-t-spacings-500);
 	--components-dialog-translate: calc(var(--components-dialog-translate-spacing) * var(--components-dialog-level) * -1);

package/src/components/errorPage/index.scss

@@ -16,8 +16,8 @@
 			@include narrow;
 		}
 
-		.appLayout & {
-			@include inAppLayout;
+		:is(.appLayout, .dialog) & {
+			@include nested;
 		}
 	}
 }

package/src/components/errorPage/mods.scss

@@ -26,7 +26,7 @@
 	}
 }
 
-@mixin inAppLayout {
+@mixin nested {
 	&,
 	.errorPage-section {
 		block-size: 100%;

package/src/components/filterPill/component.scss

@@ -104,22 +104,18 @@
 
 			display: flex;
 			margin-block-start: -1px;
-			margin-inline-start: var(--pr-t-spacings-50);
 			inline-size: calc(var(--pr-t-spacings-50) + var(--pr-t-spacings-200));
 			flex-shrink: 0;
 			z-index: 1;
 			color: var(--components-filterPill-toggle-iconColor);
 			cursor: var(--components-filterPill-label-cursor);
+			margin-inline-start: var(--components-filterPill-toggle-marginInlineStart);
 
 			.icon-arrowChevronBottom {
 				transition-property: transform;
 				transition-duration: var(--commons-animations-durations-fast);
 				transform: rotate(var(--components-filterPill-toggle-rotation));
 			}
-
-			.filterPill-value + & {
-				margin-inline-start: var(--components-filterPill-toggle-marginInlineStart);
-			}
 		}
 
 		.filterPill-clear.clear {

package/src/components/filterPill/index.scss

@@ -38,6 +38,10 @@
 			&:active {
 				@include filledActive;
 			}
+
+			&:has(~ .filterPill_clear) {
+				@include filledClearable;
+			}
 		}
 
 		&.mod-checkbox {
@@ -82,6 +86,10 @@
 }
 
 .filterPillWrapper {
+	@layer components {
+		@include varsWrapper;
+	}
+
 	@layer mods {
 		&.is-hidden {
 			@include hidden;

package/src/components/filterPill/states.scss

@@ -67,7 +67,6 @@
 	--components-filterPill-backgroundColor: var(--palettes-product-50);
 	--components-filterPill-color: var(--palettes-product-800);
 	--components-filterPill-toggle-iconColor: var(--palettes-product-700);
-	--components-filterPill-toggle-marginInlineStart: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50));
 }
 
 @mixin notFilled {
@@ -109,3 +108,7 @@
 @mixin hidden {
 	--components-filterPillWrapper-display: none;
 }
+
+@mixin filledClearable {
+	--components-filterPill-toggle-marginInlineStart: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50));
+}

package/src/components/filterPill/vars.scss

@@ -18,5 +18,8 @@
 	--components-filterPill-arrowColor: var(--palettes-product-700);
 	--components-filterPill-label-maxInlineSize: none;
 	--components-filterPill-toggle-marginInlineStart: var(--pr-t-spacings-50);
+}
+
+@mixin varsWrapper {
 	--components-filterPillWrapper-display: block;
 }

package/src/components/footer/component.scss

@@ -18,6 +18,10 @@
 	@at-root ($atRoot) {
 		.footer-content {
 			flex-grow: 1;
+
+			&:empty {
+				display: none;
+			}
 		}
 
 		.footer-actions {

package/src/components/highlightData/component.scss

@@ -55,7 +55,7 @@
 				--commons-text-link-hover: var(--palettes-800, var(--palettes-product-800));
 			}
 
-			.button {
+			.button.mod-outlined {
 				@include color.palette('neutral');
 			}
 		}

package/src/components/horizontalNavigation/component.scss

@@ -149,6 +149,7 @@
 		.horizontalNavigation_panel {
 			display: var(--components-horizontalNavigation-panel-display);
 			overflow: var(--components-horizontalNavigation-panel-overflow);
+			flex-grow: var(--components-horizontalNavigation-panel-flexGrow);
 			min-height: 0;
 			flex-direction: column;
 

package/src/components/horizontalNavigation/mods.scss

@@ -115,6 +115,7 @@
 @mixin insideDialogPanel {
 	--components-horizontalNavigation-panel-display: flex;
 	--components-horizontalNavigation-panel-overflow: auto;
+	--components-horizontalNavigation-panel-flexGrow: 1;
 
 	&:focus-visible {
 		@include a11y.focusVisible($offset: -4px, $borderRadius: var(--pr-t-border-radius-structure));

package/src/components/horizontalNavigation/vars.scss

@@ -25,4 +25,5 @@
 @mixin varsPanel {
 	--components-horizontalNavigation-panel-display: block;
 	--components-horizontalNavigation-panel-overflow: visible;
+	--components-horizontalNavigation-panel-flexGrow: 0;
 }

package/src/components/multiSelect/states.scss

@@ -12,7 +12,7 @@
 }
 
 @mixin disabled {
-	--components-multiSelect-background: var(--commons-disabled-background);
+	--components-multiSelect-background: var(--pr-t-color-input-background-disabled);
 	--components-multiSelect-placeholder: var(--commons-disabled-placeholder);
 	--components-multiSelect-arrow-color: var(--pr-t-color-input-icon-disabled);
 

package/src/components/readMore/component.scss

@@ -62,6 +62,8 @@
 			$wrappingElements: 'ol, ul';
 
 			&:not(:has(#{$notPlainText})) {
+				white-space: var(--components-readMore-content-whiteSpace);
+
 				&::after {
 					@extend %after;
 				}

package/src/components/readMore/index.scss

@@ -28,5 +28,9 @@
 		&.mod-sunken {
 			@include sunken;
 		}
+
+		&.mod-plainText {
+			@include plainText;
+		}
 	}
 }

package/src/components/readMore/mods.scss

@@ -9,3 +9,7 @@
 @mixin linkReset {
 	--components-readMore-link-insetBlockEnd: 0;
 }
+
+@mixin plainText {
+	--components-readMore-content-whiteSpace: pre-line;
+}

package/src/components/readMore/vars.scss

@@ -3,4 +3,5 @@
 	--components-readMore-link-backgroudColor: var(--pr-t-elevation-surface-raised);
 	--components-readMore-link-paddingInlineStart: var(--pr-t-spacings-500);
 	--components-readMore-link-insetBlockEnd: var(--pr-t-spacings-50);
+	--components-readMore-content-whiteSpace: normal;
 }

package/src/components/resourceCard/component.scss

@@ -22,7 +22,17 @@
 
 	@at-root ($atRoot) {
 		.resourceCardWrapper {
-			grid-template-columns: repeat(auto-fill, minmax(var(--components-resourceCardWrapper-gridTemplateColumnsMin), 1fr));
+			grid-template-columns:
+				repeat(
+					auto-fill,
+					minmax(
+						min(
+							var(--components-resourceCardWrapper-gridTemplateColumnsMin),
+							100%
+						),
+						1fr
+					)
+				);
 			display: var(--components-resourceCardWrapper-display);
 			flex-direction: column;
 			gap: var(--pr-t-spacings-100);

package/src/components/textField/component.scss

@@ -132,6 +132,7 @@
 
 		.textField-prefix-lang {
 			min-inline-size: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50));
+			padding-inline-end: var(--pr-t-spacings-100);
 			position: relative;
 
 			&::after {

package/src/components/tooltip/component.scss

@@ -26,7 +26,7 @@
 
 	@at-root ($atRoot) {
 		// Prevent Safari to display a native tooltip
-		[luTooltipWhenEllipsis] {
+		.tooltip_trigger.is-whenEllipsis {
 			@supports (background-image: -webkit-named-image(i)) {
 				@media (hover: hover) {
 					&::after {