DateRange: fix date input border radius when radio group is present (…

…web) (#3952)
pinterest · Jan 22, 2025 · 3e62b78 · 3e62b78
1 parent 7471a84
commit 3e62b78
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/packages/gestalt-datepicker/src/DateRange.css b/packages/gestalt-datepicker/src/DateRange.css
@@ -15,10 +15,13 @@ html[dir="rtl"] .borderRight {
 }
 
 .dateFieldSection:first-child {
-  border-top-left-radius: var(--rounding-400);
   border-top-right-radius: var(--rounding-400);
 }
 
+.dateFieldSectionTopLeftBorder:first-child {
+  border-top-left-radius: var(--rounding-400);
+}
+
 .dateFieldSectionActive {
   background-color: var(--color-gray-roboflow-100);
 }

diff --git a/packages/gestalt-datepicker/src/DateRange.tsx b/packages/gestalt-datepicker/src/DateRange.tsx
@@ -271,6 +271,7 @@ function DateRange({
                     key={key}
                     className={classnames(borderStyles.dateFieldSection, {
                       [borderStyles.dateFieldSectionActive]: shouldHighlight,
+                      [borderStyles.dateFieldSectionTopLeftBorder]: !radioGroup,
                     })}
                   >
                     <div