Skip to content
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

refactor(theme): [scroll-text] refactor scroll-text、scrollbar、tall-st… #2292

Merged
merged 1 commit into from
Oct 18, 2024
+62 −68
Merged

refactor(theme): [scroll-text] refactor scroll-text、scrollbar、tall-st… #2292

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
34 changes: 12 additions & 22 deletions packages/theme/src/scroll-text/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,14 @@

.@{scroll-text-prefix-cls} {
&__wrapper {
.component-css-vars-scroll-text();
.inject-ScrollText-vars();
}

width: 300px;
height: var(--ti-scroll-text-height);
line-height: var(--ti-scroll-text-height);
background: var(--ti-scroll-text-bg-color);
margin: var(--ti-scroll-text-margin-vertical) var(--ti-scroll-text-margin-horizontal);
height: var(--tv-ScrollText-height);
line-height: var(--tv-ScrollText-height);
background: var(--tv-ScrollText-bg-color);
margin: 0 auto;
overflow: hidden;

& &__content {
Expand All @@ -50,16 +50,6 @@
animation-timing-function: linear;
justify-content: center;

// 兼容ie10-ie11
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
display: inline-block;
}

// 兼容edge
@supports (-ms-ime-align: auto) {
display: inline-block;
}

&.left {
animation-name: moveLeft;
}
Expand Down Expand Up @@ -106,12 +96,12 @@
width: fit-content;
min-width: 100%;

>div.left {
> div.left {
min-width: 100%;
animation-name: moveLeftWidthAdapt;
}

>div.right {
> div.right {
min-width: 100%;
animation-name: moveRightWidthAdapt;
}
Expand Down Expand Up @@ -163,25 +153,25 @@
0% {
transform: translateX(100%);
}

50% {
transform: translateX(0);
}

100% {
transform: translateX(-100%);
}
}

@keyframes moveRightWidthAdapt {
0% {
transform: translateX(-100%);
}

50% {
transform: translateX(0);
}

100% {
transform: translateX(100%);
}
Expand Down
8 changes: 3 additions & 5 deletions packages/theme/src/scroll-text/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,7 @@
*
*/

.component-css-vars-scroll-text() {
--ti-scroll-text-height: var(--ti-common-size-height-small, 24px);
--ti-scroll-text-bg-color: #f1f1f1;
--ti-scroll-text-margin-vertical: 0;
--ti-scroll-text-margin-horizontal: auto;
.inject-ScrollText-vars() {
--tv-ScrollText-height: var(--tv-size-height-xs);
--tv-ScrollText-bg-color: var(--tv-color-bg);
}
12 changes: 6 additions & 6 deletions packages/theme/src/scrollbar/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
@scrollbar-prefix-cls: ~'@{css-prefix}scrollbar';

.@{scrollbar-prefix-cls} {
.component-css-vars-scrollbar();
.inject-Scrollbar-vars();

overflow: hidden;
position: relative;
Expand Down Expand Up @@ -45,12 +45,12 @@
width: 0;
height: 0;
cursor: pointer;
border-radius: var(--ti-scrollbar-thumb-border-radius);
background-color: var(--ti-scrollbar-thumb-bg-color);
border-radius: var(--tv-Scrollbar-thumb-border-radius);
background-color: var(--tv-Scrollbar-thumb-bg-color);
transition: 0.3s background-color;

&:hover {
background-color: var(--ti-scrollbar-thumb-hover-bg-color);
background-color: var(--tv-Scrollbar-thumb-hover-bg-color);
}
}

Expand All @@ -63,9 +63,9 @@
transition: opacity 120ms ease-out;

&.is-vertical {
width: var(--ti-scrollbar-vertical-width);
width: var(--tv-Scrollbar-vertical-width);
top: 2px;
right: var(--ti-scrollbar-vertical-right);
right: var(--tv-Scrollbar-vertical-right);

& > div {
width: 100%;
Expand Down
12 changes: 6 additions & 6 deletions packages/theme/src/scrollbar/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@
*
*/

.component-css-vars-scrollbar() {
.inject-Scrollbar-vars() {
// 垂直滚动条距离右侧距离
--ti-scrollbar-vertical-right: 4px;
--tv-Scrollbar-vertical-right: var(--tv-space-sm);
// 垂直滚动条宽度
--ti-scrollbar-vertical-width: 8px;
--tv-Scrollbar-vertical-width: var(--tv-space-md);
// 垂直滚动条滑块背景色
--ti-scrollbar-thumb-bg-color: var(--ti-common-scrollbar-thumb-bg-color, #dbdbdb);
--tv-Scrollbar-thumb-bg-color: var(--tv-color-bg-scrollbar-thumb);
// 垂直滚动条滑块悬浮时背景色
--ti-scrollbar-thumb-hover-bg-color: var(--ti-common-scrollbar-thumb-bg-color, #dbdbdb);
--tv-Scrollbar-thumb-hover-bg-color: var(--tv-color-bg-scrollbar-thumb-hover);
// 垂直滚动条滑块圆角
--ti-scrollbar-thumb-border-radius: var(--ti-common-scrollbar-thumb-border-radius, 4px);
--tv-Scrollbar-thumb-border-radius: var(--tv-border-radius-scrollbar-thumb);
}
16 changes: 8 additions & 8 deletions packages/theme/src/tall-storage/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,15 @@
@storage-item-prefix-cls: ~'@{css-prefix}storage-item';

.@{tall-storage-prefix-cls} {
.component-css-vars-tall-storage();
.inject-TallStorage-vars();
Copy link

Choose a reason for hiding this comment

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

💡 Codebase verification

Inconsistent variable injection methods found in tall-storage component.

Both .component-css-vars-tall-storage() and .inject-TallStorage-vars() are present in packages/theme/src/tall-storage/index.less. Please remove the old method to ensure consistency with the refactored variable injection approach.

🔗 Analysis chain

Approve the updated variable injection method.

The change from .component-css-vars-tall-storage() to .inject-TallStorage-vars() is consistent with the refactoring objectives. This new naming convention appears to be more specific and aligned with the component name, which should improve code clarity.

To ensure consistency across the codebase, please run the following script:

This will help identify any remaining instances of the old method or inconsistencies in the new naming convention.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the usage of the new injection method across components

# Test: Search for both old and new injection method patterns
echo "Old injection method occurrences:"
rg --type less 'component-css-vars-\w+'

echo "New injection method occurrences:"
rg --type less 'inject-\w+-vars'

Length of output: 26484


position: relative;

.@{storage-list-style-prefix-cls} {
position: absolute;
background-color: var(--ti-tall-storage-bg-color);
box-shadow: var(--ti-common-shadow-2-down);
border-radius: var(--ti-tall-storage-border-radius);
background-color: var(--tv-TallStorage-bg-color);
box-shadow: var(--tv-TallStorage-box-shadow);
Comment on lines +28 to +29
Copy link

Choose a reason for hiding this comment

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

💡 Codebase verification

Old CSS shadow variables are still in use.

The old common shadow variable --ti-common-shadow-2-down is still used in the following files:

  • packages/theme/src/rich-text-editor/vars.less
  • packages/theme/src/card-template/index.less
  • packages/theme/src/base/old-basic-vars.less
  • packages/theme/src/base/basic-var.less

Please consider updating these usages to the new --tv-TallStorage-box-shadow variable or determine if maintaining the common shadow variable is necessary for consistent styling across components.

🔗 Analysis chain

Approve the updated CSS variable names with a suggestion.

The changes from --ti- to --tv- prefix and the more specific naming for the TallStorage component are improvements in consistency and clarity.

However, the change from --ti-common-shadow-2-down to --tv-TallStorage-box-shadow might impact other components. Please run the following script to check for any remaining usage of the old common shadow variable:

If there are occurrences in other components, consider whether a global shadow variable should be maintained or if component-specific shadows are preferred across the codebase.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for usage of the old common shadow variable

echo "Occurrences of the old common shadow variable:"
rg --type less '--ti-common-shadow-2-down'

Length of output: 1227

Script:

#!/bin/bash
# Description: Check for usage of the old common shadow variable across the entire codebase

echo "Occurrences of the old common shadow variable '--ti-common-shadow-2-down':"
rg --type less '--ti-common-shadow-2-down'

echo "Occurrences of the new TallStorage box shadow variable '--tv-TallStorage-box-shadow':"
rg --type less '--tv-TallStorage-box-shadow'

Length of output: 1297

Script:

#!/bin/bash
# Description: Check for usage of the old and new shadow variables across the entire codebase

echo "Occurrences of the old common shadow variable '--ti-common-shadow-2-down':"
rg --type less -e '--ti-common-shadow-2-down'

echo "Occurrences of the new TallStorage box shadow variable '--tv-TallStorage-box-shadow':"
rg --type less -e '--tv-TallStorage-box-shadow'

Length of output: 1096

border-radius: var(--tv-TallStorage-border-radius);
width: 100%;
box-sizing: border-box;
z-index: 10;
Expand All @@ -36,18 +36,18 @@
padding: 0;
list-style: none;
overflow-y: auto;
max-height: calc(var(--ti-tall-storage-item-height) * 5);
max-height: calc(var(--tv-TallStorage-item-height) * 5);

.@{storage-item-prefix-cls} {
height: var(--ti-tall-storage-item-height);
line-height: var(--ti-tall-storage-item-height);
height: var(--tv-TallStorage-item-height);
line-height: var(--tv-TallStorage-item-height);
padding: 0 8px;
white-space: nowrap;

&:hover,
&.item-hover {
cursor: pointer;
background-color: var(--ti-tall-storage-item-bg-color);
background-color: var(--tv-TallStorage-item-bg-color);
}
}
}
Expand Down
16 changes: 11 additions & 5 deletions packages/theme/src/tall-storage/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,15 @@
*
*/

.component-css-vars-tall-storage() {
--ti-tall-storage-bg-color: var(--ti-common-color-light, #ffffff);
--ti-tall-storage-border-radius: var(--ti-common-border-radius-normal, 6px);
--ti-tall-storage-item-height: var(--ti-common-size-height-normal, 32px);
--ti-tall-storage-item-bg-color: var(--ti-common-color-hover-background, #f5f5f5);
.inject-TallStorage-vars() {
// 背景颜色
--tv-TallStorage-bg-color: var(--tv-color-bg-secondary);
// 圆角
--tv-TallStorage-border-radius: var(--tv-border-radius-md);
// 选项高度
--tv-TallStorage-item-height: var(--tv-size-height-md);
// 选项背景颜色
--tv-TallStorage-item-bg-color: var(--tv-color-bg);
// 阴影
--tv-TallStorage-box-shadow: var(--tv-shadow-2-down);
}
16 changes: 8 additions & 8 deletions packages/theme/src/top-box/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,15 @@
@top-box-prefix-cls: ~'@{css-prefix}top-box';

.@{top-box-prefix-cls} {
.component-css-vars-top-box();
.inject-TopBox-vars();

position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 400px;
max-height: 600px;
background: var(--ti-top-box-bg-color);
background: var(--tv-TopBox-bg-color);
padding: 24px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
transition:
Expand All @@ -35,7 +35,7 @@
top 0.4s;

& &__icon {
font-size: var(--ti-top-box-icon-font-size, 24px);
font-size: var(--tv-TopBox-icon-font-size);
vertical-align: middle;
}

Expand Down Expand Up @@ -74,23 +74,23 @@
}

&--success &__icon {
fill: var(--ti-top-box-success-icon-color);
fill: var(--tv-TopBox-success-icon-color);
}

&--error &__icon {
fill: var(--ti-top-box-error-icon-color);
fill: var(--tv-TopBox-error-icon-color);
}

&--warning &__icon {
fill: var(--ti-top-box-warning-icon-color);
fill: var(--tv-TopBox-warning-icon-color);
}

&--help &__icon {
fill: var(--ti-top-box-help-icon-color);
fill: var(--tv-TopBox-help-icon-color);
}

&--info &__icon {
fill: var(--ti-top-box-info-icon-color);
fill: var(--tv-TopBox-info-icon-color);
}

&-fade-enter,
Expand Down
16 changes: 8 additions & 8 deletions packages/theme/src/top-box/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@
*
*/

.component-css-vars-top-box() {
--ti-top-box-bg-color: var(--ti-common-color-light, #ffffff);
--ti-top-box-icon-font-size: var(--ti-common-font-size-5, 24px);
--ti-top-box-success-icon-color: var(--ti-common-color-success-normal, #5cb300);
--ti-top-box-error-icon-color: var(--ti-base-color-bg-8, #c7000b);
--ti-top-box-warning-icon-color: var(--ti-common-color-warning-normal, #ff8800);
--ti-top-box-help-icon-color: var(--ti-base-color-brand-6, #191919);
--ti-top-box-info-icon-color: var(--ti-common-color-info-normal, #191919);
.inject-TopBox-vars() {
--tv-TopBox-bg-color: var(--tv-color-bg-secondary);
--tv-TopBox-icon-font-size: 24px;
--tv-TopBox-success-icon-color: var(--tv-color-success-icon);
--tv-TopBox-error-icon-color: var(--tv-color-error-icon);
--tv-TopBox-warning-icon-color: var(--tv-color-warn-icon);
--tv-TopBox-help-icon-color: var(--tv-color-icon-control);
--tv-TopBox-info-icon-color: var(--tv-color-info-icon);
}
Loading