@lucca-front/scss 20.3.3-rc.6 → 21.0.0-rc.1

package/src/components/multiSelect/mods.scss

@@ -1,7 +1,5 @@
 @use '@lucca-front/icons/src/icon/exports' as icon;
-
 @use '@lucca-front/scss/src/commons/utils/a11y';
-
 @use '@lucca-front/scss/src/components/clear/exports' as clear;
 @use '@lucca-front/scss/src/components/chip/exports' as chip;
 @use '@lucca-front/scss/src/components/numericBadge/exports' as numericBadge;
@@ -36,32 +34,6 @@
 			@include chip.S;
 		}
 	}
-
-	.multipleSelect-displayer-numericBadge {
-		// :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
-		&.numericBadge,
-		&:not(.numericBadge) {
-			@include numericBadge.S;
-		}
-	}
-}
-
-@mixin displayerFilter {
-	display: grid;
-
-	.multipleSelect-displayer-filter {
-		grid-column-start: 1;
-		grid-row-start: 1;
-		display: flex;
-		gap: var(--pr-t-spacings-50);
-		min-inline-size: 0;
-	}
-
-	.multipleSelect-displayer-search {
-		grid-column-start: 1;
-		grid-row-start: 1;
-	}
 }
 
 @mixin filterPill {

package/src/components/multiSelect/states.scss

@@ -35,22 +35,6 @@
 	}
 }
 
-@mixin displayerFilterFilled {
-	.multipleSelect-displayer-search {
-		opacity: 0;
-	}
-}
-
-@mixin displayerFilterExpanded {
-	.multipleSelect-displayer-filter {
-		display: none;
-	}
-
-	.multipleSelect-displayer-search {
-		opacity: 1;
-	}
-}
-
 @mixin selected {
 	.multipleSelect-displayer-search {
 		&[readonly],

package/src/components/plgPush/component.scss

@@ -59,5 +59,9 @@
 			gap: var(--pr-t-spacings-25);
 			padding: var(--pr-t-spacings-0);
 		}
+
+		.plgPush-close {
+			margin-inline-start: auto;
+		}
 	}
 }

package/src/components/richText/component.scss

@@ -102,8 +102,12 @@
 			border-block-start: 0;
 		}
 
