Allow config of internal padding and range separator size in DateField

Author: federico-ercoles

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;

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>

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,

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
 );