@lucca-front/scss 16.2.7-rc.2 → 16.3.0-rc.1

package/src/components/textfield/component.scss

@@ -1,77 +1,129 @@
+@use '@lucca-front/scss/src/components/formLabel/exports' as formLabel;
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
 @mixin component($atRoot: 'without: rule') {
-	vertical-align: middle;
-	width: var(--components-textfield-sizes-default);
+	display: grid;
+	grid-gap: var(--spacings-XXS) 0;
+	grid-template-columns: auto 1fr auto auto;
+	font-size: var(--component-textField-label-fontSize);
+	line-height: var(--component-textField-label-lineHeight);
 
 	@at-root ($atRoot) {
-		.textfield-input {
-			min-width: 0;
-			border: 0;
-			box-shadow: 0 0 0 1px var(--palettes-grey-300);
-			line-height: var(--sizes-M-lineHeight);
-			-webkit-appearance: none;
-			background-color: var(--colors-white-color);
-			border-radius: var(--components-textfield-border-radius);
-			padding: var(--components-textfield-input-padding-vertical) var(--components-textfield-input-padding-horizontal);
-			transition-property: box-shadow, background-color, color;
-			transition-duration: var(--commons-animations-durations-fast);
-
-			&::placeholder {
-				color: var(--palettes-grey-400);
-				transition-property: color;
-				transition-duration: var(--commons-animations-durations-fast);
-				opacity: 1;
-			}
+		.textField-label {
+		  display: contents;
+		}
+
+		.textField-label-prefix {
+			display: flex;
+			align-self: flex-start;
+			color: var(--component-textField-input-prefix);
+			cursor: text;
+			line-height: var(--component-textField-input-lineHeight);
+			grid-column: 1;
+ 			grid-row: 2;
+		}
 
-			&[type='search'] {
-				&::-webkit-search-cancel-button,
-				&::-webkit-search-decoration {
-					appearance: none;
-				}
+		.textField-label-suffix {
+			display: flex;
+			align-self: flex-start;
+			color: var(--component-textField-input-prefix);
+			cursor: text;
+			line-height: var(--component-textField-input-lineHeight);
+			grid-row: 2;
+  		grid-column: 3;
+		}
+
+		.textField-label-prefix-item {
+		  padding: var(--component-textField-input-paddingVertical) var(--spacings-XS);
+
+		  &::selection {
+		    background-color: var(--palettes-primary-200);
+		  }
+
+			&:last-child {
+		    padding-right: 0;
+		  }
+		}
+
+		.textField-label-suffix-item {
+			padding: var(--component-textField-input-paddingVertical) var(--spacings-XS);
+
+			&::selection {
+				background-color: var(--palettes-primary-200);
 			}
+
+			&:first-child {
+		    padding-left: 0;
+		  }
+		}
+
+		.textField-label-input {
+		  grid-column: 1 / span 4;
+		  border: 1px solid var(--component-textField-input-border);
+		  grid-row: 2;
+		  pointer-events: none;
+		  border-radius: calc(var(--commons-borderRadius-M) + 1px);
+		  background-color: var(--component-textField-input-background);
+		  transition-property: border-color;
+		  transition-duration: var(--commons-animations-durations-fast);
 		}
 
-		.textfield-suffix {
-			color: var(--palettes-grey-600);
-			top: calc(var(--components-textfield-suffix-top) + var(--components-textfield-input-padding-vertical));
-			right: var(--components-textfield-input-padding-horizontal);
-			position: absolute;
-			pointer-events: none;
-			line-height: var(--sizes-M-lineHeight);
-			z-index: 1;
+		.textField-action {
+		  display: flex;
+			padding-right: var(--spacings-XS);
+			align-items: center;
+		  grid-row: 2;
+		  grid-column: 4;
+		  color: var(--palettes-grey-600);
 		}
 
-		.textfield-options {
-			box-shadow: var(--commons-boxShadow-M);
-			background-color: var(--colors-white-color);
-			border-radius: var(--commons-borderRadius-M);
-			transition-duration: var(--commons-animations-durations-fast);
-			transition-property: all;
-			list-style: none;
-			overflow: auto;
-			position: absolute;
-			transform-origin: right top;
-			transform: scaleY(0);
-			margin: 3px 0 0;
-			max-height: 15rem;
-			opacity: 0;
-			padding: 0;
-			left: 0;
-			top: 100%;
-			z-index: 999;
-			width: 100%;
+		.textField-input {
+		  grid-column: 2;
+		  grid-row: 2;
+		  border: 0;
+		  outline: none;
+		  padding: var(--component-textField-input-paddingVertical) var(--spacings-XS);
+		  min-width: var(--spacings-M);
+		  font: inherit;
+		  color: var(--component-textField-input-color);
+		  background-color: transparent;
+		  z-index: 1;
+		  line-height: var(--component-textField-input-lineHeight);
+
+		  &::selection {
+		    background-color: var(--palettes-primary-200);
+		  }
+
+		  &::placeholder {
+		    color: var(--component-textField-input-placeholder);
+		    opacity: 1;
+		  }
+
+		  &:hover {
+		    ~ .textField-label {
+					--component-textField-input-border: var(--palettes-grey-400);
+		    }
+		  }
+
+		  &:focus-visible {
+		    ~ .textField-label {
+		      .textField-label-input {
+		        @include a11y.focusVisible;
+		      }
+		    }
+		  }
 		}
 
-		.textfield-options-mark {
-			background-color: transparent;
-			text-decoration: underline;
-			color: inherit;
+		.formLabel {
+			@include formLabel.label;
+			grid-column-start: 1;
+			grid-column-end: -1;
+			grid-row: 1;
 		}
 
-		.textfield-options-entry {
-			transition-duration: var(--commons-animations-durations-fast);
-			transition-property: background-color;
-			padding: var(--spacings-XS) var(--spacings-S);
-			cursor: pointer;
+		.inlineMessage {
+			grid-column-start: 1;
+			grid-column-end: -1;
 		}
 	}
 }

package/src/components/textfield/index.scss

@@ -1,402 +1,32 @@
 @use 'exports' as *;
 
-.textfield {
+.textField {
 	@include vars;
 	@include component;
 
-	.textfield-input {
-		&:is([disabled], .is-disabled, .disabled, [readonly], .is-readonly, .readonly) {
-			@include inputDisabled;
-		}
-	}
-
-	&:is(.is-open, .open) {
-		@include open;
-	}
-
-	&.mod-password {
-		@include password;
-
-		.textfield-suffix-action {
-			&:is([aria-pressed='true']) {
-				@include passwordActionPressed;
-			}
-
-			&:is([aria-pressed='false']) {
-				@include passwordActionNotPressed;
-			}
-		}
-	}
-
-	&.mod-search,
-	&.mod-autocomplete {
-		@include search;
-
-		&.mod-clearable {
-			@include searchClearable;
-		}
-
-		&.mod-S {
-			@include searchS;
-
-			&.mod-clearable {
-				@include searchClearableS;
-			}
-		}
-
-		&.mod-XS {
-			@include searchXS;
-
-			&.mod-clearable {
-				@include searchClearableXS;
-			}
-		}
-	}
-
-	&.mod-clearable {
-		@include clearable;
-
-		&.mod-S {
-			@include clearableS;
-		}
-
-		&.mod-XS {
-			@include clearableXS;
-		}
-	}
-
-	&.mod-withSuffix {
-		@include suffix;
-	}
-
-	&.mod-noLabel {
-		@include noLabel;
-
-		&.mod-XS {
-			@include noLabelXS;
-		}
-	}
-
-	&.mod-multiline {
-		@include multiline;
-
-		&.mod-S {
-			@include multilineS;
-		}
-	}
-
-	&.mod-invert {
-		@include invert;
-	}
-
-	&.mod-radio {
-		@include radio;
-	}
-
-	&.mod-filter {
-		@include filter;
-
-		&:is(:hover) {
-			@include filterHover;
-		}
-	}
-
 	&.mod-S {
 		@include S;
-
-		&.textfield-input {
-			&.mod-icon {
-				@include SInputIcon;
-			}
-		}
 	}
 
 	&.mod-XS {
 		@include XS;
-
-		&.textfield-input {
-			&.mod-icon {
-				@include XSInputIcon;
-			}
-		}
-	}
-
-	&.mod-shortest {
-		@include size('shortest');
-	}
-
-	&.mod-shorter {
-		@include size('shorter');
-	}
-
-	&.mod-short {
-		@include size('short');
-	}
-
-	&.mod-default {
-		@include size('default');
-	}
-
-	&.mod-long {
-		@include size('long');
-	}
-
-	&.mod-longer {
-		@include size('longer');
-	}
-
-	&.mod-longest {
-		@include size('longest');
-	}
-
-	&.mod-compact {
-		@include compact;
-
-		&.mod-multiline {
-			@include compactMultiline;
-		}
-
-		&.mod-shortest {
-			@include compactSize('shortest');
-		}
-
-		&.mod-shorter {
-			@include compactSize('shorter');
-		}
-
-		&.mod-short {
-			@include compactSize('short');
-		}
-
-		&.mod-default {
-			@include compactSize('default');
-		}
-
-		&.mod-long {
-			@include compactSize('long');
-		}
-
-		&.mod-longer {
-			@include compactSize('longer');
-		}
-
-		&.mod-longest {
-			@include compactSize('longest');
-		}
-	}
-
-	&.mod-material {
-		@include material;
-
-		&.mod-search {
-			&.mod-block {
-				&.mod-clearable {
-					@include materialSearchBlockClearableInput;
-				}
-			}
-		}
-
-		.textfield-input {
-			&:is(:focus, .is-focused, .focused) {
-				@include materialInputFocus;
-			}
-
-			&:is(.is-filled, .filled) {
-				@include materialInputFilled;
-			}
-
-			&:is([disabled], .is-disabled, .disabled, [readonly], .is-readonly, .readonly) {
-				@include materialInputDisabled;
-			}
-
-			&:is(.is-invalid, .invalid, .is-error, .error) {
-				@include materialInputState('error');
-			}
-
-			&:is(.is-warning, .warning) {
-				@include materialInputState('warning');
-			}
-
-			&:is(.is-success, .success) {
-				@include materialInputState('success');
-			}
-		}
-
-		&.mod-S {
-			@include materialS;
-		}
-
-		&.mod-withSuffix {
-			@include materialSuffix;
-		}
-
-		&.mod-noLabel {
-			@include materialNoLabel;
-		}
-
-		&.mod-search,
-		&.mod-autocomplete {
-			@include materialSearch;
-		}
-
-		&.mod-radio {
-			@include materialRadio;
-		}
-
-		&:is(.is-loading, .loading) {
-			@include materialLoading;
-		}
-
-		&:is(.is-valid, .valid) {
-			@include materialValid;
-		}
-	}
-}
-
-.textfield-input {
-	&:is(:hover) {
-		@include inputHover;
-	}
-
-	&:is(:focus-visible, .is-focused, .focused) {
-		@include inputFocus;
 	}
 }
 
-.textfield-suffix {
-	&.mod-icon {
-		@include suffixIcon;
+.textField-input {
+	&[aria-invalid='true'] {
+		@include invalid;
 	}
-}
 
-.textfield-options-entry {
-	&:is(:hover, .is-focus, .focus) {
-		@include entryHover;
+	&:disabled {
+		@include disabled;
 	}
-}
 
-.textfield.mod-framed,
-.form.mod-framed .textfield {
-	@include framed;
-
-	&.mod-multiline {
-		@include framedMultiline;
-
-		&.mod-S {
-			@include framedMultilineS;
-		}
+	&:read-only:not(:disabled) {
+		@include readonly;
 	}
 
-	&.mod-search {
-		@include framedSearch;
-	}
-
-	&:is(.is-error, .error) {
-		@include framedState('error');
-
-		&:is(:focus-within, :hover) {
-			@include framedErrorHover;
-		}
-
-		&:is(:hover) {
-			@include framedStateHover('error');
-		}
-
-		&:is(:focus-within) {
-			@include framedStateFocus('error');
-		}
-
-		.textfield-input {
-			&:hover {
-				@include framedStateInputHover('error');
-			}
-
-			&:focus {
-				@include framedStateInputFocus('error');
-			}
-		}
-
-		&.mod-search,
-		&.mod-autocomplete,
-		&.mod-select {
-			@include framedStateSearch('error');
-		}
-	}
-
-	&:is(.is-loading, .loading) {
-		@include framedLoading;
-	}
-
-	&:is(.is-warning, .warning) {
-		@include framedState('warning');
-
-		&:is(:hover) {
-			@include framedStateHover('warning');
-		}
-
-		&:is(:focus-within) {
-			@include framedStateFocus('warning');
-		}
-
-		.textfield-input {
-			&:hover {
-				@include framedStateInputHover('warning');
-			}
-
-			&:focus {
-				@include framedStateInputFocus('warning');
-			}
-		}
-
-		&.mod-search,
-		&.mod-autocomplete,
-		&.mod-select {
-			@include framedStateSearch('warning');
-		}
-	}
-
-	&:is(.is-success, .is-valid, .valid, .success) {
-		@include framedState('success');
-
-		&:is(:hover) {
-			@include framedStateHover('success');
-		}
-
-		&:is(:focus-within) {
-			@include framedStateFocus('success');
-		}
-
-		.textfield-input {
-			&:hover {
-				@include framedStateInputHover('success');
-			}
-
-			&:focus {
-				@include framedStateInputFocus('success');
-			}
-		}
-
-		&.mod-search,
-		&.mod-autocomplete,
-		&.mod-select {
-			@include framedStateSearch('success');
-		}
-	}
-
-	.textfield-input {
-		&:is(:hover) {
-			@include framedInputHover;
-		}
-
-		&:is(:focus) {
-			@include framedInputFocus;
-		}
-
-		&:is(:invalid, .is-invalid, .invalid) {
-			@include framedInputInvalid;
-		}
-
-		&:is(.is-error, .invalid) {
-		}
+	&:is(textarea) {
+		@include textarea;
 	}
 }