Clears and chips icon alignement fix (#2310)

* feat(front) : use a single svg for chip-kill to prevent alignments issues * feat(front) : use a single svg for clear icon to prevent alignments issues * feat(front) : add mask ; remove unused icon * feat(front) : PR feedback * css var displayed in vars * fix lint issues * fix lint * fix stories * remove lu-icon on selects --------- Co-authored-by: Jérémie Biron <[email protected]>
LuccaSA · Nov 9, 2023 · 494219f · 494219f
1 parent 296b50f
commit 494219f
Show file tree

Hide file tree

Showing 19 changed files with 418 additions and 226 deletions.
diff --git a/packages/ng/input/clearer/clearer.component.html b/packages/ng/input/clearer/clearer.component.html
@@ -1,4 +1,3 @@
 <a href="#" role="button" class="clear" (click)="onClick($event)">
-	<span aria-hidden="true" class="lucca-icon icon-signClose"></span>
 	<span class="u-mask">Clear</span>
 </a>
diff --git a/packages/ng/multi-select/input/select-input.component.html b/packages/ng/multi-select/input/select-input.component.html
@@ -6,6 +6,6 @@
 </div>
 <div class="lu-select-suffix">
 	<a *ngIf="hasValue && clearable" role="button" class="clear" (click)="clearValue($event)">
-		<lu-icon icon="thinCross" [alt]="intl.clear"></lu-icon>
+		<span class="u-mask">{{intl.clear}}</span>
 	</a>
 </div>
diff --git a/packages/ng/simple-select/input/select-input.component.html b/packages/ng/simple-select/input/select-input.component.html
@@ -5,5 +5,5 @@
 	</div>
 </div>
 <a *ngIf="clearable && hasValue" class="clear lu-select-clearer" role="button" (click)="clearValue($event)">
-	<lu-icon icon="signClose" [alt]="intl.clear"></lu-icon>
+	<span class="u-mask">{{intl.clear}}</span>
 </a>
diff --git a/packages/scss/src/components/chip/component.scss b/packages/scss/src/components/chip/component.scss
@@ -1,5 +1,6 @@
 @use '@lucca-front/icons/src/commons/utils/icon';
 @use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/commons/utils/reset';
 
 @mixin component($atRoot: 'without: rule') {
 	background-color: var(--palettes-700, var(--palettes-grey-200));
@@ -17,30 +18,38 @@
 
 	@at-root ($atRoot) {
 		.chip-kill {
-			background-color: var(--palettes-text, var(--palettes-grey-700));
-			color: var(--palettes-700, var(--colors-white-color));
-			border: 0;
-			border-radius: 50%;
-			height: 0.75rem;
-			width: 0.75rem;
-			transition-duration: var(--commons-animations-durations-fast);
-			transition-property: background-color;
-			padding: 0;
-			overflow: hidden;
+			@include reset.button;
+			display: grid;
+			grid-template-columns: 1fr;
+			grid-template-rows: 1fr;
+			grid-template-areas: 'main';
+			align-items: normal;
+			width: var(--components-chip-kill-size);
+			height: var(--components-chip-kill-size);
+			border-radius: 50% !important;
 			cursor: pointer;
 
+			&::before,
+			&::after {
+				content: '';
+				grid-area: main;
+			}
+
 			&::before {
-				@include icon.generate('sign_close');
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				line-height: 0.75rem;
-				font-size: 0.75rem;
+				border-radius: 50%;
+				background-color: var(--components-chip-kill-disk-color, var(--palettes-grey-700));
+			}
+
+			&::after {
+				mask-image: var(--components-chip-kill-background-image);
+				mask-size: var(--components-chip-kill-size);
+				mask-repeat: no-repeat;
+				background-color: var(--components-chip-kill-cross-color, var(--colors-white-color));
 			}
 
 			&:hover {
-				background-color: var(--palettes-grey-600);
-				color: var(--palettes-700, var(--colors-white-color));
+				--components-chip-kill-disk-color: var(--palettes-grey-600);
+				--components-chip-kill-cross-color: var(--palettes-700, var(--colors-white-color));
 			}
 
 			&:focus-visible {
@@ -49,7 +58,7 @@
 			}
 
 			&:active {
-				background-color: var(--palettes-50, var(--palettes-grey-800));
+				--components-chip-kill-disk-color: var(--palettes-50, var(--palettes-grey-800));
 			}
 		}
 	}

diff --git a/packages/scss/src/components/chip/mods.scss b/packages/scss/src/components/chip/mods.scss
@@ -1,16 +1,22 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
 
 @mixin primary {
-  .chip-kill {
+	.chip-kill {
+		--components-chip-kill-cross-color: var(--palettes-primary-700);
+		--components-chip-kill-disk-color: var(--colors-white-color);
+
+		&:hover {
+			--components-chip-kill-disk-color: var(--palettes-primary-50);
+		}
 
-    &:hover {
-      background-color: var(--palettes-primary-50);
-    }
+		&:active {
+			--components-chip-kill-disk-color: var(--palettes-primary-50);
+		}
 
-    &:focus-visible {
-      @include a11y.focusVisible($color: var(--colors-white-color));
-    }
-  }
+		&:focus-visible {
+			@include a11y.focusVisible($color: var(--colors-white-color));
+		}
+	}
 }
 
 @mixin unkillable {

diff --git a/packages/scss/src/components/chip/vars.scss b/packages/scss/src/components/chip/vars.scss
@@ -1,2 +1,4 @@
 @mixin vars {
+	--components-chip-kill-size: 0.75rem;
+	--components-chip-kill-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E");
 }
diff --git a/packages/scss/src/components/clear/component.scss b/packages/scss/src/components/clear/component.scss
@@ -3,30 +3,50 @@
 @use '@lucca-front/icons/src/icon/exports' as icon;
 
 @mixin component {
-  @include reset.button;
-  @include icon.XS;
-
-  align-items: center;
-  background-color: var(--palettes-grey-700);
-  border-radius: 50% !important;
-  color: var(--palettes-grey-text);
-  display: flex;
-  height: var(--components-clear-size);
-  justify-content: center;
-  text-decoration: none;
-  width: var(--components-clear-size);
-
-
-  &:hover {
-    background-color: var(--palettes-grey-600);
-    color: var(--palettes-grey-text);
-  }
-
-  &:focus-visible {
-    @include a11y.focusVisible();
-  }
-
-  &:active {
-    background-color: var(--palettes-grey-800);
-  }
+	@include reset.button;
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: 1fr;
+	grid-template-areas: 'main';
+	align-items: normal;
+	flex-shrink: 0;
+	width: var(--components-clear-size);
+	height: var(--components-clear-size);
+	border-radius: 50%;
+
+	&::before,
+	&::after {
+		content: '';
+		grid-area: main;
+	}
+
+	&::before {
+		border-radius: 50%;
+		background-color: var(--components-clear-background);
+	}
+
+	&::after {
+		mask-image: var(--components-clear-background-image);
+		mask-size: var(--components-clear-size);
+		mask-repeat: no-repeat;
+		background-color: var(--components-clear-cross-color);
+	}
+
+	&:hover {
+		--components-clear-cross-color: var(--palettes-grey-text);
+		--components-clear-background: var(--palettes-grey-600);
+	}
+
+	&:focus-visible {
+		@include a11y.focusVisible($borderRadius: 50%);
+	}
+
+	&:active {
+		--components-clear-background: var(--palettes-grey-800);
+	}
+
+	//to prevent breaking change. lucca-icon is no longer needed.
+	.lucca-icon {
+		display: none;
+	}
 }
diff --git a/packages/scss/src/components/clear/mods.scss b/packages/scss/src/components/clear/mods.scss
@@ -1,17 +1,17 @@
 @mixin primary {
-  background-color: var(--colors-white-color);
-  color: var(--palettes-primary-700);
+	--components-clear-cross-color: var(--palettes-primary-700);
+	--components-clear-background: var(--colors-white-color);
 
-  &:hover {
-    background-color: var(--palettes-primary-50);
-  }
+	&:hover {
+		--components-clear-background: var(--palettes-primary-50);
+	}
 
-  &:active {
-    background-color: var(--palettes-primary-50);
-  }
+	&:active {
+		--components-clear-background: var(--palettes-primary-50);
+	}
 }
 
 @mixin S {
-  --components-clear-size: .75rem;
-  --icon-size: .75rem;
+	--components-clear-size: 0.75rem;
+	--icon-size: 0.75rem;
 }
diff --git a/packages/scss/src/components/clear/states.scss b/packages/scss/src/components/clear/states.scss
@@ -1,4 +1,4 @@
 @mixin disabled {
-  background-color: var(--palettes-grey-300);
-  color: var(--palettes-grey-500);
+	--components-clear-cross-color: var(--palettes-grey-500);
+	--components-clear-background: var(--palettes-grey-300);
 }
diff --git a/packages/scss/src/components/clear/vars.scss b/packages/scss/src/components/clear/vars.scss
@@ -1,3 +1,6 @@
 @mixin vars {
-  --components-clear-size: 1rem;
+	--components-clear-size: 1rem;
+	--components-clear-background: var(--palettes-grey-700);
+	--components-clear-cross-color: var(--colors-white-color);
+	--components-clear-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E");
 }