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(dialog-box): [dialog-box] refactor dialog-box theme vars #2202

Merged
merged 1 commit into from
Sep 29, 2024
Merged

refactor(dialog-box): [dialog-box] refactor dialog-box theme vars #2202

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
94 changes: 40 additions & 54 deletions packages/theme/src/dialog-box/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,14 @@

.@{dialog-box-prefix-cls} {
position: absolute;
background: var(--ti-dialog-box-bg-color);
background: var(--tv-DialogBox-bg-color);
border: 1px solid transparent;
border-radius: var(--ti-dialog-box-border-radius);
box-shadow: var(--ti-dialog-box-shadow);
border-radius: var(--tv-DialogBox-border-radius);
box-shadow: var(--tv-DialogBox-shadow);
overflow: hidden;

&__wrapper {
.component-css-vars-dialog-box();
.inject-DialogBox-vars();

position: fixed;
top: 0;
Expand All @@ -34,8 +34,8 @@
left: 0;
overflow: auto;
margin: 0;
display: var(--ti-dialog-box-wrapper-display);
align-items: var(--ti-dialog-box-wrapper-align-items);
display: block;
align-items: normal;
}

&.is-fullscreen {
Expand All @@ -60,17 +60,15 @@
}

& &__header {
padding: var(--ti-dialog-box-head-padding-top) var(--ti-dialog-box-head-padding-horizontal)
var(--ti-dialog-box-head-padding-bottom);
background: var(--ti-dialog-box-bg-color);
font-weight: var(--ti-dialog-box-head-title-font-weight);
padding: 32px 32px 24px;
background: var(--tv-DialogBox-bg-color);
font-weight: var(--tv-DialogBox-head-title-font-weight);
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
font-size: var(--ti-dialog-box-head-title-font-size);
color: var(--ti-dialog-box-head-title-text-color);
border-bottom: 1px solid var(--ti-dialog-box-head-border-bottom-color);
font-size: var(--tv-DialogBox-head-title-font-size);
color: var(--tv-DialogBox-head-title-text-color);

.@{dialog-box-prefix-cls}__title {
flex: 1;
Expand All @@ -85,15 +83,10 @@
background: none;
padding: 0;
line-height: 1;
top: calc(0px - var(--ti-dialog-box-btn-tools-position-top));
right: calc(0px - var(--ti-dialog-box-btn-tools-position-right));
top: -12px;
right: -12px;
cursor: pointer;

&:hover {
background-color: var(--ti-dialog-box-btn-background-color-hover);
border-radius: var(--ti-dialog-box-btn-border-radius);
}

& + .@{dialog-box-prefix-cls}__headerbtn {
margin-left: 8px;
}
Expand All @@ -103,30 +96,30 @@
}

.@{dialog-box-prefix-cls}__close {
fill: var(--ti-dialog-box-close-icon-color);
font-size: var(--ti-dialog-box-close-icon-size);
fill: var(--tv-DialogBox-close-icon-color);
font-size: var(--tv-DialogBox-close-icon-size);

&:hover {
fill: var(--ti-dialog-box-close-icon-color-hover);
fill: var(--tv-DialogBox-close-icon-color-hover);
}
}

.@{dialog-box-prefix-cls}__resize {
fill: var(--ti-dialog-box-resize-icon-color);
font-size: var(--ti-dialog-box-resize-icon-size);
fill: var(--tv-DialogBox-resize-icon-color);
font-size: var(--tv-DialogBox-resize-icon-size);

&:hover {
fill: var(--ti-dialog-box-resize-icon-color-hover);
fill: var(--tv-DialogBox-resize-icon-color-hover);
}
}
}
}

