Merge pull request #3313 from LuccaSA/19.0-rc.sync

[19.1] Update RC
LuccaSA · Dec 19, 2024 · 46a8888 · 46a8888
2 parents 0a1c4df + 4d9bc40
commit 46a8888
Show file tree

Hide file tree

Showing 111 changed files with 2,007 additions and 1,525 deletions.
diff --git a/README.md b/README.md
@@ -32,7 +32,6 @@ In your file styles.scss, add imports files and components you want to import to
 @forward '@lucca-front/ng/src/main';
 
 // Import SCSS components
-@forward '@lucca-front/scss/src/components/actionIcon';
 @forward '@lucca-front/scss/src/components/box';
 @forward '@lucca-front/scss/src/components/breadcrumbs';
 @forward '@lucca-front/scss/src/components/button';
@@ -47,7 +46,6 @@ In your file styles.scss, add imports files and components you want to import to
 @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/emptyState';
 @forward '@lucca-front/scss/src/components/errorPage';
 @forward '@lucca-front/scss/src/components/field';
 @forward '@lucca-front/scss/src/components/file';
@@ -56,7 +54,6 @@ In your file styles.scss, add imports files and components you want to import to
 @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/grid';
 @forward '@lucca-front/scss/src/components/header';
 @forward '@lucca-front/scss/src/components/label';
 @forward '@lucca-front/scss/src/components/layout';

diff --git a/docs/dialog.md b/docs/dialog.md
@@ -1,10 +1,8 @@
-# Documentation Dialog
-
 `LuDialogService` sert à ouvrir des dialog à travers vos applications, avec tous les attributs et la structure nécessaires à une bonne accessibilité.
 
 Il peut être utilisé de deux manières principales: via le service ou via les directives (template-driven)
 
-## Imports et providers
+### Imports et providers
 
 Afin de pouvoir utiliser `LuDialogService` , vous devez appeler la fonction `configureLuDialog`  en tant qu’`EnvironmentProvider` , idéalement dans `bootstrapApplication`:
 
@@ -29,7 +27,7 @@ import { provideLuDialog } from '@lucca-front/ng/dialog';
 })
 ```
 
-## Via le service
+### Via le service
 
 Pour ouvrir une dialog via le service, vous pouvez simplement appeler la méthode `LuDialogService.open(options: LuDialogConfig)`:
 
@@ -46,7 +44,7 @@ openDialog(): void {
 
 ```
 
-### Envoyer des données à la dialog
+#### Envoyer des données à la dialog
 
 Le système de dialog propose une approche qui se repose sur le composant qui contient le contenu du dialog, ce qui signifie que tout le typage se passe à un seul endroit: dans le composant.
 
@@ -104,7 +102,7 @@ this.#dialog.open({
 
 ```
 
-### Récupérer le résultat du dialog
+#### Récupérer le résultat du dialog
 
 `LuDialogRef` possède trois observables qui permettent de réagir aux résultats possibles de l'ouverture d'une dialog:
 
@@ -131,7 +129,7 @@ dialogRef.result$.pipe(
 
 ```
 
-## Via le template
+### Via le template
 
 Pour créer et ouvrir une dialog depuis le template, vous pouvez utiliser les directives et composants mises à disposition:
 
@@ -140,7 +138,7 @@ Pour créer et ouvrir une dialog depuis le template, vous pouvez utiliser les di
 - `luDialogClose` pour fermer la dialog via la méthode `close` lors du click sur son élément hôte.
 - `luDialogDismiss` pour fermer la dialog via la méthode `dismiss` lors du click sur son élément hôte.
 
-### Exemple:
+#### Exemple:
 
 ```html
 <!-- luDialogOpen va ouvrir la dialog déclaré dans #dialogTpl au click sur le bouton. Il est possible de passer une config via l'input luDialogConfig -->
@@ -170,12 +168,12 @@ Pour créer et ouvrir une dialog depuis le template, vous pouvez utiliser les di
 
 ```
 
-### Envoyer et reçevoir des données en Template-driven
+#### Envoyer et reçevoir des données en Template-driven
 
 Du fait que tout soit géré depuis le template, vous pouvez totalement ignorer la partie transmission de données car par définition,
 la dialog box a accès à tout ce que le composant expose au template, fonctions et propriétés.
 
