refactor(button): [button] refactor the component variables of the bu…

…tton component. (#2193) * fix(button): save * fix(button): save * fix(button): save * fix(theme): button color done * fix(theme): add comment * fix(theme): button * fix(theme): button * fix(button): update theme * fix(button): fix * fix(button): refactor button's theme done * fix(theme): remove files * fix(button): fix * fix(button): fix * fix(button): fix comment * fix(button): fix * fix(button): fix
opentiny · Sep 27, 2024 · 54db8af · 54db8af
1 parent ca051e7
commit 54db8af
Show file tree

Hide file tree

Showing 6 changed files with 603 additions and 915 deletions.
diff --git a/examples/sites/demos/pc/app/button/ghost.spec.ts b/examples/sites/demos/pc/app/button/ghost.spec.ts
@@ -16,61 +16,61 @@ test('幽灵按钮', async ({ page }) => {
   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(194, 194, 194)')
+  await expect(getGhostBtn(0)).toHaveCSS('border-bottom-color', 'rgb(25, 25, 25)')
 
   // 次要幽灵按钮
   await page.waitForTimeout(1000)
-  await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(89, 89, 89)')
+  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(89, 89, 89)')
+  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(89, 89, 89)')
+  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(219, 219, 219)')
+  await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(25, 25, 25)')
 
   // 成功幽灵按钮
   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(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(218, 242, 187)')
+  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(20, 118, 255)')
+  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(222, 236, 255)')
+  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, 136, 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, 235, 209)')
+  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(242, 48, 48)')
+  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(252, 226, 224)')
+  await expect(getGhostBtn(5)).toHaveCSS('border-bottom-color', 'rgb(242, 48, 48)')
 })
diff --git a/examples/sites/demos/pc/app/button/size-composition-api.vue b/examples/sites/demos/pc/app/button/size-composition-api.vue
@@ -4,44 +4,44 @@
       <div class="title">常规按钮尺寸：</div>
       <tiny-button size="large"> 超大按钮 </tiny-button>
       <tiny-button size="medium"> 中等按钮 </tiny-button>
-      <tiny-button size="small"> 小型按钮 </tiny-button>
       <tiny-button> 默认按钮 </tiny-button>
+      <tiny-button size="small"> 小型按钮 </tiny-button>
       <tiny-button size="mini"> 超小按钮 </tiny-button>
     </tiny-row>
 
     <tiny-row>
       <div class="title">朴素按钮尺寸：</div>
       <tiny-button type="primary" size="large" plain> 超大按钮 </tiny-button>
       <tiny-button type="primary" size="medium" plain> 中等按钮 </tiny-button>
-      <tiny-button type="primary" size="small" plain> 小型按钮 </tiny-button>
       <tiny-button type="primary" plain> 默认按钮 </tiny-button>
+      <tiny-button type="primary" size="small" plain> 小型按钮 </tiny-button>
       <tiny-button type="primary" size="mini" plain> 超小按钮 </tiny-button>
     </tiny-row>
 
     <tiny-row>
       <div class="title">圆角按钮尺寸：</div>
       <tiny-button type="success" size="large" round> 超大按钮 </tiny-button>
       <tiny-button type="success" size="medium" round> 中等按钮 </tiny-button>
-      <tiny-button type="success" size="small" round> 小型按钮 </tiny-button>
       <tiny-button type="success" round> 默认按钮 </tiny-button>
+      <tiny-button type="success" size="small" round> 小型按钮 </tiny-button>
       <tiny-button type="success" size="mini" round> 超小按钮 </tiny-button>
     </tiny-row>
 
     <tiny-row>
       <div class="title">圆形按钮尺寸：</div>
       <tiny-button type="warning" size="large" :icon="TinyIconEdit" circle> </tiny-button>
       <tiny-button type="warning" size="medium" :icon="TinyIconEdit" circle> </tiny-button>
-      <tiny-button type="warning" size="small" :icon="TinyIconEdit" circle> </tiny-button>
       <tiny-button type="warning" :icon="TinyIconEdit" circle></tiny-button>
+      <tiny-button type="warning" size="small" :icon="TinyIconEdit" circle> </tiny-button>
       <tiny-button type="warning" size="mini" :icon="TinyIconEdit" circle> </tiny-button>
     </tiny-row>
 
     <tiny-row>
       <div class="title">纯图标按钮尺寸：</div>
       <tiny-button :icon="TinyIconDel" type="text" size="large" />
       <tiny-button :icon="TinyIconDel" type="text" size="medium" />
-      <tiny-button :icon="TinyIconDel" type="text" size="small" />
       <tiny-button :icon="TinyIconDel" type="text" />
+      <tiny-button :icon="TinyIconDel" type="text" size="small" />
       <tiny-button :icon="TinyIconDel" type="text" size="mini" />
     </tiny-row>
   </tiny-layout>

diff --git a/examples/sites/demos/pc/app/button/size.vue b/examples/sites/demos/pc/app/button/size.vue
@@ -4,44 +4,44 @@
       <div class="title">常规按钮尺寸：</div>
       <tiny-button size="large"> 超大按钮 </tiny-button>
       <tiny-button size="medium"> 中等按钮 </tiny-button>
-      <tiny-button size="small"> 小型按钮 </tiny-button>
       <tiny-button> 默认按钮 </tiny-button>
+      <tiny-button size="small"> 小型按钮 </tiny-button>
       <tiny-button size="mini"> 超小按钮 </tiny-button>
     </tiny-row>
 
     <tiny-row>
       <div class="title">朴素按钮尺寸：</div>
       <tiny-button type="primary" size="large" plain> 超大按钮 </tiny-button>
       <tiny-button type="primary" size="medium" plain> 中等按钮 </tiny-button>
-      <tiny-button type="primary" size="small" plain> 小型按钮 </tiny-button>
       <tiny-button type="primary" plain> 默认按钮 </tiny-button>
+      <tiny-button type="primary" size="small" plain> 小型按钮 </tiny-button>
       <tiny-button type="primary" size="mini" plain> 超小按钮 </tiny-button>
     </tiny-row>
 
     <tiny-row>
       <div class="title">圆角按钮尺寸：</div>
       <tiny-button type="success" size="large" round> 超大按钮 </tiny-button>
       <tiny-button type="success" size="medium" round> 中等按钮 </tiny-button>
-      <tiny-button type="success" size="small" round> 小型按钮 </tiny-button>
       <tiny-button type="success" round> 默认按钮 </tiny-button>
+      <tiny-button type="success" size="small" round> 小型按钮 </tiny-button>
       <tiny-button type="success" size="mini" round> 超小按钮 </tiny-button>
     </tiny-row>
 
     <tiny-row>
       <div class="title">圆形按钮尺寸：</div>
       <tiny-button type="warning" size="large" :icon="TinyIconEdit" circle> </tiny-button>
       <tiny-button type="warning" size="medium" :icon="TinyIconEdit" circle> </tiny-button>
-      <tiny-button type="warning" size="small" :icon="TinyIconEdit" circle> </tiny-button>
       <tiny-button type="warning" :icon="TinyIconEdit" circle></tiny-button>
+      <tiny-button type="warning" size="small" :icon="TinyIconEdit" circle> </tiny-button>
       <tiny-button type="warning" size="mini" :icon="TinyIconEdit" circle> </tiny-button>
     </tiny-row>
 
     <tiny-row>
       <div class="title">纯图标按钮尺寸：</div>
       <tiny-button :icon="TinyIconDel" type="text" size="large" />
       <tiny-button :icon="TinyIconDel" type="text" size="medium" />
-      <tiny-button :icon="TinyIconDel" type="text" size="small" />
       <tiny-button :icon="TinyIconDel" type="text" />
+      <tiny-button :icon="TinyIconDel" type="text" size="small" />
       <tiny-button :icon="TinyIconDel" type="text" size="mini" />
     </tiny-row>
   </tiny-layout>