@lucca-front/scss 20.4.0-rc.1 → 21.0.0-rc.2

package/src/components/dataTable/index.scss

@@ -75,18 +75,18 @@
 		&:has([selectable]),
 		&.mod-selectable {
 			@include selectable;
+
+			&:has(input:checked) {
+				@include selected;
+			}
 		}
 
 		&.mod-draggable {
 			@include draggable;
-		}
-	}
 
-		:is(.dataTable-body-row, .dataTable-foot-row) {
-		&:has([selectable]),
-		&.mod-selectable {
-			&:has(input:checked) {
-				@include selected;
+			&:has([selectable]),
+			&.mod-selectable {
+				@include selectableDraggable;
 			}
 		}
 	}
@@ -138,3 +138,12 @@
 		}
 	}
 }
+
+// drag and drop preview
+:not(.dataTable-body) {
+	> .dataTable-body-row {
+		@layer components {
+			@include vars;
+		}
+	}
+}

package/src/components/dataTable/mods.scss

@@ -79,6 +79,19 @@
 	}
 }
 
+@mixin selectableDraggable {
+	.dataTable-head-row-cell,
+	.dataTable-body-row-cell,
+	.dataTable-foot-row-cell {
+		&:nth-child(2) {
+			--components-dataTable-cellFirst-width: 2.625rem;
+
+			inline-size: var(--components-dataTable-cellFirst-width);
+			max-inline-size: var(--components-dataTable-cellFirst-width);
+		}
+	}
+}
+
 @mixin tree {
 	@include buttonExpand;
 
@@ -142,7 +155,7 @@
 	}
 }
 
-@mixin cellFixedWidth {
+@mixin cellInlineSize {
 	min-inline-size: var(--dataTable-layoutFixed-width, auto);
 	inline-size: var(--dataTable-layoutFixed-width, auto);
 }
@@ -152,7 +165,7 @@
 		.dataTable-head-row-cell,
 		.dataTable-body-row-cell,
 		.dataTable-foot-row-cell {
-			@include cellFixedWidth;
+			@include cellInlineSize;
 		}
 	}
 
@@ -162,7 +175,7 @@
 				.dataTable-head-row-cell,
 				.dataTable-body-row-cell,
 				.dataTable-foot-row-cell {
-					@include cellFixedWidth;
+					@include cellInlineSize;
 				}
 			}
 		}

package/src/components/dataTable/vars.scss

@@ -11,7 +11,6 @@
 	--components-dataTable-tableLayout: auto;
 	--components-dataTable-cellFirst-width: auto;
 	--components-dataTable-row-display: table-row;
-	--components-dataTable-overflow: hidden;
 	--components-dataTable-expand-rotation: 180deg;
 	--components-dataTable-borderRadius: var(--pr-t-border-radius-structure);
 }

package/src/components/dataTableSticked/index.scss

@@ -10,12 +10,15 @@
 	@layer mods {
 		&:has(.dataTable.mod-stickyHeader, .dataTable-head.mod-sticky) {
 			@include stickyHeader;
+			@include firstRowVisible;
 		}
 
+		&:has(.dataTableShadows),
 		&:has(.dataTable.mod-columnsOverflow) {
 			@include columnsOverflow;
 		}
 
+		&:has(.dataTableShadows),
 		&:has(.dataTable.mod-rowsOverflow) {
 			@include rowsOverflow;
 		}
@@ -43,6 +46,18 @@
 				@include stickyColumnBorder;
 			}
 		}
