fixup! Fix(web-twig): Icon in FileUploader when disabled

lmc-eu · Sep 6, 2023 · 0636833 · 0636833
1 parent ccf815b
commit 0636833
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 15 deletions.
diff --git a/...es/components/FileUploader/__tests__/__snapshots__/fileUploaderComposition.twig.snap.html b/...es/components/FileUploader/__tests__/__snapshots__/fileUploaderComposition.twig.snap.html
@@ -21,7 +21,7 @@
       <div class="FileUploaderInput" data-spirit-element="wrapper">
         <label for="example" class="FileUploaderInput__label">Label</label> <input type="file" id="example" class="FileUploaderInput__input" data-spirit-element="input">
         <div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="bd94da1d571f7fd512347e20627bc4fb" aria-hidden="true">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" aria-hidden="true">
           <path d="M12.3752 3.0625C12.2585 3.02083 12.1335 3 12.0002 3C11.8669 3 11.7419 3.02083 11.6252 3.0625C11.5085 3.10417 11.4002 3.175 11.3002 3.275L6.7002 7.875C6.51686 8.05833 6.4252 8.29167 6.4252 8.575C6.4252 8.85833 6.51686 9.09167 6.7002 9.275C6.88353 9.45833 7.12103 9.55417 7.4127 9.5625C7.70436 9.57083 7.94186 9.48333 8.1252 9.3L11.0002 6.425L11.0002 15.575C11.0002 15.8583 11.096 16.0958 11.2877 16.2875C11.4794 16.4792 11.7169 16.575 12.0002 16.575C12.2835 16.575 12.521 16.4792 12.7127 16.2875C12.9044 16.0958 13.0002 15.8583 13.0002 15.575L13.0002 6.425L15.8752 9.3C16.0585 9.48333 16.296 9.57083 16.5877 9.5625C16.8794 9.55417 17.1169 9.45833 17.3002 9.275C17.4835 9.09167 17.5752 8.85833 17.5752 8.575C17.5752 8.29167 17.4835 8.05833 17.3002 7.875L12.7002 3.275C12.6002 3.175 12.4919 3.10417 12.3752 3.0625Z" fill="currentColor">
           </path>
           <path d="M3.5875 20.4125C3.97917 20.8042 4.45 21 5 21H19C19.55 21 20.0208 20.8042 20.4125 20.4125C20.8042 20.0209 21 19.55 21 19V17C21 16.7167 20.9042 16.4792 20.7125 16.2875C20.5208 16.0959 20.2833 16 20 16C19.7167 16 19.4792 16.0959 19.2875 16.2875C19.0958 16.4792 19 16.7167 19 17V19H5V17C5 16.7167 4.90417 16.4792 4.7125 16.2875C4.52083 16.0959 4.28333 16 4 16C3.71667 16 3.47917 16.0959 3.2875 16.2875C3.09583 16.4792 3 16.7167 3 17V19C3 19.55 3.19583 20.0209 3.5875 20.4125Z" fill="currentColor">

