Merge pull request #53 from dancing-team/develop

Develop
dancing-team · Sep 3, 2023 · aed906f · aed906f · vercel · Sep 3, 2023
2 parents 5d08125 + deed38d
commit aed906f
Show file tree

Hide file tree

Showing 29 changed files with 1,072 additions and 274 deletions.
diff --git a/.changeset/brown-lobsters-cry.md b/.changeset/brown-lobsters-cry.md
@@ -0,0 +1,6 @@
+---
+'@dance-ui/ui': patch
+'@dance-ui/example': patch
+---
+
+fix: Button styles & Tab Indicator
diff --git a/.changeset/loud-carpets-pull.md b/.changeset/loud-carpets-pull.md
@@ -0,0 +1,7 @@
+---
+'@dance-ui/ui': minor
+'@dance-ui/example': minor
+'@dance-ui/demo': minor
+---
+
+新增 RadioGroup 组件
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -61,7 +61,7 @@
     "jest": "^29.4.3",
     "jest-environment-jsdom": "^29.4.3",
     "postcss": "^8.4.21",
-    "tailwindcss": "^3.2.4",
+    "tailwindcss": "^3.3.3",
     "ts-babel": "^6.1.7",
     "ts-node": "^10.9.1",
     "vite-plugin-libcss": "^1.0.5"

diff --git a/packages/components/src/Button/Button.tsx b/packages/components/src/Button/Button.tsx
@@ -1,6 +1,7 @@
 import classNames from 'classnames'
 import { CSSProperties, forwardRef, LegacyRef, ReactNode, useMemo } from 'react'
 import Loading, { LoadingProps } from '../Loading'