+
+		&:has(.dataTable.is-firstColumnVisibleAfterColsStart) {
+			@include firstColumnVisibleAfterColsStart;
+		}
+
+		&:has(.dataTable.is-lastColumnVisibleBeforeColsEnd) {
+			@include lastColumnVisibleBeforeColsEnd;
+		}
+
+		&:has(.dataTableWrapper-pagination:not(:empty)) {
+			@include pagination;
+		}
 	}
 
 	&:has(.dataTable-head.is-firstBodyRowVisible) {

package/src/components/dataTableSticked/mods.scss

@@ -1,8 +1,6 @@
 @use '@lucca-front/scss/src/commons/utils/color';
 
 @mixin stickyHeader {
-	--components-dataTable-overflow: auto;
-
 	.dataTable-head {
 		position: sticky;
 		inset-block-start: -1px;
@@ -22,8 +20,6 @@
 }
 
 @mixin columnsOverflow {
-	--components-dataTable-overflow: auto;
-
 	display: flex;
 
 	&::before,
@@ -52,11 +48,10 @@
 }
 
 @mixin rowsOverflow {
-	--components-dataTable-overflow: auto;
-
 	.dataTableShadows {
 		display: flex;
 		flex-direction: column;
+		flex-grow: 1;
 
 		&::before,
 		&::after {
@@ -77,7 +72,7 @@
 		}
 
 		&::after {
-			inset-block-end: 0;
+			inset-block-end: var(--components-dataTable-shadow-lastRowInsetBlockEnd);
 			transform: scaleY(-1);
 			opacity: var(--components-dataTable-shadow-lastRowOpacity);
 		}
@@ -85,8 +80,6 @@
 }
 
 @mixin stickyColumn {
-	--components-dataTable-overflow: auto;
-
 	%addShadow {
 		content: '';
 		position: absolute;
@@ -130,6 +123,8 @@
 				&:not(:has(+ :is(.dataTable-head-row-cell, .dataTable-body-row-cell, .dataTable-foot-row-cell).mod-stickyColumn)) {
 					&::after {
 						@extend %addShadow;
+
+						opacity: var(--components-dataTable-shadow-colsStart-opacity);
 					}
 				}
 			}
@@ -143,6 +138,7 @@
 					inset-inline-start: auto;
 					inset-inline-end: 100%;
 					transform: scaleX(-1);
+					opacity: var(--components-dataTable-shadow-colsEnd-opacity);
 				}
 
 				& ~ :is(.dataTable-head-row-cell, .dataTable-body-row-cell, .dataTable-foot-row-cell).mod-stickyColumn {
@@ -173,3 +169,7 @@
 		}
 	}
 }
+
+@mixin pagination {
+	--components-dataTable-shadow-lastRowInsetBlockEnd: var(--pr-t-spacings-600);
+}

package/src/components/dataTableSticked/states.scss

@@ -18,3 +18,10 @@
 	--components-dataTable-header-shadow-opacity: 0;
 }
 
+@mixin firstColumnVisibleAfterColsStart {
+	--components-dataTable-shadow-colsStart-opacity: 0;
+}
+
+@mixin lastColumnVisibleBeforeColsEnd {
+	--components-dataTable-shadow-colsEnd-opacity: 0;
+}

package/src/components/dataTableSticked/vars.scss

@@ -4,4 +4,7 @@
 	--components-dataTable-shadow-firstRowOpacity: 1;
 	--components-dataTable-shadow-lastRowOpacity: 1;
 	--components-dataTable-header-shadow-opacity: 1;
+	--components-dataTable-shadow-colsStart-opacity: 1;
+	--components-dataTable-shadow-colsEnd-opacity: 1;
+	--components-dataTable-shadow-lastRowInsetBlockEnd: 0;
 }

package/src/components/fancyBox/component.scss

@@ -1,29 +1,22 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	overflow: hidden;
-	padding-inline: var(--pr-t-spacings-200);
-	display: block;
-	position: relative;
-	z-index: 0;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	padding-inline: var(--components-fancyBox-paddingInline);
+	margin-inline: var(--components-fancyBox-marginInline);
+	contain: layout;
 
 	@at-root ($atRoot) {
 		.fancyBox-content {
-			display: flex;
-			flex-direction: column;
-			margin-block: 0;
-			margin-inline: auto;
-			min-block-size: 10rem;
-			min-inline-size: min(20rem, 100%);
-			padding-block: var(--pr-t-spacings-300);
-			inline-size: fit-content;
-			position: relative;
-		}
-
-		.fancyBox-content-box {
 			position: relative;
-			padding-block: var(--pr-t-spacings-300);
-			padding-inline: var(--pr-t-spacings-700);
+			min-block-size: var(--components-fancyBox-contentMinBlockSize);
+			min-inline-size: var(--components-fancyBox-contentMinInlineSize);
+			max-inline-size: 100%;
+			padding-block: var(--components-fancyBox-contentPaddingBlock);
+			padding-inline: var(--components-fancyBox-contentPaddingInline);
 			background-color: var(--pr-t-elevation-surface-raised);
 			border-radius: var(--pr-t-border-radius-structure);
 			flex-grow: 1;
@@ -42,6 +35,7 @@
 				background-repeat: no-repeat;
 				background-size: contain;
 				transition-duration: var(--commons-animations-durations-slow);
+				pointer-events: none;
 			}
 
 			&::before {
@@ -59,7 +53,7 @@
 			}
 		}
 
