fix(DatePicker): optimize RangePicker's range area style (ant-design#…

…44206) * feat: optimize range-picker's range area style * feat: optimize range-picker's range area style * feat: optimize range-picker's range area style
ammar-knowledge · Aug 14, 2023 · 41cb8be · 41cb8be
1 parent e0e373f
commit 41cb8be
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx
@@ -68,9 +68,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
 
     const [wrapSSR, hashId] = useStyle(prefixCls);
 
-    let additionalOverrideProps: any = {};
-    additionalOverrideProps = {
-      ...additionalOverrideProps,
+    const additionalOverrideProps: any = {
       ...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}),
       ...(picker === 'time' ? getTimeProps({ format, ...props, picker }) : {}),
     };

diff --git a/components/date-picker/style/index.ts b/components/date-picker/style/index.ts
@@ -130,6 +130,12 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
       borderRadius: borderRadiusSM,
       transition: `background ${motionDurationMid}, border ${motionDurationMid}`,
     },
+    [`&-range-hover-start, &-range-hover-end`]: {
+      [pickerCellInnerCls]: {
+        borderStartEndRadius: 0,
+        borderEndEndRadius: 0,
+      },
+    },
 
     // >>> Hover
     [`&:hover:not(${pickerCellCls}-in-view),
@@ -263,8 +269,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
       &-in-view${pickerCellCls}-range-hover-start::after`]: {
       insetInlineStart: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
       borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
-      borderStartStartRadius: lineWidth,
-      borderEndStartRadius: lineWidth,
+      borderStartStartRadius: borderRadiusSM,
+      borderEndStartRadius: borderRadiusSM,
     },
 
     // Edge end
@@ -275,8 +281,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
       &-in-view${pickerCellCls}-range-hover-end::after`]: {
       insetInlineEnd: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
       borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
-      borderStartEndRadius: lineWidth,
-      borderEndEndRadius: lineWidth,
+      borderStartEndRadius: borderRadiusSM,
+      borderEndEndRadius: borderRadiusSM,
     },
 
     // >>> Disabled