From 31b85a6ad56993455adb201f88ab1d1ae2d96683 Mon Sep 17 00:00:00 2001
From: Haroen Viaene <hello@haroen.me>
Date: Thu, 16 Mar 2023 15:24:27 +0100
Subject: [PATCH] fix(svg): don't style width/height in attributes with unit
 (#5550)

* fix(svg): don't style width/height in attributes with unit

Browsers warn for a width/height attribute which isn't a number, as it can only be a "unitless value" (px). Despite that it does seem to work.

Components involved:
- SearchBox in Vue
- Panel in JS
- Refresh in hooks example

* snapshot
---
 .../react-hooks/default-theme/src/components/Refresh.tsx    | 6 ++++--
 packages/instantsearch.js/src/widgets/panel/panel.tsx       | 3 +--
 packages/vue-instantsearch/src/components/SearchInput.vue   | 3 +--
 .../__tests__/__snapshots__/RefinementList.js.snap          | 6 ++----
 .../components/__tests__/__snapshots__/SearchBox.js.snap    | 3 +--
 specs/src/pages/widgets/panel.md                            | 4 ++--
 6 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/examples/react-hooks/default-theme/src/components/Refresh.tsx b/examples/react-hooks/default-theme/src/components/Refresh.tsx
index 8fa0878dfe..1416ce1461 100644
--- a/examples/react-hooks/default-theme/src/components/Refresh.tsx
+++ b/examples/react-hooks/default-theme/src/components/Refresh.tsx
@@ -13,10 +13,12 @@ export function Refresh() {
       }}
     >
       <svg
-        width="1rem"
-        height="1rem"
         fill="none"
         viewBox="0 0 24 24"
+        style={{
+          width: '1rem',
+          height: '1rem',
+        }}
         stroke="currentColor"
         strokeWidth={2}
       >
diff --git a/packages/instantsearch.js/src/widgets/panel/panel.tsx b/packages/instantsearch.js/src/widgets/panel/panel.tsx
index 3931805a25..49d8a96573 100644
--- a/packages/instantsearch.js/src/widgets/panel/panel.tsx
+++ b/packages/instantsearch.js/src/widgets/panel/panel.tsx
@@ -265,8 +265,7 @@ const panel: PanelWidget = (panelWidgetParams) => {
       collapseButtonText: ({ collapsed: isCollapsed }) =>
         `<svg
           class="${cssClasses.collapseIcon}"
-          width="1em"
-          height="1em"
+          style="width: 1em; height: 1em;"
           viewBox="0 0 500 500"
         >
         <path d="${
diff --git a/packages/vue-instantsearch/src/components/SearchInput.vue b/packages/vue-instantsearch/src/components/SearchInput.vue
index 69cb5f17b3..516a84aa3a 100644
--- a/packages/vue-instantsearch/src/components/SearchInput.vue
+++ b/packages/vue-instantsearch/src/components/SearchInput.vue
@@ -68,8 +68,7 @@
           aria-hidden="true"
           role="img"
           xmlns="http://www.w3.org/2000/svg"
-          width="1em"
-          height="1em"
+          style="width: 1em; height: 1em"
           viewBox="0 0 20 20"
           :class="suit('resetIcon')"
         >
diff --git a/packages/vue-instantsearch/src/components/__tests__/__snapshots__/RefinementList.js.snap b/packages/vue-instantsearch/src/components/__tests__/__snapshots__/RefinementList.js.snap
index cd64e458e5..8c5792ec09 100644
--- a/packages/vue-instantsearch/src/components/__tests__/__snapshots__/RefinementList.js.snap
+++ b/packages/vue-instantsearch/src/components/__tests__/__snapshots__/RefinementList.js.snap
@@ -44,10 +44,9 @@ exports[`allows search bar classes override when it's searchable 1`] = `
       >
         <svg aria-hidden="true"
              class="ais-SearchBox-resetIcon"
-             height="1em"
              role="img"
+             style="width: 1em; height: 1em;"
              viewbox="0 0 20 20"
-             width="1em"
              xmlns="http://www.w3.org/2000/svg"
         >
           <path d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"
@@ -304,10 +303,9 @@ exports[`renders correctly when it's searchable 1`] = `
       >
         <svg aria-hidden="true"
              class="ais-SearchBox-resetIcon"
-             height="1em"
              role="img"
+             style="width: 1em; height: 1em;"
              viewbox="0 0 20 20"
-             width="1em"
              xmlns="http://www.w3.org/2000/svg"
         >
           <path d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"
diff --git a/packages/vue-instantsearch/src/components/__tests__/__snapshots__/SearchBox.js.snap b/packages/vue-instantsearch/src/components/__tests__/__snapshots__/SearchBox.js.snap
index 6ac400de2a..92075c49f6 100644
--- a/packages/vue-instantsearch/src/components/__tests__/__snapshots__/SearchBox.js.snap
+++ b/packages/vue-instantsearch/src/components/__tests__/__snapshots__/SearchBox.js.snap
@@ -43,10 +43,9 @@ exports[`renders HTML correctly 1`] = `
     >
       <svg aria-hidden="true"
            class="ais-SearchBox-resetIcon"
-           height="1em"
            role="img"
+           style="width: 1em; height: 1em;"
            viewbox="0 0 20 20"
-           width="1em"
            xmlns="http://www.w3.org/2000/svg"
       >
         <path d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"
diff --git a/specs/src/pages/widgets/panel.md b/specs/src/pages/widgets/panel.md
index 498d2502e6..26289090d3 100644
--- a/specs/src/pages/widgets/panel.md
+++ b/specs/src/pages/widgets/panel.md
@@ -16,7 +16,7 @@ althtml1: |
     <div class="ais-Panel-header">
       <span>Header</span>
       <button class="ais-Panel-collapseButton" aria-expanded="true">
-        <svg class="ais-Panel-collapseIcon" width="1em" height="1em" viewBox="0 0 500 500">
+        <svg class="ais-Panel-collapseIcon" style="width: 1em; height: 1em" viewBox="0 0 500 500">
           <path d="M250 400l150-300H100z" fill="currentColor" />
         </svg>
       </button>
@@ -30,7 +30,7 @@ althtml2: |
     <div class="ais-Panel-header">
       <span>Header</span>
       <button class="ais-Panel-collapseButton" aria-expanded="false">
-        <svg class="ais-Panel-collapseIcon" width="1em" height="1em" viewBox="0 0 500 500">
+        <svg class="ais-Panel-collapseIcon" style="width: 1em; height: 1em" viewBox="0 0 500 500">
           <path d="M100 250l300-150v300z" fill="currentColor" />
         </svg>
       </button>