From 95854ea21019914a28d453975bd2dfa38c2afebc Mon Sep 17 00:00:00 2001 From: ajaxzheng <894103554@qq.com> Date: Wed, 16 Oct 2024 14:27:20 +0800 Subject: [PATCH] refactor(theme): [button-group] refactor button-group theme vars (#2276) --- examples/sites/demos/apis/button-group.js | 34 --- .../pc/app/button-group/basic-usage.spec.ts | 3 +- .../button-group-multiple.spec.ts | 2 +- .../button-group/disabled-composition-api.vue | 3 - .../pc/app/button-group/disabled.spec.ts | 31 +- .../demos/pc/app/button-group/disabled.vue | 3 - .../show-edit-composition-api.vue | 29 -- .../pc/app/button-group/show-edit.spec.ts | 32 -- .../demos/pc/app/button-group/show-edit.vue | 38 --- .../app/button-group/size-composition-api.vue | 1 + .../demos/pc/app/button-group/size.spec.ts | 10 +- .../sites/demos/pc/app/button-group/size.vue | 1 + .../pc/app/button-group/slot-default.spec.ts | 4 +- .../pc/app/button-group/slot-empty.spec.ts | 2 +- .../app/button-group/webdoc/button-group.js | 14 - packages/theme/src/base/vars.less | 4 +- packages/theme/src/button-group/index.less | 287 +++++------------- packages/theme/src/button-group/vars.less | 141 +++------ packages/theme/src/carousel/vars.less | 2 +- packages/vue/src/button-group/src/pc.vue | 2 +- 20 files changed, 144 insertions(+), 499 deletions(-) delete mode 100644 examples/sites/demos/pc/app/button-group/show-edit-composition-api.vue delete mode 100644 examples/sites/demos/pc/app/button-group/show-edit.spec.ts delete mode 100644 examples/sites/demos/pc/app/button-group/show-edit.vue diff --git a/examples/sites/demos/apis/button-group.js b/examples/sites/demos/apis/button-group.js index ba5e629fbe..aaaafa4c6f 100644 --- a/examples/sites/demos/apis/button-group.js +++ b/examples/sites/demos/apis/button-group.js @@ -5,17 +5,6 @@ export default { name: 'button-group', type: 'component', props: [ - { - name: 'border', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否显示边框线', - 'en-US': 'Remove button border.' - }, - mode: ['pc'], - pcDemo: 'border' - }, { name: 'data', typeAnchorName: 'IButtonGroupData', @@ -64,18 +53,6 @@ export default { pcDemo: 'plain', mfDemo: '' }, - { - name: 'show-edit', - type: 'boolean', - defaultValue: 'false', - desc: { - 'zh-CN': '是否显示编辑按钮，只有在显示更多的情况下生效', - 'en-US': - 'Whether to display the edit button. This parameter takes effect only when more buttons are displayed' - }, - mode: ['pc'], - pcDemo: 'show-edit' - }, { name: 'show-more', type: 'number', @@ -146,17 +123,6 @@ export default { }, mode: ['pc'], pcDemo: 'change-event' - }, - { - name: 'edit', - type: '() => void', - defaultValue: '', - desc: { - 'zh-CN': '当编辑按钮被点击时触发', - 'en-US': 'Set the callback function triggered when the edit button is clicked' - }, - mode: ['pc'], - pcDemo: 'show-edit' } ], methods: [], diff --git a/examples/sites/demos/pc/app/button-group/basic-usage.spec.ts b/examples/sites/demos/pc/app/button-group/basic-usage.spec.ts index f96f40e674..85bf58f821 100644 --- a/examples/sites/demos/pc/app/button-group/basic-usage.spec.ts +++ b/examples/sites/demos/pc/app/button-group/basic-usage.spec.ts @@ -12,8 +12,7 @@ test('按钮组基本示例', async ({ page }) => { await button3.click() await demo.getByRole('button', { name: 'Button2' }).hover() await expect(buttonGroup.locator('li').nth(2)).toHaveClass('active') - await expect(button3).toHaveCSS('background-color', 'rgb(94, 124, 224)') - await expect(button3).toHaveCSS('border-bottom-color', 'rgb(94, 124, 224)') + await expect(button3).toHaveCSS('background-color', 'rgb(20, 118, 255)') await expect(button3).toHaveCSS('color', 'rgb(255, 255, 255)') await demo.getByRole('button', { name: 'Button2' }).click() await expect(buttonGroup.locator('li').nth(1)).toHaveClass('active') diff --git a/examples/sites/demos/pc/app/button-group/button-group-multiple.spec.ts b/examples/sites/demos/pc/app/button-group/button-group-multiple.spec.ts index 55338066f3..3e5bd4328a 100644 --- a/examples/sites/demos/pc/app/button-group/button-group-multiple.spec.ts +++ b/examples/sites/demos/pc/app/button-group/button-group-multiple.spec.ts @@ -13,7 +13,7 @@ test('测试按钮是否换行', async ({ page }) => { const demo = page.locator('#button-group-multiple') const buttonGroup = demo.locator('.tiny-button-group') const button = buttonGroup.locator('button').first() - const bottomSpace = 4 + const bottomSpace = 2 let groupBox = await buttonGroup.boundingBox() let buttonBox = await button.boundingBox() expect(groupBox?.height).toBe(((buttonBox?.height || 0) + bottomSpace) * 2) diff --git a/examples/sites/demos/pc/app/button-group/disabled-composition-api.vue b/examples/sites/demos/pc/app/button-group/disabled-composition-api.vue index 734c3193cc..1d857b5bb0 100644 --- a/examples/sites/demos/pc/app/button-group/disabled-composition-api.vue +++ b/examples/sites/demos/pc/app/button-group/disabled-composition-api.vue @@ -3,9 +3,6 @@
-
- -
diff --git a/examples/sites/demos/pc/app/button-group/disabled.spec.ts b/examples/sites/demos/pc/app/button-group/disabled.spec.ts index 4a2e360cdd..683782a450 100644 --- a/examples/sites/demos/pc/app/button-group/disabled.spec.ts +++ b/examples/sites/demos/pc/app/button-group/disabled.spec.ts @@ -6,38 +6,23 @@ test('测试按钮是否禁用', async ({ page }) => { const demo = page.locator('#disabled') const buttonGroup1 = demo.locator('.tiny-button-group').first() - const buttonGroup2 = demo.locator('.tiny-button-group').nth(1) - const buttonGroup3 = demo.locator('.tiny-button-group').nth(2) + const buttonGroup3 = demo.locator('.tiny-button-group').nth(1) // 普通按钮组禁用 await expect(buttonGroup1.locator('button').first()).toHaveClass(/disabled/) - await expect(buttonGroup1.locator('button').first()).toHaveCSS('background-color', 'rgb(223, 225, 230)') - await expect(buttonGroup1.locator('button').first()).toHaveCSS('border-bottom-color', 'rgb(173, 176, 184)') - await expect(buttonGroup1.locator('button').first()).toHaveCSS('color', 'rgb(173, 176, 184)') + await expect(buttonGroup1.locator('button').first()).toHaveCSS('background-color', 'rgb(219, 219, 219)') + await expect(buttonGroup1.locator('button').first()).toHaveCSS('color', 'rgb(194, 194, 194)') await expect(buttonGroup1.locator('button').nth(1)).toHaveClass(/disabled/) - await expect(buttonGroup1.locator('button').nth(1)).toHaveCSS('background-color', 'rgb(245, 245, 246)') - await expect(buttonGroup1.locator('button').nth(1)).toHaveCSS('border-bottom-color', 'rgb(173, 176, 184)') - await expect(buttonGroup1.locator('button').nth(1)).toHaveCSS('color', 'rgb(173, 176, 184)') - - // 无边框按钮组禁用 - await expect(buttonGroup2.locator('button').first()).toHaveClass(/disabled/) - await expect(buttonGroup2.locator('button').first()).toHaveCSS('background-color', 'rgb(255, 255, 255)') - await expect(buttonGroup2.locator('button').first()).toHaveCSS('border-bottom-color', 'rgba(0, 0, 0, 0)') - await expect(buttonGroup2.locator('button').first()).toHaveCSS('color', 'rgb(173, 176, 184)') - await expect(buttonGroup2.locator('button').nth(1)).toHaveClass(/disabled/) - await expect(buttonGroup2.locator('button').nth(1)).toHaveCSS('background-color', 'rgb(255, 255, 255)') - await expect(buttonGroup2.locator('button').nth(1)).toHaveCSS('border-bottom-color', 'rgba(0, 0, 0, 0)') - await expect(buttonGroup2.locator('button').nth(1)).toHaveCSS('color', 'rgb(173, 176, 184)') + await expect(buttonGroup1.locator('button').nth(1)).toHaveCSS('background-color', 'rgb(240, 240, 240)') + await expect(buttonGroup1.locator('button').nth(1)).toHaveCSS('color', 'rgb(194, 194, 194)') // 单个按钮禁用 await expect(buttonGroup3.locator('button').first()).not.toHaveClass(/disabled/) - await expect(buttonGroup3.locator('button').first()).toHaveCSS('background-color', 'rgb(94, 124, 224)') - await expect(buttonGroup3.locator('button').first()).toHaveCSS('border-bottom-color', 'rgb(94, 124, 224)') + await expect(buttonGroup3.locator('button').first()).toHaveCSS('background-color', 'rgb(20, 118, 255)') await expect(buttonGroup3.locator('button').first()).toHaveCSS('color', 'rgb(255, 255, 255)') await expect(buttonGroup3.locator('button').nth(1)).toHaveClass(/disabled/) - await expect(buttonGroup3.locator('button').nth(1)).toHaveCSS('background-color', 'rgb(245, 245, 246)') - await expect(buttonGroup3.locator('button').nth(1)).toHaveCSS('border-bottom-color', 'rgb(173, 176, 184)') - await expect(buttonGroup3.locator('button').nth(1)).toHaveCSS('color', 'rgb(173, 176, 184)') + await expect(buttonGroup3.locator('button').nth(1)).toHaveCSS('background-color', 'rgb(240, 240, 240)') + await expect(buttonGroup3.locator('button').nth(1)).toHaveCSS('color', 'rgb(194, 194, 194)') // 按钮悬浮提示 await buttonGroup3.locator('button').nth(1).hover() diff --git a/examples/sites/demos/pc/app/button-group/disabled.vue b/examples/sites/demos/pc/app/button-group/disabled.vue index 33c16a5f41..df07f5c9b4 100644 --- a/examples/sites/demos/pc/app/button-group/disabled.vue +++ b/examples/sites/demos/pc/app/button-group/disabled.vue @@ -3,9 +3,6 @@
-
- -
diff --git a/examples/sites/demos/pc/app/button-group/show-edit-composition-api.vue b/examples/sites/demos/pc/app/button-group/show-edit-composition-api.vue deleted file mode 100644 index db92f03079..0000000000 --- a/examples/sites/demos/pc/app/button-group/show-edit-composition-api.vue +++ /dev/null @@ -1,29 +0,0 @@ - - - diff --git a/examples/sites/demos/pc/app/button-group/show-edit.spec.ts b/examples/sites/demos/pc/app/button-group/show-edit.spec.ts deleted file mode 100644 index 2eac4c6670..0000000000 --- a/examples/sites/demos/pc/app/button-group/show-edit.spec.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { test, expect } from '@playwright/test' - -test('测试是否显示编辑按钮', async ({ page }) => { - page.on('pageerror', (exception) => expect(exception).toBeNull()) - await page.goto('button-group#show-edit') - - const demo = page.locator('#show-edit') - const buttonGroup = demo.locator('.tiny-button-group') - - // 判断点击事件是否正常 - await demo.getByRole('button', { name: 'Button3' }).click() - await expect(buttonGroup.locator('li').nth(2)).toHaveClass('active') - await demo.getByRole('button', { name: 'Button2' }).click() - await expect(buttonGroup.locator('li').nth(1)).toHaveClass('active') - await demo.getByRole('button', { name: 'Button1' }).click() - await expect(buttonGroup.locator('li').nth(0)).toHaveClass('active') - await expect(buttonGroup.locator('button').nth(2)).toHaveText('Button3') - await demo.getByRole('button').nth(3).click() - await page.locator('.tiny-popover').getByText('Button5').click() - await expect(buttonGroup.locator('button').nth(2)).toHaveText('Button5') - - // 判断图标是否正确 - const moreButton = buttonGroup.getByRole('button').nth(3) - const editButton = buttonGroup.getByRole('button').nth(4) - const moreButtonSvg = moreButton.locator('svg path').first() - const editButtonSvg = editButton.locator('svg path').first() - const moreSvgPathReg = /^M292\.768 449\.694c2\.491\.515.+002-12.555-\.002z$/ - const editSvgPath = - 'm14.6 6.6-7.5 7.6c-.3.3-.3.7 0 1 .1.1.4.2.5.2.1 0 .4-.1.5-.2l7.5-7.5c.3-.3.3-.7 0-1-.3-.3-.7-.3-1-.1z' - await expect(moreButtonSvg).toHaveAttribute('d', moreSvgPathReg) - await expect(editButtonSvg).toHaveAttribute('d', editSvgPath) -}) diff --git a/examples/sites/demos/pc/app/button-group/show-edit.vue b/examples/sites/demos/pc/app/button-group/show-edit.vue deleted file mode 100644 index bcf68cf97d..0000000000 --- a/examples/sites/demos/pc/app/button-group/show-edit.vue +++ /dev/null @@ -1,38 +0,0 @@ - - - diff --git a/examples/sites/demos/pc/app/button-group/size-composition-api.vue b/examples/sites/demos/pc/app/button-group/size-composition-api.vue index 1db5eea169..74404e14dc 100644 --- a/examples/sites/demos/pc/app/button-group/size-composition-api.vue +++ b/examples/sites/demos/pc/app/button-group/size-composition-api.vue @@ -1,6 +1,7 @@