-		.richTextField-toolbar-chips-item {
+		.richTextField-toolbar-chips-chip {
 			border: 0;
+
+			&:focus-visible {
+				@include a11y.focusVisible;
+			}
 		}
 
 		.richTextField-content {
@@ -119,11 +123,6 @@
 			&:focus-visible {
 				@include a11y.focusVisible;
 			}
-
-			&.is-disabled {
-				--components-chip-backgroundColor: var(--palettes-neutral-200);
-				--components-chip-color: var(--pr-t-color-input-text-disabled);
-			}
 		}
 
 		.richTextField-content-placeholder {

package/src/components/richText/index.scss

@@ -26,6 +26,10 @@
 
 		&.is-disabled {
 			@include disabled;
+
+			.richTextField-content-chip {
+				@include chipDisabled;
+			}
 		}
 
 		&.mod-autoResize {

package/src/components/richText/states.scss

@@ -16,6 +16,11 @@
 	--components-richTextField-borderColor: var(--pr-t-color-input-border);
 }
 
+@mixin chipDisabled {
+	--components-chip-backgroundColor: var(--palettes-neutral-200);
+	--components-chip-color: var(--pr-t-color-text-subtle);
+}
+
 @mixin error {
 	--components-richTextField-borderColor: var(--pr-t-color-input-border-critical);
 	--components-richTextField-backgroundColor: var(--pr-t-color-input-background-critical);

package/src/components/scrollBox/component.scss

@@ -16,6 +16,10 @@
 	margin-block: var(--components-scrollBox-marginBlock);
 	border-radius: var(--pr-t-border-radius-default);
 
+	> * {
+		flex-shrink: 0;
+	}
+
 	&:focus-visible {
 		@include a11y.focusVisible($offset: 0);
 	}

package/src/components/simpleSelect/component.scss

@@ -7,7 +7,7 @@
 	@at-root ($atRoot) {
 		.simpleSelect-field {
 			display: grid;
-			grid-template-columns: 1fr auto auto;
+			grid-template-columns: auto 1fr auto auto;
 			align-items: center;
 			box-shadow: 0 0 0 1px var(--components-simpleSelect-border-color);
 			background-color: var(--components-simpleSelect-background);
@@ -22,8 +22,15 @@
 			}
 		}
 
+		.simpleSelect-field-prefix {
+			&:not(:empty) {
+				display: flex;
+				margin-inline-end: var(--pr-t-spacings-50);
+			}
+		}
+
 		.simpleSelect-field-input {
-			grid-column-start: 1;
+			grid-column-start: 2;
 			grid-row-start: 1;
 			font: var(--components-simpleSelect-font);
 			padding: 0;
@@ -42,7 +49,7 @@
 		}
 
 		.simpleSelect-field-value {
-			grid-column-start: 1;
+			grid-column-start: 2;
 			grid-row-start: 1;
 			inline-size: 100%;
 			font: var(--components-simpleSelect-font);

package/src/components/sortableList/component.scss

@@ -1,5 +1,8 @@
 @use '@lucca-front/icons/src/commons/utils/icon';
 @use '@lucca-front/scss/src/commons/utils/namespace';
+@use '@lucca-front/scss/src/commons/utils/reset';
+
+@use '@lucca-front/scss/src/components/button/exports' as button;
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	background-color: var(--pr-t-elevation-surface-raised);
@@ -7,6 +10,7 @@
 	border-radius: var(--pr-t-border-radius-default);
 	list-style: none;
 	padding: 0;
+	overflow: hidden;
 
 	@at-root ($atRoot) {
 		.sortableList-item {
@@ -18,7 +22,9 @@
 			position: relative;
 			text-decoration: none;
 			gap: var(--pr-t-spacings-100);
-			padding: var(--components-sortableList-padding);
+
+			// required to overload the cdk padding reset
+			padding: var(--components-sortableList-padding) !important;
 
 			&:last-child {
 				border: 0;
@@ -51,14 +57,27 @@
 		}
 
 		.sortableList-item-handler {
+			&.button {
+				@include button.S;
+				@include button.onlyIcon;
+				@include button.ghost;
+
+				--components-button-padding: var(--pr-t-spacings-50);
+			}
+
 			color: var(--palettes-neutral-600);
 			font-size: var(--components-sortableList-handler-size);
 			cursor: move;
+			inline-size: auto;
+			border-radius: var(--pr-t-border-radius-small);
+			align-self: center;
 
-			&::before {
-				@include icon.generate('drag');
+			&:not(:has(.lucca-icon)) {
+				&::before {
+					@include icon.generate('drag');
 
-				vertical-align: top;
+					vertical-align: top;
+				}
 			}
 		}
 

package/src/components/sortableList/index.scss

@@ -18,5 +18,18 @@
 		&.mod-clickable {
 			@include clickable;
 		}
+
+		&.mod-S {
+			@include S;
+		}
+	}
+}
+
+// drag and drop preview
+:not(.sortableList) {
+	> .sortableList-item {
+			@layer components {
+				@include vars;
+			}
 	}
 }

package/src/components/sortableList/mods.scss

@@ -1,3 +1,5 @@
+@use '@lucca-front/icons/src/icon/exports' as icon;
+
 @mixin clickable {
 	transition-duration: var(--commons-animations-durations-fast);
 	transition-property: background-color;
@@ -18,4 +20,8 @@
 	// Deprecated
 	--components-sortableList-description-fontSize: var(--pr-t-font-body-S-fontSize);
 	--components-sortableList-description-lineHeight: var(--pr-t-font-body-S-lineHeight);
+
+	.lucca-icon {
+		@include icon.S;
+	}
 }

package/src/components/tableFixed/mods.scss

@@ -26,7 +26,7 @@
 		.table-head-row-cell,
 		.table-body-row-cell,
 		.table-foot-row-cell {
-			@include cellFixedWidth;
+			@include cellInlineSize;
 		}
 	}
 
@@ -36,14 +36,14 @@
 				.table-head-row-cell,
 				.table-body-row-cell,
 				.table-foot-row-cell {
-					@include cellFixedWidth;
+					@include cellInlineSize;
 				}
 			}
 		}
 	}
 }
 
-@mixin cellFixedWidth {
+@mixin cellInlineSize {
 	min-inline-size: var(--cell-width, auto);
 	inline-size: var(--cell-width, auto);
 }

package/src/components/tableOfContent/component.scss

@@ -12,7 +12,8 @@
 			@include reset.list;
 		}
 
-		.tableOfContent-list-item-action {
+		// Second selector to get rid of tableOfContent-list-item-action on angular component
+		.tableOfContent-list-item-action, .tableOfContent-list-item > a {
 			@include reset.button;
 
 			border-radius: var(--pr-t-border-radius-default);

package/src/components/tableOfContent/index.scss

@@ -7,7 +7,8 @@
 	}
 }
 
-.tableOfContent-list-item-action {
+// Second selector to get rid of tableOfContent-list-item-action on angular component
+.tableOfContent-list-item-action, .tableOfContent-list-item > a  {
 	@layer mods {
 		&:not(.disabled, .is-disabled, [disabled]) {
 			&:is(:hover) {

package/src/components/textfields/index.scss

@@ -391,15 +391,15 @@
 
 		.textfield-input {
 			&:is(:hover) {
-				@include framedInputHover;
+				@include inputFramedHover;
 			}
 
 			&:is(:focus) {
-				@include framedInputFocus;
+				@include inputFramedFocus;
 			}
 
 			&:is(:invalid, .is-invalid, .invalid) {
-				@include framedInputInvalid;
+				@include inputFramedInvalid;
 			}
 		}
 	}

package/src/components/textfields/states.scss

@@ -40,7 +40,7 @@
 	}
 }
 
-@mixin framedInputHover {
+@mixin inputFramedHover {
 	&:not(:disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
 		position: relative;
 		z-index: 1;
@@ -49,7 +49,7 @@
 	}
 }
 
-@mixin framedInputFocus {
+@mixin inputFramedFocus {
 	&:not(:disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
 		position: relative;
 		z-index: 4;
@@ -60,7 +60,7 @@
 	}
 }
 
-@mixin framedInputInvalid {
+@mixin inputFramedInvalid {
 	~ .textfield-label {
 		color: var(--palettes-error-700);
 	}