Merge pull request #841 from buildo/expand-datefield-config

Allow config of internal padding and range separator size in DateField

Author: federico-ercoles

ci/tasks/build.yml

@@ -14,6 +14,7 @@ outputs:
 
 params:
   NODE_OPTIONS: --max-old-space-size=4096
+  COREPACK_ENABLE_DOWNLOAD_PROMPT: "0"
 
 run:
   dir: bento

ci/tasks/chromatic.yml

@@ -12,6 +12,7 @@ inputs:
 params:
   CHROMATIC_PROJECT_TOKEN: ((chromatic-project-token))
   CHROMATIC_OPTIONS:
+  COREPACK_ENABLE_DOWNLOAD_PROMPT: "0"
 
 run:
   dir: bento

ci/tasks/circular-deps.yml

@@ -9,6 +9,9 @@ image_resource:
 inputs:
   - name: bento
 
+params:
+  COREPACK_ENABLE_DOWNLOAD_PROMPT: "0"
+
 run:
   dir: bento
   path: ash

ci/tasks/eslint.yml

@@ -9,6 +9,9 @@ image_resource:
 inputs:
   - name: bento
 
+params:
+  COREPACK_ENABLE_DOWNLOAD_PROMPT: "0"
+
 run:
   dir: bento
   path: ash

ci/tasks/install.yml

@@ -15,6 +15,9 @@ outputs:
 caches:
   - path: bento/.pnpm-store
 
+params:
+  COREPACK_ENABLE_DOWNLOAD_PROMPT: "0"
+
 run:
   dir: bento
   path: ash

ci/tasks/prettier.yml

@@ -9,6 +9,9 @@ image_resource:
 inputs:
   - name: bento
 
+params:
+  COREPACK_ENABLE_DOWNLOAD_PROMPT: "0"
+
 run:
   dir: bento
   path: ash

ci/tasks/release.yml

@@ -17,6 +17,7 @@ params:
   NPM_TOKEN: ((npm_token))
   SSH_PRIVATE_KEY: ((private-key))
   GITHUB_TOKEN: ((github-token))
+  COREPACK_ENABLE_DOWNLOAD_PROMPT: "0"
 
 run:
   path: ci/tasks/release.sh

ci/tasks/test.yml

@@ -11,6 +11,7 @@ inputs:
 
 params:
   CI: true
+  COREPACK_ENABLE_DOWNLOAD_PROMPT: "0"
 
 run:
   dir: bento

ci/tasks/typecheck.yml

@@ -9,6 +9,9 @@ image_resource:
 inputs:
   - name: bento
 
+params:
+  COREPACK_ENABLE_DOWNLOAD_PROMPT: "0"
+
 run:
   dir: bento
   path: ash

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,