-		.fancyBox-content-box-foreground {
+		.fancyBox-content-foreground {
 			position: absolute;
 			inline-size: var(--components-fancyBox-imageWidth);
 			block-size: var(--components-fancyBox-imageHeight);
@@ -70,6 +64,7 @@
 			background-size: contain;
 			transition-property: width, height, top, right;
 			transition-duration: var(--commons-animations-durations-slow);
+			pointer-events: none;
 		}
 	}
 }

package/src/components/fancyBox/index.scss

@@ -12,4 +12,8 @@
 			@include narrow;
 		}
 	}
+
+	&.mod-S {
+		@include S;
+	}
 }

package/src/components/fancyBox/mods.scss

@@ -4,3 +4,14 @@
 	--components-fancyBox-offsetInline: -8.75rem;
 	--components-fancyBox-offsetBlock: -0.5rem;
 }
+
+@mixin S {
+	--components-fancyBox-contentMinBlockSize: 9.75rem;
+	--components-fancyBox-offsetInline: -9rem;
+	--components-fancyBox-offsetBlock: -0.75rem;
+	--components-fancyBox-imageWidth: 9.375rem;
+	--components-fancyBox-imageHeight: 7.5rem;
+	--components-fancyBox-contentMinInlineSize: min(17rem, 100%);
+	--components-fancyBox-contentPaddingBlock: var(--pr-t-spacings-150);
+	--components-fancyBox-contentPaddingInline: var(--pr-t-spacings-200);
+}

package/src/components/fancyBox/vars.scss

@@ -1,4 +1,14 @@
 @mixin vars {
+	--components-fancyBox-paddingInline: var(--pr-t-spacings-200);
+  --components-fancyBox-marginInline: auto;
+
+	// Content
+	--components-fancyBox-contentMinBlockSize: 11.25rem;
+	--components-fancyBox-contentMinInlineSize: min(22rem, 100%);
+  --components-fancyBox-contentPaddingBlock: var(--pr-t-spacings-300);
+  --components-fancyBox-contentPaddingInline: var(--pr-t-spacings-700);
+
+	// Visuals
 	--components-fancyBox-background-left: none;
 	--components-fancyBox-background-right: none;
 	--components-fancyBox-foreground: none;

package/src/components/fieldset/component.scss

@@ -40,6 +40,10 @@
 			}
 		}
 
+		.fieldset-title-content-text {
+			padding-block: var(--pr-t-spacings-50);
+		}
+
 		.fieldset-title-content-text-helper {
 			font: var(--pr-t-font-body-S);
 			font-weight: var(--pr-t-font-fontWeight-regular);

package/src/components/fieldset/index.scss

@@ -22,5 +22,9 @@
 		&:has(.fieldset-title-content[aria-expanded='true']) {
 			@include expanded;
 		}
+
+		&:has(.fieldset-title-content-action:not(:empty)) {
+			@include withAction;
+		}
 	}
 }

package/src/components/fieldset/mods.scss

@@ -1,4 +1,5 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/components/button/exports' as button;
 
 @mixin S {
 	--components-fieldset-title: var(--pr-t-font-heading-4);
@@ -19,3 +20,12 @@
 		}
 	}
 }
+
+@mixin withAction {
+	.fieldset-title-content-action {
+		.button {
+			@include button.outlined;
+			@include button.S;
+		}
+	}
+}

package/src/components/fieldset/vars.scss

