Skip to content

refactor(select): [select] refactor theme vars for select #2232

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

Merged
merged 4 commits into from
Oct 11, 2024
Merged

refactor(select): [select] refactor theme vars for select #2232

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 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
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)')
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/)
})
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
93 changes: 29 additions & 64 deletions packages/theme/src/select/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,10 +104,7 @@
position: absolute;
line-height: normal;
white-space: normal;
padding-left: var(--ti-select-tags-wrap-padding-left);
padding-right: var(--ti-select-tags-wrap-padding-right);
padding-bottom: var(--ti-select-tags-wrap-padding-bottom);
padding-top: var(--ti-select-tags-wrap-padding-top);
padding: var(--tv-Select-tags-padding);
z-index: 1;
top: 50%;
margin-left: 1px;
Expand Down Expand Up @@ -143,24 +140,24 @@
outline: 0;
padding: 0;
margin-left: 8px;
color: var(--ti-select-input-text-color);
font-size: var(--ti-select-input-font-size);
height: var(--ti-select-input-height);
color: var(--tv-Select-text-color);
font-size: var(--tv-Select-font-size);
height: var(--tv-Select-height);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;

&.is-mini {
height: var(--ti-select-input-mini-height);
height: var(--tv-Select-height-mini);
}

&.is-small {
height: var(--ti-select-input-small-height);
height: var(--tv-Select-height-small);
}

&.is-medium {
height: var(--ti-select-input-medium-height);
height: var(--tv-Select-height-medium);
}
}

Expand All @@ -172,8 +169,7 @@
white-space: nowrap;
box-sizing: border-box;
border-color: transparent;
margin: var(--ti-select-tags-margin-top) var(--ti-select-tags-margin-right) var(--ti-select-tags-margin-bottom)
var(--ti-select-tags-margin-left);
margin: var(--tv-Select-tag-margin);
text-overflow: ellipsis;
overflow: hidden;
display: inline-flex;
Expand All @@ -194,15 +190,15 @@
flex-shrink: 0;
}

// TODO: Aurora 多选禁用文本显示(评估是否删除）
&.is-disabled {
max-height: 24px;
display: inline-flex;

> span {
color: var(--ti-select-tags-text-color-disabled);
font-size: var(--ti-tag-font-size);
margin: var(--ti-select-tags-margin-top) var(--ti-select-tags-margin-right)
var(--ti-select-tags-margin-bottom) var(--ti-select-tags-margin-left);
color: var(--tv-Select-text-color-disabled);
margin: var(--tv-Select-tags-margin-top) var(--tv-Select-tags-margin-right)
var(--tv-Select-tags-margin-bottom) var(--tv-Select-tags-margin-left);
display: inline-block;
width: 100%;
white-space: nowrap;
Expand All @@ -216,13 +212,14 @@
.@{select-prefix-cls}__collapse-text {
display: inline-flex;
align-items: center;
margin-left: var(--ti-select-tags-margin-left);
font-size: var(--ti-select-collapse-button-font-size);
color: var(--ti-select-collapse-button-text-icon-color);
margin: var(--tv-Select-collapse-margin);
font-size: var(--tv-Select-font-size);
color: var(--tv-Select-collapse-text-color);

.tiny-svg {
margin-left: var(--ti-select-collapse-button-icon-margin-left);
fill: var(--ti-select-collapse-button-text-icon-color);
margin: var(--tv-Select-collapse-margin);
fill: var(--tv-Select-icon-color);
font-size: var(--tv-Select-icon-size);
}
}
}
Expand All @@ -245,7 +242,7 @@
}

.@{select-prefix-cls}__tags {
height: var(--ti-select-tags-height);
height: var(--tv-Select-tags-height);
overflow: hidden;

&-collapse {
Expand Down Expand Up @@ -273,7 +270,6 @@
&.collapse-tag-clicked {
.@{select-prefix-cls}__tags {
height: auto;
max-height: var(--ti-select-tags-max-height);
overflow-y: auto;

&-collapse {
Expand Down Expand Up @@ -341,7 +337,7 @@
}

&__suffix {
display: var(--ti-select-suffix-display);
display: 'inline-block';
Copy link

@coderabbitai coderabbitai bot Oct 9, 2024

Choose a reason for hiding this comment

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

⚠️ Potential issue

Fix display property and approve CSS variable usage

The display property value should not be in quotes. Please remove the quotes around 'inline-block' to prevent potential issues:

-        display: 'inline-block';
+        display: inline-block;

The use of CSS variables for various properties (padding-right, fill, font-size, color, margin) improves maintainability and theming capabilities. These changes are approved.

Also applies to: 349-349, 372-373, 379-379, 389-391, 396-396, 411-411

}
}

Expand All @@ -350,7 +346,7 @@
}

.@{select-prefix-cls}__tags.is-show-tag {
padding-right: var(--ti-select-tags-padding-right-disabled);
padding-right: 32px;
}
}

Expand All @@ -373,18 +369,14 @@
}

.@{select-prefix-cls}__caret {
fill: var(--ti-select-input-caret-icon-color);
font-size: var(--ti-select-input-caret-font-size);
fill: var(--tv-Select-icon-color);
font-size: var(--tv-Select-icon-size);
transition: transform 0.3s;
transform: rotateZ(180deg);
cursor: pointer;

&.@{select-prefix-cls}__close {
margin-right: var(--ti-select-input-icon-close-margin-right);
}

&:hover {
fill: var(--ti-select-input-caret-hover-icon-color);
fill: var(--tv-Select-icon-color-hover);
}

&.is-reverse {
Expand All @@ -394,15 +386,14 @@

.@{select-prefix-cls}__limit-txt,
.@{select-prefix-cls}__proportion-txt {
font-size: var(--ti-select-suffix-font-size);
line-height: 1;
margin: 0 var(--ti-select-suffix-icon-margin-right);
color: var(--ti-select-suffix-text-color);
font-size: var(--tv-Select-font-size);
margin: var(--tv-Select-suffix-text-margin);
color: var(--tv-Select-suffix-text-color);
}

.@{select-prefix-cls}__copy {
cursor: pointer;
margin-right: var(--ti-select-suffix-icon-margin-right);
margin-right: var(--tv-Select-suffix-icon-margin-right);
}

.@{input-prefix-cls}__suffix {
Expand All @@ -417,38 +408,12 @@

&.is-disabled {
.@{select-prefix-cls}__caret {
fill: var(--ti-select-input-disabled-caret-text-color);
fill: var(--tv-Select-icon-color-disabled);
cursor: not-allowed;
}

.@{input-prefix-cls}__inner {
cursor: not-allowed;

&:hover {
border-color: var(--ti-select-input-disabled-hover-border-color);
}
}
}

&.is-focus .@{input-prefix-cls}__inner {
border-color: var(--ti-select-inner-border-color-active);
}
}

&__underline {
.@{input-prefix-cls},
.@{input-prefix-cls}.is-disabled {
.@{input-prefix-cls}__inner {
border-radius: 0;
border-top-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
padding-left: 0px;
background-color: var(--ti-input-bg-color);
}

&__suffix {
right: 0px;
}
}
}
Expand Down
Loading
Loading