diff --git a/...esources/components/FileUploader/__tests__/__snapshots__/fileUploaderInput.twig.snap.html b/...esources/components/FileUploader/__tests__/__snapshots__/fileUploaderInput.twig.snap.html
@@ -8,7 +8,7 @@
     <div class="FileUploaderInput" data-spirit-element="wrapper">
       <input type="file" id="example-input" class="FileUploaderInput__input" data-spirit-element="input">
       <div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="bd94da1d571f7fd512347e20627bc4fb" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" aria-hidden="true">
         <path d="M12.3752 3.0625C12.2585 3.02083 12.1335 3 12.0002 3C11.8669 3 11.7419 3.02083 11.6252 3.0625C11.5085 3.10417 11.4002 3.175 11.3002 3.275L6.7002 7.875C6.51686 8.05833 6.4252 8.29167 6.4252 8.575C6.4252 8.85833 6.51686 9.09167 6.7002 9.275C6.88353 9.45833 7.12103 9.55417 7.4127 9.5625C7.70436 9.57083 7.94186 9.48333 8.1252 9.3L11.0002 6.425L11.0002 15.575C11.0002 15.8583 11.096 16.0958 11.2877 16.2875C11.4794 16.4792 11.7169 16.575 12.0002 16.575C12.2835 16.575 12.521 16.4792 12.7127 16.2875C12.9044 16.0958 13.0002 15.8583 13.0002 15.575L13.0002 6.425L15.8752 9.3C16.0585 9.48333 16.296 9.57083 16.5877 9.5625C16.8794 9.55417 17.1169 9.45833 17.3002 9.275C17.4835 9.09167 17.5752 8.85833 17.5752 8.575C17.5752 8.29167 17.4835 8.05833 17.3002 7.875L12.7002 3.275C12.6002 3.175 12.4919 3.10417 12.3752 3.0625Z" fill="currentColor">
         </path>
         <path d="M3.5875 20.4125C3.97917 20.8042 4.45 21 5 21H19C19.55 21 20.0208 20.8042 20.4125 20.4125C20.8042 20.0209 21 19.55 21 19V17C21 16.7167 20.9042 16.4792 20.7125 16.2875C20.5208 16.0959 20.2833 16 20 16C19.7167 16 19.4792 16.0959 19.2875 16.2875C19.0958 16.4792 19 16.7167 19 17V19H5V17C5 16.7167 4.90417 16.4792 4.7125 16.2875C4.52083 16.0959 4.28333 16 4 16C3.71667 16 3.47917 16.0959 3.2875 16.2875C3.09583 16.4792 3 16.7167 3 17V19C3 19.55 3.19583 20.0209 3.5875 20.4125Z" fill="currentColor">
@@ -20,19 +20,23 @@
     <div class="FileUploaderInput" data-spirit-element="wrapper">
       <input type="file" id="example-input-texts" class="FileUploaderInput__input" data-spirit-element="input">
       <div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
-        <svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
-        <use href="#bd94da1d571f7fd512347e20627bc4fb">
-        </use></svg> <label for="example-input-texts" class="FileUploaderInput__dropZoneLabel"><span class="FileUploaderInput__link link-primary link-underlined">Pick a file</span> <span class="FileUploaderInput__dragAndDropLabel">or drop it here</span></label>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" aria-hidden="true">
+        <path d="M12.3752 3.0625C12.2585 3.02083 12.1335 3 12.0002 3C11.8669 3 11.7419 3.02083 11.6252 3.0625C11.5085 3.10417 11.4002 3.175 11.3002 3.275L6.7002 7.875C6.51686 8.05833 6.4252 8.29167 6.4252 8.575C6.4252 8.85833 6.51686 9.09167 6.7002 9.275C6.88353 9.45833 7.12103 9.55417 7.4127 9.5625C7.70436 9.57083 7.94186 9.48333 8.1252 9.3L11.0002 6.425L11.0002 15.575C11.0002 15.8583 11.096 16.0958 11.2877 16.2875C11.4794 16.4792 11.7169 16.575 12.0002 16.575C12.2835 16.575 12.521 16.4792 12.7127 16.2875C12.9044 16.0958 13.0002 15.8583 13.0002 15.575L13.0002 6.425L15.8752 9.3C16.0585 9.48333 16.296 9.57083 16.5877 9.5625C16.8794 9.55417 17.1169 9.45833 17.3002 9.275C17.4835 9.09167 17.5752 8.85833 17.5752 8.575C17.5752 8.29167 17.4835 8.05833 17.3002 7.875L12.7002 3.275C12.6002 3.175 12.4919 3.10417 12.3752 3.0625Z" fill="currentColor">
+        </path>
+        <path d="M3.5875 20.4125C3.97917 20.8042 4.45 21 5 21H19C19.55 21 20.0208 20.8042 20.4125 20.4125C20.8042 20.0209 21 19.55 21 19V17C21 16.7167 20.9042 16.4792 20.7125 16.2875C20.5208 16.0959 20.2833 16 20 16C19.7167 16 19.4792 16.0959 19.2875 16.2875C19.0958 16.4792 19 16.7167 19 17V19H5V17C5 16.7167 4.90417 16.4792 4.7125 16.2875C4.52083 16.0959 4.28333 16 4 16C3.71667 16 3.47917 16.0959 3.2875 16.2875C3.09583 16.4792 3 16.7167 3 17V19C3 19.55 3.19583 20.0209 3.5875 20.4125Z" fill="currentColor">
+        </path></svg> <label for="example-input-texts" class="FileUploaderInput__dropZoneLabel"><span class="FileUploaderInput__link link-primary link-underlined">Pick a file</span> <span class="FileUploaderInput__dragAndDropLabel">or drop it here</span></label>
       </div>
     </div>
     <!-- Render in danger state -->
 
     <div class="FileUploaderInput FileUploaderInput--danger" data-spirit-element="wrapper">
       <label for="example-input-danger" class="FileUploaderInput__label">Label</label> <input type="file" id="example-input-danger" class="FileUploaderInput__input" data-spirit-element="input">
       <div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
