Repository: gpbl/react-day-picker
Pull request #2734 (2025-04-12 12:02:26)

fix: fix left/right icon alignment
## What's Changed

In [Chevron.tsx](https://github.com/gpbl/react-day-picker/blob/main/src/components/Chevron.tsx) different SVG code is used for each icon direction needed (rather than e.g. rotating the same icon).

The "up" vs "down" icons seem to use almost identical code, with the only changes being the direction it's pointing in.

However the "right" arrow compared with the "left" arrow has more `points` code, and it's also positioned slightly lower.

**This PR updates the `points` code of the right arrow to better match the left arrow and fix the misalignment.**

I've zoomed in to make this comparison more obvious, but I've noticed the slight misalignment of the left/right arrows since using this library at the normal zoom level.

**Before:**
![before](https://github.com/user-attachments/assets/a394ce65-2d4c-47bf-9de2-56369cda376b)

**After:**
![after](https://github.com/user-attachments/assets/745a3049-087f-4b02-9647-ab365f686831)

## Type of Change

- [x] Bug fix
- [ ] New feature
- [ ] Breaking change
- [ ] Documentation update

gpbl: Nice find @AlecRust ! Thanks a lot!

Patch:
diff --git a/src/components/Chevron.tsx b/src/components/Chevron.tsx
index c8a956ace..bb9e879cd 100644
--- a/src/components/Chevron.tsx
+++ b/src/components/Chevron.tsx
@@ -33,7 +33,7 @@ export function Chevron(props: {
         <polygon points="16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20" />
       )}
       {orientation === "right" && (
-        <polygon points="8 18.612 14.1888889 12.5 8 6.37733333 9.91111111 4.5 18 12.5 9.91111111 20.5"></polygon>
+        <polygon points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20" />
       )}
     </svg>
   );


Test patch:
diff --git a/examples/__snapshots__/Range.test.tsx.snap b/examples/__snapshots__/Range.test.tsx.snap
index ca39143f8..9c00ea5a5 100644
--- a/examples/__snapshots__/Range.test.tsx.snap
+++ b/examples/__snapshots__/Range.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`should match the snapshot 1`] = `
               width="24"
             >
               <polygon
-                points="8 18.612 14.1888889 12.5 8 6.37733333 9.91111111 4.5 18 12.5 9.91111111 20.5"
+                points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20"
               />
             </svg>
           </button>
@@ -682,7 +682,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               width="24"
             >
               <polygon
-                points="8 18.612 14.1888889 12.5 8 6.37733333 9.91111111 4.5 18 12.5 9.91111111 20.5"
+                points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20"
               />
             </svg>
           </button>
diff --git a/examples/__snapshots__/StylingCssModules.test.tsx.snap b/examples/__snapshots__/StylingCssModules.test.tsx.snap
index 21dcb6523..3ea416323 100644
--- a/examples/__snapshots__/StylingCssModules.test.tsx.snap
+++ b/examples/__snapshots__/StylingCssModules.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`should match the snapshot 1`] = `
             width="24"
           >
             <polygon
-              points="8 18.612 14.1888889 12.5 8 6.37733333 9.91111111 4.5 18 12.5 9.91111111 20.5"
+              points="8 18.112 14.18888889 12 8 5.87733333 9.91111111 4 18 12 9.91111111 20"
             />
           </svg>
         </button>