fix(button/icon): fixing the icon disposition in button (#653)

* fixing the icon disposition in button * remove redundent css, fix renamed icon * fixing the textfield and hardening * fix extended fab icon position Co-authored-by: joelgraham93 <[email protected]>
Vonage · Feb 10, 2021 · 9d15d14 · 9d15d14
1 parent 95a8ecc
commit 9d15d14
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 35 deletions.
diff --git a/components/button/src/vwc-button.scss b/components/button/src/vwc-button.scss
@@ -54,9 +54,6 @@
 		}
 	}
 
-	.vvd-icon {
-		vertical-align: sub;
-	}
 	> .trailing-icon {
 		.vvd-icon {
 			margin-inline-start: $gutter;

diff --git a/components/button/test/button.test.js b/components/button/test/button.test.js
@@ -2,6 +2,7 @@ import '../vwc-button.js';
 import {
 	waitNextTask,
 	textToDomToParent,
+	assertDistancePixels,
 	assertComputedStyle,
 } from '../../../test/test-helpers.js';
 import {
@@ -30,12 +31,11 @@ describe('button', () => {
 	});
 
 	it('should internal contents', async () => {
-		const addedElements = addElement(
+		const [b] = addElement(
 			textToDomToParent(`<${COMPONENT_NAME}>Button Text</${COMPONENT_NAME}>`)
 		);
-		const actualElement = addedElements[0];
 		await waitNextTask();
-		expect(actualElement.shadowRoot.innerHTML).to.equalSnapshot();
+		expect(b.shadowRoot.innerHTML).to.equalSnapshot();
 	});
 
 	describe('Form Association', function () {
@@ -378,4 +378,20 @@ describe('button', () => {
 	describe('button connotation', () => {
 		connotationTestCases(COMPONENT_NAME);
 	});
+
+	describe('button layout', () => {
+		it('should have icon sized and vertically centered', async () => {
+			const [b] = addElement(
+				textToDomToParent(
+					`<${COMPONENT_NAME} icon="info">Button Text</${COMPONENT_NAME}>`
+				)
+			);
+			await waitNextTask();
+			const i = b.shadowRoot.querySelector('.vvd-icon');
+			expect(i).exist;
+			expect(i.offsetHeight).equal(20);
+			expect(i.offsetWidth).equal(20);
+			assertDistancePixels(i, b, 'top', (b.offsetHeight - i.offsetHeight) / 2);
+		});
+	});
 });
diff --git a/components/fab/src/vwc-fab.scss b/components/fab/src/vwc-fab.scss
@@ -9,6 +9,10 @@
 	); // ! this was supposed to be set by MDC
 	letter-spacing: initial;
 	text-transform: initial;
+
+	&--extended .vvd-icon {
+		margin-inline-end: 12px;
+	}
 }
 
 :host([connotation='primary']) .mdc-fab {

diff --git a/components/fab/src/vwc-fab.ts b/components/fab/src/vwc-fab.ts
@@ -30,7 +30,7 @@ export class VWCFab extends MWCFab {
 	protected renderIcon(): TemplateResult {
 		return html`${this.icon
 			? html`<vwc-icon
-					class="mdc-fab__icon"
+					class="vvd-icon"
 					type="${this.icon}"
 					size="${this.mini ? 'small' : 'medium'}"
 			  ></vwc-icon>`

diff --git a/components/icon/src/vwc-icon.scss b/components/icon/src/vwc-icon.scss
@@ -12,9 +12,10 @@ $size-variable-name: --icon-size;
 }
 
 :host {
-	display: inline-flex;
+	display: flex;
 	width: var(#{$size-variable-name});
 	height: var(#{$size-variable-name});
+	flex: 0 0 var(#{$size-variable-name});
 	block-size: var(#{$size-variable-name});
 	fill: currentColor;
 	inline-size: var(#{$size-variable-name});

diff --git a/components/tab-bar/src/vwc-tab.scss b/components/tab-bar/src/vwc-tab.scss
@@ -19,7 +19,6 @@
 .vvd-icon {
 	--icon-size: 20px;
 	color: var(--mdc-tab-text-label-color-default);
-	vertical-align: sub;
 }
 
 :host([active]) {

diff --git a/components/textfield/stories/textfield-variants.stories.js b/components/textfield/stories/textfield-variants.stories.js
@@ -31,7 +31,7 @@ Validation.args = {
 export const Icon = Template.bind({});
 Icon.args = {
 	icon: 'search',
-	iconTrailing: 'cross-bold',
+	iconTrailing: 'cross-small-line',
 	dense: '',
 	shape: 'pill',
 	placeholder: 'Search',

diff --git a/components/textfield/test/textfield.test.js b/components/textfield/test/textfield.test.js
@@ -231,6 +231,42 @@ describe('textfield', () => {
 			const l = e.shadowRoot.querySelector('.mdc-floating-label');
 			assertDistancePixels(e, l, 'left', 16);
 		});
+
+		it('should have leading icon positioned correctly (outlined)', async () => {
+			const [e] = addElement(
+				textToDomToParent(
+					`<${COMPONENT_NAME} label="Label" icon="info"></${COMPONENT_NAME}>`
+				)
+			);
+			await waitNextTask();
+			const i = e.shadowRoot.querySelector('vwc-icon');
+			expect(i).exist;
+			expect(i.offsetHeight).equal(20);
+			expect(i.offsetWidth).equal(20);
+			assertDistancePixels(e, i, 'left', 16);
+			assertDistancePixels(e, i, 'top', (e.offsetHeight - i.offsetHeight) / 2);
+		});
+
+		it('should have leading icon positioned correctly (dense)', async () => {
+			const [e] = addElement(
+				textToDomToParent(
+					`<${COMPONENT_NAME} dense label="Label" icon="info"></${COMPONENT_NAME}>`
+				)
+			);
+			await waitNextTask();
+			const icn = e.shadowRoot.querySelector('vwc-icon');
+			const inp = e.querySelector('input');
+			expect(icn).exist;
+			expect(icn.offsetHeight).equal(20);
+			expect(icn.offsetWidth).equal(20);
+			assertDistancePixels(inp, icn, 'left', 16);
+			assertDistancePixels(
+				inp,
+				icn,
+				'top',
+				(inp.offsetHeight - icn.offsetHeight) / 2
+			);
+		});
 	});
 
 	describe('shape', () => {

diff --git a/yarn.lock b/yarn.lock
@@ -11705,14 +11705,7 @@ intl-list-format@^1.0.3:
   resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/intl-list-format/-/intl-list-format-1.0.3.tgz#f9b3c3d69b4647d63218f49aae5d3816c6e55b5b"
   integrity sha1-+bPD1ptGR9YyGPSarl04FsblW1s=
 
-[email protected]:
-  version "2.2.2"
-  resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
-  integrity sha1-nh9WrArNtr8wMwbzOL47IErmA2A=
-  dependencies:
-    loose-envify "^1.0.0"
-
-[email protected], invariant@^2.2.3, invariant@^2.2.4:
+invariant@^2.2.3, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   integrity sha1-YQ88ksk1nOHbYW5TgAjSP/NRWOY=
@@ -13227,7 +13220,7 @@ [email protected], lodash.uniq@^4.5.0:
   resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.0.0, lodash@^4.0.1, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.4, lodash@^4.2.1, lodash@~4.17.10:
+lodash@^4.0.0, lodash@^4.0.1, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.2.1, lodash@~4.17.10:
   version "4.17.20"
   resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha1-tEqbYpe8tpjxxRo1RaKzs2jVnFI=
@@ -15924,14 +15917,6 @@ qs@~6.5.2:
   resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
   integrity sha1-yzroBuh0BERYTvFUzo7pjUA/PjY=
 
-query-ast@^1.0.3:
-  version "1.0.3"
-  resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/query-ast/-/query-ast-1.0.3.tgz#4a18374950fa80cbf9b03d7b945bbac8bb4250bf"
-  integrity sha1-Shg3SVD6gMv5sD17lFu6yLtCUL8=
-  dependencies:
-    invariant "2.2.2"
-    lodash "^4.17.15"
-
 query-string@^6.13.8:
   version "6.13.8"
   resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/query-string/-/query-string-6.13.8.tgz#8cf231759c85484da3cf05a851810d8e825c1159"
@@ -17120,14 +17105,6 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
-scss-parser@^1.0.4:
-  version "1.0.4"
-  resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/scss-parser/-/scss-parser-1.0.4.tgz#61cdeb28701ffcb497954b9b05729c6d38eb8b9f"
-  integrity sha1-Yc3rKHAf/LSXlUubBXKcbTjri58=
-  dependencies:
-    invariant "2.2.4"
-    lodash "^4.17.4"
-
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"