& &__body {
text-align: left;
padding: var(--ti-dialog-box-body-padding-vertical) var(--ti-dialog-box-body-padding-horizontal);
color: var(--ti-dialog-box-body-text-color);
font-size: var(--ti-dialog-box-body-font-size);
padding: 0 32px;
color: var(--tv-DialogBox-body-text-color);
font-size: var(--tv-DialogBox-body-font-size);

.@{css-prefix}upload {
overflow: hidden;
Expand All @@ -143,13 +136,12 @@
}

& &__footer {
padding: var(--ti-dialog-box-footer-padding-top) var(--ti-dialog-box-footer-padding-horizontal)
var(--ti-dialog-box-footer-margin-bottom);
text-align: var(--ti-dialog-box-footer-align);
padding: 24px 32px 32px;
text-align: right;
box-sizing: border-box;

.@{css-prefix}button {
min-width: var(--ti-dialog-box-footer-btn-min-width);
min-width: var(--tv-DialogBox-footer-btn-min-width);
}

.@{css-prefix}toolbar {
Expand All @@ -161,46 +153,40 @@

// 抽屉
&.is-right-slide {
border-radius: var(--ti-dialog-box-drawer-radius);
min-width: var(--ti-dialog-box-drawer-min-width);
max-width: var(--ti-dialog-box-drawer-max-width);
border-radius: 0;
min-width: var(--tv-DialogBox-drawer-min-width);
max-width: var(--tv-DialogBox-drawer-max-width);

display: flex;
flex-direction: column;

.@{dialog-box-prefix-cls}__header,
.@{dialog-box-prefix-cls}__footer {
width: calc(100% - var(--ti-dialog-box-drawer-padding-left) - var(--ti-dialog-box-drawer-padding-right));
margin-left: var(--ti-dialog-box-drawer-padding-left);
margin-right: var(--ti-dialog-box-drawer-padding-right);
width: calc(100% - 64px);
margin-left: 32px;
margin-right: 32px;
}

.@{dialog-box-prefix-cls}__header {
padding: var(--ti-dialog-box-drawer-header-padding-top) var(--ti-dialog-box-drawer-header-padding-right)
var(--ti-dialog-box-drawer-header-padding-bottom) var(--ti-dialog-box-drawer-header-padding-left);
border-bottom: 1px solid var(--ti-dialog-box-head-divider-border-color);
padding: 32px 0 20px;
border-bottom: 1px solid var(--tv-DialogBox-head-divider-border-color);

&btn {
right: calc(
var(--ti-dialog-box-btn-position-right) - var(--ti-dialog-box-drawer-padding-right) -
(var(--ti-dialog-box-btn-width) - var(--ti-dialog-box-close-icon-size)) / 2
);
right: -16px;
}
}

.@{dialog-box-prefix-cls}__body {
flex: 1;
overflow: auto;
color: var(--ti-dialog-box-drawer-body-color);
border-bottom: 1px solid var(--ti-dialog-box-drawer-divider-border-color);
padding: var(--ti-dialog-box-drawer-body-padding-top) var(--ti-dialog-box-drawer-body-padding-right)
var(--ti-dialog-box-drawer-body-padding-bottom) var(--ti-dialog-box-drawer-body-padding-left);
}
color: var(--tv-DialogBox-drawer-body-color);
border-bottom: 1px solid var(--tv-DialogBox-drawer-divider-border-color);
padding: 0 32px;
}

.@{dialog-box-prefix-cls}__footer {
padding: var(--ti-dialog-box-drawer-footer-padding-top) var(--ti-dialog-box-drawer-footer-padding-right)
var(--ti-dialog-box-drawer-footer-padding-bottom) var(--ti-dialog-box-drawer-footer-padding-left);
text-align: var(--ti-dialog-box-drawer-footer-text-align);
padding: 24px 0 32px;
text-align: right;
}
}
}
Expand Down
130 changes: 20 additions & 110 deletions packages/theme/src/dialog-box/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,136 +10,46 @@
*
*/

.component-css-vars-dialog-box() {
.inject-DialogBox-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

Mixin Naming Inconsistency Detected

The new mixin .inject-DialogBox-vars() does not align with the existing component-css-vars-xxx naming convention used throughout the codebase. Please update the mixin name to follow the established pattern for consistency and maintainability.

🔗 Analysis chain

Ensure mixin naming aligns with project conventions

The mixin .inject-DialogBox-vars() replaces .component-css-vars-dialog-box(). Please verify that the new naming convention follows the project's guidelines for mixin naming. Consistent naming helps maintain readability and maintainability.

You can run the following script to check for mixin naming patterns in the codebase:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: List all mixin declarations in LESS files to verify naming conventions.

# Expectation: Mixin names should follow a consistent pattern.

rg --type less '^\.([a-zA-Z0-9_-]+)\(' -o --no-filename -r '$1' | sort | uniq

Length of output: 6372

// 对话框背景色
--ti-dialog-box-bg-color: var(--ti-common-color-bg-white-normal, #ffffff);
--tv-DialogBox-bg-color: var(--tv-color-bg-secondary);
// 对话框圆角
--ti-dialog-box-border-radius: var(--ti-common-border-radius-4, 8px);
--tv-DialogBox-border-radius: var(--tv-border-radius-lg);
// 对话框阴影
--ti-dialog-box-shadow: var(--ti-common-shadow-4-down, 0 8px 24px 0 rgba(0, 0, 0, 0.16));

// 头部边框色(hide)
--ti-dialog-box-head-border-color: var(--ti-common-color-line-normal, #c2c2c2);
// 头部文本色(hide)
--ti-dialog-box-head-text-color: var(--ti-common-color-text-primary, #191919);
// 头部上内边距
--ti-dialog-box-head-padding-top: var(--ti-common-space-8x, 32px);
// 头部水平内边距
--ti-dialog-box-head-padding-horizontal: var(--ti-common-space-8x, 32px);
// 头部下内边距
--ti-dialog-box-head-padding-bottom: var(--ti-common-space-6x, 24px);
--tv-DialogBox-shadow: var(--tv-shadow-4-down);
// 头部字号
--ti-dialog-box-head-title-font-size: var(--ti-common-font-size-4, 20px);
--tv-DialogBox-head-title-font-size: var(--tv-font-size-heading-md);
// 头部字重
--ti-dialog-box-head-title-font-weight: var(--ti-common-font-weight-7, bold);
--tv-DialogBox-head-title-font-weight: var(--tv-font-weight-bold);
// 头部文本色
--ti-dialog-box-head-title-text-color: var(--ti-common-color-text-primary, #191919);
// 头部底边框颜色
--ti-dialog-box-head-border-bottom-color: var(--ti-common-color-transparent, transparent);
// 头部字体图标色(hide)
--ti-dialog-box-head-font-icon-color: var(--ti-common-color-icon-normal, #808080);
// 头部字体图标悬浮颜色(hide)
--ti-dialog-box-head-font-icon-color-hover: var(--ti-common-color-icon-hover, #191919);
// 头部主体色(hide)
--ti-dialog-box-head-body-text-color: var(--ti-common-color-text-primary, #191919);
// 头部主体字号(hide)
--ti-dialog-box-head-body-font-size: var(--ti-common-font-size-1, 14px);
--tv-DialogBox-head-title-text-color: var(--tv-color-text);

// 关闭按钮宽度
--ti-dialog-box-btn-width: var(--ti-common-size-8x, 32px);
// 关闭按钮高度
--ti-dialog-box-btn-height: var(--ti-dialog-box-btn-width);
// 关闭按钮圆角
--ti-dialog-box-btn-border-radius: var(--ti-common-border-radius-1, 2px);
--tv-DialogBox-btn-height: 32px;
// 关闭按钮图标尺寸
--ti-dialog-box-close-icon-size: var(--ti-common-font-size-5, 24px);
--tv-DialogBox-close-icon-size: 24px;
Comment on lines +28 to +30
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Consider using variables instead of hard-coded pixel values

The properties --tv-DialogBox-btn-height and --tv-DialogBox-close-icon-size use hard-coded pixel values (32px, 24px). For consistency and easier theming, consider using existing size variables or introducing new ones.

Apply the following changes:

- --tv-DialogBox-btn-height: 32px;
+ --tv-DialogBox-btn-height: var(--tv-size-md);

- --tv-DialogBox-close-icon-size: 24px;
+ --tv-DialogBox-close-icon-size: var(--tv-icon-size-lg);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
--tv-DialogBox-btn-height: 32px;
// 关闭按钮图标尺寸
--ti-dialog-box-close-icon-size: var(--ti-common-font-size-5, 24px);
--tv-DialogBox-close-icon-size: 24px;
--tv-DialogBox-btn-height: var(--tv-size-md);
// 关闭按钮图标尺寸
--tv-DialogBox-close-icon-size: var(--tv-icon-size-lg);

// 关闭按钮图标色
--ti-dialog-box-close-icon-color: var(--ti-common-color-icon-normal, #808080);
--tv-DialogBox-close-icon-color: var(--tv-color-icon);
// 关闭按钮悬浮图标色
--ti-dialog-box-close-icon-color-hover: var(--ti-common-color-icon-hover, #191919);
// 关闭按钮悬浮背景色
--ti-dialog-box-btn-background-color-hover: none;
// 关闭按钮与上边框的距离(hide)
--ti-dialog-box-btn-position-top: var(--ti-common-space-5x, 20px);
// 关闭按钮与右边框的距离(hide)
--ti-dialog-box-btn-position-right: var(--ti-common-space-5x, 20px);
--tv-DialogBox-close-icon-color-hover: var(--tv-color-icon-hover);

// 内容字号
--ti-dialog-box-body-font-size: var(--ti-common-font-size-base, 14px);
--tv-DialogBox-body-font-size: var(--tv-font-size-md);
// 内容字体色
--ti-dialog-box-body-text-color: var(--ti-common-color-text-secondary, #595959);
--tv-DialogBox-body-text-color: var(--tv-color-text-secondary);
// 右侧弹窗内容字体色
--ti-dialog-box-drawer-body-color: var(--ti-common-color-text-primary, #191919);
// 内容垂直内边距
--ti-dialog-box-body-padding-vertical: var(--ti-common-space-0, 0px);
// 内容水平内边距
--ti-dialog-box-body-padding-horizontal: var(--ti-common-space-8x, 32px);

// 底部上内边距
--ti-dialog-box-footer-padding-top: var(--ti-common-space-6x, 24px);
// 底部水平内边距
--ti-dialog-box-footer-padding-horizontal: var(--ti-common-space-8x, 32px);
// 底部下内边距
--ti-dialog-box-footer-margin-bottom: var(--ti-common-space-8x, 32px);
--tv-DialogBox-drawer-body-color: var(--tv-color-text);

// 抽屉最小宽度
--ti-dialog-box-drawer-min-width: calc(var(--ti-common-space-10, 10px) * 50);
--tv-DialogBox-drawer-min-width: 500px;
// 抽屉最大宽度
--ti-dialog-box-drawer-max-width: calc(var(--ti-common-space-10, 10px) * 100);
// 抽屉左内边距
--ti-dialog-box-drawer-padding-left: var(--ti-common-space-8x, 32px);
// 抽屉右内边距
--ti-dialog-box-drawer-padding-right: var(--ti-common-space-8x, 32px);
// 抽屉头部上内边距
--ti-dialog-box-drawer-header-padding-top: var(--ti-common-space-8x, 32px);
// 抽屉头部下内边距
--ti-dialog-box-drawer-header-padding-bottom: var(--ti-common-space-5x, 20px);
// 抽屉头部左内边距
--ti-dialog-box-drawer-header-padding-left: var(--ti-common-space-0, 0px);
// 抽屉头部右内边距
--ti-dialog-box-drawer-body-padding-right: var(--ti-common-space-8x, 32px);
// 抽屉内容上内边距
--ti-dialog-box-drawer-body-padding-top: var(--ti-common-space-0, 0px);
// 抽屉内容下内边距
--ti-dialog-box-drawer-body-padding-bottom: var(--ti-common-space-0, 0px);
// 抽屉内容左内边距
--ti-dialog-box-drawer-body-padding-left: var(--ti-common-space-8x, 32px);
// 抽屉内容右内边距
--ti-dialog-box-drawer-header-padding-right: var(--ti-common-space-0, 0px);
// 抽屉底部文本对齐方式
--ti-dialog-box-drawer-footer-text-align: right;
// 抽屉底部上内边距
--ti-dialog-box-drawer-footer-padding-top: var(--ti-common-space-6x, 24px);
// 抽屉底部下内边距
--ti-dialog-box-drawer-footer-padding-bottom: var(--ti-common-space-8x, 32px);
// 抽屉底部左内边距
--ti-dialog-box-drawer-footer-padding-left: var(--ti-common-space-0, 0px);
// 抽屉底部右内边距
--ti-dialog-box-drawer-footer-padding-right: var(--ti-common-space-0, 0px);
// 抽屉底部左外边距
--ti-dialog-box-drawer-footer-margin-left: var(--ti-common-space-8x, 32px);
// 抽屉底部右外边距
--ti-dialog-box-drawer-footer-margin-right: var(--ti-common-space-10x, 40px);
--tv-DialogBox-drawer-max-width: 1000px;
Comment on lines +44 to +46
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Parameterize drawer width values using variables

The properties --tv-DialogBox-drawer-min-width and --tv-DialogBox-drawer-max-width use fixed pixel values (500px, 1000px). To enhance flexibility and maintain consistency, consider defining these values using variables or calculating them based on existing sizing variables.

For example:

- --tv-DialogBox-drawer-min-width: 500px;
+ --tv-DialogBox-drawer-min-width: var(--tv-drawer-min-width);

- --tv-DialogBox-drawer-max-width: 1000px;
+ --tv-DialogBox-drawer-max-width: var(--tv-drawer-max-width);

Ensure to define --tv-drawer-min-width and --tv-drawer-max-width accordingly in your theme variables.

Committable suggestion was skipped due to low confidence.

// 抽屉内容与底部边框颜色
--ti-dialog-box-drawer-divider-border-color: var(--ti-common-color-line-dividing, #f0f0f0);
// 抽屉头部与底部边框颜色
--ti-dialog-box-header-divider-border-color: var(--ti-common-color-transparent, transparent);
// 抽屉边框圆角
--ti-dialog-box-drawer-radius: var(--ti-common-space-0, 0px);
// 弹窗布局模式(hide)
--ti-dialog-box-wrapper-display: block;
// 弹窗垂直布局(hide)
--ti-dialog-box-wrapper-align-items: normal;
// 底部布局显示
--ti-dialog-box-footer-align: right;
--tv-DialogBox-drawer-divider-border-color: var(--tv-color-border-divider);
// 缩放按钮
--ti-dialog-box-resize-icon-color: var(--ti-common-color-icon-normal, #808080);
--tv-DialogBox-resize-icon-color: var(--tv-color-icon);
// 缩放按钮悬浮状态
--ti-dialog-box-resize-icon-color-hover: var(--ti-common-color-icon-normal, #808080);
--tv-DialogBox-resize-icon-color-hover: var(--tv-color-icon-hover);
// 缩放按钮大小
--ti-dialog-box-resize-icon-size: var(--ti-common-font-size-2, 16px);
// 按钮距离顶部距离
--ti-dialog-box-btn-tools-position-top: var(--ti-common-size-3x, 12px);
// 按钮距离右侧距离
--ti-dialog-box-btn-tools-position-right: var(--ti-common-size-3x, 12px);
--tv-DialogBox-resize-icon-size: var(--tv-icon-size);
}
Loading