@tidbcloud/uikit 2.1.0 → 2.1.2

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.1.2
4
+
5
+ ### Patch Changes
6
+
7
+ - fix(uikit/theme): fix separator styles with data attributes ([#471](https://github.com/tidbcloud/tidbcloud-uikit/pull/471))
8
+
9
+ ## 2.1.1
10
+
11
+ ### Patch Changes
12
+
13
+ - fix(ProTable): enable highlightOnHover ([#468](https://github.com/tidbcloud/tidbcloud-uikit/pull/468))
14
+
3
15
  ## 2.1.0
4
16
 
5
17
  ### Minor Changes
@@ -74,7 +74,9 @@ function mergeProTableProps(props) {
74
74
  borderRadius: withBorder ? theme2.defaultRadius : 0,
75
75
  borderColor: withBorder ? theme2.colors.carbon[4] : "transparent",
76
76
  overflow: "hidden",
77
- transition: "none"
77
+ transition: "none",
78
+ // see https://v2.mantine-react-table.com/docs/guides/customize-component-styles#how-to-set-mrt-css-variables
79
+ "--mrt-row-hover-background-color": theme2.colors.carbon[3]
78
80
  })
79
81
  },
80
82
  mantinePaperProps
@@ -105,9 +107,6 @@ function mergeProTableProps(props) {
105
107
  transition: "none",
106
108
  backgroundColor: theme.colors.carbon[0],
107
109
  color: theme.colors.carbon[8],
108
- "&:hover": {
109
- backgroundColor: `${theme.colors.carbon[3]} !important`
110
- },
111
110
  td: {
112
111
  borderColor: theme.colors.carbon[3]
113
112
  },
@@ -173,11 +172,6 @@ function mergeProTableProps(props) {
173
172
  borderBottom: enableRowVirtualization || layoutMode && layoutMode !== "semantic" ? "none !important" : void 0
174
173
  }
175
174
  },
176
- "&[data-hover]": {
177
- "&:hover": {
178
- "--mrt-row-hover-background-color": theme.colors.carbon[3]
179
- }
180
- },
181
175
  "&:not([data-striped], [data-striped='false'])": {
182
176
  backgroundColor: theme.colors.carbon[0]
183
177
  },
@@ -72,7 +72,9 @@ function mergeProTableProps(props) {
72
72
  borderRadius: withBorder ? theme2.defaultRadius : 0,
73
73
  borderColor: withBorder ? theme2.colors.carbon[4] : "transparent",
74
74
  overflow: "hidden",
75
- transition: "none"
75
+ transition: "none",
76
+ // see https://v2.mantine-react-table.com/docs/guides/customize-component-styles#how-to-set-mrt-css-variables
77
+ "--mrt-row-hover-background-color": theme2.colors.carbon[3]
76
78
  })
77
79
  },
78
80
  mantinePaperProps
@@ -103,9 +105,6 @@ function mergeProTableProps(props) {
103
105
  transition: "none",
104
106
  backgroundColor: theme.colors.carbon[0],
105
107
  color: theme.colors.carbon[8],
106
- "&:hover": {
107
- backgroundColor: `${theme.colors.carbon[3]} !important`
108
- },
109
108
  td: {
110
109
  borderColor: theme.colors.carbon[3]
111
110
  },
@@ -171,11 +170,6 @@ function mergeProTableProps(props) {
171
170
  borderBottom: enableRowVirtualization || layoutMode && layoutMode !== "semantic" ? "none !important" : void 0
172
171
  }
173
172
  },
174
- "&[data-hover]": {
175
- "&:hover": {
176
- "--mrt-row-hover-background-color": theme.colors.carbon[3]
177
- }
178
- },
179
173
  "&:not([data-striped], [data-striped='false'])": {
180
174
  backgroundColor: theme.colors.carbon[0]
181
175
  },
@@ -504,16 +504,16 @@ const theme = createTheme.createTheme({
504
504
  }
505
505
  },
506
506
  separator: {
507
- backgroundColor: themeColor(theme2, color, 4)
508
- },
509
- separatorActive: {
510
- backgroundColor: themeColor(theme2, color, 9)
507
+ backgroundColor: themeColor(theme2, color, 4),
508
+ "&[data-active]": {
509
+ backgroundColor: themeColor(theme2, color, 9)
510
+ }
511
511
  },
512
512
  verticalSeparator: {
513
- backgroundColor: themeColor(theme2, color, 4)
514
- },
515
- verticalSeparatorActive: {
516
- backgroundColor: themeColor(theme2, color, 9)
513
+ borderColor: themeColor(theme2, color, 4),
514
+ "&[data-active]": {
515
+ borderColor: themeColor(theme2, color, 9)
516
+ }
517
517
  }
518
518
  };
519
519
  }
@@ -502,16 +502,16 @@ const theme = createTheme({
502
502
  }
503
503
  },
504
504
  separator: {
505
- backgroundColor: themeColor(theme2, color, 4)
506
- },
507
- separatorActive: {
508
- backgroundColor: themeColor(theme2, color, 9)
505
+ backgroundColor: themeColor(theme2, color, 4),
506
+ "&[data-active]": {
507
+ backgroundColor: themeColor(theme2, color, 9)
508
+ }
509
509
  },
510
510
  verticalSeparator: {
511
- backgroundColor: themeColor(theme2, color, 4)
512
- },
513
- verticalSeparatorActive: {
514
- backgroundColor: themeColor(theme2, color, 9)
511
+ borderColor: themeColor(theme2, color, 4),
512
+ "&[data-active]": {
513
+ borderColor: themeColor(theme2, color, 9)
514
+ }
515
515
  }
516
516
  };
517
517
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.1.0",
3
+ "version": "2.1.2",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",