Merge pull request #4298 from frankops11/main

martijnrusschen · web-flow · commit 2122df4ca947 · 2023-10-09T19:16:53.000+02:00
Fix: Display Issue of Calendar Icon in React Date Picker (#4291)
diff --git a/src/calendar_icon.jsx b/src/calendar_icon.jsx
@@ -22,7 +22,7 @@ const CalendarIcon = ({ icon, className }) => {
   // Default SVG Icon
   return (
     <svg
-      className="react-datepicker__calendar-icon"
+      className={`${defaultClass} ${className}`}
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 448 512"
     >
diff --git a/src/stylesheets/datepicker.scss b/src/stylesheets/datepicker.scss
@@ -513,6 +513,7 @@
   .react-datepicker__calendar-icon {
     position: absolute;
     padding: 0.5rem;
+    box-sizing: content-box;
   }
 }
 
diff --git a/test/datepicker_test.test.js b/test/datepicker_test.test.js
@@ -2234,7 +2234,7 @@ describe("DatePicker", () => {
       datePicker,
       "react-datepicker__calendar-icon",
     ).getAttribute("class");
-    expect(showIconClass).toBe("react-datepicker__calendar-icon");
+    expect(showIconClass).toMatch(/^react-datepicker__calendar-icon\s?$/);
   });
 
   describe("Year picker", () => {

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ const CalendarIcon = ({ icon, className }) => {`
`22`	`22`	`// Default SVG Icon`
`23`	`23`	`return (`
`24`	`24`	`<svg`
`25`		`- className="react-datepicker__calendar-icon"`
	`25`	+ className={`${defaultClass} ${className}`}
`26`	`26`	`xmlns="http://www.w3.org/2000/svg"`
`27`	`27`	`viewBox="0 0 448 512"`
`28`	`28`	`>`
Original file line number	Diff line number	Diff line change
`@@ -513,6 +513,7 @@`
`513`	`513`	`.react-datepicker__calendar-icon {`
`514`	`514`	`position: absolute;`
`515`	`515`	`padding: 0.5rem;`
	`516`	`+ box-sizing: content-box;`
`516`	`517`	`}`
`517`	`518`	`}`
`518`	`519`