-        <svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
-        <use href="#bd94da1d571f7fd512347e20627bc4fb">
-        </use></svg> <label for="example-input-danger" class="FileUploaderInput__dropZoneLabel"><span class="FileUploaderInput__link link-primary link-underlined">Upload your file</span> <span class="FileUploaderInput__dragAndDropLabel">or drag and drop here</span></label>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" aria-hidden="true">
+        <path d="M12.3752 3.0625C12.2585 3.02083 12.1335 3 12.0002 3C11.8669 3 11.7419 3.02083 11.6252 3.0625C11.5085 3.10417 11.4002 3.175 11.3002 3.275L6.7002 7.875C6.51686 8.05833 6.4252 8.29167 6.4252 8.575C6.4252 8.85833 6.51686 9.09167 6.7002 9.275C6.88353 9.45833 7.12103 9.55417 7.4127 9.5625C7.70436 9.57083 7.94186 9.48333 8.1252 9.3L11.0002 6.425L11.0002 15.575C11.0002 15.8583 11.096 16.0958 11.2877 16.2875C11.4794 16.4792 11.7169 16.575 12.0002 16.575C12.2835 16.575 12.521 16.4792 12.7127 16.2875C12.9044 16.0958 13.0002 15.8583 13.0002 15.575L13.0002 6.425L15.8752 9.3C16.0585 9.48333 16.296 9.57083 16.5877 9.5625C16.8794 9.55417 17.1169 9.45833 17.3002 9.275C17.4835 9.09167 17.5752 8.85833 17.5752 8.575C17.5752 8.29167 17.4835 8.05833 17.3002 7.875L12.7002 3.275C12.6002 3.175 12.4919 3.10417 12.3752 3.0625Z" fill="currentColor">
+        </path>
+        <path d="M3.5875 20.4125C3.97917 20.8042 4.45 21 5 21H19C19.55 21 20.0208 20.8042 20.4125 20.4125C20.8042 20.0209 21 19.55 21 19V17C21 16.7167 20.9042 16.4792 20.7125 16.2875C20.5208 16.0959 20.2833 16 20 16C19.7167 16 19.4792 16.0959 19.2875 16.2875C19.0958 16.4792 19 16.7167 19 17V19H5V17C5 16.7167 4.90417 16.4792 4.7125 16.2875C4.52083 16.0959 4.28333 16 4 16C3.71667 16 3.47917 16.0959 3.2875 16.2875C3.09583 16.4792 3 16.7167 3 17V19C3 19.55 3.19583 20.0209 3.5875 20.4125Z" fill="currentColor">
+        </path></svg> <label for="example-input-danger" class="FileUploaderInput__dropZoneLabel"><span class="FileUploaderInput__link link-primary link-underlined">Upload your file</span> <span class="FileUploaderInput__dragAndDropLabel">or drag and drop here</span></label>
       </div>
 
       <div class="FileUploaderInput__validationText">