@@ -1,6 +1,6 @@
 @mixin vars {
 	--components-fieldset-title: var(--pr-t-font-heading-3);
-	--components-fieldset-gap: var(--pr-t-spacings-150);
+	--components-fieldset-gap: var(--pr-t-spacings-100);
 	--components-fieldset-contentMaxWidth: 40rem;
 	--components-fieldset-title-iconRotation: 0deg;
 }

package/src/components/filterBar/component.scss

@@ -12,7 +12,7 @@
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	display: flex;
 	align-items: flex-start;
-	flex-wrap: var(--components-filterBar-flexWrap);
+	flex-wrap: wrap;
 	gap: var(--pr-t-spacings-100);
 
 	.textField {

package/src/components/filterBar/mods.scss

@@ -15,13 +15,17 @@
 }
 
 @mixin notCompact {
-	--components-filterBar-flexWrap: nowrap;
-
 	.filterBar-divider.divider {
 		margin-inline: var(--pr-t-spacings-50);
 
 		@include divider.vertical;
 	}
+
+	.filterBar-scrollBox.scrollBox {
+		&:has(.filterBar-scrollBox-export) {
+			flex-wrap: nowrap;
+		}
+	}
 }
 
 @mixin touch {

package/src/components/filterBar/vars.scss

@@ -1,5 +1,4 @@
 @mixin vars {
 	--components-filterBar-scrollBox-flexGrow: 0;
 	--components-filterBar-scrollBox-group-flexWrap: wrap;
-	--components-filterBar-flexWrap: wrap;
 }

package/src/components/filterPill/component.scss

@@ -104,7 +104,6 @@
 			margin-inline-end: var(--pr-t-spacings-25);
 			position: relative;
 			z-index: 1;
-			display: var(--components-filterPill-clear-display);
 
 			@include clear.product;
 		}
@@ -182,7 +181,9 @@
 				font-weight: var(--pr-t-font-fontWeight-regular);
 				font-size: 1rem;
 				direction: ltr;
-				font-family: var(--icon-fontFamily);
+
+				// stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- This font is for icons and should not have fallback.
+				font-family: 'Lucca icons';
 				font-feature-settings: 'liga';
 				font-style: normal;
 				letter-spacing: normal;

package/src/components/filterPill/states.scss

@@ -1,4 +1,5 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/components/clear/exports' as clear;
 
 @mixin checkboxChecked {
 	--components-filterPill-borderColor: var(--palettes-product-300);
@@ -66,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-clear-display: grid;
 }
 
 @mixin notFilled {
@@ -91,7 +91,6 @@
 }
 
 @mixin disabled {
-	--components-filterPill-clear-display: none;
 	--components-filterPill-backgroundColor: var(--palettes-neutral-50);
 	--components-filterPill-borderColor: var(--palettes-neutral-300) !important;
 	--components-filterPill-color: var(--palettes-neutral-500);
@@ -102,6 +101,8 @@
 
 	box-shadow: var(--components-filterPill-shadow);
 
+	@include clear.hidden;
+
 	// TODO
 	// --components-filterPill-checkbox-borderColor: var(--palettes-neutral-600);
 }

package/src/components/filterPill/vars.scss

@@ -12,7 +12,6 @@
 	--components-filterPill-checkbox-borderColor: var(--palettes-neutral-700);
 	--components-filterPill-checkbox-icon-scale: 0;
 	--components-filterPill-checkbox-icon-timingFonction: cubic-bezier(0.5, -0.5, 0.5, 0);
-	--components-filterPill-clear-display: none;
 	--components-filterPill-toggle-rotation: 0;
 	--components-filterPill-toggle-iconColor: var(--palettes-neutral-600);
 	--components-filterPill-shadow: 0 0 0 1px var(--components-filterPill-borderColor);

package/src/components/form/component.scss

@@ -4,6 +4,8 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
+	display: block;
+
 	.divider {
 		margin-block: var(--pr-t-spacings-300);
 	}
