@tidbcloud/uikit 2.4.13 → 2.4.15

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/biz/ProMultiSelect/index.cjs +2 -2
  3. package/dist/biz/ProMultiSelect/index.mjs +2 -2
  4. package/dist/theme/theme.cjs +28 -9
  5. package/dist/theme/theme.mjs +28 -9
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.4.15
4
+
5
+ ### Patch Changes
6
+
7
+ - Fix/promultiselect UI issule ([#572](https://github.com/tidbcloud/tidbcloud-uikit/pull/572))
8
+
9
+ ## 2.4.14
10
+
11
+ ### Patch Changes
12
+
13
+ - feat(TagsInput): add size support and styles to theme configuration ([#570](https://github.com/tidbcloud/tidbcloud-uikit/pull/570))
14
+
3
15
  ## 2.4.13
4
16
 
5
17
  ### Patch Changes
package/dist/biz/ProMultiSelect/index.cjs CHANGED
@@ -382,7 +382,7 @@ const ProMultiSelect = (_props) => {
382
382
  type: "button",
383
383
  pointer: true,
384
384
  disabled: disabled || loading,
385
- rightSection: loading ? /* @__PURE__ */ jsxRuntime.jsx(Loader.Loader, { size: "sm" }) : _clearable ? clearButton : /* @__PURE__ */ jsxRuntime.jsx(Combobox.Combobox.Chevron, {}),
385
+ rightSection: loading ? /* @__PURE__ */ jsxRuntime.jsx(Loader.Loader, { size: "sm" }) : _clearable ? clearButton : /* @__PURE__ */ jsxRuntime.jsx(Combobox.Combobox.Chevron, { c: "carbon.7", size: "20" }),
386
386
  label,
387
387
  styles: {
388
388
  label: { color: theme.colors.carbon[8], marginBottom: 6, fontSize: 14, lineHeight: "20px" },
@@ -392,7 +392,7 @@ const ProMultiSelect = (_props) => {
392
392
  rightSectionPointerEvents: value === null ? "none" : "all",
393
393
  onClick: () => combobox.toggleDropdown(),
394
394
  children: [
395
- _value.length === 0 && !!placeholder && /* @__PURE__ */ jsxRuntime.jsx(Input.Input.Placeholder, { children: placeholder }),
395
+ _value.length === 0 && !!placeholder && /* @__PURE__ */ jsxRuntime.jsx(Input.Input.Placeholder, { c: "carbon.6", children: placeholder }),
396
396
  /* @__PURE__ */ jsxRuntime.jsx(
397
397
  Pill.Pill.Group,
398
398
  {
package/dist/biz/ProMultiSelect/index.mjs CHANGED
@@ -380,7 +380,7 @@ const ProMultiSelect = (_props) => {
380
380
  type: "button",
381
381
  pointer: true,
382
382
  disabled: disabled || loading,
383
- rightSection: loading ? /* @__PURE__ */ jsx(Loader, { size: "sm" }) : _clearable ? clearButton : /* @__PURE__ */ jsx(Combobox.Chevron, {}),
383
+ rightSection: loading ? /* @__PURE__ */ jsx(Loader, { size: "sm" }) : _clearable ? clearButton : /* @__PURE__ */ jsx(Combobox.Chevron, { c: "carbon.7", size: "20" }),
384
384
  label,
385
385
  styles: {
386
386
  label: { color: theme.colors.carbon[8], marginBottom: 6, fontSize: 14, lineHeight: "20px" },
@@ -390,7 +390,7 @@ const ProMultiSelect = (_props) => {
390
390
  rightSectionPointerEvents: value === null ? "none" : "all",
391
391
  onClick: () => combobox.toggleDropdown(),
392
392
  children: [
393
- _value.length === 0 && !!placeholder && /* @__PURE__ */ jsx(Input.Placeholder, { children: placeholder }),
393
+ _value.length === 0 && !!placeholder && /* @__PURE__ */ jsx(Input.Placeholder, { c: "carbon.6", children: placeholder }),
394
394
  /* @__PURE__ */ jsx(
395
395
  Pill.Group,
396
396
  {
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.15",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",