From 3c28505038933f2eba809d39f6114170eae14f78 Mon Sep 17 00:00:00 2001
From: ice <49827327+coding-ice@users.noreply.github.com>
Date: Tue, 3 Sep 2024 17:39:02 +0800
Subject: [PATCH] feat(Button): support variant and color (#50051)
* feat(button): variant & color types
* feat: type -> color/variant
* feat: type -> color/variant
* feat: add variant filled
* test: snap
* refactor(button): rename type -> variant
* docs: add demo
* feat: add danger ghost style
* refactor: remove deprecated
* refactor: eslint
* docs: change color&variant
* test: updated snap
* docs: color-variant
* docs: add debug color&variant
* feat: global token
* refactor: remove comment
* docs: add color&variant docs
* docs: remove default
* docs: add space
* docs: code
* test: update snap
* test: fix snap
* test: btn querySelect
* feat: change filled hoverStyle
* test: fix
* feat: support grey wave
* refactor: enhance
* docs: color/variant -> v 5.21
* test: snap
* feat: add token
* test: to do
* test: fix test
* ci: rebuild
* style: remove
* style: space
* docs: add note & FQA
* feat: add componentsToken
* refactor: remove isNotGrey
* test: add case
* docs: tile button
* test: snap
* docs: site & snap
* Update components/button/index.en-US.md
Co-authored-by: lijianan <574980606@qq.com>
Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>
* fix: token color & undef
* docs: site
* docs: responsive
* docs: enhance FAQ
* docs: gap middle
* test: snap
* Update components/theme/interface/maps/colors.ts
Co-authored-by: MadCcc <1075746765@qq.com>
Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>
* Update components/theme/interface/maps/colors.ts
Co-authored-by: MadCcc <1075746765@qq.com>
Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>
* Update components/theme/interface/maps/colors.ts
Co-authored-by: MadCcc <1075746765@qq.com>
Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>
* Update components/button/style/token.ts
Co-authored-by: MadCcc <1075746765@qq.com>
Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>
* Update components/button/style/token.ts
Co-authored-by: MadCcc <1075746765@qq.com>
Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>
* refactor: rename
* docs: prettier
* chore: eslint
* refactor: cls
* test: add solidTextColor case
* refactor: genVariantButtonStyle
* refactor: genVariantButtonStyle
* refactor: genVariantButtonStyle
* fix: rename
* docs: text
* fix: remove border
* feat: add token colorErrorBgFilledHover
* chore: add size-limit
* refactor: rename
---------
Signed-off-by: ice <49827327+coding-ice@users.noreply.github.com>
Co-authored-by: lijianan <574980606@qq.com>
Co-authored-by: MadCcc <1075746765@qq.com>
---
.dumirc.ts | 9 +-
components/_util/__tests__/wave.test.tsx | 10 +-
components/_util/type.ts | 9 +-
components/_util/wave/util.ts | 11 -
.../__snapshots__/demo-extend.test.ts.snap | 10 +-
.../__snapshots__/demo.test.tsx.snap | 10 +-
.../__snapshots__/demo-extend.test.ts.snap | 12 +-
.../__tests__/__snapshots__/demo.test.ts.snap | 12 +-
.../__snapshots__/index.test.tsx.snap | 2 +-
.../__snapshots__/demo-extend.test.ts.snap | 10 +-
.../__tests__/__snapshots__/demo.test.ts.snap | 10 +-
.../__snapshots__/demo-extend.test.ts.snap | 10 +-
.../__snapshots__/demo.test.tsx.snap | 10 +-
.../__snapshots__/demo-extend.test.ts.snap | 10 +-
.../__snapshots__/demo.test.tsx.snap | 10 +-
.../__snapshots__/demo-extend.test.ts.snap | 6 +-
.../__snapshots__/demo.test.tsx.snap | 6 +-
.../__snapshots__/demo-extend.test.ts.snap | 397 +-
.../__tests__/__snapshots__/demo.test.ts.snap | 395 +-
.../__snapshots__/index.test.tsx.snap | 42 +-
components/button/__tests__/index.test.tsx | 27 +
components/button/button.tsx | 55 +-
components/button/buttonHelpers.tsx | 17 +-
components/button/demo/color-variant.md | 7 +
components/button/demo/color-variant.tsx | 76 +
components/button/index.en-US.md | 19 +
components/button/index.zh-CN.md | 19 +
components/button/style/index.ts | 415 +-
components/button/style/token.ts | 17 +-
.../__snapshots__/index.test.tsx.snap | 80 +-
.../__snapshots__/demo-extend.test.ts.snap | 4 +-
.../__snapshots__/demo.test.tsx.snap | 4 +-
.../__snapshots__/demo-extend.test.ts.snap | 2 +-
.../__snapshots__/demo.test.tsx.snap | 2 +-
.../color-picker/components/ColorPresets.tsx | 2 +-
.../__snapshots__/components.test.tsx.snap | 220 +-
.../__snapshots__/demo-extend.test.ts.snap | 32 +-
.../__snapshots__/demo-extend.test.ts.snap | 6 +-
.../__tests__/__snapshots__/demo.test.ts.snap | 6 +-
.../__snapshots__/demo-extend.test.tsx.snap | 40 +-
.../__tests__/__snapshots__/demo.test.ts.snap | 26 +-
.../__snapshots__/demo-extend.test.ts.snap | 80 +-
.../__snapshots__/demo.test.tsx.snap | 78 +-
.../dropdown-button.test.tsx.snap | 8 +-
.../__snapshots__/demo-extend.test.ts.snap | 6 +-
.../__tests__/__snapshots__/demo.test.ts.snap | 6 +-
.../__snapshots__/demo-extend.test.ts.snap | 66 +-
.../__tests__/__snapshots__/demo.test.ts.snap | 66 +-
.../__snapshots__/demo-extend.test.ts.snap | 106 +-
.../__snapshots__/demo.test.tsx.snap | 98 +-
.../__snapshots__/index.test.tsx.snap | 2 +-
.../__snapshots__/demo-extend.test.ts.snap | 6 +-
.../__tests__/__snapshots__/demo.test.ts.snap | 6 +-
.../__snapshots__/demo-extend.test.ts.snap | 4 +-
.../__snapshots__/demo.test.tsx.snap | 4 +-
.../__snapshots__/Search.test.tsx.snap | 22 +-
.../__snapshots__/demo-extend.test.ts.snap | 52 +-
.../__snapshots__/demo.test.tsx.snap | 50 +-
.../__snapshots__/demo-extend.test.ts.snap | 2 +-
.../__tests__/__snapshots__/demo.test.ts.snap | 2 +-
.../__snapshots__/index.test.tsx.snap | 746276 +++++++--------
.../__snapshots__/demo-extend.test.ts.snap | 4 +-
.../__snapshots__/demo.test.tsx.snap | 4 +-
.../__snapshots__/demo-extend.test.ts.snap | 2 +-
.../__snapshots__/demo.test.tsx.snap | 2 +-
.../__snapshots__/demo-extend.test.ts.snap | 20 +-
.../__tests__/__snapshots__/demo.test.ts.snap | 20 +-
.../__snapshots__/Modal.test.tsx.snap | 16 +-
.../__snapshots__/demo-extend.test.ts.snap | 108 +-
.../__snapshots__/demo.test.tsx.snap | 108 +-
.../__snapshots__/demo-extend.test.ts.snap | 48 +-
.../__tests__/__snapshots__/demo.test.ts.snap | 48 +-
.../__snapshots__/demo-extend.test.ts.snap | 132 +-
.../__snapshots__/demo.test.tsx.snap | 60 +-
.../__snapshots__/index.test.tsx.snap | 8 +-
.../__snapshots__/demo-extend.test.ts.snap | 60 +-
.../__snapshots__/demo.test.tsx.snap | 60 +-
.../__snapshots__/demo-extend.test.ts.snap | 4 +-
.../__tests__/__snapshots__/demo.test.ts.snap | 4 +-
.../__snapshots__/demo-extend.test.ts.snap | 12 +-
.../__tests__/__snapshots__/demo.test.ts.snap | 12 +-
.../__snapshots__/demo-extend.test.ts.snap | 2 +-
.../__snapshots__/demo.test.tsx.snap | 2 +-
.../__snapshots__/demo-extend.test.ts.snap | 24 +-
.../__tests__/__snapshots__/demo.test.ts.snap | 24 +-
.../__snapshots__/demo-extend.test.ts.snap | 4 +-
.../__tests__/__snapshots__/demo.test.ts.snap | 4 +-
.../__snapshots__/demo-extend.test.ts.snap | 6 +-
.../__snapshots__/demo.test.tsx.snap | 4 +-
.../__snapshots__/demo-extend.test.ts.snap | 2 +-
.../__snapshots__/demo.test.tsx.snap | 2 +-
.../__snapshots__/demo-extend.test.ts.snap | 222 +-
.../__snapshots__/demo.test.tsx.snap | 202 +-
.../__snapshots__/space-compact.test.tsx.snap | 2 +-
.../__snapshots__/demo-extend.test.ts.snap | 2 +-
.../__tests__/__snapshots__/demo.test.ts.snap | 2 +-
.../__snapshots__/demo-extend.test.ts.snap | 4 +-
.../__tests__/__snapshots__/demo.test.ts.snap | 4 +-
.../__snapshots__/demo-extend.test.ts.snap | 16 +-
.../__tests__/__snapshots__/demo.test.ts.snap | 16 +-
.../__snapshots__/demo-extend.test.ts.snap | 2 +-
.../__tests__/__snapshots__/demo.test.ts.snap | 2 +-
.../table/__tests__/Table.filter.test.tsx | 95 +-
.../__tests__/Table.rowSelection.test.tsx | 6 +-
.../__snapshots__/Table.filter.test.tsx.snap | 8 +-
.../__snapshots__/demo-extend.test.ts.snap | 98 +-
.../__tests__/__snapshots__/demo.test.ts.snap | 18 +-
.../__snapshots__/demo-extend.test.ts.snap | 16 +-
.../__tests__/__snapshots__/demo.test.ts.snap | 16 +-
components/theme/interface/maps/colors.ts | 26 +
components/theme/themes/dark/colors.ts | 4 +
components/theme/themes/default/colors.ts | 4 +
.../theme/themes/shared/genColorMapToken.ts | 5 +
.../__snapshots__/demo-extend.test.ts.snap | 56 +-
.../__snapshots__/index.test.tsx.snap | 2 +-
.../__snapshots__/demo-extend.test.ts.snap | 2 +-
.../__tests__/__snapshots__/demo.test.ts.snap | 2 +-
.../__snapshots__/demo-extend.test.ts.snap | 98 +-
.../__snapshots__/demo.test.tsx.snap | 98 +-
.../__snapshots__/tooltip.test.tsx.snap | 2 +-
.../__snapshots__/demo-extend.test.ts.snap | 44 +-
.../__snapshots__/demo.test.tsx.snap | 44 +-
.../__snapshots__/index.test.tsx.snap | 14 +-
.../__snapshots__/demo-extend.test.ts.snap | 62 +-
.../__tests__/__snapshots__/demo.test.ts.snap | 62 +-
.../__snapshots__/index.test.tsx.snap | 20 +-
.../__snapshots__/demo-extend.test.ts.snap | 2 +-
.../__tests__/__snapshots__/demo.test.ts.snap | 2 +-
.../__snapshots__/demo-extend.test.ts.snap | 100 +-
.../__tests__/__snapshots__/demo.test.ts.snap | 100 +-
.../__snapshots__/uploadlist.test.tsx.snap | 42 +-
.../__snapshots__/demo-extend.test.ts.snap | 6 +-
.../__tests__/__snapshots__/demo.test.ts.snap | 6 +-
package.json | 4 +-
134 files changed, 376044 insertions(+), 375307 deletions(-)
create mode 100644 components/button/demo/color-variant.md
create mode 100644 components/button/demo/color-variant.tsx
diff --git a/.dumirc.ts b/.dumirc.ts
index 81313d857c9f..fe0b977ac2f7 100644
--- a/.dumirc.ts
+++ b/.dumirc.ts
@@ -57,9 +57,12 @@ export default defineConfig({
analytics: {
ga_v2: 'UA-72788897-1',
},
- analyze: process.env.NODE_ENV === 'production' ? false : {
- analyzerPort: 'auto',
- },
+ analyze:
+ process.env.NODE_ENV === 'production'
+ ? false
+ : {
+ analyzerPort: 'auto',
+ },
links: [
{
rel: 'prefetch',
diff --git a/components/_util/__tests__/wave.test.tsx b/components/_util/__tests__/wave.test.tsx
index b21f4bf07d74..992f75c38dc8 100644
--- a/components/_util/__tests__/wave.test.tsx
+++ b/components/_util/__tests__/wave.test.tsx
@@ -116,13 +116,10 @@ describe('Wave component', () => {
unmount();
});
- it('wave color is grey', () => {
+ it('wave color is nonexistent', () => {
const { container, unmount } = render(
- ,
@@ -132,8 +129,7 @@ describe('Wave component', () => {
waitRaf();
const style = getWaveStyle();
-
- expect(style['--wave-color']).toBeFalsy();
+ expect(style['--wave-color']).toEqual(undefined);
unmount();
});
diff --git a/components/_util/type.ts b/components/_util/type.ts
index ee4225a35c2b..c4eac0c56722 100644
--- a/components/_util/type.ts
+++ b/components/_util/type.ts
@@ -18,8 +18,13 @@ export type CustomComponent = React.ComponentType
| string;
* ```
* @since 5.13.0
*/
-export type GetProps | object> =
- T extends React.ComponentType ? P : T extends object ? T : never;
+export type GetProps | object> = T extends React.ComponentType<
+ infer P
+>
+ ? P
+ : T extends object
+ ? T
+ : never;
/**
* Get component props by component name
diff --git a/components/_util/wave/util.ts b/components/_util/wave/util.ts
index 7d3534b4853c..bb98572d83e5 100644
--- a/components/_util/wave/util.ts
+++ b/components/_util/wave/util.ts
@@ -1,13 +1,3 @@
-export function isNotGrey(color: string) {
- // eslint-disable-next-line no-useless-escape
- const match = (color || '').match(/rgba?\((\d*), (\d*), (\d*)(, [\d.]*)?\)/);
- // biome-ignore lint/complexity/useOptionalChain: this is way is more simple
- if (match && match[1] && match[2] && match[3]) {
- return !(match[1] === match[2] && match[2] === match[3]);
- }
- return true;
-}
-
export function isValidWaveColor(color: string) {
return (
color &&
@@ -15,7 +5,6 @@ export function isValidWaveColor(color: string) {
color !== '#ffffff' &&
color !== 'rgb(255, 255, 255)' &&
color !== 'rgba(255, 255, 255, 1)' &&
- isNotGrey(color) &&
!/rgba\((?:\d*, ){3}0\)/.test(color) && // any transparent rgba color
color !== 'transparent'
);
diff --git a/components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap
index 729dc01fb68d..3bfe1c51215f 100644
--- a/components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -7,7 +7,7 @@ Array [
class=""
>