@@ -44,9 +48,11 @@
     <div class="FileUploaderInput" data-spirit-element="wrapper">
       <input accept="*.avif,*.jpg,*.png,*.webp" multiple type="file" id="example-input-html-attributes" class="FileUploaderInput__input" data-spirit-element="input">
       <div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
-        <svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
-        <use href="#bd94da1d571f7fd512347e20627bc4fb">
-        </use></svg> <label for="example-input-html-attributes" class="FileUploaderInput__dropZoneLabel"><span class="FileUploaderInput__link link-primary link-underlined">Upload your file</span> <span class="FileUploaderInput__dragAndDropLabel">or drag and drop here</span></label>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" aria-hidden="true">
+        <path d="M12.3752 3.0625C12.2585 3.02083 12.1335 3 12.0002 3C11.8669 3 11.7419 3.02083 11.6252 3.0625C11.5085 3.10417 11.4002 3.175 11.3002 3.275L6.7002 7.875C6.51686 8.05833 6.4252 8.29167 6.4252 8.575C6.4252 8.85833 6.51686 9.09167 6.7002 9.275C6.88353 9.45833 7.12103 9.55417 7.4127 9.5625C7.70436 9.57083 7.94186 9.48333 8.1252 9.3L11.0002 6.425L11.0002 15.575C11.0002 15.8583 11.096 16.0958 11.2877 16.2875C11.4794 16.4792 11.7169 16.575 12.0002 16.575C12.2835 16.575 12.521 16.4792 12.7127 16.2875C12.9044 16.0958 13.0002 15.8583 13.0002 15.575L13.0002 6.425L15.8752 9.3C16.0585 9.48333 16.296 9.57083 16.5877 9.5625C16.8794 9.55417 17.1169 9.45833 17.3002 9.275C17.4835 9.09167 17.5752 8.85833 17.5752 8.575C17.5752 8.29167 17.4835 8.05833 17.3002 7.875L12.7002 3.275C12.6002 3.175 12.4919 3.10417 12.3752 3.0625Z" fill="currentColor">
+        </path>
+        <path d="M3.5875 20.4125C3.97917 20.8042 4.45 21 5 21H19C19.55 21 20.0208 20.8042 20.4125 20.4125C20.8042 20.0209 21 19.55 21 19V17C21 16.7167 20.9042 16.4792 20.7125 16.2875C20.5208 16.0959 20.2833 16 20 16C19.7167 16 19.4792 16.0959 19.2875 16.2875C19.0958 16.4792 19 16.7167 19 17V19H5V17C5 16.7167 4.90417 16.4792 4.7125 16.2875C4.52083 16.0959 4.28333 16 4 16C3.71667 16 3.47917 16.0959 3.2875 16.2875C3.09583 16.4792 3 16.7167 3 17V19C3 19.55 3.19583 20.0209 3.5875 20.4125Z" fill="currentColor">
+        </path></svg> <label for="example-input-html-attributes" class="FileUploaderInput__dropZoneLabel"><span class="FileUploaderInput__link link-primary link-underlined">Upload your file</span> <span class="FileUploaderInput__dragAndDropLabel">or drag and drop here</span></label>
       </div>
     </div>
     <!-- Render with UNSAFE props -->
@@ -55,9 +61,11 @@
       <label for="example-input-unsafe" class="FileUploaderInput__label"><span>UNSAFE label text</span></label>
       <input type="file" id="example-input-unsafe" class="FileUploaderInput__input" data-spirit-element="input">
       <div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
