tianyiiiii
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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

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

* feat(button): [button] Adapting to the SMB theme
This commit is contained in:
东风使命必达 2024-09-12 19:30:50 -07:00 committed by GitHub
parent 65737087eb
commit 852c07d58c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 46 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
examples/sites/demos/pc/app/button/dynamic-disabled.spec.ts
View File

@ -10,15 +10,15 @@ test('测试禁用状态是否生效', async ({ page }) => {
await switchBtn.click()
await expect(demo.locator('.tiny-button').first()).toBeDisabled()
await expect(demo.locator('.tiny-button').first()).toHaveCSS('background-color', 'rgb(245, 245, 246)')
await expect(demo.locator('.tiny-button').first()).toHaveCSS('color', 'rgb(173, 176, 184)')
await expect(demo.locator('.tiny-button').first()).toHaveCSS('border-bottom-color', 'rgb(223, 225, 230)')
await expect(demo.locator('.tiny-button').first()).toHaveCSS('background-color', 'rgb(240, 240, 240)')
await expect(demo.locator('.tiny-button').first()).toHaveCSS('color', 'rgb(194, 194, 194)')
await expect(demo.locator('.tiny-button').first()).toHaveCSS('border-bottom-color', 'rgb(240, 240, 240)')
await expect(demo.getByRole('button', { name: '次要按钮' }).first()).toBeDisabled()
await expect(demo.getByRole('button', { name: '主要按钮' }).first()).toBeDisabled()
await expect(demo.getByRole('button', { name: '成功按钮' }).first()).toBeDisabled()
await expect(ghostBtn).toHaveCSS('color', 'rgb(173, 176, 184)')
await expect(ghostBtn).toHaveCSS('color', 'rgb(194, 194, 194)')
await expect(ghostBtn).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
await expect(ghostBtn).toHaveCSS('border-bottom-color', 'rgb(173, 176, 184)')
await expect(ghostBtn).toHaveCSS('border-bottom-color', 'rgb(219, 219, 219)')
await switchBtn.click()
await expect(demo.locator('.tiny-button').first()).not.toBeDisabled()

50
examples/sites/demos/pc/app/button/ghost.spec.ts
View File

@ -8,69 +8,69 @@ test('幽灵按钮', async ({ page }) => {
const getGhostBtn = (index: number) => demo.locator('.tiny-button').nth(index)
// 主要幽灵按钮
await expect(getGhostBtn(0)).toHaveCSS('color', 'rgb(94, 124, 224)')
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(94, 124, 224)')
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(118, 147, 245)')
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(118, 147, 245)')
await expect(getGhostBtn(0)).toHaveCSS('border-bottom-color', 'rgb(194, 194, 194)')
// 默认幽灵按钮
// 次要幽灵按钮
await page.waitForTimeout(1000)
await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(37, 43, 58)')
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(173, 176, 184)')
await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(89, 89, 89)')
await page.waitForTimeout(100)
await getGhostBtn(1).click()
await page.waitForTimeout(100)
await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(94, 124, 224)')
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(94, 124, 224)')
await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(219, 219, 219)')
// 成功幽灵按钮
await expect(getGhostBtn(2)).toHaveCSS('color', 'rgb(80, 212, 171)')
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(80, 212, 171)')
await expect(getGhostBtn(2)).toHaveCSS('border-bottom-color', 'rgb(92, 179, 0)')
await page.waitForTimeout(100)
await getGhostBtn(2).click()
await page.waitForTimeout(100)
await expect(getGhostBtn(2)).toHaveCSS('color', 'rgb(172, 242, 220)')
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(172, 242, 220)')
await expect(getGhostBtn(2)).toHaveCSS('border-bottom-color', 'rgb(218, 242, 187)')
// 信息幽灵按钮
await expect(getGhostBtn(3)).toHaveCSS('color', 'rgb(37, 43, 58)')
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(37, 43, 58)')
await expect(getGhostBtn(3)).toHaveCSS('border-bottom-color', 'rgb(20, 118, 255)')
await page.waitForTimeout(100)
await getGhostBtn(3).click()
await page.waitForTimeout(100)
await expect(getGhostBtn(3)).toHaveCSS('color', 'rgb(92, 97, 115)')
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(92, 97, 115)')
await expect(getGhostBtn(3)).toHaveCSS('border-bottom-color', 'rgb(222, 236, 255)')
// 告警幽灵按钮
await expect(getGhostBtn(4)).toHaveCSS('color', 'rgb(250, 152, 65)')
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(250, 152, 65)')
await expect(getGhostBtn(4)).toHaveCSS('border-bottom-color', 'rgb(255, 136, 0)')
await page.waitForTimeout(100)
await getGhostBtn(4).click()
await page.waitForTimeout(100)
await expect(getGhostBtn(4)).toHaveCSS('color', 'rgb(250, 194, 10)')
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(250, 194, 10)')
await expect(getGhostBtn(4)).toHaveCSS('border-bottom-color', 'rgb(255, 235, 209)')
// 危险幽灵按钮
await expect(getGhostBtn(5)).toHaveCSS('color', 'rgb(199, 0, 11)')
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(199, 0, 11)')
await expect(getGhostBtn(5)).toHaveCSS('border-bottom-color', 'rgb(242, 48, 48)')
await page.waitForTimeout(100)
await getGhostBtn(5).click()
await page.waitForTimeout(100)
await expect(getGhostBtn(5)).toHaveCSS('color', 'rgb(214, 74, 82)')
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(214, 74, 82)')
await expect(getGhostBtn(5)).toHaveCSS('border-bottom-color', 'rgb(252, 226, 224)')
})

4
examples/sites/demos/pc/app/button/size.spec.ts
View File

@ -14,7 +14,7 @@ test('测试按钮尺寸', async ({ page }) => {
// 判断高度是否正确
await expect(demo.getByRole('button', { name: '超大按钮' }).first()).toHaveCSS('height', '48px')
await expect(demo.getByRole('button', { name: '中等按钮' }).first()).toHaveCSS('height', '40px')
await expect(demo.getByRole('button', { name: '小型按钮' }).first()).toHaveCSS('height', '32px')
await expect(demo.getByRole('button', { name: '默认按钮' }).first()).toHaveCSS('height', '28px')
await expect(demo.getByRole('button', { name: '小型按钮' }).first()).toHaveCSS('height', '28px')
await expect(demo.getByRole('button', { name: '默认按钮' }).first()).toHaveCSS('height', '32px')
await expect(demo.getByRole('button', { name: '超小按钮' }).first()).toHaveCSS('height', '24px')
})

4
examples/sites/demos/pc/app/button/text.spec.ts
View File

@ -13,6 +13,6 @@ test('测试按钮文字', async ({ page }) => {
await expect(demo.locator('.tiny-button').nth(5)).toHaveClass(/tiny-button--text/)
// 纯文本和图标加文本的字体颜色不一样
await expect(demo.locator('.tiny-button').nth(2)).toHaveCSS('color', 'rgb(94, 124, 224)')
await expect(demo.locator('.tiny-button').nth(4)).toHaveCSS('color', 'rgb(37, 43, 58)')
await expect(demo.locator('.tiny-button').nth(2)).toHaveCSS('color', 'rgb(20, 118, 255)')
await expect(demo.locator('.tiny-button').nth(4)).toHaveCSS('color', 'rgb(25, 25, 25)')
})

1
packages/theme/src/button/index.less
View File

@ -104,6 +104,7 @@
&.is-ghost {
background-color: transparent;
color: var(--ti-button-ghost-text-color);
&:active,
&:focus,

16
packages/theme/src/button/vars.less
View File

@ -57,7 +57,7 @@
--ti-button-size-medium-margin-left: 16px;
// 小型按钮高度
--ti-button-size-small-height: var(--ti-common-size-height-small, 32px);
--ti-button-size-small-height: 28px;
// 小型按钮字号
--ti-button-size-small-font-size: 12px;
// 小尺寸按钮水平内边距
@ -104,6 +104,8 @@
--ti-button-plain-border-color: #C2C2C2;
// 默认 朴素 禁用边框色
--ti-button-plain-disabled-border-color: #F0F0F0;
// 默认 朴素 悬浮边框色
--ti-button-plain-hover-border-color: #F5F5F5;
// 文字按钮文本色
--ti-button-text-color: var(--ti-common-color-text-highlight);
@ -308,17 +310,17 @@
--ti-button-info-plain-disabled-bg-color: #F0F0F0;
// 默认类型幽灵按钮文本色
--ti-button-ghost-text-color: var(--ti-common-color-text-primary, #252b3a);
--ti-button-ghost-text-color: #595959;
// 默认类型幽灵按钮边框色
--ti-button-ghost-border-color: var(--ti-common-color-border, #adb0b8);
// 默认类型幽灵按钮悬浮文本色
--ti-button-ghost-hover-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
--ti-button-ghost-hover-text-color: #595959;
// 默认类型幽灵按钮悬浮边框色
--ti-button-ghost-hover-border-color: #c2c2c2;
--ti-button-ghost-hover-border-color: #DBDBDB;
// 默认类型幽灵按钮禁用文本色
--ti-button-ghost-disabled-text-color: #c2c2c2;
// 默认类型幽灵按钮禁用边框色
--ti-button-ghost-disabled-border-color: #dbdbdb;
--ti-button-ghost-disabled-border-color: #DBDBDB;
// 主要类型幽灵按钮文本色
--ti-button-primary-ghost-text-color: #191919;
// 主要类型幽灵按钮边框色
@ -350,7 +352,7 @@
// 信息类型幽灵按钮悬浮文本色
--ti-button-info-ghost-hover-text-color: #1476FF;
// 信息类型幽灵按钮悬浮边框色
--ti-button-info-ghost-hover-border-color: #FAFAFA;
--ti-button-info-ghost-hover-border-color: #DEECFF;
// 信息类型幽灵按钮禁用文本色
--ti-button-info-ghost-disabled-text-color: #C2C2C2;
// 信息类型幽灵按钮禁用边框色
@ -440,7 +442,7 @@
// 纯图标按钮水平内边距
--ti-button-only-icon-padding-horizontal: 7px;
// 纯图标按钮边框圆角
--ti-button-only-icon-border-radius: var(--ti-common-border-radius-1);
--ti-button-only-icon-border-radius: var(--ti-common-border-radius-3);
// 纯图标按钮边框颜色
--ti-button-only-icon-border-color: #c2c2c2;
// 纯图标按钮悬浮时边框颜色

4
packages/vue/src/button/src/pc.vue
View File

@ -44,7 +44,7 @@
<script lang="ts">
import { renderless, api } from '@opentiny/vue-renderless/button/vue'
import { props, setup, defineComponent } from '@opentiny/vue-common'
import { iconLoading } from '@opentiny/vue-icon'
import { iconLoadingShadow } from '@opentiny/vue-icon'
import type { IButtonApi } from '@opentiny/vue-renderless/types/button.type'
import '@opentiny/vue-theme/button/index.less'
@ -68,7 +68,7 @@ export default defineComponent({
'customClass',
'ghost'
],
components: { IconLoading: iconLoading() },
components: { IconLoading: iconLoadingShadow() },
setup(props, context) {
return setup({ props, context, renderless, api }) as unknown as IButtonApi
}