feat(Button): support variant and color (ant-design#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 <[email protected]> Signed-off-by: ice <[email protected]> * 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 <[email protected]> Signed-off-by: ice <[email protected]> * Update components/theme/interface/maps/colors.ts Co-authored-by: MadCcc <[email protected]> Signed-off-by: ice <[email protected]> * Update components/theme/interface/maps/colors.ts Co-authored-by: MadCcc <[email protected]> Signed-off-by: ice <[email protected]> * Update components/button/style/token.ts Co-authored-by: MadCcc <[email protected]> Signed-off-by: ice <[email protected]> * Update components/button/style/token.ts Co-authored-by: MadCcc <[email protected]> Signed-off-by: ice <[email protected]> * 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 <[email protected]> Co-authored-by: lijianan <[email protected]> Co-authored-by: MadCcc <[email protected]>
coding-ice · Sep 13, 2024 · 3c28505 · 3c28505
1 parent 027f9cb
commit 3c28505
Show file tree

Hide file tree

Showing 134 changed files with 376,044 additions and 375,307 deletions.
diff --git 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
@@ -116,13 +116,10 @@ describe('Wave component', () => {
     unmount();
   });
 
-  it('wave color is grey', () => {
+  it('wave color is nonexistent', () => {
     const { container, unmount } = render(
       <Wave>
-        <button
-          type="button"
-          style={{ borderColor: 'rgb(0, 0, 0)', backgroundColor: 'transparent' }}
-        >
+        <button type="button" style={{ border: '#fff', background: '#fff' }}>
           button
         </button>
       </Wave>,
@@ -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
@@ -18,8 +18,13 @@ export type CustomComponent<P = AnyObject> = React.ComponentType<P> | string;
  * ```
  * @since 5.13.0
  */
-export type GetProps<T extends React.ComponentType<any> | object> =
-  T extends React.ComponentType<infer P> ? P : T extends object ? T : never;
+export type GetProps<T extends React.ComponentType<any> | 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
@@ -1,21 +1,10 @@
-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 &&
     color !== '#fff' &&
     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
@@ -7,7 +7,7 @@ Array [
       class=""
     >
       <button
-        class="ant-btn ant-btn-primary"
+        class="ant-btn ant-btn-primary ant-btn-solid"
         type="button"
       >
         <span>
@@ -22,7 +22,7 @@ Array [
       class=""
     >
       <button
-        class="ant-btn ant-btn-primary"
+        class="ant-btn ant-btn-primary ant-btn-solid"
         type="button"
       >
         <span>
@@ -51,7 +51,7 @@ exports[`renders components/affix/demo/debug.tsx extend context correctly 1`] =
         style="background: red;"
       >
         <button
-          class="ant-btn ant-btn-primary"
+          class="ant-btn ant-btn-primary ant-btn-solid"
           type="button"
         >
           <span>
@@ -75,7 +75,7 @@ exports[`renders components/affix/demo/on-change.tsx extend context correctly 1`
     class=""
   >
     <button
-      class="ant-btn ant-btn-default"
+      class="ant-btn ant-btn-default ant-btn-outlined"
       type="button"
     >
       <span>
@@ -100,7 +100,7 @@ exports[`renders components/affix/demo/target.tsx extend context correctly 1`] =
         class=""
       >
         <button
-          class="ant-btn ant-btn-primary"
+          class="ant-btn ant-btn-primary ant-btn-solid"
           type="button"
         >
           <span>

diff --git a/components/affix/__tests__/__snapshots__/demo.test.tsx.snap b/components/affix/__tests__/__snapshots__/demo.test.tsx.snap
@@ -7,7 +7,7 @@ Array [
       class=""
     >
       <button
-        class="ant-btn ant-btn-primary"
+        class="ant-btn ant-btn-primary ant-btn-solid"
         type="button"
       >
         <span>
@@ -22,7 +22,7 @@ Array [
       class=""
     >
       <button
-        class="ant-btn ant-btn-primary"
+        class="ant-btn ant-btn-primary ant-btn-solid"
         type="button"
       >
         <span>
@@ -49,7 +49,7 @@ exports[`renders components/affix/demo/debug.tsx correctly 1`] = `
         style="background:red"
       >
         <button
-          class="ant-btn ant-btn-primary"
+          class="ant-btn ant-btn-primary ant-btn-solid"
           type="button"
         >
           <span>
@@ -71,7 +71,7 @@ exports[`renders components/affix/demo/on-change.tsx correctly 1`] = `
     class=""
   >
     <button
-      class="ant-btn ant-btn-default"
+      class="ant-btn ant-btn-default ant-btn-outlined"
       type="button"
     >
       <span>
@@ -94,7 +94,7 @@ exports[`renders components/affix/demo/target.tsx correctly 1`] = `
         class=""
       >
         <button
-          class="ant-btn ant-btn-primary"
+          class="ant-btn ant-btn-primary ant-btn-solid"
           type="button"
         >
           <span>

diff --git a/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -39,7 +39,7 @@ Array [
       class="ant-alert-action"
     >
       <button
-        class="ant-btn ant-btn-text ant-btn-sm"
+        class="ant-btn ant-btn-default ant-btn-text ant-btn-sm"
         type="button"
       >
         <span>
@@ -118,7 +118,7 @@ Array [
       class="ant-alert-action"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-sm ant-btn-dangerous"
+        class="ant-btn ant-btn-dangerous ant-btn-outlined ant-btn-sm"
         type="button"
       >
         <span>
@@ -152,7 +152,7 @@ Array [
           class="ant-space-item"
         >
           <button
-            class="ant-btn ant-btn-text ant-btn-sm"
+            class="ant-btn ant-btn-default ant-btn-text ant-btn-sm"
             type="button"
           >
             <span>
@@ -219,7 +219,7 @@ Array [
           class="ant-space-item"
         >
           <button
-            class="ant-btn ant-btn-primary ant-btn-sm"
+            class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
             type="button"
           >
             <span>
@@ -231,7 +231,7 @@ Array [
           class="ant-space-item"
         >
           <button
-            class="ant-btn ant-btn-default ant-btn-sm ant-btn-background-ghost ant-btn-dangerous"
+            class="ant-btn ant-btn-dangerous ant-btn-outlined ant-btn-sm ant-btn-background-ghost"
             type="button"
           >
             <span>
@@ -1008,7 +1008,7 @@ exports[`renders components/alert/demo/description.tsx extend context correctly
 
 exports[`renders components/alert/demo/error-boundary.tsx extend context correctly 1`] = `
 <button
-  class="ant-btn ant-btn-default ant-btn-dangerous"
+  class="ant-btn ant-btn-dangerous ant-btn-outlined"
   type="button"
 >
   <span>

diff --git a/components/alert/__tests__/__snapshots__/demo.test.ts.snap b/components/alert/__tests__/__snapshots__/demo.test.ts.snap
@@ -39,7 +39,7 @@ Array [
       class="ant-alert-action"
     >
       <button
-        class="ant-btn ant-btn-text ant-btn-sm"
+        class="ant-btn ant-btn-default ant-btn-text ant-btn-sm"
         type="button"
       >
         <span>
@@ -118,7 +118,7 @@ Array [
       class="ant-alert-action"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-sm ant-btn-dangerous"
+        class="ant-btn ant-btn-dangerous ant-btn-outlined ant-btn-sm"
         type="button"
       >
         <span>
@@ -152,7 +152,7 @@ Array [
           class="ant-space-item"
         >
           <button
-            class="ant-btn ant-btn-text ant-btn-sm"
+            class="ant-btn ant-btn-default ant-btn-text ant-btn-sm"
             type="button"
           >
             <span>
@@ -219,7 +219,7 @@ Array [
           class="ant-space-item"
         >
           <button
-            class="ant-btn ant-btn-primary ant-btn-sm"
+            class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
             type="button"
           >
             <span>
@@ -231,7 +231,7 @@ Array [
           class="ant-space-item"
         >
           <button
-            class="ant-btn ant-btn-default ant-btn-sm ant-btn-background-ghost ant-btn-dangerous"
+            class="ant-btn ant-btn-dangerous ant-btn-outlined ant-btn-sm ant-btn-background-ghost"
             type="button"
           >
             <span>
@@ -992,7 +992,7 @@ Array [
 
 exports[`renders components/alert/demo/error-boundary.tsx correctly 1`] = `
 <button
-  class="ant-btn ant-btn-default ant-btn-dangerous"
+  class="ant-btn ant-btn-dangerous ant-btn-outlined"
   type="button"
 >
   <span>

diff --git a/components/alert/__tests__/__snapshots__/index.test.tsx.snap b/components/alert/__tests__/__snapshots__/index.test.tsx.snap
@@ -38,7 +38,7 @@ exports[`Alert custom action 1`] = `
     class="ant-alert-action"
   >
     <button
-      class="ant-btn ant-btn-text ant-btn-sm"
+      class="ant-btn ant-btn-default ant-btn-text ant-btn-sm"
       type="button"
     >
       <span>

diff --git a/components/app/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/app/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -12,7 +12,7 @@ exports[`renders components/app/demo/basic.tsx extend context correctly 1`] = `
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-primary"
+        class="ant-btn ant-btn-primary ant-btn-solid"
         type="button"
       >
         <span>
@@ -24,7 +24,7 @@ exports[`renders components/app/demo/basic.tsx extend context correctly 1`] = `
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-primary"
+        class="ant-btn ant-btn-primary ant-btn-solid"
         type="button"
       >
         <span>
@@ -36,7 +36,7 @@ exports[`renders components/app/demo/basic.tsx extend context correctly 1`] = `
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-primary"
+        class="ant-btn ant-btn-primary ant-btn-solid"
         type="button"
       >
         <span>
@@ -62,7 +62,7 @@ exports[`renders components/app/demo/config.tsx extend context correctly 1`] = `
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-primary"
+        class="ant-btn ant-btn-primary ant-btn-solid"
         type="button"
       >
         <span>
@@ -74,7 +74,7 @@ exports[`renders components/app/demo/config.tsx extend context correctly 1`] = `
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-primary"
+        class="ant-btn ant-btn-primary ant-btn-solid"
         type="button"
       >
         <span>

diff --git a/components/app/__tests__/__snapshots__/demo.test.ts.snap b/components/app/__tests__/__snapshots__/demo.test.ts.snap
@@ -12,7 +12,7 @@ exports[`renders components/app/demo/basic.tsx correctly 1`] = `
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-primary"
+        class="ant-btn ant-btn-primary ant-btn-solid"
         type="button"
       >
         <span>
@@ -24,7 +24,7 @@ exports[`renders components/app/demo/basic.tsx correctly 1`] = `
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-primary"
+        class="ant-btn ant-btn-primary ant-btn-solid"
         type="button"
       >
         <span>
@@ -36,7 +36,7 @@ exports[`renders components/app/demo/basic.tsx correctly 1`] = `
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-primary"
+        class="ant-btn ant-btn-primary ant-btn-solid"
         type="button"
       >
         <span>
@@ -60,7 +60,7 @@ exports[`renders components/app/demo/config.tsx correctly 1`] = `
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-primary"
+        class="ant-btn ant-btn-primary ant-btn-solid"
         type="button"
       >
         <span>
@@ -72,7 +72,7 @@ exports[`renders components/app/demo/config.tsx correctly 1`] = `
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-primary"
+        class="ant-btn ant-btn-primary ant-btn-solid"
         type="button"
       >
         <span>