BREAKING CHANGE(web-twig): Remove size prop from Icon in favor of…

… `boxSize` #DS-647 ## Migration Guide Instead of the `size` prop, use `boxSize` in `Icon` component. - `<Icon size="333" …>` → `<Icon boxSize="333" …>` Please refer back to this guide or reach out to our team if you encounter any issues during migration.
lmc-eu · Jul 21, 2023 · f982ce9 · f982ce9
1 parent f19f8bb
commit f982ce9
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 30 deletions.
diff --git 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
@@ -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/...pshots__/ComponentsSnapshotTest__test with data set buttonLinkLoadingDefault.twig__1.html b/...pshots__/ComponentsSnapshotTest__test with data set buttonLinkLoadingDefault.twig__1.html
@@ -5,10 +5,10 @@
  </title>
  </head>
  <body>
- <a class="Button Button--primary Button--disabled Button--loading Button--medium" href="#">Loading button link
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="27ec748962d19e70a6144d47dc4e2e3e" class="animation-spin-clockwise" aria-hidden="true">
+ <a class="Button Button--primary Button--disabled Button--loading Button--medium" href="#">Loading button
+ link<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="27ec748962d19e70a6144d47dc4e2e3e" class="animation-spin-clockwise" aria-hidden="true">
  <path d="M2.5 12.3998C2.5 11.8496 2.69599 11.3788 3.08797 10.9876C3.47995 10.5963 3.9507 10.4003 4.50022 10.3996C5.04974 10.3988 5.52049 10.5948 5.91248 10.9876C6.30446 11.3803 6.50045 11.851 6.50045 12.3998C6.50045 12.9486 6.30446 13.4193 5.91248 13.8121C5.52049 14.2048 5.04974 14.4008 4.50022 14.4C3.9507 14.3993 3.47995 14.2033 3.08797 13.8121C2.69599 13.4208 2.5 12.9501 2.5 12.3998V12.3998ZM4.69957 6.80009C4.69957 6.19159 4.91423 5.67268 5.34354 5.24336C5.77286 4.81405 6.29176 4.59939 6.90027 4.59939C7.50877 4.59939 8.02768 4.81405 8.45699 5.24336C8.88631 5.67268 9.10096 6.19159 9.10096 6.80009C9.10096 7.40859 8.88631 7.9275 8.45699 8.35681C8.02768 8.78613 7.50877 9.00078 6.90027 9.00078C6.29176 9.00078 5.77286 8.78613 5.34354 8.35681C4.91423 7.9275 4.69957 7.40859 4.69957 6.80009ZM5.09939 17.9995C5.09939 17.4993 5.27448 17.0745 5.62465 16.7251C5.97482 16.3756 6.39965 16.2005 6.89915 16.1998C7.39043 16.1998 7.8134 16.3749 8.16805 16.7251C8.5227 17.0752 8.69965 17.5001 8.6989 17.9995C8.69815 18.499 8.5212 18.9239 8.16805 19.274C7.81489 19.6242 7.39192 19.7993 6.89915 19.7993C6.39891 19.7993 5.97407 19.6242 5.62465 19.274C5.27523 18.9239 5.10014 18.499 5.09939 17.9995ZM10.1 4.40004C10.1 3.7333 10.3333 3.16661 10.7999 2.69997C11.2666 2.23332 11.8333 2 12.5 2C13.1667 2 13.7334 2.23332 14.2001 2.69997C14.6667 3.16661 14.9 3.7333 14.9 4.40004C14.9 5.06679 14.6667 5.63348 14.2001 6.10012C13.7334 6.56677 13.1667 6.80009 12.5 6.80009C11.8333 6.80009 11.2666 6.56677 10.7999 6.10012C10.3333 5.63348 10.1 5.06679 10.1 4.40004ZM10.8996 20.3996C10.8996 19.9576 11.056 19.5805 11.3689 19.2684C11.6817 18.9564 12.0587 18.7999 12.5 18.7992C12.9413 18.7984 13.3183 18.9549 13.6311 19.2684C13.944 19.582 14.1004 19.9591 14.1004 20.3996C14.1004 20.8401 13.944 21.2172 13.6311 21.5307C13.3183 21.8443 12.9413 22.0007 12.5 22C12.0587 21.9992 11.6817 21.8428 11.3689 21.5307C11.056 21.2186 10.8996 20.8416 10.8996 20.3996ZM16.6998 17.9995C16.6998 17.6165 16.8372 17.2873 17.1119 17.0118C17.3867 16.7362 17.716 16.5989 18.0997 16.5996C18.4835 16.6004 18.8128 16.7377 19.0875 17.0118C19.3623 17.2858 19.4997 17.615 19.4997 17.9995C19.4997 18.3841 19.3623 18.7133 19.0875 18.9873C18.8128 19.2614 18.4835 19.3987 18.0997 19.3995C17.716 19.4002 17.3867 19.2628 17.1119 18.9873C16.8372 18.7118 16.6998 18.3826 16.6998 17.9995ZM17.0996 6.80009C17.0996 6.52533 17.1974 6.28977 17.393 6.0934C17.5887 5.89704 17.8242 5.79923 18.0997 5.79998C18.3752 5.80072 18.6108 5.89853 18.8064 6.0934C19.002 6.28827 19.0998 6.52384 19.0998 6.80009C19.0998 7.07634 19.002 7.3119 18.8064 7.50677C18.6108 7.70164 18.3752 7.79945 18.0997 7.8002C17.8242 7.80095 17.5887 7.70314 17.393 7.50677C17.1974 7.31041 17.0996 7.07485 17.0996 6.80009ZM19.2992 12.3998C19.2992 12.0668 19.416 11.7835 19.6497 11.5498C19.8834 11.3161 20.1668 11.1992 20.4998 11.1992C20.8328 11.1992 21.1161 11.3161 21.3498 11.5498C21.5835 11.7835 21.7004 12.0668 21.7004 12.3998C21.7004 12.7328 21.5835 13.0162 21.3498 13.2499C21.1161 13.4836 20.8328 13.6004 20.4998 13.6004C20.1668 13.6004 19.8834 13.4836 19.6497 13.2499C19.416 13.0162 19.2992 12.7328 19.2992 12.3998Z" fill="#132930">
