feat(pie-button): DSW-1539 wip assigning size prop to an icon slot

[dandel10n]

Describe your changes (can list changeset entries if preferable)

The idea:

Currently to make sure that when we provide an icon slot in our web components we use css variables to ensure the correct icon size. This approach works but goes against size property used on icon component. The goal of this change is to assign size icon prop to the icon slot to make sure that the size prop is correct. We can still use a css var for the option when consumers pass custom svg instead of pie icon.

Problems:

• SSR:
  • there is an issue with webc icons package to be fixed first: https://justeattakeaway.atlassian.net/browse/DSW-1686
  • Tested with Tag component inside the button as a POC while icons don't render in SSR:
    • the logic works in vanilla js app when js is enabled;
    • Then I checked Next app and while with yarn dev it worked the same way as in vanilla js, it didn't work as I would expect even without ssr after yarn build && yarn preview. While the attr was attached to the top wrapper it was not passed down to shadow dom. And then with disabled js the attr was not attached even to the top level element :sadness:

Vanilla JS:

NextJS prod build served locally when js is enabled:

NextJS when js is disabled:

[changeset-bot]

🦋 Changeset detected

Latest commit: cf952f7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 14 packages

Name	Type
@justeattakeaway/pie-button	Minor
wc-angular12	Patch
wc-next10	Patch
wc-next13	Patch
wc-nuxt2	Patch
wc-nuxt3	Patch
wc-react17	Patch
wc-react18	Patch
wc-vanilla	Patch
wc-vue3	Patch
pie-storybook	Patch
@justeattakeaway/pie-cookie-banner	Patch
@justeattakeaway/pie-modal	Patch
@justeattakeaway/pie-webc	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[xander-marjoram]

/snapit testing latest changes

[pie-design-system-bot]

Starting a new snapshot build. You can view the logs here.

[pie-design-system-bot]

@xander-marjoram Your snapshots have been published to npm!

Test the snapshots by updating your package.json with the newly-published versions:

Note

If you have more than one of these packages installed, we suggest using the new snapshots for all of them to help avoid version conflicts.

yarn up @justeattakeaway/pie-button@0.0.0-snapshot-release-20240102144723 --mode=update-lockfile

yarn up @justeattakeaway/pie-cookie-banner@0.0.0-snapshot-release-20240102144723 --mode=update-lockfile

yarn up @justeattakeaway/pie-icon-button@0.0.0-snapshot-release-20240102144723 --mode=update-lockfile

yarn up @justeattakeaway/pie-modal@0.0.0-snapshot-release-20240102144723 --mode=update-lockfile

yarn up @justeattakeaway/pie-switch@0.0.0-snapshot-release-20240102144723 --mode=update-lockfile

yarn up @justeattakeaway/pie-icons-webc@0.0.0-snapshot-release-20240102144723 --mode=update-lockfile

Then finally:

yarn install

[dandel10n]

/snapit

[pie-design-system-bot]

Starting a new snapshot build. You can view the logs here.

[pie-design-system-bot]

No changed packages found! Please make sure you have added a changeset entry for the packages you would like to snapshot.

[dandel10n]

/snapit

[pie-design-system-bot]

Starting a new snapshot build. You can view the logs here.

[pie-design-system-bot]

@dandel10n Your snapshots have been published to npm!

Test the snapshots by updating your package.json with the newly-published versions:

Note

If you have more than one of these packages installed, we suggest using the new snapshots for all of them to help avoid version conflicts.

yarn up @justeattakeaway/pie-button@0.0.0-snapshot-release-20240412121709 --mode=update-lockfile

yarn up @justeattakeaway/pie-cookie-banner@0.0.0-snapshot-release-20240412121709 --mode=update-lockfile

yarn up @justeattakeaway/pie-modal@0.0.0-snapshot-release-20240412121709 --mode=update-lockfile

yarn up @justeattakeaway/pie-webc@0.0.0-snapshot-release-20240412121709 --mode=update-lockfile

Then finally:

yarn install

[dandel10n]

/snapit

[pie-design-system-bot]

Starting a new snapshot build. You can view the logs here.

[pie-design-system-bot]

@dandel10n Your snapshots have been published to npm!

Test the snapshots by updating your package.json with the newly-published versions:

Note

If you have more than one of these packages installed, we suggest using the new snapshots for all of them to help avoid version conflicts.

yarn up @justeattakeaway/pie-button@0.0.0-snapshot-release-20240412134443 --mode=update-lockfile

yarn up @justeattakeaway/pie-cookie-banner@0.0.0-snapshot-release-20240412134443 --mode=update-lockfile

yarn up @justeattakeaway/pie-modal@0.0.0-snapshot-release-20240412134443 --mode=update-lockfile

yarn up @justeattakeaway/pie-webc@0.0.0-snapshot-release-20240412134443 --mode=update-lockfile

Then finally:

yarn install

[siggerzz]

Closing this as it's quite stale. Feel free to re-open if this is still needed!