@tidbcloud/uikit 2.4.13 → 2.4.14

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 (4) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/theme/theme.cjs +28 -9
  3. package/dist/theme/theme.mjs +28 -9
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.4.14
4
+
5
+ ### Patch Changes
6
+
7
+ - feat(TagsInput): add size support and styles to theme configuration ([#570](https://github.com/tidbcloud/tidbcloud-uikit/pull/570))
8
+
3
9
  ## 2.4.13
4
10
 
5
11
  ### Patch Changes
package/dist/theme/theme.cjs CHANGED
@@ -38,6 +38,11 @@ function getInputStyles(theme2, props) {
38
38
  "--input-line-height": `${size - 2}px`,
39
39
  "--input-fz": `${inputFontSize}px`
40
40
  } : {};
41
+ const withInputSize = {
42
+ "&:not(.mantine-Textarea-input)": {
43
+ ...inputSize
44
+ }
45
+ };
41
46
  const passwordInnerInputSize = size ? {
42
47
  height: size - 2,
43
48
  minHeight: size - 2,
@@ -47,9 +52,7 @@ function getInputStyles(theme2, props) {
47
52
  if (props.variant === "unstyled") {
48
53
  return {
49
54
  input: {
50
- "&:not(.mantine-Textarea-input)": {
51
- ...inputSize
52
- },
55
+ ...withInputSize,
53
56
  "& .mantine-PasswordInput-innerInput": {
54
57
  ...passwordInnerInputSize
55
58
  },
@@ -64,9 +67,7 @@ function getInputStyles(theme2, props) {
64
67
  input: {
65
68
  "--input-bg": themeColor(theme2, "carbon", 3),
66
69
  "--input-bd-focus": themeColor(theme2, "carbon", 9),
67
- "&:not(.mantine-Textarea-input)": {
68
- ...inputSize
69
- },
70
+ ...withInputSize,
70
71
  "& .mantine-PasswordInput-innerInput": {
71
72
  ...passwordInnerInputSize
72
73
  },
@@ -91,9 +92,7 @@ function getInputStyles(theme2, props) {
91
92
  color: theme2.colors.carbon[8],
92
93
  border: `1px solid ${themeColor(theme2, "carbon", 4)}`,
93
94
  backgroundColor: themeColor(theme2, "carbon", 0),
94
- "&:not(.mantine-Textarea-input)": {
95
- ...inputSize
96
- },
95
+ ...withInputSize,
97
96
  "&:hover": {
98
97
  borderColor: themeColor(theme2, "carbon", 5)
99
98
  },
@@ -692,6 +691,26 @@ const theme = createTheme.createTheme({
692
691
  Textarea: {
693
692
  styles: getInputStyles
694
693
  },
694
+ TagsInput: {
695
+ styles: (theme2, props) => {
696
+ const size = InputSizes[props.size ?? "md"];
697
+ const inputSize = `calc(${size}px - 2 * var(--input-padding-y, 0rem) - 2px)`;
698
+ return {
699
+ input: {
700
+ height: "auto"
701
+ },
702
+ inputField: {
703
+ height: inputSize
704
+ },
705
+ pill: {
706
+ height: inputSize,
707
+ "& .mantine-Pill-label": {
708
+ lineHeight: inputSize
709
+ }
710
+ }
711
+ };
712
+ }
713
+ },
695
714
  Badge: {
696
715
  defaultProps: {
697
716
  color: "peacock",
package/dist/theme/theme.mjs CHANGED
@@ -36,6 +36,11 @@ function getInputStyles(theme2, props) {
36
36
  "--input-line-height": `${size - 2}px`,
37
37
  "--input-fz": `${inputFontSize}px`
38
38
  } : {};
39
+ const withInputSize = {
40
+ "&:not(.mantine-Textarea-input)": {
41
+ ...inputSize
42
+ }
43
+ };
39
44
  const passwordInnerInputSize = size ? {
40
45
  height: size - 2,
41
46
  minHeight: size - 2,
@@ -45,9 +50,7 @@ function getInputStyles(theme2, props) {
45
50
  if (props.variant === "unstyled") {
46
51
  return {
47
52
  input: {
48
- "&:not(.mantine-Textarea-input)": {
49
- ...inputSize
50
- },
53
+ ...withInputSize,
51
54
  "& .mantine-PasswordInput-innerInput": {
52
55
  ...passwordInnerInputSize
53
56
  },
@@ -62,9 +65,7 @@ function getInputStyles(theme2, props) {
62
65
  input: {
63
66
  "--input-bg": themeColor(theme2, "carbon", 3),
64
67
  "--input-bd-focus": themeColor(theme2, "carbon", 9),
65
- "&:not(.mantine-Textarea-input)": {
66
- ...inputSize
67
- },
68
+ ...withInputSize,
68
69
  "& .mantine-PasswordInput-innerInput": {
69
70
  ...passwordInnerInputSize
70
71
  },
@@ -89,9 +90,7 @@ function getInputStyles(theme2, props) {
89
90
  color: theme2.colors.carbon[8],
90
91
  border: `1px solid ${themeColor(theme2, "carbon", 4)}`,
91
92
  backgroundColor: themeColor(theme2, "carbon", 0),
92
- "&:not(.mantine-Textarea-input)": {
93
- ...inputSize
94
- },
93
+ ...withInputSize,
95
94
  "&:hover": {
96
95
  borderColor: themeColor(theme2, "carbon", 5)
97
96
  },
@@ -690,6 +689,26 @@ const theme = createTheme({
690
689
  Textarea: {
691
690
  styles: getInputStyles
692
691
  },
692
+ TagsInput: {
693
+ styles: (theme2, props) => {
694
+ const size = InputSizes[props.size ?? "md"];
695
+ const inputSize = `calc(${size}px - 2 * var(--input-padding-y, 0rem) - 2px)`;
696
+ return {
697
+ input: {
698
+ height: "auto"
699
+ },
700
+ inputField: {
701
+ height: inputSize
702
+ },
703
+ pill: {
704
+ height: inputSize,
705
+ "& .mantine-Pill-label": {
706
+ lineHeight: inputSize
707
+ }
708
+ }
709
+ };
710
+ }
711
+ },
693
712
  Badge: {
694
713
  defaultProps: {
695
714
  color: "peacock",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.4.13",
3
+ "version": "2.4.14",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",