fix(textfield): value is not vertically centered when hint is not def… (

#763) * fix(textfield): value is not vertically centered when hint is not defined * switch to using a size relative to a variable * added tests for internal input field design * implemented Joel's recommendation * fixed test Co-authored-by: yinon <[email protected]> Co-authored-by: Joel Graham <[email protected]>
Vonage · Apr 25, 2021 · 594470a · 594470a
1 parent 6bfaa60
commit 594470a
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/components/textfield/src/vwc-textfield-input.scss b/components/textfield/src/vwc-textfield-input.scss
@@ -40,10 +40,16 @@
 }
 
 :host(:not([dense])) {
+
+	:not(.mdc-text-field--no-label) {
+		::slotted(#{textfield-variables.$vvd-input-selector}) {
+			padding-block-start: calc(
+				var(#{textfield-variables.$vvd-text-field-size-block}) - 32px
+			);
+		}
+	}
+
 	::slotted(#{textfield-variables.$vvd-input-selector}) {
-		padding-block-start: calc(
-			var(#{textfield-variables.$vvd-text-field-size-block}) - 32px
-		);
 		transition: opacity 100ms;
 	}
 

diff --git a/components/textfield/test/textfield.test.js b/components/textfield/test/textfield.test.js
@@ -306,4 +306,33 @@ describe('textfield', () => {
 		shapeRoundedTestCases(COMPONENT_NAME);
 		shapePillTestCases(COMPONENT_NAME);
 	});
+
+	describe('label', () => {
+		let textFieldEl;
+
+		beforeEach(() => {
+			textFieldEl = document.createElement('vwc-textfield');
+			document.body.appendChild(textFieldEl);
+		});
+
+		it('Should have altering bottom-padding when focused for labeled/unlabeled fields', async function () {
+			const scenarios = [
+				{ labelText: "this is a label", expectedPaddingBlockStart: "16px" },
+				{ labelText: "", expectedPaddingBlockStart: "1px" }
+			];
+
+			return scenarios.reduce((promise, { labelText, expectedPaddingBlockStart }) => {
+				return promise.then(async () => {
+					textFieldEl.setAttribute('label', labelText);
+					textFieldEl.focus();
+					await waitNextTask();
+					expect(window.getComputedStyle(textFieldEl.querySelector('input')).paddingBlockStart).to.equal(expectedPaddingBlockStart);
+				});
+			}, Promise.resolve());
+		});
+
+		afterEach(() => {
+			document.body.removeChild(textFieldEl);
+		});
+	});
 });