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
algolia · Mar 16, 2023 · 31b85a6 · 31b85a6
1 parent 50344e3
commit 31b85a6
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>