From ec3e084a8df46372117543fd4a75820344c4ca49 Mon Sep 17 00:00:00 2001 From: Kevin Rodrigues Date: Wed, 13 Dec 2023 13:57:06 +0000 Subject: [PATCH 1/9] fix(pie-icons-webc): DSW-1539 atempt to resolve icon sizing issue --- .changeset/few-gifts-shop.md | 5 +++++ packages/tools/pie-icons-webc/build.js | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 .changeset/few-gifts-shop.md diff --git a/.changeset/few-gifts-shop.md b/.changeset/few-gifts-shop.md new file mode 100644 index 0000000000..1f050df54c --- /dev/null +++ b/.changeset/few-gifts-shop.md @@ -0,0 +1,5 @@ +--- +"@justeattakeaway/pie-icons-webc": minor +--- + +[Fixed] - Atempt to resolve icons size issue diff --git a/packages/tools/pie-icons-webc/build.js b/packages/tools/pie-icons-webc/build.js index 6d66cc5b22..cb4a722bfe 100644 --- a/packages/tools/pie-icons-webc/build.js +++ b/packages/tools/pie-icons-webc/build.js @@ -38,8 +38,8 @@ const componentSelector = '${kebabCase(name)}'; export class ${name} extends LitElement implements IconProps { // The following styles make sure that the icon will be sized correctly static styles = css\` - :host-context(pie-icon-button) svg, - :host-context(pie-button) svg { + :host(pie-icon-button svg), + :host(pie-button svg) { display: block; width: var(--btn-icon-size); height: var(--btn-icon-size); From 1d6cb393a2bab21eec0ef1bbec90f7096b17dc61 Mon Sep 17 00:00:00 2001 From: Kevin Rodrigues Date: Wed, 13 Dec 2023 17:17:22 +0000 Subject: [PATCH 2/9] fix(pie-icons-webc): DSW-1539 test fix --- packages/tools/pie-icons-webc/build.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/tools/pie-icons-webc/build.js b/packages/tools/pie-icons-webc/build.js index cb4a722bfe..eacbb514c4 100644 --- a/packages/tools/pie-icons-webc/build.js +++ b/packages/tools/pie-icons-webc/build.js @@ -38,8 +38,7 @@ const componentSelector = '${kebabCase(name)}'; export class ${name} extends LitElement implements IconProps { // The following styles make sure that the icon will be sized correctly static styles = css\` - :host(pie-icon-button svg), - :host(pie-button svg) { + :host(.has-element) svg { display: block; width: var(--btn-icon-size); height: var(--btn-icon-size); @@ -62,6 +61,11 @@ export class ${name} extends LitElement implements IconProps { this._svg?.setAttribute('width', svgSize.width); this._svg?.setAttribute('height', svgSize.height); } + + const hasEl = this.closest('pie-icon-button, pie-button'); + if (hasEl) { + this.classList.add('has-element'); + } } updated (changedProperties: PropertyValues) : void { From 296acb52fd582ba90c63850ab9efdabd45a3d725 Mon Sep 17 00:00:00 2001 From: Kevin Rodrigues Date: Thu, 14 Dec 2023 11:22:31 +0000 Subject: [PATCH 3/9] fix(pie-icons-webc): DSW-1539 rename class --- packages/tools/pie-icons-webc/build.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/tools/pie-icons-webc/build.js b/packages/tools/pie-icons-webc/build.js index eacbb514c4..84258c74ce 100644 --- a/packages/tools/pie-icons-webc/build.js +++ b/packages/tools/pie-icons-webc/build.js @@ -38,7 +38,7 @@ const componentSelector = '${kebabCase(name)}'; export class ${name} extends LitElement implements IconProps { // The following styles make sure that the icon will be sized correctly static styles = css\` - :host(.has-element) svg { + :host(.has-svg-element) svg { display: block; width: var(--btn-icon-size); height: var(--btn-icon-size); @@ -62,12 +62,18 @@ export class ${name} extends LitElement implements IconProps { this._svg?.setAttribute('height', svgSize.height); } - const hasEl = this.closest('pie-icon-button, pie-button'); - if (hasEl) { - this.classList.add('has-element'); + const hasSvgElement = this.closest('pie-icon-button, pie-button'); + + if (hasSvgElement) { + this.classList.add('has-svg-element'); } } + disconnectedCallback() { + super.disconnectedCallback(); + this.classList.remove('has-svg-element'); + } + updated (changedProperties: PropertyValues) : void { let svgSize : { width: string, height: string, class: string }; From 0529a6ac1bb41324b90286eefa0c6fc662f3e1ac Mon Sep 17 00:00:00 2001 From: Kevin Rodrigues Date: Fri, 15 Dec 2023 12:22:06 +0000 Subject: [PATCH 4/9] Update .changeset/few-gifts-shop.md Co-authored-by: Ashley Watson-Nolan --- .changeset/few-gifts-shop.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/few-gifts-shop.md b/.changeset/few-gifts-shop.md index 1f050df54c..3d1a3b36ac 100644 --- a/.changeset/few-gifts-shop.md +++ b/.changeset/few-gifts-shop.md @@ -2,4 +2,4 @@ "@justeattakeaway/pie-icons-webc": minor --- -[Fixed] - Atempt to resolve icons size issue +[Fixed] - Attempt to resolve icon size issue From 151a397e86e1a45c67a84777cea5d1f175b04756 Mon Sep 17 00:00:00 2001 From: Kevin Rodrigues Date: Fri, 15 Dec 2023 14:09:26 +0000 Subject: [PATCH 5/9] fix(pie-icons-webc): DSW-1539 removes js and uses css to fix host styling --- packages/components/pie-button/src/button.scss | 1 + packages/components/pie-icon-button/package.json | 2 +- .../components/pie-icon-button/src/iconButton.scss | 1 + packages/tools/pie-icons-webc/build.js | 4 ++-- yarn.lock | 11 ++++++++++- 5 files changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/components/pie-button/src/button.scss b/packages/components/pie-button/src/button.scss index 8967b9d4b4..02befc6e51 100644 --- a/packages/components/pie-button/src/button.scss +++ b/packages/components/pie-button/src/button.scss @@ -38,6 +38,7 @@ $breakpoint-wide: 768px; --btn-height--small: 40px; --btn-height--medium: 48px; --btn-height--large: 56px; + --btn-icon-display: block; /** * Mixin for updating the button styles based on the size passed in. diff --git a/packages/components/pie-icon-button/package.json b/packages/components/pie-icon-button/package.json index a90571889a..f6e7c5aa12 100644 --- a/packages/components/pie-icon-button/package.json +++ b/packages/components/pie-icon-button/package.json @@ -26,7 +26,7 @@ "author": "Just Eat Takeaway.com - Design System Team", "license": "Apache-2.0", "dependencies": { - "@justeattakeaway/pie-icons-webc": "0.15.0", + "@justeattakeaway/pie-icons-webc": "0.0.0-snapshot-release-20231214113353", "@justeattakeaway/pie-spinner": "0.3.1", "@justeattakeaway/pie-webc-core": "0.13.0" }, diff --git a/packages/components/pie-icon-button/src/iconButton.scss b/packages/components/pie-icon-button/src/iconButton.scss index 4b6c0c3999..327760751d 100644 --- a/packages/components/pie-icon-button/src/iconButton.scss +++ b/packages/components/pie-icon-button/src/iconButton.scss @@ -14,6 +14,7 @@ --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); + --btn-icon-display: block; block-size: var(--btn-dimension); inline-size: var(--btn-dimension); diff --git a/packages/tools/pie-icons-webc/build.js b/packages/tools/pie-icons-webc/build.js index 84258c74ce..552dc372c7 100644 --- a/packages/tools/pie-icons-webc/build.js +++ b/packages/tools/pie-icons-webc/build.js @@ -38,8 +38,8 @@ const componentSelector = '${kebabCase(name)}'; export class ${name} extends LitElement implements IconProps { // The following styles make sure that the icon will be sized correctly static styles = css\` - :host(.has-svg-element) svg { - display: block; + :host svg { + display: var(--btn-icon-display); width: var(--btn-icon-size); height: var(--btn-icon-size); } diff --git a/yarn.lock b/yarn.lock index 8e51b41dc4..86498961be 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5599,7 +5599,7 @@ __metadata: version: 0.0.0-use.local resolution: "@justeattakeaway/pie-icon-button@workspace:packages/components/pie-icon-button" dependencies: - "@justeattakeaway/pie-icons-webc": 0.15.0 + "@justeattakeaway/pie-icons-webc": 0.0.0-snapshot-release-20231214113353 "@justeattakeaway/pie-spinner": 0.3.1 "@justeattakeaway/pie-webc-core": 0.13.0 languageName: unknown @@ -5676,6 +5676,15 @@ __metadata: languageName: unknown linkType: soft +"@justeattakeaway/pie-icons-webc@npm:0.0.0-snapshot-release-20231214113353": + version: 0.0.0-snapshot-release-20231214113353 + resolution: "@justeattakeaway/pie-icons-webc@npm:0.0.0-snapshot-release-20231214113353" + dependencies: + "@justeattakeaway/pie-webc-core": 0.13.0 + checksum: 07ffaeacca270c016e1745d59da9394a7312ed92262f053791faae3154964651d644b3102c19b8f950e8e0d4a48387f81e872a3229610784f3a3fddb428dfae4 + languageName: node + linkType: hard + "@justeattakeaway/pie-icons@4.9.3, @justeattakeaway/pie-icons@workspace:packages/tools/pie-icons": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-icons@workspace:packages/tools/pie-icons" From 491fa64b43579a049933c1d35a658b77ce627d87 Mon Sep 17 00:00:00 2001 From: Kevin Rodrigues Date: Fri, 15 Dec 2023 14:54:59 +0000 Subject: [PATCH 6/9] fix(pie-icon-button): DSW-1539 remove snapshot ref --- .../components/pie-icon-button/package.json | 2 +- yarn.lock | 23 ++++++------------- 2 files changed, 8 insertions(+), 17 deletions(-) diff --git a/packages/components/pie-icon-button/package.json b/packages/components/pie-icon-button/package.json index f6e7c5aa12..a90571889a 100644 --- a/packages/components/pie-icon-button/package.json +++ b/packages/components/pie-icon-button/package.json @@ -26,7 +26,7 @@ "author": "Just Eat Takeaway.com - Design System Team", "license": "Apache-2.0", "dependencies": { - "@justeattakeaway/pie-icons-webc": "0.0.0-snapshot-release-20231214113353", + "@justeattakeaway/pie-icons-webc": "0.15.0", "@justeattakeaway/pie-spinner": "0.3.1", "@justeattakeaway/pie-webc-core": "0.13.0" }, diff --git a/yarn.lock b/yarn.lock index 86498961be..6f5b483261 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5543,7 +5543,7 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-cookie-banner@0.12.0, @justeattakeaway/pie-cookie-banner@workspace:packages/components/pie-cookie-banner": +"@justeattakeaway/pie-cookie-banner@0.13.0, @justeattakeaway/pie-cookie-banner@workspace:packages/components/pie-cookie-banner": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-cookie-banner@workspace:packages/components/pie-cookie-banner" dependencies: @@ -5554,7 +5554,7 @@ __metadata: "@justeattakeaway/pie-icon-button": 0.24.3 "@justeattakeaway/pie-link": 0.11.3 "@justeattakeaway/pie-modal": 0.35.5 - "@justeattakeaway/pie-switch": 0.19.0 + "@justeattakeaway/pie-switch": 0.20.0 "@justeattakeaway/pie-webc-core": 0.13.0 languageName: unknown linkType: soft @@ -5599,7 +5599,7 @@ __metadata: version: 0.0.0-use.local resolution: "@justeattakeaway/pie-icon-button@workspace:packages/components/pie-icon-button" dependencies: - "@justeattakeaway/pie-icons-webc": 0.0.0-snapshot-release-20231214113353 + "@justeattakeaway/pie-icons-webc": 0.15.0 "@justeattakeaway/pie-spinner": 0.3.1 "@justeattakeaway/pie-webc-core": 0.13.0 languageName: unknown @@ -5676,15 +5676,6 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-icons-webc@npm:0.0.0-snapshot-release-20231214113353": - version: 0.0.0-snapshot-release-20231214113353 - resolution: "@justeattakeaway/pie-icons-webc@npm:0.0.0-snapshot-release-20231214113353" - dependencies: - "@justeattakeaway/pie-webc-core": 0.13.0 - checksum: 07ffaeacca270c016e1745d59da9394a7312ed92262f053791faae3154964651d644b3102c19b8f950e8e0d4a48387f81e872a3229610784f3a3fddb428dfae4 - languageName: node - linkType: hard - "@justeattakeaway/pie-icons@4.9.3, @justeattakeaway/pie-icons@workspace:packages/tools/pie-icons": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-icons@workspace:packages/tools/pie-icons" @@ -5757,7 +5748,7 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-switch@0.19.0, @justeattakeaway/pie-switch@workspace:packages/components/pie-switch": +"@justeattakeaway/pie-switch@0.20.0, @justeattakeaway/pie-switch@workspace:packages/components/pie-switch": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-switch@workspace:packages/components/pie-switch" dependencies: @@ -29002,7 +28993,7 @@ __metadata: "@justeat/pie-design-tokens": 5.9.0 "@justeattakeaway/pie-button": 0.41.0 "@justeattakeaway/pie-card": 0.14.3 - "@justeattakeaway/pie-cookie-banner": 0.12.0 + "@justeattakeaway/pie-cookie-banner": 0.13.0 "@justeattakeaway/pie-css": 0.9.0 "@justeattakeaway/pie-divider": 0.9.3 "@justeattakeaway/pie-form-label": 0.8.3 @@ -29012,7 +29003,7 @@ __metadata: "@justeattakeaway/pie-modal": 0.35.5 "@justeattakeaway/pie-notification": 0.1.3 "@justeattakeaway/pie-spinner": 0.3.1 - "@justeattakeaway/pie-switch": 0.19.0 + "@justeattakeaway/pie-switch": 0.20.0 "@justeattakeaway/pie-tag": 0.1.0 "@storybook/addon-a11y": 7.6.3 "@storybook/addon-designs": 7.0.7 @@ -38025,7 +38016,7 @@ __metadata: "@babel/preset-env": 7.21.4 "@babel/preset-react": 7.18.6 "@justeattakeaway/pie-button": 0.41.0 - "@justeattakeaway/pie-cookie-banner": 0.12.0 + "@justeattakeaway/pie-cookie-banner": 0.13.0 "@justeattakeaway/pie-css": 0.9.0 "@lit/react": 1.0.2 babel-loader: 8 From 11a9770a13a0a15ea4f94edc9bd2013eabb96334 Mon Sep 17 00:00:00 2001 From: Kevin Rodrigues Date: Fri, 15 Dec 2023 16:45:32 +0000 Subject: [PATCH 7/9] fix(pie-icons-webc): DSW-1539 revert js changes --- packages/tools/pie-icons-webc/build.js | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/packages/tools/pie-icons-webc/build.js b/packages/tools/pie-icons-webc/build.js index 552dc372c7..acce8a71a5 100644 --- a/packages/tools/pie-icons-webc/build.js +++ b/packages/tools/pie-icons-webc/build.js @@ -61,17 +61,6 @@ export class ${name} extends LitElement implements IconProps { this._svg?.setAttribute('width', svgSize.width); this._svg?.setAttribute('height', svgSize.height); } - - const hasSvgElement = this.closest('pie-icon-button, pie-button'); - - if (hasSvgElement) { - this.classList.add('has-svg-element'); - } - } - - disconnectedCallback() { - super.disconnectedCallback(); - this.classList.remove('has-svg-element'); } updated (changedProperties: PropertyValues) : void { From babe44ee58fe4307de38ada6b394bb10af4dda8e Mon Sep 17 00:00:00 2001 From: Kevin Rodrigues Date: Tue, 19 Dec 2023 09:37:05 +0000 Subject: [PATCH 8/9] Update .changeset/few-gifts-shop.md Co-authored-by: Ashley Watson-Nolan --- .changeset/few-gifts-shop.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/few-gifts-shop.md b/.changeset/few-gifts-shop.md index 3d1a3b36ac..42d099a87f 100644 --- a/.changeset/few-gifts-shop.md +++ b/.changeset/few-gifts-shop.md @@ -2,4 +2,4 @@ "@justeattakeaway/pie-icons-webc": minor --- -[Fixed] - Attempt to resolve icon size issue +[Fixed] - Remove `:host-context` usage for icon sizing From 2869c149ee01a8c3402bd3f090aa506dbbb3bff2 Mon Sep 17 00:00:00 2001 From: Kevin Rodrigues Date: Tue, 19 Dec 2023 14:36:07 +0000 Subject: [PATCH 9/9] fix(pie-icon-button): DSW-1539 provide fallback for button icon host --- .../components/pie-icon-button/src/iconButton.scss | 12 ++++++------ packages/tools/pie-icons-webc/build.js | 6 +++--- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/components/pie-icon-button/src/iconButton.scss b/packages/components/pie-icon-button/src/iconButton.scss index 327760751d..47c4d0c7ee 100644 --- a/packages/components/pie-icon-button/src/iconButton.scss +++ b/packages/components/pie-icon-button/src/iconButton.scss @@ -3,10 +3,10 @@ // Normally we don't expect consumers to override these, but there are situations where it may be necessary :host { // The base values are set to the size default, which is for the medium button size - --btn-dimension: 48px; + --btn-dimension-default: 48px; // Sizing is set to Medium button icon size, as that is the default - --btn-icon-size: 24px; + --btn-icon-size-default: 24px; } // Base button styles @@ -16,8 +16,8 @@ --btn-icon-fill: var(--dt-color-content-interactive-primary); --btn-icon-display: block; - block-size: var(--btn-dimension); - inline-size: var(--btn-dimension); + block-size: var(--btn-dimension, var(--btn-dimension-default)); + inline-size: var(--btn-dimension, var(--btn-dimension-default)); border-color: var(--btn-border-color); border-radius: var(--btn-border-radius); @@ -37,8 +37,8 @@ } svg { - height: var(--btn-icon-size); - width: var(--btn-icon-size); + height: var(--btn-icon-size, var(--btn-icon-size-default)); + width: var(--btn-icon-size, var(--btn-icon-size-default)); } &[variant='primary'] { diff --git a/packages/tools/pie-icons-webc/build.js b/packages/tools/pie-icons-webc/build.js index acce8a71a5..87e6a9c5fb 100644 --- a/packages/tools/pie-icons-webc/build.js +++ b/packages/tools/pie-icons-webc/build.js @@ -39,9 +39,9 @@ export class ${name} extends LitElement implements IconProps { // The following styles make sure that the icon will be sized correctly static styles = css\` :host svg { - display: var(--btn-icon-display); - width: var(--btn-icon-size); - height: var(--btn-icon-size); + display: var(--btn-icon-display, inline); + width: var(--btn-icon-size, 24px); + height: var(--btn-icon-size, 24px); } \`;