fix(icon): issue 637 fixing icon misplacement (#638)

* issue 637: fixing icon misplacement

* Update components/icon/src/vwc-icon.scss

Co-authored-by: yinon <yinon@hotmail.com>

* issue 637: icon css fixes

* issue 637: icon css fixes

* fixing lint ignore patterns

* issue 637: CR remarks

* issue #637: CR remarks

* align all instances of vwc-icon with new structure

* update icon-button snapshot

Co-authored-by: yinon <yinon@hotmail.com>
Co-authored-by: joelgraham93 <j.r.g@hotmail.com>

.eslintignore

@@ -5,6 +5,7 @@
 **/*.js
 !**/test/*.js
 !**/stories/**/*.js
+**/stories/**/*autogenerated*.js
 
 **/*.tsbuildinfo
 **/storybook-static

__snapshots__/icon button.md

@@ -8,7 +8,7 @@
  class="mdc-icon-button"
 >
  <vwc-icon
- class="vwc-icon"
+ class="vvd-icon"
  size="small"
  type="bin"
  >

components/button/src/vwc-button.scss

@@ -38,8 +38,7 @@
 
  &:not(.mdc-button--dense) {
  .vvd-icon {
- min-height: 18px;
- min-width: 18px;
+ --icon-size: 20px;
  }
  }
 
@@ -65,6 +64,10 @@
 
  .mdc-button {
  height: 32px;
+
+ .vvd-icon {
+ --icon-size: 16px;
+ }
  }
 }
 
@@ -75,8 +78,7 @@
  height: 48px;
 
  .vvd-icon {
- min-height: 20px;
- min-width: 20px;
+ --icon-size: 24px;
  }
 
  > span.trailing-icon {

components/icon-button/src/vwc-icon-button.scss

@@ -20,10 +20,8 @@
  overflow: hidden;
  }
 
- .vwc-icon {
- --size: 20px;
- height: var(--size);
- width: var(--size);
+ .vvd-icon {
+ --icon-size: 20px;
  }
 }
 
@@ -58,16 +56,16 @@
 :host([dense]) {
  --mdc-icon-button-size: 32px;
 
- .vwc-icon {
- --size: 16px;
+ .vvd-icon {
+ --icon-size: 16px;
  }
 }
 
 :host([enlarged]) {
  --mdc-icon-button-size: 48px;
 
- .vwc-icon {
- --size: 24px;
+ .vvd-icon {
+ --icon-size: 24px;
  }
 }
 

components/icon-button/src/vwc-icon-button.ts

@@ -83,7 +83,7 @@ export class VWCIconButton extends MWCIconButton {
 
  protected renderIcon(): TemplateResult {
  return html`<vwc-icon
- class="vwc-icon"
+ class="vvd-icon"
  size="small"
  type="${this.icon}"
  ></vwc-icon>`;

components/icon/src/vwc-icon.scss

@@ -1,6 +1,25 @@
-:host { display: inline-block; fill: currentColor; width: 24px; height: 24px; }
-:host > slot { margin: 0; padding: 0; display: block; position: relative; width: 100%; height: 100%; }
-:host > slot > svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
-:host([size=small]) { width: 16px; height: 16px; }
-:host([size=medium]) { width: 24px; height: 24px; }
-:host([size=large]) { width: 32px; height: 32px; }
+$size-variable-name: --icon-size;
+
+:host([size=small]) {
+ #{$size-variable-name}: 16px;
+}
+:host, :host([size=medium]) {
+ #{$size-variable-name}: 24px;
+}
+:host([size=large]) {
+ #{$size-variable-name}: 32px;
+}
+
+:host {
+ display: inline-flex;
+ fill: currentColor;
+ width: var(#{$size-variable-name});
+ height: var(#{$size-variable-name});
+ inline-size: var(#{$size-variable-name});
+ block-size: var(#{$size-variable-name});
+
+ svg {
+ flex-grow: 1;
+ align-items: stretch;
+ }
+}

components/icon/test/icon.test.js

@@ -1,4 +1,11 @@
 import '@vonage/vwc-icon';
+import {
+ waitInterval,
+ isolatedElementsCreation,
+ textToDomToParent,
+ assertDistancePixels,
+ assertComputedStyle,
+} from '../../../test/test-helpers.js';
 
 const LOAD_TIME = 400;
 const sleep = (ms) => new Promise((res) => setTimeout(res, ms));
@@ -43,4 +50,35 @@ describe('vwc-icon', () => {
  });
  });
  });
+
+ describe('icon layout', () => {
+ const addElement = isolatedElementsCreation();
+ const ICON_SIZES = {
+ small: '16px',
+ medium: '24px',
+ large: '32px',
+ };
+
+ for (const [sizeName, sizeValue] of Object.entries(ICON_SIZES)) {
+ it(`'${sizeName}' icon should be sized property`, async () => {
+ const [e] = addElement(
+ textToDomToParent(`<vwc-icon type="home" size="${sizeName}"></vwc-icon>`)
+ );
+ await waitInterval(LOAD_TIME);
+ const svg = e.shadowRoot.querySelector('svg');
+ assertComputedStyle(e, { width: sizeValue, height: sizeValue });
+ assertComputedStyle(svg, { width: sizeValue, height: sizeValue });
+ });
+
+ it(`'${sizeName}' icon should be located property`, async () => {
+ const [e] = addElement(
+ textToDomToParent(`<vwc-icon type="home" size="${sizeName}"></vwc-icon>`)
+ );
+ await waitInterval(LOAD_TIME);
+ const svg = e.shadowRoot.querySelector('svg');
+ assertDistancePixels(e, svg, 'top', 0);
+ assertDistancePixels(e, svg, 'left', 0);
+ });
+ }
+ });
 });

components/tab-bar/src/vwc-tab.scss

@@ -15,9 +15,9 @@
 }
 
 .vvd-icon {
+ --icon-size: 20px;
  color: var(--mdc-tab-text-label-color-default);
- height: 20px;
- width: 20px;
+ vertical-align: sub;
 }
 
 :host([active]) {

components/textfield/src/vwc-textfield.scss

@@ -175,11 +175,10 @@
  }
 
  vwc-icon {
+ --icon-size: #{textfield-variables.$icon-size};
  align-self: center;
  padding: 0;
  margin: 0 #{textfield-variables.$horizontal-gutter};
- min-block-size: textfield-variables.$icon-size;
- min-inline-size: textfield-variables.$icon-size;
  }
 }