-## Utilisation des formulaires
+### Utilisation des formulaires
 
 Dans le cas où vous souhaitez utiliser un formulaire au sein d’une [dialog box](https://prisme.lucca.io/94310e217/p/841b0b-dialogs), il vous suffit de placer la balise `form` avec une classe `dialog-inside-formOptional` autour du contenu de votre dialog, que celle-ci soit template-driven ou non :
 

diff --git a/docs/user-popover.md b/docs/user-popover.md
@@ -1,8 +1,6 @@
-# Documentation User Popover
-
 La UserPopover est un composant qui apparaît au survol d'un élément et qui affiche différentes informations sur l'utilisateur.
 
-## Setup
+### Setup
 
 Afin de pouvoir installer la UserPopover, vous devez appeler la fonction `provideLuUserPopover` dans votre module racine.
 
@@ -18,7 +16,7 @@ import { provideLuUserPopover } from '@lucca-front/ng/user-popover';
 export class AppModule { }
 ```
 
-## Utilisation
+### Utilisation
 
 Pour utiliser la UserPopover, il vous suffit d'utiliser la directive `[luUserPopover]` et de lui fournir un LuUser
 
@@ -40,9 +38,9 @@ import { LuUserPopoverDirective } from '@lucca-front/ng/user-popover';
 export class MyComponent { }
 ```
 
-## Inputs
+### Inputs
 
-### luEmployeeCard
+#### luEmployeeCard
 
 ```html
 <div [luUserPopover]="user"></div>
@@ -51,31 +49,31 @@ export class MyComponent { }
 Permet de fournir un utilisateur à la UserPopover.
 
 
-### luUserPopoverEnterDelay
+#### luUserPopoverEnterDelay
 
 ```html
 <div [luUserPopover]="user" [luUserPopoverEnterDelay]="200"></div>
 ```
 
 Permet de définir le délai avant l'affichage du UserPopover en millisecondes. Par défaut 300
 
-### luUserPopoverLeaveDelay
+#### luUserPopoverLeaveDelay
 
 ```html
 <div [luUserPopover]="user" [luUserPopoverLeaveDelay]="200"></div>
 ```
 
 Permet de définir le délai avant la disparition du UserPopover en millisecondes. Par défaut 100
 
-### luUserPopoverDisabled
+#### luUserPopoverDisabled
 
 ```html	
 <div [luUserPopover]="user" [luUserPopoverDisabled]="true"></div>
 ```
 
 Permet de désactiver le UserPopover
 
-## Feature Flag
+### Feature Flag
 Au moment où sont écrites ces lignes, la UserPopover est branché sur un feature flag de la librairie `Lucca.Core.FeatureFlags`.
 Il est donc nécessaire de l'activer dans votre application pour pouvoir l'utiliser.
 
@@ -95,7 +93,7 @@ export class AppModule { }
 
 Ce feature flag est temporaire et sera supprimé dans une prochaine version.
 
-## Store et Services
+### Store et Services
 Le User popover est fournit avec un service qui gère la récupération des données, mais aussi qui stocke les informations des utilisateurs déjà récupérés, y compris les images.
 Ce service est un singleton et est donc partagé entre tous les UserPopover de l'application.
 

diff --git a/packages/ng/multi-select/panel/panel.component.html b/packages/ng/multi-select/panel/panel.component.html
@@ -65,7 +65,7 @@
 			<div class="loading">{{intl.loading}}</div>
 		</div>
 		<div class="lu-picker-content-add" *ngIf="ctx.shouldDisplayAddOption">
-			<button class="button mod-text mod-icon palette-product" type="button" (click)="selectInput.emitAddOption()">
+			<button class="button mod-text mod-withIcon palette-product" type="button" (click)="selectInput.emitAddOption()">
 				<span aria-hidden="true" class="lucca-icon icon-mathsPlus"></span>
 				<ng-container *luPortal="selectInput.addOptionLabel" />
 			</button>

diff --git a/packages/ng/simple-select/panel/panel.component.html b/packages/ng/simple-select/panel/panel.component.html
@@ -48,7 +48,7 @@
 			<div class="loading">{{intl.loading}}</div>
 		</div>
 		<div class="lu-picker-content-add" *ngIf="ctx.shouldDisplayAddOption">
-			<button class="button mod-text mod-icon palette-product" type="button" (click)="selectInput.emitAddOption()">
+			<button class="button mod-text mod-withIcon palette-product" type="button" (click)="selectInput.emitAddOption()">
 				<span aria-hidden="true" class="lucca-icon icon-mathsPlus"></span>
 				<ng-container *luPortal="selectInput.addOptionLabel" />
 			</button>

diff --git a/packages/ng/skeleton/skeleton-data-table/skeleton-data-table.component.html b/packages/ng/skeleton/skeleton-data-table/skeleton-data-table.component.html
@@ -1,20 +1,21 @@
 @if (dataTableBodyOnly) {
 <ng-container *ngTemplateOutlet="tbody" />
 } @else {
-<table class="dataTable mod-layoutFixed skeleton is-loading" inert="inert">
-	<thead class="dataTable-head">
-		<tr class="dataTable-head-row">
-			@for (col of colsNumber(); track col) {
-			<th class="dataTable-head-row-cell" scope="col">
-				<span class="skeleton-item" [style.--components-skeleton-text-width]="getRandomPercent()"></span>
-			</th>
-			}
-		</tr>
-	</thead>
-	<ng-container *ngTemplateOutlet="tbody" />
-</table>
+<div class="dataTableWrapper">
+	<table class="dataTable mod-layoutFixed skeleton is-loading" inert="inert">
+		<thead class="dataTable-head">
+			<tr class="dataTable-head-row">
+				@for (col of colsNumber(); track col) {
+				<th class="dataTable-head-row-cell" scope="col">
+					<span class="skeleton-item" [style.--components-skeleton-text-width]="getRandomPercent()"></span>
+				</th>
+				}
+			</tr>
+		</thead>
+		<ng-container *ngTemplateOutlet="tbody" />
+	</table>
+</div>
 }
-
 <ng-template #tbody>
 	<tbody class="dataTable-body">
 		@for (row of rowsNumber(); track row) {

diff --git a/packages/ng/skeleton/skeleton-data-table/skeleton-data-table.component.ts b/packages/ng/skeleton/skeleton-data-table/skeleton-data-table.component.ts
@@ -16,7 +16,7 @@ export class SkeletonDataTableComponent {
 	cols = input<number>(5);
 	colsNumber = computed<unknown[]>(() => new Array(this.cols()));
 
-	rows = input<number>(10);
+	rows = input<number>(8);
 	rowsNumber = computed<unknown[]>(() => new Array(this.rows()));
 
 	getRandomPercent = (min: number = 33, max: number = 66): string => `${Math.floor(Math.random() * (max - min) + min).toString()}%`;

diff --git a/packages/ng/skeleton/skeleton-index-table/skeleton-index-table.component.html b/packages/ng/skeleton/skeleton-index-table/skeleton-index-table.component.html
@@ -14,7 +14,6 @@
 	<ng-container *ngTemplateOutlet="tbody" />
 </table>
 }
-
 <ng-template #tbody>
 	<tbody class="indexTable-body">
 		@for (row of rowsNumber(); track row) {

diff --git a/packages/ng/skeleton/skeleton-index-table/skeleton-index-table.component.ts b/packages/ng/skeleton/skeleton-index-table/skeleton-index-table.component.ts
@@ -16,7 +16,7 @@ export class SkeletonIndexTableComponent {
 	cols = input<number>(5);
 	colsNumber = computed<unknown[]>(() => new Array(this.cols()));
 
-	rows = input<number>(10);
+	rows = input<number>(8);
 	rowsNumber = computed<unknown[]>(() => new Array(this.rows()));
 
 	getRandomPercent = (min: number = 33, max: number = 66): string => `${Math.floor(Math.random() * (max - min) + min).toString()}%`;

diff --git a/packages/ng/skeleton/skeleton-table/skeleton-table.component.html b/packages/ng/skeleton/skeleton-table/skeleton-table.component.html
@@ -14,7 +14,6 @@
 	<ng-container *ngTemplateOutlet="tbody" />
 </table>
 }
-
 <ng-template #tbody>
 	<tbody class="table-body">
 		@for (row of rowsNumber(); track row) {

diff --git a/packages/ng/skeleton/skeleton-table/skeleton-table.component.ts b/packages/ng/skeleton/skeleton-table/skeleton-table.component.ts
@@ -16,7 +16,7 @@ export class SkeletonTableComponent {
 	cols = input<number>(5);
 	colsNumber = computed<unknown[]>(() => new Array(this.cols()));
 
-	rows = input<number>(10);
+	rows = input<number>(8);
 	rowsNumber = computed<unknown[]>(() => new Array(this.rows()));
 
 	getRandomPercent = (min: number = 33, max: number = 66): string => `${Math.floor(Math.random() * (max - min) + min).toString()}%`;

diff --git a/packages/scss/src/commons/config.scss b/packages/scss/src/commons/config.scss
@@ -1,6 +1,5 @@
 @use 'sass:list';
 
-$importDeprecatedSpacings: true !default;
 $isNamespaced: false !default;
 
 $fontFamily: 'SourceSans' !default;
@@ -11,7 +10,7 @@ $fontWeights: (
 	'black': 800,
 ) !default;
 
-$fontFamilyCursive: 'Caveat' !default;
+$fontFamilyCursive: false !default;
 $fontWeightsCursive: (
 	'regular': 400,
 	'bold': 700,
@@ -494,17 +493,6 @@ $spacings: (
 	'800': 4rem,
 ) !default;
 
-$spacingsDeprecated: (
-	'0': 0,
-	XXS: 0.25rem,
-	XS: 0.5rem,
-	S: 1rem,
-	M: 1.5rem,
-	L: 2rem,
-	XL: 3rem,
-	XXL: 4rem,
-) !default;
-
 $sizes: (
 	XS: (
 		fontSize: 0.75rem,
@@ -550,22 +538,6 @@ $borderRadius: (
 	'full': 9999px,
 ) !default;
 
-// $elevations are deprecated
-$elevations: (
-	'1':
-		'0 1px 2px color-mix(in srgb, var(--palettes-neutral-900) 6%, transparent), 0px 2px 8px color-mix(in srgb, var(--palettes-neutral-900) 4%, transparent)',
-	'2':
-		'0 0 0 1px color-mix(in srgb, var(--palettes-neutral-900) 3%, transparent), 0 1px 2px color-mix(in srgb, var(--palettes-neutral-900) 2%, transparent), 0 2px 6px color-mix(in srgb, var(--palettes-neutral-900) 5%, transparent)',
-	'3':
-		'0 0 0 1px color-mix(in srgb, var(--palettes-neutral-900) 3%, transparent), 0 2px 4px color-mix(in srgb, var(--palettes-neutral-900) 2%, transparent), 0 4px 10px color-mix(in srgb, var(--palettes-neutral-900) 6%, transparent)',
-	'4':
-		'0 0 0 1px color-mix(in srgb, var(--palettes-neutral-900) 3%, transparent), 0 3px 6px color-mix(in srgb, var(--palettes-neutral-900) 4%, transparent), 0 4px 16px color-mix(in srgb, var(--palettes-neutral-900) 8%, transparent)',
-	'5':
-		'0 0 0 1px color-mix(in srgb, var(--palettes-neutral-900) 3%, transparent), 0 4px 8px color-mix(in srgb, var(--palettes-neutral-900) 6%, transparent), 0 12px 32px color-mix(in srgb, var(--palettes-neutral-900) 8%, transparent)',
-	'6':
-		'0 0 0 1px color-mix(in srgb, var(--palettes-neutral-900) 3%, transparent), -2px 2px 8px color-mix(in srgb, var(--palettes-neutral-900) 4%, transparent), -12px 6px 24px color-mix(in srgb, var(--palettes-neutral-900) 6%, transparent)',
-);
-
 // opacity is deprecated
 $disabled: (
 	'opacity': 0.4,
@@ -595,30 +567,11 @@ $loading: (
 $textLink: (
 	color: var(--palettes-product-700),
 	hover: var(--palettes-product-600),
-	disabled: var(--palettes-neutral-500),
-	// disabled token candidate
+	disabled: var(--palettes-neutral-500), // disabled token candidate
 );
 
 // Deprecated
 
-// $boxShadows are deprecated
-$boxShadows: (
-	'XXS':
-		'0 2px 8px color-mix(in srgb, var(--palettes-neutral-900) 2%, transparent), 0 1px 2px color-mix(in srgb, var(--palettes-neutral-900) 15%, transparent)',
-	'XS':
-		'0 1px 2px color-mix(in srgb, var(--palettes-neutral-900) 6%, transparent), 0 2px 8px color-mix(in srgb, var(--palettes-neutral-900) 4%, transparent)',
-	'S':
-		'0 0 0 1px color-mix(in srgb, var(--palettes-neutral-900) 3%, transparent), 0 1px 2px color-mix(in srgb, var(--palettes-neutral-900) 2%, transparent), 0 2px 6px color-mix(in srgb, var(--palettes-neutral-900) 6%, transparent)',
-	'M':
-		'0 0 0 1px color-mix(in srgb, var(--palettes-neutral-900) 3%, transparent), 0 2px 4px color-mix(in srgb, var(--palettes-neutral-900) 2%, transparent), 0 4px 10px color-mix(in srgb, var(--palettes-neutral-900) 6%, transparent)',
-	'L':
-		'0 0 0 1px color-mix(in srgb, var(--palettes-neutral-900) 3%, transparent), 0 3px 6px color-mix(in srgb, var(--palettes-neutral-900) 4%, transparent), 0 4px 16px color-mix(in srgb, var(--palettes-neutral-900) 8%, transparent)',
-	'XL':
-		'0 0 0 1px color-mix(in srgb, var(--palettes-neutral-900) 3%, transparent), 0 4px 8px color-mix(in srgb, var(--palettes-neutral-900) 6%, transparent), 0 12px 32px color-mix(in srgb, var(--palettes-neutral-900) 8%, transparent)',
-	'XXL':
-		'0 0 0 1px color-mix(in srgb, var(--palettes-neutral-900) 3%, transparent), -2px 2px 8px color-mix(in srgb, var(--palettes-neutral-900) 4%, transparent), -12px 6px 24px color-mix(in srgb, var(--palettes-neutral-900) 6%, transparent)',
-);
-
 // $colors are deprecated
 $colors: (
 	'white': #ffffff,