- </path></svg></a> <a class="Button Button--primary Button--disabled Button--loading Button--medium" href="#">Loading button link should still be disabled even if isDisabled is false <svg width="24" height="24" fill="none" viewbox="0 0 24 24" class="animation-spin-clockwise" aria-hidden="true">
+ </path></svg></a> <a class="Button Button--primary Button--disabled Button--loading Button--medium" href="#">Loading button link should still be disabled even if isDisabled is false<svg width="24" height="24" fill="none" viewbox="0 0 24 24" class="animation-spin-clockwise" aria-hidden="true">
  <use href="#27ec748962d19e70a6144d47dc4e2e3e">
  </use></svg></a>
  </body>

diff --git a/..._snapshots__/ComponentsSnapshotTest__test with data set buttonLoadingDefault.twig__1.html b/..._snapshots__/ComponentsSnapshotTest__test with data set buttonLoadingDefault.twig__1.html
@@ -6,9 +6,9 @@
  </head>
  <body>
  <button class="Button Button--primary Button--medium Button--loading" type="button" disabled>Loading
- button <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="27ec748962d19e70a6144d47dc4e2e3e" class="animation-spin-clockwise" aria-hidden="true">
+ button<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="27ec748962d19e70a6144d47dc4e2e3e" class="animation-spin-clockwise" aria-hidden="true">
  <path d="M2.5 12.3998C2.5 11.8496 2.69599 11.3788 3.08797 10.9876C3.47995 10.5963 3.9507 10.4003 4.50022 10.3996C5.04974 10.3988 5.52049 10.5948 5.91248 10.9876C6.30446 11.3803 6.50045 11.851 6.50045 12.3998C6.50045 12.9486 6.30446 13.4193 5.91248 13.8121C5.52049 14.2048 5.04974 14.4008 4.50022 14.4C3.9507 14.3993 3.47995 14.2033 3.08797 13.8121C2.69599 13.4208 2.5 12.9501 2.5 12.3998V12.3998ZM4.69957 6.80009C4.69957 6.19159 4.91423 5.67268 5.34354 5.24336C5.77286 4.81405 6.29176 4.59939 6.90027 4.59939C7.50877 4.59939 8.02768 4.81405 8.45699 5.24336C8.88631 5.67268 9.10096 6.19159 9.10096 6.80009C9.10096 7.40859 8.88631 7.9275 8.45699 8.35681C8.02768 8.78613 7.50877 9.00078 6.90027 9.00078C6.29176 9.00078 5.77286 8.78613 5.34354 8.35681C4.91423 7.9275 4.69957 7.40859 4.69957 6.80009ZM5.09939 17.9995C5.09939 17.4993 5.27448 17.0745 5.62465 16.7251C5.97482 16.3756 6.39965 16.2005 6.89915 16.1998C7.39043 16.1998 7.8134 16.3749 8.16805 16.7251C8.5227 17.0752 8.69965 17.5001 8.6989 17.9995C8.69815 18.499 8.5212 18.9239 8.16805 19.274C7.81489 19.6242 7.39192 19.7993 6.89915 19.7993C6.39891 19.7993 5.97407 19.6242 5.62465 19.274C5.27523 18.9239 5.10014 18.499 5.09939 17.9995ZM10.1 4.40004C10.1 3.7333 10.3333 3.16661 10.7999 2.69997C11.2666 2.23332 11.8333 2 12.5 2C13.1667 2 13.7334 2.23332 14.2001 2.69997C14.6667 3.16661 14.9 3.7333 14.9 4.40004C14.9 5.06679 14.6667 5.63348 14.2001 6.10012C13.7334 6.56677 13.1667 6.80009 12.5 6.80009C11.8333 6.80009 11.2666 6.56677 10.7999 6.10012C10.3333 5.63348 10.1 5.06679 10.1 4.40004ZM10.8996 20.3996C10.8996 19.9576 11.056 19.5805 11.3689 19.2684C11.6817 18.9564 12.0587 18.7999 12.5 18.7992C12.9413 18.7984 13.3183 18.9549 13.6311 19.2684C13.944 19.582 14.1004 19.9591 14.1004 20.3996C14.1004 20.8401 13.944 21.2172 13.6311 21.5307C13.3183 21.8443 12.9413 22.0007 12.5 22C12.0587 21.9992 11.6817 21.8428 11.3689 21.5307C11.056 21.2186 10.8996 20.8416 10.8996 20.3996ZM16.6998 17.9995C16.6998 17.6165 16.8372 17.2873 17.1119 17.0118C17.3867 16.7362 17.716 16.5989 18.0997 16.5996C18.4835 16.6004 18.8128 16.7377 19.0875 17.0118C19.3623 17.2858 19.4997 17.615 19.4997 17.9995C19.4997 18.3841 19.3623 18.7133 19.0875 18.9873C18.8128 19.2614 18.4835 19.3987 18.0997 19.3995C17.716 19.4002 17.3867 19.2628 17.1119 18.9873C16.8372 18.7118 16.6998 18.3826 16.6998 17.9995ZM17.0996 6.80009C17.0996 6.52533 17.1974 6.28977 17.393 6.0934C17.5887 5.89704 17.8242 5.79923 18.0997 5.79998C18.3752 5.80072 18.6108 5.89853 18.8064 6.0934C19.002 6.28827 19.0998 6.52384 19.0998 6.80009C19.0998 7.07634 19.002 7.3119 18.8064 7.50677C18.6108 7.70164 18.3752 7.79945 18.0997 7.8002C17.8242 7.80095 17.5887 7.70314 17.393 7.50677C17.1974 7.31041 17.0996 7.07485 17.0996 6.80009ZM19.2992 12.3998C19.2992 12.0668 19.416 11.7835 19.6497 11.5498C19.8834 11.3161 20.1668 11.1992 20.4998 11.1992C20.8328 11.1992 21.1161 11.3161 21.3498 11.5498C21.5835 11.7835 21.7004 12.0668 21.7004 12.3998C21.7004 12.7328 21.5835 13.0162 21.3498 13.2499C21.1161 13.4836 20.8328 13.6004 20.4998 13.6004C20.1668 13.6004 19.8834 13.4836 19.6497 13.2499C19.416 13.0162 19.2992 12.7328 19.2992 12.3998Z" fill="#132930">
