Skip to content

Commit a8fccf6

Browse files
chenxi-20chenxi-20
authored
refactor(tabs): [tabs] refactor the Tabs Theme (#2270)
* refactor(tabs): [tabs] 重构tabs主题 * refactor(tabs): [tabs] 修复测试用例报错
1 parent e2a5fba commit a8fccf6

File tree

12 files changed

+531
-602
lines changed

12 files changed

+531
-602
lines changed

Diff for: ‎examples/sites/demos/pc/app/tabs/basic-usage.spec.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@ test('基本用法', async ({ page }) => {
1515
await expect(tabItems).toHaveCount(4)
1616
await expect(tabItems).toHaveClass([/is-top/, /is-top is-active/, /is-top/, /is-top/])
1717
await expect(content).toHaveText(/数据组件/)
18-
await expect(activeBar).toHaveCSS('width', '56px')
18+
await expect(activeBar).toHaveCSS('width', '64px')
1919
await expect(activeBar).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 96, 0)')
2020
await item1.click()
2121
await expect(item1).toHaveClass(/is-active/)
22-
await expect(activeBar).toHaveCSS('width', '56px')
22+
await expect(activeBar).toHaveCSS('width', '64px')
2323
await expect(activeBar).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
24-
await expect(item1).toHaveCSS('color', 'rgb(94, 124, 224)')
24+
await expect(item1).toHaveCSS('color', 'rgb(25, 25, 25)')
2525
await expect(content).toHaveText(/表单组件/)
2626

2727
// 禁用

Diff for: ‎examples/sites/demos/pc/app/tabs/size.spec.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ test('小尺寸', async ({ page }) => {
88
const headerBox = container.locator('.tiny-tabs .tiny-tabs__nav-scroll')
99

1010
await expect(headerBox.nth(0)).toHaveCSS('height', '40px')
11-
await expect(headerBox.nth(0)).toHaveCSS('font-size', '16px')
11+
await expect(headerBox.nth(0)).toHaveCSS('font-size', '12px')
1212
await expect(headerBox.nth(1)).toHaveCSS('height', '24px')
13-
await expect(headerBox.nth(1).locator('.tiny-tabs__item').first()).toHaveCSS('font-size', '14px')
13+
await expect(headerBox.nth(1).locator('.tiny-tabs__item').first()).toHaveCSS('font-size', '16px')
1414
await expect(headerBox.nth(2)).toHaveCSS('height', '24px')
1515
await expect(headerBox.nth(2).locator('.tiny-tabs__item').first()).toHaveCSS('font-size', '12px')
1616
})

Diff for: ‎examples/sites/demos/pc/app/tabs/tab-style-bordercard.spec.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ test('bordercard类型', async ({ page }) => {
1111
const firstItem = tabItems.first()
1212
const item5 = tabItems.nth(3)
1313
const content = tabs.getByRole('tabpanel')
14-
const activeBgColor = 'rgb(238, 240, 245)'
14+
const activeBgColor = 'rgb(245, 245, 245)'
1515

1616
await expect(tabs).toHaveClass(/tiny-tabs--border-card/)
17-
await expect(tabHeader).toHaveCSS('background-color', 'rgb(70, 76, 89)')
17+
await expect(tabHeader).toHaveCSS('background-color', 'rgb(255, 255, 255)')
1818
await expect(tabItems).toHaveCount(5)
1919
await expect(tabItems).toHaveClass([/is-top is-active/, /is-top/, /is-top/, /is-top/, /is-top/])
2020
await expect(firstItem).toHaveCSS('background-color', activeBgColor)

Diff for: ‎examples/sites/demos/pc/app/tabs/tab-style-card.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ test('card类型', async ({ page }) => {
1010
const firstItem = tabItems.first()
1111
const item5 = tabItems.nth(4)
1212
const content = tabs.getByRole('tabpanel')
13-
const borderValue = '1px solid rgb(223, 225, 230)'
13+
const borderValue = '1px solid rgb(240, 240, 240)'
1414

1515
await expect(tabs).toHaveClass(/tiny-tabs--card/)
1616
await expect(tabItems).toHaveCount(5)

Diff for: ‎examples/sites/demos/pc/webdoc/theme-en.md

+14-14
Original file line numberDiff line numberDiff line change
@@ -155,9 +155,9 @@ If the original format is `--ti-pager-primary-color:red;`, manually replace it w
155155

156156
`Special circumstances`:
157157

158-
Example 3: Query the special variable table. It is similar to a variable that contains the `border` field. If the new variable to be split contains `border-weight (border thickness), border-style (border style), and border-color (border color)`, For example, `--ti-tabs-item-active-border`is split into`--ti-tabs-item-active-border-weight，--ti-tabs-item-active-border-style, --ti-tabs-item-active-border-color`;
158+
Example 3: Query the special variable table. It is similar to a variable that contains the `border` field. If the new variable to be split contains `border-weight (border thickness), border-style (border style), and border-color (border color)`, For example, `--tv-Tabs-item-active-border`is split into`--tv-Tabs-item-active-border-weight，--tv-Tabs-item-active-border-style, --tv-Tabs-item-active-border-color`;
159159

160-
If the original style is `--ti-tabs-item-active-border: 1px solid red;`, manually replace it with `--ti-tabs-item-active-border-weight: 1px; --ti-tabs-item-active-border-style: solid; --ti-tabs-item-active-border-color: red;`.
160+
If the original style is `--tv-Tabs-item-active-border: 1px solid red;`, manually replace it with `--tv-Tabs-item-active-border-weight: 1px; --tv-Tabs-item-active-border-style: solid; --tv-Tabs-item-active-border-color: red;`.
161161

162162
Example 4: If the variable split from `--ti-radio-button-checked-hover-color` contains the `box-shadow` field, you need to write the `box-shadow` style separately.
163163

@@ -307,20 +307,20 @@ The mapping table of special variables is attached. There are 48 special variabl
307307
"--ti-switch-checked-disabled-border-color"
308308
],
309309
"--ti-switch-dot-size": ["--ti-switch-dot-size-height-width", "--ti-switch-dot-position-left"],
310-
"--ti-tabs-item-active-border": [
311-
"--ti-tabs-item-active-border-weight",
312-
"--ti-tabs-item-active-border-style",
313-
"--ti-tabs-item-active-border-color"
310+
"--tv-Tabs-item-active-border": [
311+
"--tv-Tabs-item-active-border-weight",
312+
"--tv-Tabs-item-active-border-style",
313+
"--tv-Tabs-item-active-border-color"
314314
],
315-
"--ti-tabs-item-border-bottom": [
316-
"--ti-tabs-item-bottom-border-weight",
317-
"--ti-tabs-item-bottom-border-style",
318-
"--ti-tabs-item-bottom-border-color"
315+
"--tv-Tabs-item-border-bottom": [
316+
"--tv-Tabs-item-bottom-border-weight",
317+
"--tv-Tabs-item-bottom-border-style",
318+
"--tv-Tabs-item-bottom-border-color"
319319
],
320-
"--ti-tabs-icon-close-margin": [
321-
"--ti-tabs-icon-close-margin-vertical",
322-
"--ti-tabs-icon-close-margin-right",
323-
"--ti-tabs-icon-close-margin-left"
320+
"--tv-Tabs-icon-close-margin": [
321+
"--tv-Tabs-icon-close-margin-vertical",
322+
"--tv-Tabs-icon-close-margin-right",
323+
"--tv-Tabs-icon-close-margin-left"
324324
],
325325
"--ti-tooltip-padding": ["--ti-tooltip-padding-vertical", "--ti-tooltip-padding-horizontal"],
326326
"--ti-upload-list-picture-card-item-bgcolor": [

Diff for: ‎examples/sites/src/views/components/components.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -772,10 +772,10 @@ export default defineComponent({
772772
}
773773
774774
.docs-content-tabs {
775-
--ti-tabs-heigh: 48px;
776-
--ti-tabs-item-font-size: 18px;
777-
--ti-tabs-header-font-active-text-color: #2f5bea;
778-
--ti-tabs-item-active-border-color: #2f5bea;
775+
--tv-Tabs-heigh: 48px;
776+
--tv-Tabs-item-font-size: 18px;
777+
--tv-Tabs-header-font-active-text-color: #2f5bea;
778+
--tv-Tabs-item-active-border-color: #2f5bea;
779779
780780
flex: 1;
781781
transition: all ease-in-out 0.3s;

Diff for: ‎packages/theme/src/bulletin-board/index.less

+1-1
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@
115115
bottom: 0;
116116
width: 100%;
117117
height: 1px;
118-
background-color: var(--ti-tabs-border-color);
118+
background-color: var(--tv-Tabs-border-color);
119119
z-index: 1;
120120
}
121121

Diff for: ‎packages/theme/src/tabs/aurora-theme.js

+14-15
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
export const tinyTabsAuroraTheme = {
2-
'ti-tabs-header-font-weight-active': 'var(--ti-common-font-weight-7)',
3-
'ti-tabs-dark-margin-top': 'var(--ti-common-space-0)',
4-
'ti-tabs-dark-bg-color-active': 'var(--ti-common-bg-minor-active)',
5-
'ti-tabs-header-dark-bg-color': 'var(--ti-common-color-selected-background)',
6-
'ti-tabs-dark-first-margin-left': 'var(--ti-common-space-0)',
7-
'ti-tabs-content-font-size': 'var(--ti-common-font-size-base)',
8-
'ti-tabs-item-card-border-color': 'var(--ti-common-color-line-normal)',
9-
'ti-tabs-item-top-right-border-weight': 'var(--ti-common-size-0)',
10-
'ti-tabs-dark-bg-color-hover': 'none',
11-
'ti-tabs-dark-text-color-hover': 'var(--ti-common-color-primary-normal)',
12-
'ti-tabs-dark-text-color-active': 'var(--ti-common-color-primary-normal)',
13-
'ti-tabs-dark-border-weight': 'var(--ti-common-border-weight-normal)',
14-
'ti-tabs-item-padding-horizontal': 'var(--ti-common-space-6x)',
15-
'ti-tabs-item-margin-right': 'var(--ti-common-space-6x)',
16-
'ti-tabs-header-separator-height': 'var(--ti-common-space-3x)'
2+
'tv-Tabs-header-font-weight-active': 'var(--ti-common-font-weight-7)',
3+
'tv-Tabs-dark-margin-top': 'var(--ti-common-space-0)',
4+
'tv-Tabs-dark-bg-color-active': 'var(--ti-common-bg-minor-active)',
5+
'tv-Tabs-header-dark-bg-color': 'var(--ti-common-color-selected-background)',
6+
'tv-Tabs-dark-first-margin-left': 'var(--ti-common-space-0)',
7+
'tv-Tabs-item-card-border-color': 'var(--ti-common-color-line-normal)',
8+
'tv-Tabs-item-top-right-border-weight': 'var(--ti-common-size-0)',
9+
'tv-Tabs-dark-bg-color-hover': 'none',
10+
'tv-Tabs-dark-text-color-hover': 'var(--ti-common-color-primary-normal)',
11+
'tv-Tabs-dark-text-color-active': 'var(--ti-common-color-primary-normal)',
12+
'tv-Tabs-dark-border-weight': 'var(--ti-common-border-weight-normal)',
13+
'tv-Tabs-item-padding-horizontal': 'var(--ti-common-space-6x)',
14+
'tv-Tabs-item-margin-right': 'var(--ti-common-space-6x)',
15+
'tv-Tabs-header-separator-height': 'var(--ti-common-space-3x)'
1716
}

0 commit comments

Comments
 (0)