@lucca-front/scss 21.0.0-rc.3 → 21.0.0-rc.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "21.0.0-rc.3",
+  "version": "21.0.0-rc.4",
   "description": "A Sass framework for Lucca products.",
   "main": "src/main.scss",
   "scripts": {},
@@ -23,6 +23,6 @@
     "normalize.css": "^8.0.0"
   },
   "peerDependencies": {
-    "@lucca-front/icons": "21.0.0-rc.3"
+    "@lucca-front/icons": "21.0.0-rc.4"
   }
 }

package/src/components/dataTable/component.scss

@@ -20,9 +20,10 @@
 			border-radius: var(--components-dataTable-borderRadius);
 			border: 1px solid var(--commons-border-200);
 			overflow: auto;
-			background-color: var(--components-dataTable-cell-background);
 			contain: paint; // Fix overflow on webkit when table has scroll
+			background-color: var(--components-dataTable-cell-background);
 			display: block;
+			min-inline-size: var(--components-dataTable-minInlineSize);
 
 			&:focus-visible {
 				@include a11y.focusVisible;

package/src/components/dataTable/index.scss

@@ -9,6 +9,10 @@
 		&.mod-nested {
 			@include nested;
 		}
+
+		&.mod-noOverflow {
+			@include noOverflow;
+		}
 	}
 }
 

package/src/components/dataTable/mods.scss

@@ -185,3 +185,7 @@
 @mixin nested {
 	--components-dataTable-borderRadius: var(--pr-t-border-radius-default);
 }
+
+@mixin noOverflow {
+	--components-dataTable-minInlineSize: fit-content;
+}

package/src/components/dataTable/vars.scss

@@ -13,4 +13,5 @@
 	--components-dataTable-row-display: table-row;
 	--components-dataTable-expand-rotation: 180deg;
 	--components-dataTable-borderRadius: var(--pr-t-border-radius-structure);
+	--components-dataTable-minInlineSize: none;
 }

package/src/components/pageHeader/index.scss

@@ -35,5 +35,9 @@
 		&:has(.pageHeader-containerOptional) {
 			@include withContainer;
 		}
+
+		&:has(.pageHeader-content-title-back:not(:empty)) {
+			@include withBackButton;
+		}
 	}
 }

package/src/components/pageHeader/mods.scss

@@ -1,3 +1,5 @@
+@use "@lucca-front/scss/src/components/button/exports" as button;
+
 @mixin horizontalNavigation {
 	padding-block-end: 0;
 
@@ -36,3 +38,13 @@
 @mixin wide {
 	--components-pageHeader-padding: var(--pr-t-spacings-300) var(--pr-t-spacings-400);
 }
+
+@mixin withBackButton {
+	.pageHeader-content-title-back {
+		.button {
+			@include button.outlined;
+			@include button.S;
+			@include button.onlyIconS;
+		}
+	}
+}