@@ -34,12 +36,12 @@
 
 	@at-root ($atRoot) {
 		.form-header {
+			display: block;
 			margin-block-end: var(--pr-t-spacings-300);
 		}
 
 		.form-header-title {
-			margin: 0;
-			padding: 0;
+			font: var(--pr-t-font-heading-2);
 		}
 
 		.form-header-mandatory {

package/src/components/indexTable/component.scss

@@ -1,7 +1,6 @@
 @use 'vars' as *;
 @use '@lucca-front/scss/src/commons/utils/a11y';
 @use '@lucca-front/scss/src/commons/utils/reset';
-@use '@lucca-front/scss/src/components/button/exports' as button;
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
@@ -39,7 +38,7 @@
 		.indexTable-head-row,
 		.indexTable-body-row,
 		.indexTable-foot-row {
-			display: table-row;
+			display: var(--components-indexTable-row-display);
 		}
 
 		.indexTable-head-row-transparentCell,
@@ -180,9 +179,7 @@
 
 		.indexTable-body-row-cell-checkbox,
 		.indexTable-head-row-cell-checkbox {
-			margin-block: var(--pr-t-spacings-50);
-			margin-inline-start: var(--pr-t-spacings-50);
-			margin-inline-end: var(--pr-t-spacings-150);
+			margin: var(--pr-t-spacings-50);
 		}
 
 		// .indexTable-body-row-cell-action is deprecated
@@ -217,31 +214,10 @@
 			display: flex;
 			align-items: center;
 			gap: var(--pr-t-spacings-100);
+			padding: var(--pr-t-spacings-25);
+			font-weight: var(--pr-t-font-fontWeight-semibold);
 		}
 
-		.indexTable-body-row-cellTitle-button {
-			// :not(.class) is only there to increase specificity when the class isn’t present
-			// but the class should be present, and this code is temporary
-			&.button,
-			&:not(.button) {
-				@include button.ghost;
-				@include button.S;
-				@include button.onlyIconS;
-
-				position: static;
-
-				.lucca-icon {
-					transition: transform var(--commons-animations-durations-fast) ease;
-				}
-
-				// Extend button reactive zone to his whole parent
-				&::before {
-					content: '';
-					position: absolute;
-					inset: 0;
-				}
-			}
-		}
 
 		.indexTable-body-row-cellTitle-title {
 			font-weight: var(--pr-t-font-fontWeight-semibold);
@@ -276,6 +252,12 @@
 		}
 	}
 
+	.indexTableWrapper-pagination {
+		&:empty {
+			display: none;
+		}
+	}
+
 	.statusBadge,
 	.tag,
 	.avatar {
@@ -293,6 +275,7 @@
 
 	.tableSortable.button:hover {
 		--components-button-backgroundColor: var(--palettes-neutral-100);
+
 		color: var(--palettes-neutral-700);
 	}
 }

package/src/components/indexTable/index.scss

@@ -14,6 +14,7 @@
 			@include selectableHoveredRow;
 		}
 
+		&:has(.mod-stack2, .mod-stack3),
 		&.mod-stackable {
 			@include stackable;
 		}
@@ -31,21 +32,37 @@
 			@include massSelection;
 		}
 
-		.indexTable-body-row-cell.mod-actions {
-			@include actions;
+		.indexTable-head-row-cell,
+		.indexTable-body-row-cell {
+			&.mod-actions {
+				@include actions;
+			}
+		}
+
+		.indexTable-body-row-cell,
+		.indexTable-foot-row-cell {
+			&.mod-tfoot {
+				@include tfoot;
+			}
 		}
 
 		.indexTable-head-row-cell,
 		.indexTable-body-row-cell,
 		.indexTable-body-row-transparentCell,
 		.indexTable-foot-row-cell {
+			&.mod-alignEnd,
 			&.mod-alignRight {
-				@include alignRight;
+				@include alignEnd;
 			}
 
 			&.mod-alignCenter {
 				@include alignCenter;
 			}
+
+			&.mod-alignStart,
+			&.mod-alignLeft {
+				@include alignStart;
+			}
 		}
 
 		@include media.max('S') {
@@ -72,5 +89,19 @@
 		}
 
 		@include openClosedRow;
+
+		.indexTable-body-row {
+			&:first-child {
+				&:has(.indexTable-body-row-cellTitle-button.button[aria-expanded='false']) {
+					~ .indexTable-body-row {
+						@include rowsHidden;
+					}
+				}
+			}
+		}
+
+		.indexTable-body-row-cellTitle-button.button {
+			@include groupButton;
+		}
 	}
 }