@tidbcloud/uikit 2.4.2 → 2.4.4

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/Form/Switch.cjs +1 -1
  3. package/dist/biz/Form/Switch.mjs +1 -1
  4. package/dist/theme/theme.cjs +32 -17
  5. package/dist/theme/theme.mjs +32 -17
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.4.4
4
+
5
+ ### Patch Changes
6
+
7
+ - fix(uikit): enhance Tabs component with variant themes support and update storybook controls ([#549](https://github.com/tidbcloud/tidbcloud-uikit/pull/549))
8
+
9
+ ## 2.4.3
10
+
11
+ ### Patch Changes
12
+
13
+ - fix(biz): update onChange handler in FormSwitch to pass event instead of value ([#547](https://github.com/tidbcloud/tidbcloud-uikit/pull/547))
14
+
3
15
  ## 2.4.2
4
16
 
5
17
  ### Patch Changes
package/dist/biz/Form/Switch.cjs CHANGED
@@ -28,7 +28,7 @@ const FormSwitch = ({ name, rules, onChange, label, ...rest }) => {
28
28
  ...rest,
29
29
  onChange: (e) => {
30
30
  handleChange(e.currentTarget.checked);
31
- onChange == null ? void 0 : onChange(value);
31
+ onChange == null ? void 0 : onChange(e);
32
32
  },
33
33
  ...restField,
34
34
  error: error ? /* @__PURE__ */ jsxRuntime.jsx(errorMessage.ErrorMessage, { errors: formState.errors, name }) : void 0
package/dist/biz/Form/Switch.mjs CHANGED
@@ -26,7 +26,7 @@ const FormSwitch = ({ name, rules, onChange, label, ...rest }) => {
26
26
  ...rest,
27
27
  onChange: (e) => {
28
28
  handleChange(e.currentTarget.checked);
29
- onChange == null ? void 0 : onChange(value);
29
+ onChange == null ? void 0 : onChange(e);
30
30
  },
31
31
  ...restField,
32
32
  error: error ? /* @__PURE__ */ jsx(ErrorMessage, { errors: formState.errors, name }) : void 0
package/dist/theme/theme.cjs CHANGED
@@ -342,25 +342,40 @@ const theme = createTheme.createTheme({
342
342
  },
343
343
  Tabs: {
344
344
  styles(theme2, props) {
345
- return {
346
- list: {
347
- gap: props.orientation === "vertical" ? 8 : 32,
348
- border: 0
349
- },
350
- tab: {
351
- color: themeColor(theme2, "carbon", 7),
352
- fontWeight: 600,
353
- paddingLeft: 0,
354
- paddingRight: props.orientation === "vertical" ? 8 : 0,
355
- "&[data-active]": {
356
- color: themeColor(theme2, "carbon", 9)
345
+ const variant = props.variant || "default";
346
+ if (variant === "default") {
347
+ return {
348
+ list: {
349
+ "--tab-border-color": "transparent",
350
+ gap: props.orientation === "vertical" ? 8 : 32,
351
+ border: 0
357
352
  },
358
- "&:hover": {
359
- color: themeColor(theme2, "carbon", 9),
360
- backgroundColor: "transparent"
353
+ tab: {
354
+ color: themeColor(theme2, "carbon", 7),
355
+ fontWeight: 600,
356
+ paddingLeft: 0,
357
+ paddingRight: props.orientation === "vertical" ? 8 : 0,
358
+ "&[data-active]": {
359
+ color: themeColor(theme2, "carbon", 9)
360
+ },
361
+ "&:hover": {
362
+ color: themeColor(theme2, "carbon", 9),
363
+ backgroundColor: "transparent"
364
+ }
361
365
  }
362
- }
363
- };
366
+ };
367
+ }
368
+ if (variant === "outline") {
369
+ return {
370
+ list: {
371
+ "--tab-border-color": themeColor(theme2, "carbon", 4)
372
+ }
373
+ };
374
+ }
375
+ if (variant === "pills") {
376
+ return {};
377
+ }
378
+ return {};
364
379
  }
365
380
  },
366
381
  Notification: {
package/dist/theme/theme.mjs CHANGED
@@ -340,25 +340,40 @@ const theme = createTheme({
340
340
  },
341
341
  Tabs: {
342
342
  styles(theme2, props) {
343
- return {
344
- list: {
345
- gap: props.orientation === "vertical" ? 8 : 32,
346
- border: 0
347
- },
348
- tab: {
349
- color: themeColor(theme2, "carbon", 7),
350
- fontWeight: 600,
351
- paddingLeft: 0,
352
- paddingRight: props.orientation === "vertical" ? 8 : 0,
353
- "&[data-active]": {
354
- color: themeColor(theme2, "carbon", 9)
343
+ const variant = props.variant || "default";
344
+ if (variant === "default") {
345
+ return {
346
+ list: {
347
+ "--tab-border-color": "transparent",
348
+ gap: props.orientation === "vertical" ? 8 : 32,
349
+ border: 0
355
350
  },
356
- "&:hover": {
357
- color: themeColor(theme2, "carbon", 9),
358
- backgroundColor: "transparent"
351
+ tab: {
352
+ color: themeColor(theme2, "carbon", 7),
353
+ fontWeight: 600,
354
+ paddingLeft: 0,
355
+ paddingRight: props.orientation === "vertical" ? 8 : 0,
356
+ "&[data-active]": {
357
+ color: themeColor(theme2, "carbon", 9)
358
+ },
359
+ "&:hover": {
360
+ color: themeColor(theme2, "carbon", 9),
361
+ backgroundColor: "transparent"
362
+ }
359
363
  }
360
- }
361
- };
364
+ };
365
+ }
366
+ if (variant === "outline") {
367
+ return {
368
+ list: {
369
+ "--tab-border-color": themeColor(theme2, "carbon", 4)
370
+ }
371
+ };
372
+ }
373
+ if (variant === "pills") {
374
+ return {};
375
+ }
376
+ return {};
362
377
  }
363
378
  },
364
379
  Notification: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.4.2",
3
+ "version": "2.4.4",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",