From 9546a39979909aeefbd641d51e5455cbb6af2278 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Wed, 29 Nov 2017 13:52:43 +0200
Subject: [PATCH] Ensure unique IDs in SVG filters

---
 src/components/DateInputField/DateInputField.js          | 2 +-
 .../__snapshots__/DateInputField.test.js.snap            | 8 ++++----
 src/components/ManageListingCard/MenuIcon.js             | 9 +--------
 src/containers/SendMessageForm/SendMessageForm.js        | 9 +++++++--
 4 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/components/DateInputField/DateInputField.js b/src/components/DateInputField/DateInputField.js
index 36049306..5b1953c0 100644
--- a/src/components/DateInputField/DateInputField.js
+++ b/src/components/DateInputField/DateInputField.js
@@ -130,7 +130,7 @@ class DateInputComponent extends Component {
       <div className={classes}>
         <SingleDatePicker
           {...datePickerProps}
-          id="date-input"
+          id={`DateInputField_DateInputComponent_${name}`}
           date={date}
           focused={focused}
           onDateChange={this.onDateChange}
diff --git a/src/components/DateInputField/__snapshots__/DateInputField.test.js.snap b/src/components/DateInputField/__snapshots__/DateInputField.test.js.snap
index 05d941c8..2857374f 100644
--- a/src/components/DateInputField/__snapshots__/DateInputField.test.js.snap
+++ b/src/components/DateInputField/__snapshots__/DateInputField.test.js.snap
@@ -15,13 +15,13 @@ exports[`DateInput matches snapshot 1`] = `
           className="DateInput DateInput--open-down"
         >
           <input
-            aria-describedby="DateInput__screen-reader-message-date-input"
+            aria-describedby="DateInput__screen-reader-message-DateInputField_DateInputComponent_someDate"
             aria-label="Date input"
             autoComplete="off"
             className="DateInput__input needsclick"
             disabled={false}
-            id="date-input"
-            name="date-input"
+            id="DateInputField_DateInputComponent_someDate"
+            name="DateInputField_DateInputComponent_someDate"
             onChange={[Function]}
             onFocus={[Function]}
             onKeyDown={[Function]}
@@ -33,7 +33,7 @@ exports[`DateInput matches snapshot 1`] = `
           />
           <p
             className="screen-reader-only"
-            id="DateInput__screen-reader-message-date-input"
+            id="DateInput__screen-reader-message-DateInputField_DateInputComponent_someDate"
           >
             Date input
           </p>
diff --git a/src/components/ManageListingCard/MenuIcon.js b/src/components/ManageListingCard/MenuIcon.js
index 823aa20f..f3107d7b 100644
--- a/src/components/ManageListingCard/MenuIcon.js
+++ b/src/components/ManageListingCard/MenuIcon.js
@@ -17,14 +17,7 @@ const MenuIcon = props => {
       xmlns="http://www.w3.org/2000/svg"
     >
       <defs>
-        <filter
-          x="-38.9%"
-          y="-125%"
-          width="177.8%"
-          height="450%"
-          filterUnits="objectBoundingBox"
-          id="a"
-        >
+        <filter x="-38.9%" y="-125%" width="177.8%" height="450%" filterUnits="objectBoundingBox">
           <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
           <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
           <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" in="shadowBlurOuter1" />
diff --git a/src/containers/SendMessageForm/SendMessageForm.js b/src/containers/SendMessageForm/SendMessageForm.js
index 5e8fad40..91f0ceb9 100644
--- a/src/containers/SendMessageForm/SendMessageForm.js
+++ b/src/containers/SendMessageForm/SendMessageForm.js
@@ -27,7 +27,7 @@ const IconSendMessageMobile = () => {
           width="103.7%"
           height="113.2%"
           filterUnits="objectBoundingBox"
-          id="a"
+          id="SendMessageForm_IconSendMessageMobile"
         >
           <feOffset dy="-2" in="SourceAlpha" result="shadowOffsetOuter1" />
           <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
@@ -42,7 +42,12 @@ const IconSendMessageMobile = () => {
           </feMerge>
         </filter>
       </defs>
-      <g filter="url(#a)" transform="translate(-313 -10)" fill="#FFF" fillRule="evenodd">
+      <g
+        filter="url(#SendMessageForm_IconSendMessageMobile)"
+        transform="translate(-313 -10)"
+        fill="#FFF"
+        fillRule="evenodd"
+      >
         <path d="M317.47 23.048c-.14.05-.237.193-.25.36-.013.163.062.317.19.39l4.623 2.688 12.162-10.593-16.726 7.155zM323.47 27.327l-.97 6.59c0 .228.184.416.417.416.145 0 .284-.076.36-.206l2.94-4.823 4.833 2.894c.118.066.26.067.373.015.12-.055.207-.162.234-.292l3.315-15.328-11.5 10.735z" />
       </g>
     </svg>