From f36f64bf549928014e695f7d293c4e67465373dc Mon Sep 17 00:00:00 2001
From: Federico Ercoles <federico.ercoles@buildo.io>
Date: Mon, 22 Apr 2024 14:32:28 +0200
Subject: [PATCH] Allow config of internal padding and range separator size in
 DateField

---
 packages/bento-design-system/src/DateField/Config.ts     | 2 ++
 packages/bento-design-system/src/DateField/Input.tsx     | 7 +++++--
 packages/bento-design-system/src/util/defaultConfigs.tsx | 2 ++
 packages/bento-design-system/stories/index.tsx           | 4 ++++
 4 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/bento-design-system/src/DateField/Config.ts b/packages/bento-design-system/src/DateField/Config.ts
index 22181720c..071579460 100644
--- a/packages/bento-design-system/src/DateField/Config.ts
+++ b/packages/bento-design-system/src/DateField/Config.ts
@@ -8,7 +8,9 @@ import { Children } from "../util/Children";
 export type DateFieldConfig = {
   radius: BorderRadiusConfig;
   padding: NonNullable<BentoSprinkles["padding"]>;
+  internalPadding: NonNullable<BentoSprinkles["padding"]>;
   elevation: "none" | "small" | "medium" | "large";
+  rangeSeparatorSize: IconProps["size"];
   monthYearLabelSize: LabelProps["size"];
   dayOfWeekLabelSize: LabelProps["size"];
   previousMonthIcon: (props: IconProps) => Children;
diff --git a/packages/bento-design-system/src/DateField/Input.tsx b/packages/bento-design-system/src/DateField/Input.tsx
index e3ab6c1fd..c14d50cfa 100644
--- a/packages/bento-design-system/src/DateField/Input.tsx
+++ b/packages/bento-design-system/src/DateField/Input.tsx
@@ -82,6 +82,7 @@ function DateField({ fieldProps }: { fieldProps: AriaDateFieldOptions<CalendarDa
 
 export function Input(props: Props) {
   const config = useBentoConfig().input;
+  const dateFieldConfig = useBentoConfig().dateField;
 
   const { observe: rightAccessoryRef, width: rightAccessoryWidth } = useDimensions({
     // This is needed to include the padding in the width
@@ -146,10 +147,12 @@ export function Input(props: Props) {
       {props.type === "single" ? (
         <DateField fieldProps={props.fieldProps} />
       ) : (
-        <Columns space={16}>
+        <Columns space={dateFieldConfig.internalPadding} alignY="stretch">
           <DateField fieldProps={props.fieldProps.start} />
           <Column width="content">
-            <IconMinus size={24} />
+            <Box display="flex" height="full" alignItems="center">
+              <IconMinus size={dateFieldConfig.rangeSeparatorSize} />
+            </Box>
           </Column>
           <DateField fieldProps={props.fieldProps.end} />
         </Columns>
diff --git a/packages/bento-design-system/src/util/defaultConfigs.tsx b/packages/bento-design-system/src/util/defaultConfigs.tsx
index ee30dbf13..6fb8886b8 100644
--- a/packages/bento-design-system/src/util/defaultConfigs.tsx
+++ b/packages/bento-design-system/src/util/defaultConfigs.tsx
@@ -677,7 +677,9 @@ export const tooltip: TooltipConfig = {
 export const dateField: DateFieldConfig = {
   radius: 24,
   padding: 24,
+  internalPadding: 16,
   elevation: "medium",
+  rangeSeparatorSize: 24,
   monthYearLabelSize: "large",
   dayOfWeekLabelSize: "large",
   previousMonthIcon: IconChevronLeft,
diff --git a/packages/bento-design-system/stories/index.tsx b/packages/bento-design-system/stories/index.tsx
index 0a1a58646..9994ba393 100644
--- a/packages/bento-design-system/stories/index.tsx
+++ b/packages/bento-design-system/stories/index.tsx
@@ -18,6 +18,10 @@ export const BentoProvider = createBentoProvider(
     pagination: {
       itemsPerPageOptions: [5, 10, 20, 50],
     },
+    dateField: {
+      internalPadding: 8,
+      rangeSeparatorSize: 16,
+    },
   },
   sprinkles
 );