feat(pie-icons-webc): DSW-000 set height and width on icon hosts

.changeset/polite-donkeys-type.md

@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-icons-webc": minor
+---
+
+[Changed] - Apply height and widths of svg to host element to ensure correct sizings in the browser

packages/components/pie-button/src/button.scss

@@ -32,7 +32,6 @@ $breakpoint-wide: 768px;
     --btn-height--small: 40px;
     --btn-height--medium: 48px;
     --btn-height--large: 56px;
-    --icon-display-override: block;
 
     /**
     * Mixin for updating the button styles based on the size passed in.

packages/components/pie-chip/src/chip.scss

@@ -47,7 +47,7 @@
     --chip-dismissible-offset: calc(var(--chip-gap) / -2); // ensures the spacing between the text and close icon is 4px
 
     // Pie Webc Icon var that is used to ensure the correctly sized icon passed in a slot
-    --icon-display-override: block;
+    --icon-size-override: 16px;
 
     position: relative;
     display: flex;

packages/components/pie-icon-button/src/iconButton.scss

@@ -14,7 +14,6 @@
     --btn-border-radius: var(--dt-radius-rounded-e);
     --btn-bg-color: var(--dt-color-interactive-brand);
     --btn-icon-fill: var(--dt-color-content-interactive-primary);
-    --icon-display-override: block;
 
     block-size: var(--btn-dimension, var(--btn-dimension-default));
     inline-size: var(--btn-dimension, var(--btn-dimension-default));

packages/components/pie-tag/src/tag.scss

@@ -16,7 +16,6 @@
     --tag-transparent-bg-color: transparent;
 
     // Pie Webc Icon var that is used to ensure the correctly sized icon passed in a slot
-    --icon-display-override: block;
     --icon-size-override: 16px;
 
     display: inline-flex;

packages/tools/pie-icons-webc/build.js

@@ -36,10 +36,17 @@ const componentSelector = '${kebabCase(name)}';
  * @tagname ${kebabCase(name)}
  */
 export class ${name} extends LitElement implements IconProps {
-    // The following styles make sure that the icon will be sized correctly
+    // The following styles make sure that the icon will be sized correctly.
+    // "--icon-size-override" css var can be used in parent components to make sure the icon
+    // stays the correct size for cases where the icon is added by consumers via a slot,
+    // for example in Button, IconButton, Chip and Tag.
+    // Might be changed later to assigning a size prop to an icon slot
+    // (POC: https://github.com/justeattakeaway/pie/pull/1128)
     static styles = css\`
+        :host {
+            display: inline-block;
+        }
         :host svg {
-            display: var(--icon-display-override);
             width: var(--icon-size-override);
             height: var(--icon-size-override);
         }
@@ -58,6 +65,8 @@ export class ${name} extends LitElement implements IconProps {
         super.connectedCallback();
         if (this._svg?.getAttribute('width') === null) {
             const svgSize = getSvgProps('${svgClasses}', '', null, '${name}');
+            this.style.width = \`\${\`var(--icon-size-override,\${svgSize.width}\`}px)\`;
+            this.style.height = \`\${\`var(--icon-size-override,\${svgSize.height}\`}px)\`;
             this._svg?.setAttribute('width', svgSize.width);
             this._svg?.setAttribute('height', svgSize.height);
         }
@@ -69,6 +78,8 @@ export class ${name} extends LitElement implements IconProps {
         if (changedProperties.has('size')) {
             svgSize = getSvgProps('${svgClasses}', '', this.size, '${name}');
 
+            this.style.width = \`\${\`var(--icon-size-override,\${svgSize.width}\`}px)\`;
+            this.style.height = \`\${\`var(--icon-size-override,\${svgSize.height}\`}px)\`;
             this._svg?.setAttribute('width', svgSize.width);
             this._svg?.setAttribute('height', svgSize.height);
         }

yarn.lock

@@ -27383,20 +27383,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-fetch@npm:2, node-fetch@npm:^2.0.0, node-fetch@npm:^2.5.0, node-fetch@npm:^2.6.1, node-fetch@npm:^2.6.7":
-  version: 2.7.0
-  resolution: "node-fetch@npm:2.7.0"
-  dependencies:
-    whatwg-url: ^5.0.0
-  peerDependencies:
-    encoding: ^0.1.0
-  peerDependenciesMeta:
-    encoding:
-      optional: true
-  checksum: d76d2f5edb451a3f05b15115ec89fc6be39de37c6089f1b6368df03b91e1633fd379a7e01b7ab05089a25034b2023d959b47e59759cb38d88341b2459e89d6e5
-  languageName: node
-  linkType: hard
-
 "node-fetch@npm:2.6.1":
   version: 2.6.1
   resolution: "node-fetch@npm:2.6.1"
@@ -27418,6 +27404,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-fetch@npm:^2.0.0, node-fetch@npm:^2.5.0, node-fetch@npm:^2.6.1, node-fetch@npm:^2.6.7":
+  version: 2.7.0
+  resolution: "node-fetch@npm:2.7.0"
+  dependencies:
+    whatwg-url: ^5.0.0
+  peerDependencies:
+    encoding: ^0.1.0
+  peerDependenciesMeta:
+    encoding:
+      optional: true
+  checksum: d76d2f5edb451a3f05b15115ec89fc6be39de37c6089f1b6368df03b91e1633fd379a7e01b7ab05089a25034b2023d959b47e59759cb38d88341b2459e89d6e5
+  languageName: node
+  linkType: hard
+
 "node-fetch@npm:^3.2.8":
   version: 3.3.2
   resolution: "node-fetch@npm:3.3.2"
@@ -29152,7 +29152,6 @@ __metadata:
     glob: 10.3.3
     husky: 8.0.3
     jsdom: 24.0.0
-    node-fetch: 2
     npm-run-all: 4.1.5
     pinst: 3.0.0
     postcss: 8.4.32