feat(button): [button] Adapting to the SMB theme

opentiny · Sep 9, 2024 · fc54590 · fc54590
1 parent 5db8530
commit fc54590
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 44 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
@@ -1,29 +1,23 @@
 <template>
   <tiny-layout>
+    <p>基本按钮</p>
     <tiny-row>
       <tiny-button type="primary" native-type="submit"> 主要按钮 </tiny-button>
-      <tiny-button>次要按钮</tiny-button>
+      <tiny-button> 次要按钮 </tiny-button>
       <tiny-button type="success"> 成功按钮 </tiny-button>
       <tiny-button type="info"> 信息按钮 </tiny-button>
       <tiny-button type="warning"> 警告按钮 </tiny-button>
       <tiny-button type="danger"> 危险按钮 </tiny-button>
     </tiny-row>
+    <p>朴素按钮</p>
     <tiny-row>
       <tiny-button type="primary" plain> 主要按钮 </tiny-button>
-      <tiny-button plain>次要按钮 </tiny-button>
+      <tiny-button plain> 次要按钮 </tiny-button>
       <tiny-button type="success" plain> 成功按钮 </tiny-button>
       <tiny-button type="info" plain> 信息按钮 </tiny-button>
       <tiny-button type="warning" plain> 警告按钮 </tiny-button>
       <tiny-button type="danger" plain> 危险按钮 </tiny-button>
     </tiny-row>
-    <tiny-row>
-      <tiny-button type="primary" round> 主要按钮 </tiny-button>
-      <tiny-button round> 圆角按钮 </tiny-button>
-      <tiny-button type="success" round> 成功按钮 </tiny-button>
-      <tiny-button type="info" round> 信息按钮 </tiny-button>
-      <tiny-button type="warning" round> 警告按钮 </tiny-button>
-      <tiny-button type="danger" round> 危险按钮 </tiny-button>
-    </tiny-row>
     <tiny-row>
       <tiny-button :icon="IconSearch" circle></tiny-button>
       <tiny-button type="primary" :icon="IconEdit" circle></tiny-button>
@@ -49,7 +43,7 @@ const IconSearch = iconSearch()
 
 <style scoped>
 .tiny-row {
-  margin-bottom: 20px;
+  margin: 20px 0;
 }
 .tiny-button {
   margin-bottom: 10px;

diff --git a/examples/sites/demos/pc/app/button/basic-usage.spec.ts b/examples/sites/demos/pc/app/button/basic-usage.spec.ts
@@ -21,25 +21,3 @@ test('测试朴素按钮', async ({ page }) => {
   await expect(page.getByRole('button', { name: '警告按钮' }).nth(1)).toHaveClass(/tiny-button--warning is-plain/)
   await expect(page.getByRole('button', { name: '危险按钮' }).nth(1)).toHaveClass(/tiny-button--danger is-plain/)
 })
-
-test('测试圆角按钮', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('button#base')
-  await expect(page.getByRole('button', { name: '圆角按钮' })).toHaveClass(/is-round/)
-  await expect(page.getByRole('button', { name: '主要按钮' }).nth(2)).toHaveClass(/tiny-button--primary is-round/)
-  await expect(page.getByRole('button', { name: '成功按钮' }).nth(2)).toHaveClass(/tiny-button--success is-round/)
-  await expect(page.getByRole('button', { name: '信息按钮' }).nth(2)).toHaveClass(/tiny-button--info is-round/)
-  await expect(page.getByRole('button', { name: '警告按钮' }).nth(2)).toHaveClass(/tiny-button--warning is-round/)
-  await expect(page.getByRole('button', { name: '危险按钮' }).nth(2)).toHaveClass(/tiny-button--danger is-round/)
-})
-
-test('测试是否是圆形按钮', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('button#base')
-  await expect(page.getByRole('button', { name: '圆角按钮' })).toHaveClass(/tiny-button--default/)
-  await expect(page.getByRole('button', { name: '主要按钮' }).nth(2)).toHaveClass(/tiny-button--primary/)
-  await expect(page.locator('button:nth-child(3)').first()).toHaveClass(/tiny-button--success/)
-  await expect(page.locator('button:nth-child(4)').first()).toHaveClass(/tiny-button--info/)
-  await expect(page.locator('button:nth-child(5)').first()).toHaveClass(/tiny-button--warning/)
-  await expect(page.locator('button:nth-child(6)').first()).toHaveClass(/tiny-button--danger/)
-})
diff --git a/examples/sites/demos/pc/app/button/basic-usage.vue b/examples/sites/demos/pc/app/button/basic-usage.vue
@@ -1,29 +1,23 @@
 <template>
   <tiny-layout>
+    <p>基本按钮</p>
     <tiny-row>
       <tiny-button type="primary" native-type="submit"> 主要按钮 </tiny-button>
-      <tiny-button>次要按钮</tiny-button>
+      <tiny-button> 次要按钮 </tiny-button>
       <tiny-button type="success"> 成功按钮 </tiny-button>
       <tiny-button type="info"> 信息按钮 </tiny-button>
       <tiny-button type="warning"> 警告按钮 </tiny-button>
       <tiny-button type="danger"> 危险按钮 </tiny-button>
     </tiny-row>
+    <p>朴素按钮</p>
     <tiny-row>
       <tiny-button type="primary" plain> 主要按钮 </tiny-button>
-      <tiny-button plain>次要按钮 </tiny-button>
+      <tiny-button plain> 次要按钮 </tiny-button>
       <tiny-button type="success" plain> 成功按钮 </tiny-button>
       <tiny-button type="info" plain> 信息按钮 </tiny-button>
       <tiny-button type="warning" plain> 警告按钮 </tiny-button>
       <tiny-button type="danger" plain> 危险按钮 </tiny-button>
     </tiny-row>
-    <tiny-row>
-      <tiny-button type="primary" round> 主要按钮 </tiny-button>
-      <tiny-button round> 圆角按钮 </tiny-button>
-      <tiny-button type="success" round> 成功按钮 </tiny-button>
-      <tiny-button type="info" round> 信息按钮 </tiny-button>
-      <tiny-button type="warning" round> 警告按钮 </tiny-button>
-      <tiny-button type="danger" round> 危险按钮 </tiny-button>
-    </tiny-row>
     <tiny-row>
       <tiny-button :icon="IconSearch" circle></tiny-button>
       <tiny-button type="primary" :icon="IconEdit" circle></tiny-button>
@@ -60,7 +54,7 @@ export default {
 
 <style scoped>
 .tiny-row {
-  margin-bottom: 20px;
+  margin: 20px 0;
 }
 .tiny-button {
   margin-bottom: 10px;