diff --git a/.changeset/polite-donkeys-type.md b/.changeset/polite-donkeys-type.md new file mode 100644 index 0000000000..c651fb10e6 --- /dev/null +++ b/.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 diff --git a/packages/components/pie-button/src/button.scss b/packages/components/pie-button/src/button.scss index 632e407ac4..81a7694fa5 100644 --- a/packages/components/pie-button/src/button.scss +++ b/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. diff --git a/packages/components/pie-chip/src/chip.scss b/packages/components/pie-chip/src/chip.scss index 3e495b285c..7d09e7bdb9 100644 --- a/packages/components/pie-chip/src/chip.scss +++ b/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; diff --git a/packages/components/pie-icon-button/src/iconButton.scss b/packages/components/pie-icon-button/src/iconButton.scss index 4f529439ed..405a53fec8 100644 --- a/packages/components/pie-icon-button/src/iconButton.scss +++ b/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)); diff --git a/packages/components/pie-tag/src/tag.scss b/packages/components/pie-tag/src/tag.scss index 9a98dd9a5e..3cbe5b643a 100644 --- a/packages/components/pie-tag/src/tag.scss +++ b/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; diff --git a/packages/tools/pie-icons-webc/build.js b/packages/tools/pie-icons-webc/build.js index ce7c832761..4d45fce271 100644 --- a/packages/tools/pie-icons-webc/build.js +++ b/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); } diff --git a/yarn.lock b/yarn.lock index 14e1cad0ce..24329f207a 100644 --- a/yarn.lock +++ b/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