Skip to content

Momo poppy/refactor theme select 0930 #2251

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 10 commits into from
Closed

Momo poppy/refactor theme select 0930 #2251

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c42bde8
refactor(select): [select] refactor theme vars for select
MomoPoppy Oct 9, 2024
141318a
refactor(select): [select] refactor theme vars for select
MomoPoppy Oct 9, 2024
f30f72f
feat(select): [select] refactor(select): [select] refactor theme vars…
MomoPoppy Oct 10, 2024
423a64f
test(select): [select] modify test cases
MomoPoppy Oct 11, 2024
3187d33
refactor(select): [select] refactor vue template for select
MomoPoppy Oct 12, 2024
9b6ecc9
refactor(select): [select] modify variable names and add refactor styles
MomoPoppy Oct 12, 2024
6f86f3e
refactor(select): [select] change data-tag="tiny-select-dropdown-item…
MomoPoppy Oct 13, 2024
ad2ed0d
refactor(select): [select] modify variable names and add refactor sty…
MomoPoppy Oct 13, 2024
50a5268
feat(theme): [select] add new vars
MomoPoppy Oct 13, 2024
e80212c
refactor(option-group): [select] modify variable names and add refact…
MomoPoppy Oct 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/select/events.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ test('单选事件', async ({ page }) => {

await page.waitForTimeout(200)
await input.hover()
await select.locator('.tiny-select__caret.icon-close').click()
await select.locator('.tiny-select__caret.tiny-select__close').click()
await page.waitForTimeout(500)
await expect(input).toHaveValue('')
await expect(model.filter({ hasText: '触发 clear 事件' })).toHaveCount(1)
Expand Down Expand Up @@ -65,7 +65,7 @@ test('多选事件', async ({ page }) => {

await page.waitForTimeout(200)
await select.hover()
await select.locator('.tiny-select__caret.icon-close').click()
await select.locator('.tiny-select__caret.tiny-select__close').click()

await expect(tag).toHaveCount(0)
await expect(model.filter({ hasText: '触发 change 事件' })).toHaveCount(1)
Expand Down
14 changes: 7 additions & 7 deletions examples/sites/demos/pc/app/select/input-box-type.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ test('下划线默认', async ({ page }) => {
const dropdown = page.locator('body > .tiny-select-dropdown')
const option = dropdown.locator('.tiny-option')

await expect(select).toHaveClass(/tiny-select__underline/)
await expect(select.locator('.tiny-input')).toHaveClass(/tiny-input-underline/)
await expect(input).toHaveCSS('border-top-width', '0px')
await expect(input).toHaveCSS('border-left-width', '0px')
await expect(input).toHaveCSS('border-right-width', '0px')
await expect(input).toHaveCSS('border-color', 'rgb(194, 194, 194)')
await expect(input).toHaveCSS('border-bottom-color', 'rgb(194, 194, 194)')
await expect(select.locator('svg')).toHaveCSS('fill', 'rgb(128, 128, 128)')

await select.click()
Expand All @@ -30,11 +30,11 @@ test('下划线禁用', async ({ page }) => {
const input = select.locator('.tiny-input__inner')
const dropdown = page.locator('body > .tiny-select-dropdown')

await expect(select).toHaveClass(/tiny-select__underline/)
await expect(select.locator('.tiny-input')).toHaveClass(/tiny-input-underline/)
await expect(input).toHaveCSS('border-top-width', '0px')
await expect(input).toHaveCSS('border-left-width', '0px')
await expect(input).toHaveCSS('border-right-width', '0px')
await expect(input).toHaveCSS('border-color', 'rgb(219, 219, 219)')
await expect(input).toHaveCSS('border-bottom-color', 'rgb(219, 219, 219)')
Comment on lines +33 to +37
Copy link

@coderabbitai coderabbitai bot Oct 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Remaining border-color Assertion Found

A leftover assertion for border-color was detected in automatic-dropdown.spec.ts:

  • await expect(input).toHaveCSS('border-color', 'rgb(25, 25, 25)')

Please update this assertion to align with the recent refactoring to border-bottom-color to ensure consistency across the component's tests.

🔗 Analysis chain

Approve changes and suggest consistency check.

The updates to the class and CSS property assertions in the disabled state test are consistent with the changes made in the default state test. This systematic update improves the overall consistency of the component's structure and styling.

To ensure this refactoring has been applied consistently across all related components, please run the following check:

If these searches return results, it may indicate areas where the refactoring needs to be applied for consistency.

Update Verification Script to Include Vue Files and Check Remaining CSS Assertions

To address the issues found, please run the following updated shell script:

This script corrects the file type recognition by using glob patterns and will help ensure that all instances of the old class name and border-color assertions are identified.

Corrected Verification Script with Proper Quoting

To resolve the syntax error and accurately verify the consistency of the select component styling, please execute the following updated shell script:

Explanation of Changes:

  • First rg Command: Remains unchanged as it correctly searches for 'tiny-select__underline' in .ts and .vue files using single quotes.

  • Second rg Command:

    • Changed the outer quotes from single (') to double (") to allow single quotes within the regex pattern.
    • This adjustment prevents the shell from misinterpreting the single quotes around 'border-color', thereby eliminating the syntax error.

Please run this corrected script to ensure that all instances of the old class name and border-color assertions have been successfully addressed.

Corrected Verification Script with Proper Regex Escaping

To resolve the regex parse error and accurately verify the consistency of the select component styling, please execute the following updated shell script:

Explanation of Changes:

  • Second rg Command:

    • Changed the outer quotes from double (") to single (') to simplify escaping.
    • Escaped the parentheses and single quotes within the regex pattern using backslashes.
    • The corrected pattern toHaveCSS\('border-color' accurately matches the toHaveCSS('border-color', ...) assertions in the test files.

    Alternatively, if single quotes cause issues, you can use double quotes with properly escaped characters:

Please run this corrected script to ensure that all instances of the old class name and border-color assertions have been successfully addressed.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for consistency in select component styling across the codebase

# Test: Search for any remaining instances of the old class name
rg --type ts --type vue 'tiny-select__underline'

# Test: Search for any remaining instances of full border-color assertions in select tests
rg --type ts 'toHaveCSS\(.(border-color)' examples/sites/demos/pc/app/select

Length of output: 284

Script:

# 
#!/bin/bash
# Description: Check for consistency in select component styling across the codebase

# Test: Search for any remaining instances of the old class name in .ts and .vue files
rg 'tiny-select__underline' -g "*.ts" -g "*.vue"

# Test: Search for any remaining instances of full border-color assertions in select tests
rg 'toHaveCSS\(.\'border-color\'' examples/sites/demos/pc/app/select

Length of output: 142

Script:

# 
#!/bin/bash
# Description: Check for consistency in select component styling across the codebase

# Test: Search for any remaining instances of the old class name in .ts and .vue files
rg 'tiny-select__underline' -g "*.ts" -g "*.vue"

# Test: Search for any remaining instances of full border-color assertions in select tests
rg "toHaveCSS\(.\'border-color\'" examples/sites/demos/pc/app/select

Length of output: 232

Script:

# 
#!/bin/bash
# Description: Check for consistency in select component styling across the codebase

# Test: Search for any remaining instances of the old class name in .ts and .vue files
rg 'tiny-select__underline' -g "*.ts" -g "*.vue"

# Test: Search for any remaining instances of full border-color assertions in select tests
rg "toHaveCSS\('border-color'" examples/sites/demos/pc/app/select

Length of output: 251

Script:

  rg "toHaveCSS\('border-color'" examples/sites/demos/pc/app/select

Length of output: 202

await expect(input).toHaveCSS('cursor', 'not-allowed')
await expect(select.locator('svg')).toHaveCSS('fill', 'rgb(194, 194, 194)')
const hasDisabled = await input.evaluate((input) => input.hasAttribute('disabled'))
Expand All @@ -55,18 +55,18 @@ test('下划线多选', async ({ page }) => {
const dropdown = page.locator('body > .tiny-select-dropdown')
const option = dropdown.locator('.tiny-option')

await expect(select).toHaveClass(/tiny-select__underline/)
await expect(select.locator('.tiny-input')).toHaveClass(/tiny-input-underline/)
await expect(input).toHaveCSS('border-top-width', '0px')
await expect(input).toHaveCSS('border-left-width', '0px')
await expect(input).toHaveCSS('border-right-width', '0px')
await expect(input).toHaveCSS('border-color', 'rgb(194, 194, 194)')
await expect(input).toHaveCSS('border-bottom-color', 'rgb(194, 194, 194)')
await expect(select.locator('.tiny-select__caret')).toHaveCSS('fill', 'rgb(128, 128, 128)')

await select.click()
await expect(dropdown).toBeVisible()
await option.first().click()
await expect(tag).toHaveCount(5)

await expect(select).toHaveClass(/tiny-select__underline/)
await expect(select.locator('.tiny-input')).toHaveClass(/tiny-input-underline/)
await expect(select).toHaveClass(/tiny-select__multiple/)
})
2 changes: 1 addition & 1 deletion packages/renderless/src/base-select/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1766,7 +1766,7 @@ const optmzApis = {
'.tiny-recycle-scroller__slot, .tiny-recycle-scroller__item-view:not([style*="transform: translateY(-9999px) translateX(0px)"])'
)
)
.map((item) => item.querySelector(`[data-tag="tiny-select-dropdown-item"]:not(${querySelectKey})`))
.map((item) => item.querySelector(`[data-tag="tiny-option"]:not(${querySelectKey})`))
.filter((v) => v)
},
setScrollTop: ({ refs, state }) => {
Expand Down
2 changes: 1 addition & 1 deletion packages/renderless/src/select/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2092,7 +2092,7 @@ const optmzApis = {
'.tiny-recycle-scroller__slot, .tiny-recycle-scroller__item-view:not([style*="transform: translateY(-9999px) translateX(0px)"])'
)
)
.map((item) => item.querySelector(`[data-tag="tiny-select-dropdown-item"]:not(${querySelectKey})`))
.map((item) => item.querySelector(`[data-tag="tiny-option"]:not(${querySelectKey})`))
.filter((v) => v)
},
setScrollTop: ({ refs, state }) => {
Expand Down
4 changes: 2 additions & 2 deletions packages/theme-saas/src/select/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@

.@{input-prefix-cls} {
&.is-show-close {
.icon-close {
.@{select-prefix-cls}__close {
@apply mr-1;
}
}
Expand Down Expand Up @@ -335,7 +335,7 @@
@apply pr-12;
}

.icon-close {
.tiny-select__close {
@apply mr-2;
@apply fill-color-text-placeholder;

Expand Down
1 change: 1 addition & 0 deletions packages/theme/src/base/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,6 +291,7 @@
--tv-color-icon-hover: var(--tv-base-color-common-11); // #191919 图标悬浮色
--tv-color-icon-active: var(--tv-base-color-common-11); // #191919 图标激活色
--tv-color-icon-disabled: var(--tv-base-color-common-7); // #c2c2c2 图标禁用色
--tv-color-icon-checked-disabled:var(--tv-base-color-common-6); // #dbdbdb 图标禁用色-1 checkbox选中且禁用
--tv-color-icon-control: var(--tv-base-color-brand); // #191919 图标按钮 / 图标+文本按钮图标色,主要在按钮场景（稳定态图标色， hover时不用变化）
--tv-color-icon-control-active: var(--tv-base-color-brand-6); // #1476ff 控件图标激活色，主要在checkbox、radio图标激活场景
--tv-color-icon-control-disabled: var(--tv-base-color-common-6); // #1476ff 控件图标禁用色，主要在checkbox、radio图标激活场景
Expand Down
29 changes: 11 additions & 18 deletions packages/theme/src/option-group/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
padding: 0;

&:not(:last-of-type) {
padding-bottom: var(--ti-option-group-padding-bottom);
padding-bottom: 0px;
}

&:not(:last-of-type)::after {
Expand All @@ -34,28 +34,21 @@
left: 8px;
right: 8px;
bottom: 12px;
height: var(--ti-option-group-line-dividing-height);
background: var(--ti-option-group-line-dividing-bg-color);
height: var(--tv-OptionGroup-height-divider);
background: var(--tv-OptionGroup-border-color-divider);
}

.@{option-group-prefix-cls}__title {
padding: 0 var(--ti-option-group-title-padding-horizontal);
font-size: var(--ti-option-group-title-font-size);
font-weight: var(--ti-option-group-title-font-weight);
color: var(--ti-option-group-title-text-color);
line-height: var(--ti-option-group-title-line-height);
height: var(--ti-option-group-title-height);
margin-top: var(--ti-option-group-title-margin-top);
margin-bottom: var(--ti-option-group-title-margin-bottom);
}
padding: 0 var(--tv-OptionGroup-title-padding-x);
font-size: var(--tv-OptionGroup-font-size);

&:first-child .@{option-group-prefix-cls}__title {
margin-top: var(--ti-option-group-title-margin-top-first);
color: var(--tv-OptionGroup-text-color);
line-height: var(--tv-OptionGroup-line-height);
height: auto;
margin: var(--tv-OptionGroup-title-margin);
}

.@{option-group-prefix-cls}__list {
.tiny-option {
padding: var(--ti-option-padding-vertical) var(--ti-option-padding-horizontal-group);
}
&:first-child .@{option-group-prefix-cls}__title {
margin-top: var(--tv-OptionGroup-title-margin-top-first);
}
}
43 changes: 19 additions & 24 deletions packages/theme/src/option-group/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,28 +11,23 @@
*/

.component-css-vars-option-group() {
// 分组分割线填充色
--ti-option-group-line-dividing-bg-color: var(--ti-common-color-line-dividing, #f0f0f0);
// 分组标题字号
--ti-option-group-title-font-size: var(--ti-common-font-size-0, 12px);
// 分组标题字重
--ti-option-group-title-font-weight: var(--ti-common-font-weight-normal, 400);
// 分组标题字体颜色
--ti-option-group-title-text-color: var(--ti-common-color-text-weaken, #808080);
// 分组标题行高
--ti-option-group-title-line-height: var(--ti-common-line-height-base, 18px);
// 分组标题高度
--ti-option-group-title-height: var(--ti-common-size-auto, auto);
// 分组标题水平方向外边距
--ti-option-group-title-padding-horizontal: var(--ti-common-space-4x, 16px);
// 分组标题顶部外边距
--ti-option-group-title-margin-top: var(--ti-common-space-2x, 8px);
// 分组标题底部外边距
--ti-option-group-title-margin-bottom: var(--ti-common-space-2, 2px);
// 分组第一个标题顶部外边距
--ti-option-group-title-margin-top-first: var(--ti-common-space-base, 4px);
// 分组分割线高度
--ti-option-group-line-dividing-height: var(--ti-common-size-0, 0px);
// 分组底部内边距
--ti-option-group-padding-bottom: var(--ti-common-space-0, 0px);
// 字号
--tv-OptionGroup-font-size: var(--tv-font-size-sm, 12px);
// 文本色
--tv-OptionGroup-text-color: var(--tv-color-text-weaken, #808080);
// 行高
--tv-OptionGroup-line-height: var(--tv-line-height-number, 1.5);

// 分割线填充色
--tv-OptionGroup-border-color-divider: var(--tv-color-border-divider, #f0f0f0);
// 分割线高度
--tv-OptionGroup-height-divider: 0px;

// 标题水平方向内边距
--tv-OptionGroup-title-padding-x: var(--tv-space-xl, 16px);
// 标题外边距
--tv-OptionGroup-title-margin: var(--tv-space-md, 8px) 0 var(--tv-space-xs, 2px) 0;

// 第一个标题顶部外边距
--tv-OptionGroup-title-margin-top-first: var(--tv-space-sm, 4px);
}
Loading
Loading