fix(button): [button]fix error css var (#2312)

* fix(button): fix error css var * fix(button): fix * fix(button): fix button e2e test * fix(button): fix
opentiny · Oct 19, 2024 · 504e7b6 · 504e7b6
1 parent c16c64a
commit 504e7b6
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 56 deletions.
diff --git a/examples/sites/demos/pc/app/button/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/button/basic-usage-composition-api.vue
@@ -2,7 +2,7 @@
   <tiny-layout>
     <p>基本按钮</p>
     <tiny-row>
-      <tiny-button type="primary" native-type="submit"> 主要按钮 </tiny-button>
+      <tiny-button type="primary"> 主要按钮 </tiny-button>
       <tiny-button> 次要按钮 </tiny-button>
       <tiny-button type="success"> 成功按钮 </tiny-button>
       <tiny-button type="info"> 信息按钮 </tiny-button>

diff --git a/examples/sites/demos/pc/app/button/basic-usage.vue b/examples/sites/demos/pc/app/button/basic-usage.vue
@@ -2,7 +2,7 @@
   <tiny-layout>
     <p>基本按钮</p>
     <tiny-row>
-      <tiny-button type="primary" native-type="submit"> 主要按钮 </tiny-button>
+      <tiny-button type="primary"> 主要按钮 </tiny-button>
       <tiny-button> 次要按钮 </tiny-button>
       <tiny-button type="success"> 成功按钮 </tiny-button>
       <tiny-button type="info"> 信息按钮 </tiny-button>

diff --git a/examples/sites/demos/pc/app/button/ghost-composition-api.vue b/examples/sites/demos/pc/app/button/ghost-composition-api.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="gray-bg">
-    <tiny-button ghost type="primary" reset-time="0">主要按钮</tiny-button>
-    <tiny-button ghost reset-time="0">次要按钮</tiny-button>
-    <tiny-button ghost type="success" reset-time="0">成功按钮</tiny-button>
-    <tiny-button ghost type="info" reset-time="0">信息按钮</tiny-button>
-    <tiny-button ghost type="warning" reset-time="0">告警按钮</tiny-button>
-    <tiny-button ghost type="danger" reset-time="0">危险按钮</tiny-button>
+    <tiny-button ghost type="primary">主要按钮</tiny-button>
+    <tiny-button ghost>次要按钮</tiny-button>
+    <tiny-button ghost type="success">成功按钮</tiny-button>
+    <tiny-button ghost type="info">信息按钮</tiny-button>
+    <tiny-button ghost type="warning">告警按钮</tiny-button>
+    <tiny-button ghost type="danger">危险按钮</tiny-button>
   </div>
 </template>
 

diff --git a/examples/sites/demos/pc/app/button/ghost.spec.ts b/examples/sites/demos/pc/app/button/ghost.spec.ts
@@ -11,66 +11,29 @@ test('幽灵按钮', async ({ page }) => {
   await expect(getGhostBtn(0)).toHaveCSS('color', 'rgb(25, 25, 25)')
   await expect(getGhostBtn(0)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(getGhostBtn(0)).toHaveCSS('border-bottom-color', 'rgb(89, 89, 89)')
-  await page.waitForTimeout(100)
-  await getGhostBtn(0).click()
-  await page.waitForTimeout(100)
-  await expect(getGhostBtn(0)).toHaveCSS('color', 'rgb(25, 25, 25)')
-  await expect(getGhostBtn(0)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
-  await expect(getGhostBtn(0)).toHaveCSS('border-bottom-color', 'rgb(25, 25, 25)')
 
   // 次要幽灵按钮
-  await page.waitForTimeout(1000)
-  await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(25, 25, 25)')
-  await expect(getGhostBtn(1)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
-  await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(194, 194, 194)')
-  await page.waitForTimeout(100)
-  await getGhostBtn(1).click()
-  await page.waitForTimeout(100)
-  await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(25, 25, 25)')
+  await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(89, 89, 89)')
   await expect(getGhostBtn(1)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
-  await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(25, 25, 25)')
+  await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(128, 128, 128)')
 
   // 成功幽灵按钮
   await expect(getGhostBtn(2)).toHaveCSS('color', 'rgb(92, 179, 0)')
   await expect(getGhostBtn(2)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
-  await expect(getGhostBtn(2)).toHaveCSS('border-bottom-color', 'rgb(218, 242, 187)')
-  await page.waitForTimeout(100)
-  await getGhostBtn(2).click()
-  await page.waitForTimeout(100)
-  await expect(getGhostBtn(2)).toHaveCSS('color', 'rgb(92, 179, 0)')
-  await expect(getGhostBtn(2)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(getGhostBtn(2)).toHaveCSS('border-bottom-color', 'rgb(92, 179, 0)')
 
   // 信息幽灵按钮
   await expect(getGhostBtn(3)).toHaveCSS('color', 'rgb(20, 118, 255)')
   await expect(getGhostBtn(3)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
-  await expect(getGhostBtn(3)).toHaveCSS('border-bottom-color', 'rgb(222, 236, 255)')
-  await page.waitForTimeout(100)
-  await getGhostBtn(3).click()
-  await page.waitForTimeout(100)
-  await expect(getGhostBtn(3)).toHaveCSS('color', 'rgb(20, 118, 255)')
-  await expect(getGhostBtn(3)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(getGhostBtn(3)).toHaveCSS('border-bottom-color', 'rgb(20, 118, 255)')
 
   // 告警幽灵按钮
   await expect(getGhostBtn(4)).toHaveCSS('color', 'rgb(255, 136, 0)')
   await expect(getGhostBtn(4)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
-  await expect(getGhostBtn(4)).toHaveCSS('border-bottom-color', 'rgb(255, 235, 209)')
-  await page.waitForTimeout(100)
-  await getGhostBtn(4).click()
-  await page.waitForTimeout(100)
-  await expect(getGhostBtn(4)).toHaveCSS('color', 'rgb(255, 136, 0)')
-  await expect(getGhostBtn(4)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(getGhostBtn(4)).toHaveCSS('border-bottom-color', 'rgb(255, 136, 0)')
 
   // 危险幽灵按钮
   await expect(getGhostBtn(5)).toHaveCSS('color', 'rgb(242, 48, 48)')
   await expect(getGhostBtn(5)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
-  await expect(getGhostBtn(5)).toHaveCSS('border-bottom-color', 'rgb(252, 226, 224)')
-  await page.waitForTimeout(100)
-  await getGhostBtn(5).click()
-  await page.waitForTimeout(100)
-  await expect(getGhostBtn(5)).toHaveCSS('color', 'rgb(242, 48, 48)')
-  await expect(getGhostBtn(5)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(getGhostBtn(5)).toHaveCSS('border-bottom-color', 'rgb(242, 48, 48)')
 })
diff --git a/examples/sites/demos/pc/app/button/ghost.vue b/examples/sites/demos/pc/app/button/ghost.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="gray-bg">
-    <tiny-button ghost reset-time="0" type="primary">主要按钮</tiny-button>
-    <tiny-button ghost reset-time="0">次要按钮</tiny-button>
-    <tiny-button ghost reset-time="0" type="success">成功按钮</tiny-button>
-    <tiny-button ghost reset-time="0" type="info">信息按钮</tiny-button>
-    <tiny-button ghost reset-time="0" type="warning">告警按钮</tiny-button>
-    <tiny-button ghost reset-time="0" type="danger">危险按钮</tiny-button>
+    <tiny-button ghost type="primary">主要按钮</tiny-button>
+    <tiny-button ghost>次要按钮</tiny-button>
+    <tiny-button ghost type="success">成功按钮</tiny-button>
+    <tiny-button ghost type="info">信息按钮</tiny-button>
+    <tiny-button ghost type="warning">告警按钮</tiny-button>
+    <tiny-button ghost type="danger">危险按钮</tiny-button>
   </div>
 </template>
 

diff --git a/packages/theme/src/button/vars.less b/packages/theme/src/button/vars.less
@@ -16,8 +16,8 @@
   --tv-Button-font-weight: var(--tv-font-weight-regular);
   // 默认时按钮边框宽度
   --tv-Button-border-width: var(--tv-border-width);
-  // 按钮的行产，
-  --tv-Button-line-height: var(--tv-border-width);
+  // 按钮的文本行高
+  --tv-Button-line-height: var(--tv-line-height-number);
   // --------------------------------------------------- 场景1、圆角--------------------------------------------
   // 默认时按钮圆角
   --tv-Button-border-radius: var(--tv-border-radius-round); // 默认规范不需要 6px的圆角的效果，默认就是半圆
@@ -181,7 +181,7 @@
   --tv-Button-border-color-ghost-default: var(--tv-color-border-ghost);
 
   // primary 主题时按钮幽灵文本色
-  --tv-Button-text-colorghostn-primary: var(--tv-color-act-primary-text);
+  --tv-Button-text-color-ghost-primary: var(--tv-color-act-primary-text);
   // primary 主题时按钮幽灵边框色
   --tv-Button-border-color-ghost-primary: var(--tv-color-act-primary-border-light);