Fix layout glitches

buildo · Oct 23, 2024 · c5f26ca · c5f26ca
1 parent 166dcc9
commit c5f26ca
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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