From f982ce9686cb0c0b54fd388aca680b686c8b9f6a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Mon, 26 Jun 2023 10:55:25 +0200 Subject: [PATCH] BREAKING CHANGE(web-twig): Remove `size` prop from `Icon` in favor of `boxSize` #DS-647 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Migration Guide Instead of the `size` prop, use `boxSize` in `Icon` component. - `` → `` Please refer back to this guide or reach out to our team if you encounter any issues during migration. --- .../src/Resources/components/Icon/Icon.twig | 8 +------- .../src/Resources/components/Icon/README.md | 16 +++++++--------- ...ata set buttonLinkLoadingDefault.twig__1.html | 6 +++--- ...th data set buttonLoadingDefault.twig__1.html | 4 ++-- ...__test with data set iconDefault.twig__1.html | 5 ----- ...est with data set spinnerDefault.twig__1.html | 6 +++--- .../tests/components-fixtures/iconDefault.twig | 1 - 7 files changed, 16 insertions(+), 30 deletions(-) diff --git a/packages/web-twig/src/Resources/components/Icon/Icon.twig b/packages/web-twig/src/Resources/components/Icon/Icon.twig index 5f74dcc190..18f9b8d381 100644 --- a/packages/web-twig/src/Resources/components/Icon/Icon.twig +++ b/packages/web-twig/src/Resources/components/Icon/Icon.twig @@ -4,7 +4,6 @@ {%- set _isReusable = props.isReusable ?? true -%} {%- set _name = props.name -%} {%- set _boxSize = props.boxSize | default('24') -%} -{%- set _size = props.size | default(null) -%} {%- set _title = props.title | default(null) -%} {# Miscellaneous #} @@ -13,9 +12,4 @@ 'aria-hidden': _ariaHidden ? 'true' : 'false', }) -%} -{# Deprecations #} -{% if _size %} - {% deprecated 'Icon: The "size" property is deprecated, use "boxSize" instead.' %} -{% endif %} - -{{ inlineSvg('@icons-assets/' ~ _name ~ '.svg', { class: _styleProps.className, style: _styleProps.style, size: _size ? _size : _boxSize, title: _title, mainProps: _mainProps }, _isReusable) }} +{{ inlineSvg('@icons-assets/' ~ _name ~ '.svg', { class: _styleProps.className, style: _styleProps.style, size: _boxSize, title: _title, mainProps: _mainProps }, _isReusable) }} diff --git a/packages/web-twig/src/Resources/components/Icon/README.md b/packages/web-twig/src/Resources/components/Icon/README.md index c9d5700d69..385d4e011c 100644 --- a/packages/web-twig/src/Resources/components/Icon/README.md +++ b/packages/web-twig/src/Resources/components/Icon/README.md @@ -25,14 +25,13 @@ Without lexer: ## API -| Prop name | Type | Default | Required | Description | -| ------------ | -------- | ------- | -------- | -------------------------------------------------------------------- | -| `ariaHidden` | `bool` | `true` | no | If true, icon is hidden from a11y API | -| `boxSize` | `number` | `24` | no | Size of the icon | -| `isReusable` | `bool` | `true` | no | Enables reusability of SVG icons | -| `name` | `string` | — | yes | Name of the icon, case sensitive | -| `size` | `number` | `24` | no | [**DEPRECATED**][deprecated] in favor of `boxSize`; Size of the icon | -| `title` | `string` | `null` | no | Optional title to display on hover | +| Prop name | Type | Default | Required | Description | +| ------------ | -------- | ------- | -------- | ------------------------------------- | +| `ariaHidden` | `bool` | `true` | no | If true, icon is hidden from a11y API | +| `boxSize` | `number` | `24` | no | Size of the icon | +| `isReusable` | `bool` | `true` | no | Enables reusability of SVG icons | +| `name` | `string` | — | yes | Name of the icon, case sensitive | +| `title` | `string` | `null` | no | Optional title to display on hover | Get the list of `name` options in the [Icon package] or your source of icons. @@ -41,5 +40,4 @@ section in README to learn how and when to use them. [inlinesvg docs]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/docs/inlineSVG.md [icon package]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/icons -[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#deprecations [escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set buttonLinkLoadingDefault.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set buttonLinkLoadingDefault.twig__1.html index 2242dac784..6d635fa495 100644 --- a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set buttonLinkLoadingDefault.twig__1.html +++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set buttonLinkLoadingDefault.twig__1.html @@ -5,10 +5,10 @@ - Loading button link - diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set iconDefault.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set iconDefault.twig__1.html index 481bbb222b..136e6e620c 100644 --- a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set iconDefault.twig__1.html +++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set iconDefault.twig__1.html @@ -15,11 +15,6 @@ diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set spinnerDefault.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set spinnerDefault.twig__1.html index f1fb1f3be7..b30f79a71e 100644 --- a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set spinnerDefault.twig__1.html +++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set spinnerDefault.twig__1.html @@ -8,13 +8,13 @@ -