From c5f26ca666fcd5c1ce0625ce9a27525d0f36b6c5 Mon Sep 17 00:00:00 2001
From: Gabriele Petronella <gabriele@buildo.io>
Date: Wed, 23 Oct 2024 14:57:02 +0200
Subject: [PATCH] Fix layout glitches

---
 .../src/DateField/Input.tsx                   | 28 ++++++++++---------
 .../src/Field/Field.css.ts                    | 13 +++++++--
 .../src/NumberField/BaseNumberInput.tsx       |  1 +
 3 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/packages/bento-design-system/src/DateField/Input.tsx b/packages/bento-design-system/src/DateField/Input.tsx
index ef7149117..40e9016a1 100644
--- a/packages/bento-design-system/src/DateField/Input.tsx
+++ b/packages/bento-design-system/src/DateField/Input.tsx
@@ -144,19 +144,21 @@ export function Input(props: Props) {
       disabled={isDisabled}
       readOnly={isReadOnly}
     >
-      {props.type === "single" ? (
-        <DateField fieldProps={props.fieldProps} />
-      ) : (
-        <Columns space={dateFieldConfig.internalPadding} alignY="stretch">
-          <DateField fieldProps={props.fieldProps.start} />
-          <Column width="content">
-            <Box display="flex" height="full" alignItems="center">
-              <IconMinus size={dateFieldConfig.rangeSeparatorSize} />
-            </Box>
-          </Column>
-          <DateField fieldProps={props.fieldProps.end} />
-        </Columns>
-      )}
+      <Box flexGrow={1}>
+        {props.type === "single" ? (
+          <DateField fieldProps={props.fieldProps} />
+        ) : (
+          <Columns space={dateFieldConfig.internalPadding} alignY="stretch">
+            <DateField fieldProps={props.fieldProps.start} />
+            <Column width="content">
+              <Box display="flex" height="full" alignItems="center">
+                <IconMinus size={dateFieldConfig.rangeSeparatorSize} />
+              </Box>
+            </Column>
+            <DateField fieldProps={props.fieldProps.end} />
+          </Columns>
+        )}
+      </Box>
       {!isReadOnly && (
         <Box display="flex" justifyContent="center" alignItems="center">
           <IconButton
diff --git a/packages/bento-design-system/src/Field/Field.css.ts b/packages/bento-design-system/src/Field/Field.css.ts
index 43939501a..a518b792d 100644
--- a/packages/bento-design-system/src/Field/Field.css.ts
+++ b/packages/bento-design-system/src/Field/Field.css.ts
@@ -66,7 +66,7 @@ export const inputContainerRecipe = strictRecipe({
     }),
     {
       selectors: {
-        [`&:disabled${notDisabled}, &[disabled]${notDisabled}`]: {
+        [`&:disabled, &[disabled]`]: {
           background: vars.backgroundColor.backgroundPrimary,
         },
         [`input&:read-only${notDisabled}, textarea&:read-only${notDisabled}, &.readOnly${notDisabled}, &[readonly]${notDisabled}`]:
@@ -80,6 +80,15 @@ export const inputContainerRecipe = strictRecipe({
 });
 
 export const inputRecipe = strictRecipe({
-  base: input,
+  base: [
+    input,
+    {
+      selectors: {
+        "&[disabled], &:disabled": {
+          boxShadow: vars.boxShadow.outlineInputDisabled,
+        },
+      },
+    },
+  ],
   variants: inputContainerRecipeVariants,
 });
diff --git a/packages/bento-design-system/src/NumberField/BaseNumberInput.tsx b/packages/bento-design-system/src/NumberField/BaseNumberInput.tsx
index aa7f8d2cd..267d093fe 100644
--- a/packages/bento-design-system/src/NumberField/BaseNumberInput.tsx
+++ b/packages/bento-design-system/src/NumberField/BaseNumberInput.tsx
@@ -83,6 +83,7 @@ export function BaseNumberInput(props: Props) {
       paddingX={config.paddingX}
       paddingY={config.paddingY}
       gap={config.internalSpacing}
+      disabled={props.disabled}
       {...getRadiusPropsFromConfig(config.radius)}
     >
       <Box