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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/primitive/TextInput/TextInput.cjs +11 -1
  3. package/dist/primitive/TextInput/TextInput.js +11 -1
  4. package/dist/theme/theme.cjs +106 -58
  5. package/dist/theme/theme.js +106 -58
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.0.0-beta.36
4
+
5
+ ### Minor Changes
6
+
7
+ - Update Input/Select size and styles
8
+
9
+ ## 2.0.0-beta.35
10
+
11
+ ### Minor Changes
12
+
13
+ - Update Select unstyled/filled variant styles and make input default border to carbon4
14
+
3
15
  ## 2.0.0-beta.34
4
16
 
5
17
  ### Patch Changes
package/dist/primitive/TextInput/TextInput.cjs CHANGED
@@ -7,6 +7,13 @@ const index = require("../Typography/index.cjs");
7
7
  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");
8
8
  const TextInput = React.forwardRef((props, ref) => {
9
9
  const { leftLabel, icon, ...rest } = props;
10
+ const prefixFontSizes = {
11
+ xs: 12,
12
+ sm: 13,
13
+ md: 14,
14
+ lg: 14,
15
+ xl: 16
16
+ };
10
17
  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
11
18
  TextInput$1.TextInput,
12
19
  {
@@ -29,7 +36,10 @@ const TextInput = React.forwardRef((props, ref) => {
29
36
  paddingRight: 12,
30
37
  borderTopLeftRadius: theme.defaultRadius,
31
38
  borderBottomLeftRadius: theme.defaultRadius,
32
- backgroundColor: theme.colors.carbon[2]
39
+ backgroundColor: theme.colors.carbon[2],
40
+ "& > .mantine-Text-root": {
41
+ fontSize: theme.fn.size({ sizes: prefixFontSizes, size: props.size ?? "md" })
42
+ }
33
43
  },
34
44
  input: {
35
45
  flex: 1,
package/dist/primitive/TextInput/TextInput.js CHANGED
@@ -5,6 +5,13 @@ import { Typography } from "../Typography/index.js";
5
5
  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";
6
6
  const TextInput = forwardRef((props, ref) => {
7
7
  const { leftLabel, icon, ...rest } = props;
8
+ const prefixFontSizes = {
9
+ xs: 12,
10
+ sm: 13,
11
+ md: 14,
12
+ lg: 14,
13
+ xl: 16
14
+ };
8
15
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
9
16
  TextInput$1,
10
17
  {
@@ -27,7 +34,10 @@ const TextInput = forwardRef((props, ref) => {
27
34
  paddingRight: 12,
28
35
  borderTopLeftRadius: theme.defaultRadius,
29
36
  borderBottomLeftRadius: theme.defaultRadius,
30
- backgroundColor: theme.colors.carbon[2]
37
+ backgroundColor: theme.colors.carbon[2],
38
+ "& > .mantine-Text-root": {
39
+ fontSize: theme.fn.size({ sizes: prefixFontSizes, size: props.size ?? "md" })
40
+ }
31
41
  },
32
42
  input: {
33
43
  flex: 1,
package/dist/theme/theme.cjs CHANGED
@@ -129,48 +129,58 @@ const getButtonStyles = (theme2, params) => {
129
129
  return finalStyles;
130
130
  };
131
131
  const getInputStyles = (theme2, params) => {
132
- const inputStyle = {
133
- height: 40,
134
- minHeight: 40,
135
- lineHeight: "38px"
132
+ const sizes = {
133
+ xl: 48,
134
+ lg: 44,
135
+ md: 40,
136
+ sm: 32,
137
+ xs: 28
136
138
  };
137
- const diffSizeStyles = {
138
- sm: {
139
- label: {
140
- lineHeight: "20px"
141
- },
142
- input: {
143
- ...inputStyle,
144
- // This is for PasswordInput, is has different dom structure with normal input
145
- // FIXME innerInput is not working in current v5.10.4, use that key after upgrade mantine
146
- "& .mantine-PasswordInput-innerInput": inputStyle
147
- }
148
- }
139
+ const fontSizes = {
140
+ xl: 16,
141
+ lg: 14,
142
+ md: 14,
143
+ sm: 13,
144
+ xs: 12
149
145
  };
150
- const matches = diffSizeStyles[params.size] || { label: {}, input: {} };
151
- const passwordInputSizeStyles = {
152
- sm: {
153
- height: 38,
154
- lineHeight: "38px"
155
- }
146
+ const size = theme2.fn.size({ size: params.size ?? "md", sizes });
147
+ const inputFontSize = theme2.fn.size({ size: params.size ?? "md", sizes: fontSizes });
148
+ const inputSize = {
149
+ height: size,
150
+ minHeight: size,
151
+ lineHeight: `${size - 2}px`,
152
+ fontSize: inputFontSize
153
+ };
154
+ const passwordInnerInputSize = {
155
+ height: size - 2,
156
+ minHeight: size - 2,
157
+ lineHeight: `${size - 2}px`,
158
+ fontSize: inputFontSize
156
159
  };
157
160
  return {
158
161
  label: {
159
- ...matches.label,
160
- color: theme2.colors.carbon[8]
162
+ color: theme2.colors.carbon[8],
163
+ marginBottom: 6,
164
+ lineHeight: "20px",
165
+ fontSize: 14
161
166
  },
162
167
  description: {
163
- color: theme2.colors.carbon[7]
168
+ color: theme2.colors.carbon[7],
169
+ fontSize: 12
164
170
  },
165
171
  input: {
166
- ...matches.input,
172
+ ...inputSize,
167
173
  color: theme2.colors.carbon[8],
168
- border: `1px solid ${theme2.colors.carbon[5]}`,
174
+ border: `1px solid ${theme2.colors.carbon[4]}`,
169
175
  backgroundColor: theme2.colors.carbon[0],
170
- "&:focus": {
176
+ "&:hover": {
177
+ borderColor: theme2.colors.carbon[5]
178
+ },
179
+ "&:focus, &:focus-within": {
171
180
  borderColor: theme2.colors.carbon[9]
172
181
  },
173
182
  "&:disabled": {
183
+ borderColor: theme2.colors.carbon[4],
174
184
  backgroundColor: theme2.colors.carbon[2],
175
185
  color: theme2.colors.carbon[8],
176
186
  opacity: 1
@@ -179,7 +189,7 @@ const getInputStyles = (theme2, params) => {
179
189
  color: theme2.colors.carbon[6]
180
190
  },
181
191
  "& .mantine-PasswordInput-innerInput": {
182
- ...passwordInputSizeStyles[params.size],
192
+ ...passwordInnerInputSize,
183
193
  "&::placeholder": {
184
194
  color: theme2.colors.carbon[6]
185
195
  }
@@ -474,32 +484,38 @@ const theme = {
474
484
  defaultProps: {
475
485
  transition: "fade",
476
486
  transitionDuration: 200,
477
- transitionTimingFunction: "ease"
487
+ transitionTimingFunction: "ease",
488
+ size: "md"
478
489
  },
479
490
  styles: (theme2, params) => {
480
- const diffSizeStyles = {
481
- sm: {
482
- label: {
483
- lineHeight: "20px"
484
- },
485
- input: {
486
- height: 40,
487
- minHeight: 40,
488
- lineHeight: "38px"
489
- }
490
- }
491
- };
492
- const matches = diffSizeStyles[params.size] || { label: {}, input: {} };
491
+ const styles = getInputStyles(theme2, { size: params.size });
492
+ const height = styles.input.height;
493
493
  return {
494
494
  label: {
495
- ...matches.label
495
+ lineHeight: "20px",
496
+ marginBottom: 6
496
497
  },
497
498
  description: {
498
499
  color: theme2.colors.carbon[7]
499
500
  },
500
501
  input: {
501
- ...matches.input,
502
- color: theme2.colors.carbon[8]
502
+ height,
503
+ minHeight: height,
504
+ color: theme2.colors.carbon[8],
505
+ ...params.variant === "unstyled" && {
506
+ border: "none",
507
+ "&:disabled": {
508
+ color: theme2.colors.carbon[7]
509
+ }
510
+ },
511
+ ...params.variant === "filled" && {
512
+ backgroundColor: theme2.colors.carbon[2],
513
+ borderColor: "transparent",
514
+ "&:disabled": {
515
+ color: theme2.colors.carbon[6],
516
+ cursor: "not-allowed"
517
+ }
518
+ }
503
519
  },
504
520
  item: {
505
521
  transition: "background 150ms ease-in-out",
@@ -509,7 +525,8 @@ const theme = {
509
525
  backgroundColor: theme2.colors.carbon[3]
510
526
  },
511
527
  "&[data-selected]": {
512
- color: theme2.colors.peacock[7],
528
+ color: theme2.colors.carbon[8],
529
+ fontWeight: 700,
513
530
  backgroundColor: "transparent",
514
531
  "&:hover": {
515
532
  backgroundColor: theme2.colors.carbon[3]
@@ -517,6 +534,9 @@ const theme = {
517
534
  }
518
535
  },
519
536
  rightSection: {
537
+ "& .mantine-ActionIcon-root": {
538
+ color: `${theme2.colors.carbon[7]} !important`
539
+ },
520
540
  "& [data-chevron]": {
521
541
  color: `${theme2.colors.carbon[7]} !important`
522
542
  }
@@ -525,34 +545,62 @@ const theme = {
525
545
  }
526
546
  },
527
547
  MultiSelect: {
548
+ defaultProps: {
549
+ size: "md",
550
+ transition: "fade",
551
+ transitionDuration: 200,
552
+ transitionTimingFunction: "ease"
553
+ },
528
554
  styles: (theme2, params) => {
529
- const diffSizeStyles = {
530
- sm: {
531
- values: {
532
- height: 38,
533
- minHeight: 38,
534
- lineHeight: "38px"
535
- }
536
- }
537
- };
538
- const matches = diffSizeStyles[params.size] || { values: {} };
555
+ const styles = getInputStyles(theme2, { size: params.size });
556
+ const inputHeight = styles.input.height;
539
557
  return {
558
+ label: {
559
+ fontSize: 14,
560
+ marginBottom: 6
561
+ },
562
+ wrapper: {
563
+ height: inputHeight + 2
564
+ },
540
565
  values: {
541
- ...matches.values
566
+ height: inputHeight - 2,
567
+ minHeight: inputHeight - 2
568
+ },
569
+ value: {
570
+ height: inputHeight - 12,
571
+ backgroundColor: theme2.colors.carbon[3],
572
+ color: theme2.colors.carbon[8]
573
+ },
574
+ rightSection: {
575
+ "& [data-chevron]": {
576
+ color: `${theme2.colors.carbon[7]} !important`
577
+ }
542
578
  }
543
579
  };
544
580
  }
545
581
  },
546
582
  Input: {
583
+ defaultProps: {
584
+ size: "md"
585
+ },
547
586
  styles: getInputStyles
548
587
  },
549
588
  TextInput: {
589
+ defaultProps: {
590
+ size: "md"
591
+ },
550
592
  styles: getInputStyles
551
593
  },
552
594
  PasswordInput: {
595
+ defaultProps: {
596
+ size: "md"
597
+ },
553
598
  styles: getInputStyles
554
599
  },
555
600
  NumberInput: {
601
+ defaultProps: {
602
+ size: "md"
603
+ },
556
604
  styles: getInputStyles
557
605
  },
558
606
  Textarea: {
package/dist/theme/theme.js CHANGED
@@ -127,48 +127,58 @@ const getButtonStyles = (theme2, params) => {
127
127
  return finalStyles;
128
128
  };
129
129
  const getInputStyles = (theme2, params) => {
130
- const inputStyle = {
131
- height: 40,
132
- minHeight: 40,
133
- lineHeight: "38px"
130
+ const sizes = {
131
+ xl: 48,
132
+ lg: 44,
133
+ md: 40,
134
+ sm: 32,
135
+ xs: 28
134
136
  };
135
- const diffSizeStyles = {
136
- sm: {
137
- label: {
138
- lineHeight: "20px"
139
- },
140
- input: {
141
- ...inputStyle,
142
- // This is for PasswordInput, is has different dom structure with normal input
143
- // FIXME innerInput is not working in current v5.10.4, use that key after upgrade mantine
144
- "& .mantine-PasswordInput-innerInput": inputStyle
145
- }
146
- }
137
+ const fontSizes = {
138
+ xl: 16,
139
+ lg: 14,
140
+ md: 14,
141
+ sm: 13,
142
+ xs: 12
147
143
  };
148
- const matches = diffSizeStyles[params.size] || { label: {}, input: {} };
149
- const passwordInputSizeStyles = {
150
- sm: {
151
- height: 38,
152
- lineHeight: "38px"
153
- }
144
+ const size = theme2.fn.size({ size: params.size ?? "md", sizes });
145
+ const inputFontSize = theme2.fn.size({ size: params.size ?? "md", sizes: fontSizes });
146
+ const inputSize = {
147
+ height: size,
148
+ minHeight: size,
149
+ lineHeight: `${size - 2}px`,
150
+ fontSize: inputFontSize
151
+ };
152
+ const passwordInnerInputSize = {
153
+ height: size - 2,
154
+ minHeight: size - 2,
155
+ lineHeight: `${size - 2}px`,
156
+ fontSize: inputFontSize
154
157
  };
155
158
  return {
156
159
  label: {
157
- ...matches.label,
158
- color: theme2.colors.carbon[8]
160
+ color: theme2.colors.carbon[8],
161
+ marginBottom: 6,
162
+ lineHeight: "20px",
163
+ fontSize: 14
159
164
  },
160
165
  description: {
161
- color: theme2.colors.carbon[7]
166
+ color: theme2.colors.carbon[7],
167
+ fontSize: 12
162
168
  },
163
169
  input: {
164
- ...matches.input,
170
+ ...inputSize,
165
171
  color: theme2.colors.carbon[8],
166
- border: `1px solid ${theme2.colors.carbon[5]}`,
172
+ border: `1px solid ${theme2.colors.carbon[4]}`,
167
173
  backgroundColor: theme2.colors.carbon[0],
168
- "&:focus": {
174
+ "&:hover": {
175
+ borderColor: theme2.colors.carbon[5]
176
+ },
177
+ "&:focus, &:focus-within": {
169
178
  borderColor: theme2.colors.carbon[9]
170
179
  },
171
180
  "&:disabled": {
181
+ borderColor: theme2.colors.carbon[4],
172
182
  backgroundColor: theme2.colors.carbon[2],
173
183
  color: theme2.colors.carbon[8],
174
184
  opacity: 1
@@ -177,7 +187,7 @@ const getInputStyles = (theme2, params) => {
177
187
  color: theme2.colors.carbon[6]
178
188
  },
179
189
  "& .mantine-PasswordInput-innerInput": {
180
- ...passwordInputSizeStyles[params.size],
190
+ ...passwordInnerInputSize,
181
191
  "&::placeholder": {
182
192
  color: theme2.colors.carbon[6]
183
193
  }
@@ -472,32 +482,38 @@ const theme = {
472
482
  defaultProps: {
473
483
  transition: "fade",
474
484
  transitionDuration: 200,
475
- transitionTimingFunction: "ease"
485
+ transitionTimingFunction: "ease",
486
+ size: "md"
476
487
  },
477
488
  styles: (theme2, params) => {
478
- const diffSizeStyles = {
479
- sm: {
480
- label: {
481
- lineHeight: "20px"
482
- },
483
- input: {
484
- height: 40,
485
- minHeight: 40,
486
- lineHeight: "38px"
487
- }
488
- }
489
- };
490
- const matches = diffSizeStyles[params.size] || { label: {}, input: {} };
489
+ const styles = getInputStyles(theme2, { size: params.size });
490
+ const height = styles.input.height;
491
491
  return {
492
492
  label: {
493
- ...matches.label
493
+ lineHeight: "20px",
494
+ marginBottom: 6
494
495
  },
495
496
  description: {
496
497
  color: theme2.colors.carbon[7]
497
498
  },
498
499
  input: {
499
- ...matches.input,
500
- color: theme2.colors.carbon[8]
500
+ height,
501
+ minHeight: height,
502
+ color: theme2.colors.carbon[8],
503
+ ...params.variant === "unstyled" && {
504
+ border: "none",
505
+ "&:disabled": {
506
+ color: theme2.colors.carbon[7]
507
+ }
508
+ },
509
+ ...params.variant === "filled" && {
510
+ backgroundColor: theme2.colors.carbon[2],
511
+ borderColor: "transparent",
512
+ "&:disabled": {
513
+ color: theme2.colors.carbon[6],
514
+ cursor: "not-allowed"
515
+ }
516
+ }
501
517
  },
502
518
  item: {
503
519
  transition: "background 150ms ease-in-out",
@@ -507,7 +523,8 @@ const theme = {
507
523
  backgroundColor: theme2.colors.carbon[3]
508
524
  },
509
525
  "&[data-selected]": {
510
- color: theme2.colors.peacock[7],
526
+ color: theme2.colors.carbon[8],
527
+ fontWeight: 700,
511
528
  backgroundColor: "transparent",
512
529
  "&:hover": {
513
530
  backgroundColor: theme2.colors.carbon[3]
@@ -515,6 +532,9 @@ const theme = {
515
532
  }
516
533
  },
517
534
  rightSection: {
535
+ "& .mantine-ActionIcon-root": {
536
+ color: `${theme2.colors.carbon[7]} !important`
537
+ },
518
538
  "& [data-chevron]": {
519
539
  color: `${theme2.colors.carbon[7]} !important`
520
540
  }
@@ -523,34 +543,62 @@ const theme = {
523
543
  }
524
544
  },
525
545
  MultiSelect: {
546
+ defaultProps: {
547
+ size: "md",
548
+ transition: "fade",
549
+ transitionDuration: 200,
550
+ transitionTimingFunction: "ease"
551
+ },
526
552
  styles: (theme2, params) => {
527
- const diffSizeStyles = {
528
- sm: {
529
- values: {
530
- height: 38,
531
- minHeight: 38,
532
- lineHeight: "38px"
533
- }
534
- }
535
- };
536
- const matches = diffSizeStyles[params.size] || { values: {} };
553
+ const styles = getInputStyles(theme2, { size: params.size });
554
+ const inputHeight = styles.input.height;
537
555
  return {
556
+ label: {
557
+ fontSize: 14,
558
+ marginBottom: 6
559
+ },
560
+ wrapper: {
561
+ height: inputHeight + 2
562
+ },
538
563
  values: {
539
- ...matches.values
564
+ height: inputHeight - 2,
565
+ minHeight: inputHeight - 2
566
+ },
567
+ value: {
568
+ height: inputHeight - 12,
569
+ backgroundColor: theme2.colors.carbon[3],
570
+ color: theme2.colors.carbon[8]
571
+ },
572
+ rightSection: {
573
+ "& [data-chevron]": {
574
+ color: `${theme2.colors.carbon[7]} !important`
575
+ }
540
576
  }
541
577
  };
542
578
  }
543
579
  },
544
580
  Input: {
581
+ defaultProps: {
582
+ size: "md"
583
+ },
545
584
  styles: getInputStyles
546
585
  },
547
586
  TextInput: {
587
+ defaultProps: {
588
+ size: "md"
589
+ },
548
590
  styles: getInputStyles
549
591
  },
550
592
  PasswordInput: {
593
+ defaultProps: {
594
+ size: "md"
595
+ },
551
596
  styles: getInputStyles
552
597
  },
553
598
  NumberInput: {
599
+ defaultProps: {
600
+ size: "md"
601
+ },
554
602
  styles: getInputStyles
555
603
  },
556
604
  Textarea: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.0.0-beta.34",
3
+ "version": "2.0.0-beta.36",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",