+import { twMerge } from 'tailwind-merge'
 
 export type ButtonProps = {
   /** 按钮类型 */
@@ -39,7 +40,7 @@ const ButtonClass = {
     small: 'px-1',
   },
   typeClass: {
-    default: 'border-black bg-white text-black enabled:hover:border-dd-primary enabled:hover:text-dd-primary',
+    default: 'border-dd-primary text-dd-primary enabled:hover:opacity-80',
     primary: 'border-dd-primary bg-dd-primary text-white enabled:hover:opacity-80',
     link: 'border-transparent enabled:hover:text-dd-primary',
   },
@@ -85,18 +86,20 @@ const Button = forwardRef(function ButtonInner(
       className={
         type === 'unstyle'
           ? className
-          : classNames(
-              'box-border border transition focus:outline-none',
-              sizeClass[size ?? 'middle'],
-              _chooseClass[type ?? 'default'],
-              _disabled ? 'disabled:cursor-not-allowed disabled:opacity-60' : 'cursor-pointer',
+          : twMerge(
+              classNames(
+                'box-border border transition focus:outline-none',
+                sizeClass[size ?? 'middle'],
+                _chooseClass[type ?? 'default'],
+                _disabled ? 'disabled:cursor-not-allowed disabled:opacity-60' : 'cursor-pointer',
+              ),
               className,
             )
       }
       style={style}
       onClick={_disabled ? undefined : onClick}
       disabled={_disabled}>
-      <Loading show={loading} className={classNames('mr-2', iconClassName)} {...loadingIconProps} />
+      <Loading show={loading} className={twMerge('mr-2', iconClassName)} {...loadingIconProps} />
       {children}
     </button>
   )

diff --git a/packages/components/src/Button/demo/index.tsx b/packages/components/src/Button/demo/index.tsx
@@ -6,7 +6,6 @@ export default () => (
     <Space>
       type 默认为 default 按钮，primary 表示主要按钮，link 表示无边框按钮， unstyle 表示不带任何样式的按钮（方便自己定制）
       <Button>Default</Button>
-      <Button type="default">Default</Button>
       <Button type="primary">Primary</Button>
       <Button type="link">Link</Button>
       <Button type="unstyle">Unstyle</Button>

diff --git a/packages/components/src/FloatButtonGroup/demo/index.css b/packages/components/src/FloatButtonGroup/demo/index.css
diff --git a/packages/components/src/FloatButtonGroup/demo/index.tsx b/packages/components/src/FloatButtonGroup/demo/index.tsx
@@ -1,118 +1,136 @@
-import React from 'react';
-import FloatButtonGroup from '../../FloatButtonGroup';
-import { configItemType } from '../../FloatButtonGroup';
-import { IconType } from '../../Icon';
-import Icon from '../../Icon';
-import './index.css';
+import React from 'react'
+import FloatButtonGroup from '../../FloatButtonGroup'
+import { configItemType } from '../../FloatButtonGroup'
+import { IconType } from '../../Icon'
+import Icon from '../../Icon'
+
 const TBconfigs: configItemType[] = [
-    {
-      description: '淘宝',
-      type: "link",
-      action: {
-        href: "www.taobao.com",
-        target: '_blank'
-      }
+  {
+    description: '淘宝',
+    type: 'link',
+    action: {
+      href: 'www.taobao.com',
+      target: '_blank',
     },
-    {
-      description: "按钮",
-      type: "button",
-      action: {
-        onClick: () => {
-          alert("淘宝风格");
-        }
-      }
+  },
+  {
+    description: '按钮',
+    type: 'button',
+    action: {
+      onClick: () => {
+        alert('淘宝风格')
+      },
     },
-    {
-      description: "电脑",
-      type: "elevator",
-      action: {
-        top: 1300
-      }
+  },
+  {
+    description: '电脑',
+    type: 'elevator',
+    action: {
+      top: 1300,
     },
-    {
-      description: <>
-        <div style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center'
-        }}>
-          <Icon type={IconType.LOADING} style={{ fontSize: 16, color: 'black' }} href={'https://github.com/dancing-team/dance-ui'} />
+  },
+  {
+    description: (
+      <>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}>
+          <Icon
+            type={IconType.LOADING}
+            style={{ fontSize: 16, color: 'black' }}
+            href={'https://github.com/dancing-team/dance-ui'}
+          />
           <div>回到顶部</div>
         </div>
-      </>,
-      type: "backTop",
-      action: {
-        visibleheight: 100,
-      }
-    }
+      </>
+    ),
+    type: 'backTop',
+    action: {
+      visibleheight: 100,
+    },
+  },
 ]
 const JDconfigs: configItemType[] = [
   {
     description: '京东',
-    type: "link",
+    type: 'link',
     action: {
-      href: "www.jd.com",
-      target: '_blank'
-    }
+      href: 'www.jd.com',
+      target: '_blank',
+    },
   },
   {
-    description: "按钮",
-    type: "button",
+    description: '按钮',
+    type: 'button',
     action: {
       onClick: () => {
-        alert("京东风格");
-      }
-    }
+        alert('京东风格')
+      },
+    },
   },
   {
-    description: "手机",
-    type: "elevator",
+    description: '手机',
+    type: 'elevator',
     action: {
-      top: 1000
-    }
+      top: 1000,
+    },
   },
   {
-    description: <>
-      <div style={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center'
-      }}>
-        <Icon type={IconType.LOADING} style={{ fontSize: 16, color: 'black' }} href={'https://github.com/dancing-team/dance-ui'} />
-        <div>回到顶部</div>
-      </div>
-    </>,
-    type: "backTop",
+    description: (
+      <>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}>
+          <Icon
+            type={IconType.LOADING}
+            style={{ fontSize: 16, color: 'black' }}
+            href={'https://github.com/dancing-team/dance-ui'}
+          />
+          <div>回到顶部</div>
+        </div>
+      </>
+    ),
+    type: 'backTop',
     action: {
       visibleheight: 300,
-    }
-  }
+    },
+  },
 ]
 export default () => (
-    <div style={{
+  <div
+    style={{
       overflowY: 'auto',
       height: '500px',
       position: 'relative',
     }}>
-        <div style={{
-          height: '2000px',
-          width: '300px',
-          background: 'green'
+    <div
+      style={{
+        height: '2000px',
+        width: '300px',
+        background: 'green',
+      }}>
+      <div
+        style={{
+          height: '1000px',
         }}>
-          <div style={{
-            height: '1000px'
+        右侧悬浮按钮可操作此滚动盒子
+        <div
+          style={{
+            color: '#fff',
           }}>
-            右侧悬浮按钮可操作此滚动盒子
-            <div style={{
-              color: '#fff'
-            }}>
-              欢迎点击回到顶部按钮上的icon进入我们的github
-            </div>
-          </div>
-          <div style={{height: '300px'}}>手机</div>
-          <div>电脑</div>
-          <FloatButtonGroup configs={TBconfigs} right='90px' top='400px' platformStyle="TaoBao"></FloatButtonGroup>
-          <FloatButtonGroup configs={JDconfigs} right='165px' top='400px' platformStyle="JingDong"></FloatButtonGroup>
+          欢迎点击回到顶部按钮上的icon进入我们的github
         </div>
+      </div>
+      <div style={{ height: '300px' }}>手机</div>
+      <div>电脑</div>
+      <FloatButtonGroup configs={TBconfigs} right="90px" top="400px" platformStyle="TaoBao"></FloatButtonGroup>
+      <FloatButtonGroup configs={JDconfigs} right="165px" top="400px" platformStyle="JingDong"></FloatButtonGroup>
     </div>
-);
+  </div>
+)
diff --git a/packages/components/src/Loading/Loading.tsx b/packages/components/src/Loading/Loading.tsx
@@ -1,5 +1,5 @@
-import classNames from 'classnames'
 import React, { ReactNode } from 'react'
+import { twMerge } from 'tailwind-merge'
 import Icon, { IconType } from '../Icon'
 
 export type LoadingProps = {
@@ -27,7 +27,7 @@ const Loading = ({ show, iconType, renderIcon, className, style, iconClassName,
   return (
     <>
       {show ? (
-        <div className={classNames('inline-block animate-spin text-base', className)} style={style}>
+        <div className={twMerge('inline-block animate-spin text-base', className)} style={style}>
           {_renderIcon()}
         </div>
       ) : null}