Fix(web-twig): Fix pass custom classnames to the Spinner component

lmc-eu · Oct 23, 2023 · 5ad7dc9 · 5ad7dc9
1 parent 44e9a59
commit 5ad7dc9
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/packages/web-twig/src/Resources/components/Spinner/Spinner.twig b/packages/web-twig/src/Resources/components/Spinner/Spinner.twig
@@ -11,8 +11,8 @@
 {%- set _classNames = [ _rootClassName, _rootAnimationClassName, _styleProps.className ] -%}
 {%- set _mainPropsWithoutColor = props | filter((value, prop) => prop is not same as('color')) -%}
 
-{% embed "@spirit/icon.twig" with { props: {
+{% embed "@spirit/icon.twig" with { props: _mainPropsWithoutColor | merge({
     name: 'spinner',
     UNSAFE_className: _classNames | join(' ') | trim,
     UNSAFE_style: _styleProps.style,
-} | merge(_mainPropsWithoutColor) } %}{% endembed %}
+}) } %}{% endembed %}
diff --git a/...ig/src/Resources/components/Spinner/__tests__/__snapshots__/spinnerDefault.twig.snap.html b/...ig/src/Resources/components/Spinner/__tests__/__snapshots__/spinnerDefault.twig.snap.html
@@ -17,7 +17,7 @@
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="e196a15958801e10500c8535fff46000" class="animation-spin-clockwise" aria-hidden="false">
     <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="currentColor">
     </path></svg> <!-- Render with all props -->
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="0e2e6e0b9f3d5a7ebdcdacc53be60d2a" class="my-custom-class" aria-hidden="true">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="c2d1dda0b031e040a813f442e732806d" class="text-inverted animation-spin-clockwise my-custom-class" 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="currentColor">
     </path></svg>
   </body>