Merge pull request #401 from material-components/m3/form

M3 Text field

.stylelintrc.json

@@ -9,6 +9,7 @@
     "number-leading-zero": null,
     "selector-class-pattern": null,
     "selector-type-no-unknown": [ true, { "ignore": ["custom-elements"] } ],
-    "at-rule-no-unknown": [ true, { "ignoreAtRules": ["mixin"] } ]
+    "at-rule-no-unknown": [ true, { "ignoreAtRules": ["mixin"] } ],
+    "function-calc-no-invalid": null
   }
 }

package.json

@@ -34,7 +34,6 @@
     "@material/dialog": "10.0.0",
     "@material/drawer": "5.1.0",
     "@material/floating-label": "5.1.0",
-    "@material/form-field": "5.1.0",
     "@material/icon-button": "5.1.0",
     "@material/layout-grid": "5.1.0",
     "@material/list": "5.1.0",

plugin/assets/css/src/components/floating-label.css

@@ -0,0 +1,114 @@
+/*
+ *  Copyright 2022 Google LLC
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+
+.mdc-floating-label {
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased;
+	font-family: var(--md-sys-typescale-label-large-font, Roboto, sans-serif);
+	font-size: var(--md-sys-typescale-label-large-size, 1rem);
+	font-weight: var(--md-sys-typescale-label-large-weight, 400);
+	letter-spacing: var(--md-sys-typescale-label-large-tracking, 0.009375em);
+	text-decoration: inherit;
+	position: absolute;
+	left: 0;
+	-webkit-transform-origin: left top;
+	transform-origin: left top;
+	text-align: left;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	cursor: text;
+	overflow: hidden;
+	will-change: transform;
+	transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+[dir="rtl"] .mdc-floating-label,
+.mdc-floating-label[dir="rtl"] {
+	right: 0;
+	left: auto;
+	-webkit-transform-origin: right top;
+	transform-origin: right top;
+	text-align: right;
+}
+
+.mdc-floating-label--float-above {
+	cursor: auto;
+}
+
+.mdc-floating-label--float-above {
+	-webkit-transform: translateY(-106%) scale(0.75);
+	transform: translateY(-106%) scale(0.75);
+}
+
+.mdc-floating-label--shake {
+	-webkit-animation: mdc-floating-label-shake-float-above-standard 250ms 1;
+	animation: mdc-floating-label-shake-float-above-standard 250ms 1;
+}
+
+@-webkit-keyframes mdc-floating-label-shake-float-above-standard {
+
+	0% {
+		-webkit-transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
+		transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
+	}
+
+	33% {
+		-webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
+		animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
+		-webkit-transform: translateX(calc(4% - 0%)) translateY(-106%) scale(0.75);
+		transform: translateX(calc(4% - 0%)) translateY(-106%) scale(0.75);
+	}
+
+	66% {
+		-webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
+		animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
+		-webkit-transform: translateX(calc(-4% - 0%)) translateY(-106%) scale(0.75);
+		transform: translateX(calc(-4% - 0%)) translateY(-106%) scale(0.75);
+	}
+
+	100% {
+		-webkit-transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
+		transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
+	}
+}
+
+@keyframes mdc-floating-label-shake-float-above-standard {
+
+	0% {
+		-webkit-transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
+		transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
+	}
+
+	33% {
+		-webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
+		animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
+		-webkit-transform: translateX(calc(4% - 0%)) translateY(-106%) scale(0.75);
+		transform: translateX(calc(4% - 0%)) translateY(-106%) scale(0.75);
+	}
+
+	66% {
+		-webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
+		animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
+		-webkit-transform: translateX(calc(-4% - 0%)) translateY(-106%) scale(0.75);
+		transform: translateX(calc(-4% - 0%)) translateY(-106%) scale(0.75);
+	}
+
+	100% {
+		-webkit-transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
+		transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
+	}
+}

plugin/assets/css/src/components/form-field.css

@@ -0,0 +1,68 @@
+/*
+ *  Copyright 2022 Google LLC
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+.mdc-form-field {
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased;
+	font-family: var(--md-sys-typescale-body-medium-font, Roboto, sans-serif);
+	font-size: var(--md-sys-typescale-body-medium-size, 0.875rem);
+	line-height: var(--md-sys-typescale-body-medium-line-height);
+	font-weight: var(--md-sys-typescale-body-medium-weight, 400);
+	letter-spacing: var(--md-sys-typescale-body-medium-tracking, 0.0178571429em);
+	color: var(--md-sys-color-on-surface-variant, rgba(0, 0, 0, 0.87));
+	display: inline-flex;
+	align-items: center;
+	vertical-align: middle;
+}
+
+.mdc-form-field > label {
+	margin-left: 0;
+	margin-right: auto;
+	padding-left: 4px;
+	padding-right: 0;
+	order: 0;
+}
+
+[dir="rtl"] .mdc-form-field > label,
+.mdc-form-field > label[dir="rtl"] {
+	margin-left: auto;
+	margin-right: 0;
+}
+
+[dir="rtl"] .mdc-form-field > label,
+.mdc-form-field > label[dir="rtl"] {
+	padding-left: 0;
+	padding-right: 4px;
+}
+
+.mdc-form-field--align-end > label {
+	margin-left: auto;
+	margin-right: 0;
+	padding-left: 0;
+	padding-right: 4px;
+	order: -1;
+}
+
+[dir="rtl"] .mdc-form-field--align-end > label,
+.mdc-form-field--align-end > label[dir="rtl"] {
+	margin-left: 0;
+	margin-right: auto;
+}
+
+[dir="rtl"] .mdc-form-field--align-end > label,
+.mdc-form-field--align-end > label[dir="rtl"] {
+	padding-left: 4px;
+	padding-right: 0;
+}

plugin/assets/css/src/components/material.css

@@ -194,34 +194,6 @@
 	color: var(--md-sys-color-on-surface, #000);
 }
 
-.mdc-text-field:not(.mdc-text-field--disabled) {
-	background-color: var(--mdc-theme-surface-mix-4, #f5f5f5);
-
-	&.mdc-text-field--outlined {
-		background-color: transparent;
-	}
-
-	& .mdc-text-field__input {
-		color: var(--md-sys-color-on-surface, #000);
-	}
-
-	& .mdc-floating-label,
-	& + .mdc-text-field-helper-line .mdc-text-field-helper-text,
-	& .mdc-text-field-character-counter,
-	& + .mdc-text-field-helper-line .mdc-text-field-character-counter {
-		color: var(--md-sys-color-on-surface, #000);
-	}
-
-	.mdc-text-field__icon--leading,
-	.mdc-text-field__icon--trailing {
-		color: var(--md-sys-color-on-surface, #000);
-	}
-}
-
-.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
-	color: var(--md-sys-color-primary);
-}
-
 .mdc-select:not(.mdc-select--disabled) {
 	background-color: var(--mdc-theme-surface-mix-4, #f5f5f5);