-        <svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
-        <use href="#bd94da1d571f7fd512347e20627bc4fb">
-        </use></svg> <label for="example-input-unsafe" class="FileUploaderInput__dropZoneLabel"><span class="FileUploaderInput__link link-primary link-underlined">Upload your file</span> <span class="FileUploaderInput__dragAndDropLabel">or drag and drop here</span></label>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" aria-hidden="true">
+        <path d="M12.3752 3.0625C12.2585 3.02083 12.1335 3 12.0002 3C11.8669 3 11.7419 3.02083 11.6252 3.0625C11.5085 3.10417 11.4002 3.175 11.3002 3.275L6.7002 7.875C6.51686 8.05833 6.4252 8.29167 6.4252 8.575C6.4252 8.85833 6.51686 9.09167 6.7002 9.275C6.88353 9.45833 7.12103 9.55417 7.4127 9.5625C7.70436 9.57083 7.94186 9.48333 8.1252 9.3L11.0002 6.425L11.0002 15.575C11.0002 15.8583 11.096 16.0958 11.2877 16.2875C11.4794 16.4792 11.7169 16.575 12.0002 16.575C12.2835 16.575 12.521 16.4792 12.7127 16.2875C12.9044 16.0958 13.0002 15.8583 13.0002 15.575L13.0002 6.425L15.8752 9.3C16.0585 9.48333 16.296 9.57083 16.5877 9.5625C16.8794 9.55417 17.1169 9.45833 17.3002 9.275C17.4835 9.09167 17.5752 8.85833 17.5752 8.575C17.5752 8.29167 17.4835 8.05833 17.3002 7.875L12.7002 3.275C12.6002 3.175 12.4919 3.10417 12.3752 3.0625Z" fill="currentColor">
+        </path>
+        <path d="M3.5875 20.4125C3.97917 20.8042 4.45 21 5 21H19C19.55 21 20.0208 20.8042 20.4125 20.4125C20.8042 20.0209 21 19.55 21 19V17C21 16.7167 20.9042 16.4792 20.7125 16.2875C20.5208 16.0959 20.2833 16 20 16C19.7167 16 19.4792 16.0959 19.2875 16.2875C19.0958 16.4792 19 16.7167 19 17V19H5V17C5 16.7167 4.90417 16.4792 4.7125 16.2875C4.52083 16.0959 4.28333 16 4 16C3.71667 16 3.47917 16.0959 3.2875 16.2875C3.09583 16.4792 3 16.7167 3 17V19C3 19.55 3.19583 20.0209 3.5875 20.4125Z" fill="currentColor">
+        </path></svg> <label for="example-input-unsafe" class="FileUploaderInput__dropZoneLabel"><span class="FileUploaderInput__link link-primary link-underlined">Upload your file</span> <span class="FileUploaderInput__dragAndDropLabel">or drag and drop here</span></label>
         <div class="FileUploaderInput__helperText">
           <span>UNSAFE helper text</span>
         </div>
@@ -69,7 +77,7 @@
       <label for="example-input-all-props" class="FileUploaderInput__label FileUploaderInput__label--hidden FileUploaderInput__label--required">Label</label>
       <input type="file" id="example-input-all-props" class="FileUploaderInput__input" data-spirit-element="input" name="example-input" disabled required="">
       <div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="a854c0787ade55111a09de8e038fd4e6" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" aria-hidden="true">
         <path d="M18 13H13V18C13 18.55 12.55 19 12 19C11.45 19 11 18.55 11 18V13H6C5.45 13 5 12.55 5 12C5 11.45 5.45 11 6 11H11V6C11 5.45 11.45 5 12 5C12.55 5 13 5.45 13 6V11H18C18.55 11 19 11.45 19 12C19 12.55 18.55 13 18 13Z" fill="currentColor">
         </path></svg> <label for="example-input-all-props" class="FileUploaderInput__dropZoneLabel"><span class="FileUploaderInput__link link-primary link-underlined">Pick a file</span> <span class="FileUploaderInput__dragAndDropLabel">or drop it here</span></label>
         <div class="FileUploaderInput__helperText">