- </path></svg></button> <button class="Button Button--primary Button--medium Button--loading" type="button" disabled>Loading button should still be disabled even if isDisabled is false <svg width="24" height="24" fill="none" viewbox="0 0 24 24" class="animation-spin-clockwise" aria-hidden="true">
+ </path></svg></button> <button class="Button Button--primary Button--medium Button--loading" type="button" disabled>Loading button should still be disabled even if isDisabled is false<svg width="24" height="24" fill="none" viewbox="0 0 24 24" class="animation-spin-clockwise" aria-hidden="true">
  <use href="#27ec748962d19e70a6144d47dc4e2e3e">
  </use></svg></button>
  </body>

diff --git a/...g/tests/__snapshots__/ComponentsSnapshotTest__test with data set iconDefault.twig__1.html b/...g/tests/__snapshots__/ComponentsSnapshotTest__test with data set iconDefault.twig__1.html
@@ -15,11 +15,6 @@
  </title></svg> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 24 24" fill="none" id="8bc4779b0487f150e0300458b1973f89" aria-hidden="true">
  <path d="M2.72992 21.0001H21.2599C22.0299 21.0001 22.5099 20.1701 22.1299 19.5001L12.8599 3.50006C12.4699 2.83006 11.5099 2.83006 11.1299 3.50006L1.85992 19.5001C1.47992 20.1701 1.95992 21.0001 2.72992 21.0001ZM12.9999 18.0001H10.9999V16.0001H12.9999V18.0001ZM11.9999 14.0001C11.4499 14.0001 10.9999 13.5501 10.9999 13.0001V11.0001C10.9999 10.4501 11.4499 10.0001 11.9999 10.0001C12.5499 10.0001 12.9999 10.4501 12.9999 11.0001V13.0001C12.9999 13.5501 12.5499 14.0001 11.9999 14.0001Z" fill="#132930">
  </path>
- <title>
- This is warning!
- </title></svg> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 24 24" fill="none" id="12921d2eb3256e38c3689294095614d2" aria-hidden="true">
- <path d="M2.72992 21.0001H21.2599C22.0299 21.0001 22.5099 20.1701 22.1299 19.5001L12.8599 3.50006C12.4699 2.83006 11.5099 2.83006 11.1299 3.50006L1.85992 19.5001C1.47992 20.1701 1.95992 21.0001 2.72992 21.0001ZM12.9999 18.0001H10.9999V16.0001H12.9999V18.0001ZM11.9999 14.0001C11.4499 14.0001 10.9999 13.5501 10.9999 13.0001V11.0001C10.9999 10.4501 11.4499 10.0001 11.9999 10.0001C12.5499 10.0001 12.9999 10.4501 12.9999 11.0001V13.0001C12.9999 13.5501 12.5499 14.0001 11.9999 14.0001Z" fill="#132930">
- </path>
  <title>
  This is warning!
  </title></svg>