diff --git a/components/button/src/vwc-button.scss b/components/button/src/vwc-button.scss index f77c0aab9f..195346b046 100644 --- 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 index 1f5e9610b6..b6321bf05b 100644 --- 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`) ); - 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` + ) + ); + 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 index 124610ba60..f4acf6b3e6 100644 --- 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 index 2efa9aea5d..6fee3a79a2 100644 --- 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`` diff --git a/components/icon/src/vwc-icon.scss b/components/icon/src/vwc-icon.scss index b90a387f06..a2b9c65a8e 100644 --- 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 index 02c59f4c2a..edddbc0f13 100644 --- 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 index d627bb5918..6d818b896d 100644 --- 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 index 8e0721fd23..9860480e56 100644 --- 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">` + ) + ); + 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">` + ) + ); + 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 index 2fd57b6100..490666be12 100644 --- 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= -invariant@2.2.2: - 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" - -invariant@2.2.4, 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 @@ lodash.uniq@4.5.0, 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"