Fix default and hover border-color of InputBase (#2910)

Fix InputBase `border-color` in default state and on hover to match design. Co-authored-by: Kerstin Reichinger <[email protected]>
vivid-planet · Dec 11, 2024 · a30f0ee · a30f0ee
1 parent a4fcdeb
commit a30f0ee
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 1 deletion.
diff --git a/.changeset/early-ears-wave.md b/.changeset/early-ears-wave.md
@@ -0,0 +1,6 @@
+---
+"@comet/admin-theme": patch
+"@comet/admin": patch
+---
+
+Fix `border-color` of `InputBase` on default and hover state
diff --git a/packages/admin/admin-theme/src/componentsTheme/MuiInputBase.ts b/packages/admin/admin-theme/src/componentsTheme/MuiInputBase.ts
@@ -7,7 +7,7 @@ export const getMuiInputBase: GetMuiComponentTheme<"MuiInputBase"> = (component,
     ...component,
     styleOverrides: mergeOverrideStyles<"MuiInputBase">(component?.styleOverrides, {
         root: {
-            border: `1px solid ${palette.grey[200]}`,
+            border: `1px solid ${palette.grey[100]}`,
             borderRadius: 2,
             backgroundColor: "#fff",
 
@@ -19,6 +19,10 @@ export const getMuiInputBase: GetMuiComponentTheme<"MuiInputBase"> = (component,
                 borderColor: palette.grey[100],
                 backgroundColor: palette.grey[50],
             },
+
+            [`&:hover:not(.${inputBaseClasses.disabled}):not(.${inputBaseClasses.focused})`]: {
+                borderColor: palette.grey[200],
+            },
         },
         adornedStart: {
             paddingLeft: spacing(2),

diff --git a/packages/admin/admin/src/form/FieldContainer.tsx b/packages/admin/admin/src/form/FieldContainer.tsx
@@ -132,13 +132,21 @@ const InnerContainer = createComponentSlot("div")<FieldContainerClassKey, OwnerS
             [class*="${inputBaseClasses.root}"]:not([class*="${inputBaseClasses.focused}"]) {
                 border-color: ${theme.palette.error.main};
             }
+
+            [class*="${inputBaseClasses.root}"]:hover:not([class*="${inputBaseClasses.focused}"]) {
+                border-color: ${theme.palette.error.main};
+            }
         `}
 
         ${ownerState.hasWarning &&
         css`
             [class*="${inputBaseClasses.root}"]:not([class*="${inputBaseClasses.focused}"]) {
                 border-color: ${theme.palette.warning.main};
             }
+
+            [class*="${inputBaseClasses.root}"]:hover:not([class*="${inputBaseClasses.focused}"]) {
+                border-color: ${theme.palette.warning.main};
+            }
         `}
     `,
 );