@tidbcloud/uikit 2.0.0-beta.35 → 2.0.0-beta.36

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tidbcloud/uikit
 
+## 2.0.0-beta.36
+
+### Minor Changes
+
+- Update Input/Select size and styles
+
 ## 2.0.0-beta.35
 
 ### Minor Changes

package/dist/primitive/TextInput/TextInput.cjs

@@ -7,6 +7,13 @@ const index = require("../Typography/index.cjs");
 const TextInput$1 = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/TextInput/TextInput.cjs");
 const TextInput = React.forwardRef((props, ref) => {
   const { leftLabel, icon, ...rest } = props;
+  const prefixFontSizes = {
+    xs: 12,
+    sm: 13,
+    md: 14,
+    lg: 14,
+    xl: 16
+  };
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
     TextInput$1.TextInput,
     {
@@ -29,7 +36,10 @@ const TextInput = React.forwardRef((props, ref) => {
               paddingRight: 12,
               borderTopLeftRadius: theme.defaultRadius,
               borderBottomLeftRadius: theme.defaultRadius,
-              backgroundColor: theme.colors.carbon[2]
+              backgroundColor: theme.colors.carbon[2],
+              "& > .mantine-Text-root": {
+                fontSize: theme.fn.size({ sizes: prefixFontSizes, size: props.size ?? "md" })
+              }
             },
             input: {
               flex: 1,

package/dist/primitive/TextInput/TextInput.js

@@ -5,6 +5,13 @@ import { Typography } from "../Typography/index.js";
 import { TextInput as TextInput$1 } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/TextInput/TextInput.js";
 const TextInput = forwardRef((props, ref) => {
   const { leftLabel, icon, ...rest } = props;
+  const prefixFontSizes = {
+    xs: 12,
+    sm: 13,
+    md: 14,
+    lg: 14,
+    xl: 16
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     TextInput$1,
     {
@@ -27,7 +34,10 @@ const TextInput = forwardRef((props, ref) => {
               paddingRight: 12,
               borderTopLeftRadius: theme.defaultRadius,
               borderBottomLeftRadius: theme.defaultRadius,
-              backgroundColor: theme.colors.carbon[2]
+              backgroundColor: theme.colors.carbon[2],
+              "& > .mantine-Text-root": {
+                fontSize: theme.fn.size({ sizes: prefixFontSizes, size: props.size ?? "md" })
+              }
             },
             input: {
               flex: 1,

package/dist/theme/theme.cjs

@@ -129,51 +129,58 @@ const getButtonStyles = (theme2, params) => {
   return finalStyles;
 };
 const getInputStyles = (theme2, params) => {
-  const inputStyle = {
-    height: 40,
-    minHeight: 40,
-    lineHeight: "38px"
+  const sizes = {
+    xl: 48,
+    lg: 44,
+    md: 40,
+    sm: 32,
+    xs: 28
   };
-  const diffSizeStyles = {
-    sm: {
-      label: {
-        lineHeight: "20px"
-      },
-      input: {
-        ...inputStyle,
-        // This is for PasswordInput, is has different dom structure with normal input
-        // FIXME innerInput is not working in current v5.10.4, use that key after upgrade mantine
-        "& .mantine-PasswordInput-innerInput": inputStyle
-      }
-    }
+  const fontSizes = {
+    xl: 16,
+    lg: 14,
+    md: 14,
+    sm: 13,
+    xs: 12
   };
-  const matches = diffSizeStyles[params.size] || { label: {}, input: {} };
-  const passwordInputSizeStyles = {
-    sm: {
-      height: 38,
-      lineHeight: "38px"
-    }
+  const size = theme2.fn.size({ size: params.size ?? "md", sizes });
+  const inputFontSize = theme2.fn.size({ size: params.size ?? "md", sizes: fontSizes });
+  const inputSize = {
+    height: size,
+    minHeight: size,
+    lineHeight: `${size - 2}px`,
+    fontSize: inputFontSize
+  };
+  const passwordInnerInputSize = {
+    height: size - 2,
+    minHeight: size - 2,
+    lineHeight: `${size - 2}px`,
+    fontSize: inputFontSize
   };
   return {
     label: {
-      ...matches.label,
-      color: theme2.colors.carbon[8]
+      color: theme2.colors.carbon[8],
+      marginBottom: 6,
+      lineHeight: "20px",
+      fontSize: 14
     },
     description: {
-      color: theme2.colors.carbon[7]
+      color: theme2.colors.carbon[7],
+      fontSize: 12
     },
     input: {
-      ...matches.input,
+      ...inputSize,
       color: theme2.colors.carbon[8],
       border: `1px solid ${theme2.colors.carbon[4]}`,
       backgroundColor: theme2.colors.carbon[0],
-      "&:hover:not(:disabled):not(:focus)": {
+      "&:hover": {
         borderColor: theme2.colors.carbon[5]
       },
-      "&:focus": {
+      "&:focus, &:focus-within": {
         borderColor: theme2.colors.carbon[9]
       },
       "&:disabled": {
+        borderColor: theme2.colors.carbon[4],
         backgroundColor: theme2.colors.carbon[2],
         color: theme2.colors.carbon[8],
         opacity: 1
@@ -182,7 +189,7 @@ const getInputStyles = (theme2, params) => {
         color: theme2.colors.carbon[6]
       },
       "& .mantine-PasswordInput-innerInput": {
-        ...passwordInputSizeStyles[params.size],
+        ...passwordInnerInputSize,
         "&::placeholder": {
           color: theme2.colors.carbon[6]
         }
@@ -477,31 +484,23 @@ const theme = {
       defaultProps: {
         transition: "fade",
         transitionDuration: 200,
-        transitionTimingFunction: "ease"
+        transitionTimingFunction: "ease",
+        size: "md"
       },
       styles: (theme2, params) => {
-        const diffSizeStyles = {
-          sm: {
-            label: {
-              lineHeight: "20px"
-            },
-            input: {
-              height: 40,
-              minHeight: 40,
-              lineHeight: "38px"
-            }
-          }
-        };
-        const matches = diffSizeStyles[params.size] || { label: {}, input: {} };
+        const styles = getInputStyles(theme2, { size: params.size });
+        const height = styles.input.height;
         return {
           label: {
-            ...matches.label
+            lineHeight: "20px",
+            marginBottom: 6
           },
           description: {
             color: theme2.colors.carbon[7]
           },
           input: {
-            ...matches.input,
+            height,
+            minHeight: height,
             color: theme2.colors.carbon[8],
             ...params.variant === "unstyled" && {
               border: "none",
@@ -535,6 +534,9 @@ const theme = {
             }
           },
           rightSection: {
+            "& .mantine-ActionIcon-root": {
+              color: `${theme2.colors.carbon[7]} !important`
+            },
             "& [data-chevron]": {
               color: `${theme2.colors.carbon[7]} !important`
             }
@@ -543,34 +545,62 @@ const theme = {
       }
     },
     MultiSelect: {
+      defaultProps: {
+        size: "md",
+        transition: "fade",
+        transitionDuration: 200,
+        transitionTimingFunction: "ease"
+      },
       styles: (theme2, params) => {
-        const diffSizeStyles = {
-          sm: {
-            values: {
-              height: 38,
-              minHeight: 38,
-              lineHeight: "38px"
-            }
-          }
-        };
-        const matches = diffSizeStyles[params.size] || { values: {} };
+        const styles = getInputStyles(theme2, { size: params.size });
+        const inputHeight = styles.input.height;
         return {
+          label: {
+            fontSize: 14,
+            marginBottom: 6
+          },
+          wrapper: {
+            height: inputHeight + 2
+          },
           values: {
-            ...matches.values
+            height: inputHeight - 2,
+            minHeight: inputHeight - 2
+          },
+          value: {
+            height: inputHeight - 12,
+            backgroundColor: theme2.colors.carbon[3],
+            color: theme2.colors.carbon[8]
+          },
+          rightSection: {
+            "& [data-chevron]": {
+              color: `${theme2.colors.carbon[7]} !important`
+            }
           }
         };
       }
     },
     Input: {
+      defaultProps: {
+        size: "md"
+      },
       styles: getInputStyles
     },
     TextInput: {
+      defaultProps: {
+        size: "md"
+      },
       styles: getInputStyles
     },
     PasswordInput: {
+      defaultProps: {
+        size: "md"
+      },
       styles: getInputStyles
     },
     NumberInput: {
+      defaultProps: {
+        size: "md"
+      },
       styles: getInputStyles
     },
     Textarea: {

package/dist/theme/theme.js

@@ -127,51 +127,58 @@ const getButtonStyles = (theme2, params) => {
   return finalStyles;
 };
 const getInputStyles = (theme2, params) => {
-  const inputStyle = {
-    height: 40,
-    minHeight: 40,
-    lineHeight: "38px"
+  const sizes = {
+    xl: 48,
+    lg: 44,
+    md: 40,
+    sm: 32,
+    xs: 28
   };
-  const diffSizeStyles = {
-    sm: {
-      label: {
-        lineHeight: "20px"
-      },
-      input: {
-        ...inputStyle,
-        // This is for PasswordInput, is has different dom structure with normal input
-        // FIXME innerInput is not working in current v5.10.4, use that key after upgrade mantine
-        "& .mantine-PasswordInput-innerInput": inputStyle
-      }
-    }
+  const fontSizes = {
+    xl: 16,
+    lg: 14,
+    md: 14,
+    sm: 13,
+    xs: 12
   };
-  const matches = diffSizeStyles[params.size] || { label: {}, input: {} };
-  const passwordInputSizeStyles = {
-    sm: {
-      height: 38,
-      lineHeight: "38px"
-    }
+  const size = theme2.fn.size({ size: params.size ?? "md", sizes });
+  const inputFontSize = theme2.fn.size({ size: params.size ?? "md", sizes: fontSizes });
+  const inputSize = {
+    height: size,
+    minHeight: size,
+    lineHeight: `${size - 2}px`,
+    fontSize: inputFontSize
+  };
+  const passwordInnerInputSize = {
+    height: size - 2,
+    minHeight: size - 2,
+    lineHeight: `${size - 2}px`,
+    fontSize: inputFontSize
   };
   return {
     label: {
-      ...matches.label,
-      color: theme2.colors.carbon[8]
+      color: theme2.colors.carbon[8],
+      marginBottom: 6,
+      lineHeight: "20px",
+      fontSize: 14
     },
     description: {
-      color: theme2.colors.carbon[7]
+      color: theme2.colors.carbon[7],
+      fontSize: 12
     },
     input: {
-      ...matches.input,
+      ...inputSize,
       color: theme2.colors.carbon[8],
       border: `1px solid ${theme2.colors.carbon[4]}`,
       backgroundColor: theme2.colors.carbon[0],
-      "&:hover:not(:disabled):not(:focus)": {
+      "&:hover": {
         borderColor: theme2.colors.carbon[5]
       },
-      "&:focus": {
+      "&:focus, &:focus-within": {
         borderColor: theme2.colors.carbon[9]
       },
       "&:disabled": {
+        borderColor: theme2.colors.carbon[4],
         backgroundColor: theme2.colors.carbon[2],
         color: theme2.colors.carbon[8],
         opacity: 1
@@ -180,7 +187,7 @@ const getInputStyles = (theme2, params) => {
         color: theme2.colors.carbon[6]
       },
       "& .mantine-PasswordInput-innerInput": {
-        ...passwordInputSizeStyles[params.size],
+        ...passwordInnerInputSize,
         "&::placeholder": {
           color: theme2.colors.carbon[6]
         }
@@ -475,31 +482,23 @@ const theme = {
       defaultProps: {
         transition: "fade",
         transitionDuration: 200,
-        transitionTimingFunction: "ease"
+        transitionTimingFunction: "ease",
+        size: "md"
       },
       styles: (theme2, params) => {
-        const diffSizeStyles = {
-          sm: {
-            label: {
-              lineHeight: "20px"
-            },
-            input: {
-              height: 40,
-              minHeight: 40,
-              lineHeight: "38px"
-            }
-          }
-        };
-        const matches = diffSizeStyles[params.size] || { label: {}, input: {} };
+        const styles = getInputStyles(theme2, { size: params.size });
+        const height = styles.input.height;
         return {
           label: {
-            ...matches.label
+            lineHeight: "20px",
+            marginBottom: 6
           },
           description: {
             color: theme2.colors.carbon[7]
           },
           input: {
-            ...matches.input,
+            height,
+            minHeight: height,
             color: theme2.colors.carbon[8],
             ...params.variant === "unstyled" && {
               border: "none",
@@ -533,6 +532,9 @@ const theme = {
             }
           },
           rightSection: {
+            "& .mantine-ActionIcon-root": {
+              color: `${theme2.colors.carbon[7]} !important`
+            },
             "& [data-chevron]": {
               color: `${theme2.colors.carbon[7]} !important`
             }
@@ -541,34 +543,62 @@ const theme = {
       }
     },
     MultiSelect: {
+      defaultProps: {
+        size: "md",
+        transition: "fade",
+        transitionDuration: 200,
+        transitionTimingFunction: "ease"
+      },
       styles: (theme2, params) => {
-        const diffSizeStyles = {
-          sm: {
-            values: {
-              height: 38,
-              minHeight: 38,
-              lineHeight: "38px"
-            }
-          }
-        };
-        const matches = diffSizeStyles[params.size] || { values: {} };
+        const styles = getInputStyles(theme2, { size: params.size });
+        const inputHeight = styles.input.height;
         return {
+          label: {
+            fontSize: 14,
+            marginBottom: 6
+          },
+          wrapper: {
+            height: inputHeight + 2
+          },
           values: {
-            ...matches.values
+            height: inputHeight - 2,
+            minHeight: inputHeight - 2
+          },
+          value: {
+            height: inputHeight - 12,
+            backgroundColor: theme2.colors.carbon[3],
+            color: theme2.colors.carbon[8]
+          },
+          rightSection: {
+            "& [data-chevron]": {
+              color: `${theme2.colors.carbon[7]} !important`
+            }
           }
         };
       }
     },
     Input: {
+      defaultProps: {
+        size: "md"
+      },
       styles: getInputStyles
     },
     TextInput: {
+      defaultProps: {
+        size: "md"
+      },
       styles: getInputStyles
     },
     PasswordInput: {
+      defaultProps: {
+        size: "md"
+      },
       styles: getInputStyles
     },
     NumberInput: {
+      defaultProps: {
+        size: "md"
+      },
       styles: getInputStyles
     },
     Textarea: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tidbcloud/uikit",
-  "version": "2.0.0-beta.35",
+  "version": "2.0.0-beta.36",
   "description": "tidbcloud uikit",
   "type": "module",
   "main": "dist/primitive/index.cjs",