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): [tooltip] refactor tooltip theme vars #2257

Merged
merged 2 commits into from
Oct 14, 2024
Merged

refactor(theme): [tooltip] refactor tooltip theme vars #2257

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d675d9a
refactor(theme): [tooltip] refactor tooltip theme vars
zzcr Oct 14, 2024
fc2e399
refactor(theme): [tooltip] refactor tooltip theme vars
zzcr Oct 14, 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
66 changes: 34 additions & 32 deletions packages/theme/src/tooltip/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,39 +17,40 @@
@tooltip-prefix-cls: ~'@{css-prefix}tooltip';

.@{tooltip-prefix-cls} {
.component-css-vars-tooltip();
.inject-Tooltip-vars();

font-family: var(--ti-tooltip-popper-font-family);
white-space: pre-wrap;

&:focus:hover,
&:focus:not(.focusing) {
outline-width: 0;
}

&__content-wrapper {
max-height: var(--ti-tooltip-content-max-height);
max-height: var(--tv-Tooltip-content-max-height);
overflow: auto;
}

&&__popper {
position: absolute;
left: -9999px;
border-radius: var(--ti-tooltip-popper-border-radius);
padding: var(--ti-tooltip-padding-vertical) var(--ti-tooltip-padding-horizontal);
font-size: var(--ti-tooltip-popper-font-size);
line-height: var(--ti-tooltip-popper-font-line-height);
border-radius: var(--tv-Tooltip-popper-border-radius);
padding: var(--tv-Tooltip-padding-y) var(--tv-Tooltip-padding-x);
font-size: var(--tv-Tooltip-popper-font-size);
line-height: var(--tv-Tooltip-popper-font-line-height);
min-width: 10px;
max-width: 450px;
z-index: 2000;
word-wrap: break-word;
box-shadow: var(--ti-tooltip-box-shadow);
box-shadow: var(--tv-Tooltip-box-shadow);

.popper__arrow {
position: absolute;
display: block;
// 原来是用border来模拟三角形的，现在是通过div模拟，所以将border-width赋值给div的width.
width: var(--ti-tooltip-popper-border-width);
height: var(--ti-tooltip-popper-border-height);
background-color: var(--ti-tooltip-popper-border-color);
width: 12px;
height: 20px;
background-color: var(--tv-Tooltip-popper-border-color);
Comment on lines +51 to +53
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 CSS variables for arrow dimensions

The arrow dimensions are hardcoded:

  • width: 12px;
  • height: 20px;

To allow for more flexibility and theming options, consider defining these dimensions using CSS variables. This approach enhances customization and consistency across different themes.

Apply this change to define arrow dimensions using variables:

 .popper__arrow {
   position: absolute;
   display: block;
-  width: 12px;
-  height: 20px;
+  width: var(--tv-Tooltip-arrow-width, 12px);
+  height: var(--tv-Tooltip-arrow-height, 20px);
   background-color: var(--tv-Tooltip-popper-border-color);
   transform: rotateZ(45deg);
   border-radius: 2px;
 }
📝 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
width: 12px;
height: 20px;
background-color: var(--tv-Tooltip-popper-border-color);
width: var(--tv-Tooltip-arrow-width, 12px);
height: var(--tv-Tooltip-arrow-height, 20px);
background-color: var(--tv-Tooltip-popper-border-color);

transform: rotateZ(45deg);
border-radius: 2px;
}
Expand Down Expand Up @@ -85,61 +86,62 @@
right: -3px;
}
}

&.is-normal {
.tooltip-type(
var(--ti-tooltip-popper-normal-text-color),
var(--ti-tooltip-popper-normal-bg-color),
var(--ti-tooltip-popper-normal-border-color)
var(--tv-Tooltip-popper-normal-text-color),
var(--tv-Tooltip-popper-normal-bg-color),
var(--tv-Tooltip-popper-normal-border-color)
);
}

&.is-info {
.tooltip-type(
var(--ti-tooltip-popper-info-text-color),
var(--ti-tooltip-popper-info-bg-color),
var(--ti-tooltip-popper-info-border-color)
var(--tv-Tooltip-popper-info-text-color),
var(--tv-Tooltip-popper-info-bg-color),
var(--tv-Tooltip-popper-info-border-color)
);
}

&.is-error {
.tooltip-type(
var(--ti-tooltip-popper-error-text-color),
var(--ti-tooltip-popper-error-bg-color),
var(--ti-tooltip-popper-error-border-color)
var(--tv-Tooltip-popper-error-text-color),
var(--tv-Tooltip-popper-error-bg-color),
var(--tv-Tooltip-popper-error-border-color)
);

.tooltip-validate-icon {
fill: var(--ti-tooltip-validate-icon-color);
fill: var(--tv-Tooltip-validate-icon-color);
margin-right: 8px;
}
}

&.is-warning {
.tooltip-type(
var(--ti-tooltip-popper-warning-text-color),
var(--ti-tooltip-popper-warning-bg-color),
var(--ti-tooltip-popper-warning-border-color)
var(--tv-Tooltip-popper-warning-text-color),
var(--tv-Tooltip-popper-warning-bg-color),
var(--tv-Tooltip-popper-warning-border-color)
);
}

&.is-success {
.tooltip-type(
var(--ti-tooltip-popper-success-text-color),
var(--ti-tooltip-popper-success-bg-color),
var(--ti-tooltip-popper-success-border-color)
var(--tv-Tooltip-popper-success-text-color),
var(--tv-Tooltip-popper-success-bg-color),
var(--tv-Tooltip-popper-success-border-color)
);
}

&.is-dark {
background: var(--ti-tooltip-popper-dark-bg-color);
color: var(--ti-tooltip-popper-dark-text-color);
background: var(--tv-Tooltip-popper-dark-bg-color);
color: var(--tv-Tooltip-popper-dark-text-color);
}

&.is-light {
.tooltip-type(
var(--ti-tooltip-popper-light-text-color),
var(--ti-tooltip-popper-light-bg-color),
var(--ti-tooltip-popper-light-border-color)
var(--tv-Tooltip-popper-light-text-color),
var(--tv-Tooltip-popper-light-bg-color),
var(--tv-Tooltip-popper-light-border-color)
);
}

Expand Down
81 changes: 32 additions & 49 deletions packages/theme/src/tooltip/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,88 +10,71 @@
*
*/

.component-css-vars-tooltip() {
// 弹框箭头的宽度,(hide)
--ti-tooltip-popper-border-width: 12px;
// 弹框箭头的高度,(hide)
--ti-tooltip-popper-border-height: 20px;
// 弹框箭头的圆角(hide)
--ti-tooltip-popper-border-radius: 2px;
.inject-Tooltip-vars() {
// 弹框三角默认边框色
--ti-tooltip-popper-border-color: #191919;
// 弹框字体行高(hide)
--ti-tooltip-popper-font-line-height: var(--ti-common-line-height-number, 1.5);
// 弹框字体(hide)
--ti-tooltip-popper-font-family: var(
--ti-common-font-family,
'Helvetica',
'Arial',
'PingFangSC-Regular',
'Hiragino Sans GB',
'Microsoft YaHei',
'微软雅黑',
'Microsoft JhengHei'
);
--tv-Tooltip-popper-border-color: var(--tv-color-border-active);
// 弹框字体行高
--tv-Tooltip-popper-font-line-height: var(--tv-line-height-number);
// 悬浮弹出框圆角
--ti-tooltip-popper-border-radius: 8px;
--tv-Tooltip-popper-border-radius: var(--tv-border-radius-lg);
// 悬浮弹出框字号
--ti-tooltip-popper-font-size: var(--ti-common-font-size-base, 14px);
--tv-Tooltip-popper-font-size: var(--tv-font-size-md);

// 正常背景色 (hide)
--ti-tooltip-popper-normal-bg-color: var(--ti-common-color-bg-dark-deep, #fff);
// 正常背景色
--tv-Tooltip-popper-normal-bg-color: var(--tv-color-bg-secondary);
// 文字提示正常文本色(hide)
--ti-tooltip-popper-normal-text-color: #191919;
--tv-Tooltip-popper-normal-text-color: var(--tv-color-text);
// 弹框正常边框色 (hide)
--ti-tooltip-popper-normal-border-color: var(--ti-common-color-bg-dark-deep, #fff);
--tv-Tooltip-popper-normal-border-color: var(--tv-Tooltip-popper-normal-bg-color);

// info类型弹框背景色
--ti-tooltip-popper-info-bg-color: #1476ff;
--tv-Tooltip-popper-info-bg-color: var(--tv-color-info-bg);
// info类型弹框文本色
--ti-tooltip-popper-info-text-color: var(--ti-common-color-light, #ffffff);
--tv-Tooltip-popper-info-text-color: var(--tv-color-info-text-white);
// info类型弹框三角边框色
--ti-tooltip-popper-info-border-color: #1476ff;
--tv-Tooltip-popper-info-border-color: var(--tv-color-info-border);

// error类型弹框背景色
--ti-tooltip-popper-error-bg-color: var(--ti-common-color-danger-normal, #f23030);
--tv-Tooltip-popper-error-bg-color: var(--tv-color-error-bg);
// error类型弹框文本色
--ti-tooltip-popper-error-text-color: var(--ti-common-color-light, #ffffff);
--tv-Tooltip-popper-error-text-color: var(--tv-color-error-text-white);
// error类型弹框三角边框色
--ti-tooltip-popper-error-border-color: var(--ti-common-color-danger-normal, #f23030);
--tv-Tooltip-popper-error-border-color: var(--tv-color-error-border);

// warning类型弹框背景色
--ti-tooltip-popper-warning-bg-color: var(--ti-common-color-warning-normal, #ff8800);
--tv-Tooltip-popper-warning-bg-color: var(--tv-color-warn-bg);
// warning类型弹框文本色
--ti-tooltip-popper-warning-text-color: var(--ti-common-color-light, #ffffff);
--tv-Tooltip-popper-warning-text-color: var(--tv-color-warn-text-white);
// warning类型弹框三角边框色
--ti-tooltip-popper-warning-border-color: var(--ti-common-color-warning-normal, #ff8800);
--tv-Tooltip-popper-warning-border-color: var(--tv-color-warn-border);

// success类型弹框背景色
--ti-tooltip-popper-success-bg-color: var(--ti-common-color-success-normal, #5cb300);
--tv-Tooltip-popper-success-bg-color: var(--tv-color-success-bg);
// success类型弹框文本色
--ti-tooltip-popper-success-text-color: var(--ti-common-color-light, #ffffff);
--tv-Tooltip-popper-success-text-color: var(--tv-color-success-text-white);
// success类型弹框三角边框色
--ti-tooltip-popper-success-border-color: var(--ti-common-color-success-normal, #5cb300);
--tv-Tooltip-popper-success-border-color: var(--tv-color-success-border);

// dark主题弹框背景色
--ti-tooltip-popper-dark-bg-color: #191919;
--tv-Tooltip-popper-dark-bg-color: var(--tv-color-bg-primary);
// dark主题弹框文本色
--ti-tooltip-popper-dark-text-color: #fff;
--tv-Tooltip-popper-dark-text-color: var(--tv-color-text-white);
// light主题弹框背景色
--ti-tooltip-popper-light-bg-color: var(--ti-common-color-light, #ffffff);
--tv-Tooltip-popper-light-bg-color: var(--tv-color-bg-secondary);

// light主题|禁用弹框文本色
--ti-tooltip-popper-light-text-color: var(--ti-common-color-text-primary, #191919);
--tv-Tooltip-popper-light-text-color: var(--tv-color-text);
// light主题|禁用时弹框边框色
--ti-tooltip-popper-light-border-color: #fff;
--tv-Tooltip-popper-light-border-color: var(--tv-Tooltip-popper-light-bg-color);

// 弹框阴影
--ti-tooltip-box-shadow: 0px 5px 9px 0px rgba(51, 56, 84, 0.25);
--tv-Tooltip-box-shadow: var(--tv-shadow-2-down);
// 弹框垂直内边距
--ti-tooltip-padding-vertical: 12px;
--tv-Tooltip-padding-y: 12px;
// 弹框水平内边距
--ti-tooltip-padding-horizontal: 16px;
--tv-Tooltip-padding-x: 16px;
// 文字提示错误图标色
--ti-tooltip-validate-icon-color: var(--ti-common-color-error, #f23030);
--tv-Tooltip-validate-icon-color: var(--tv-color-error-tex);
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue

Fix typo in variable name --tv-color-error-tex

There appears to be a typo in the variable name --tv-color-error-tex; it should likely be --tv-color-error-text to match the naming convention of other color variables.

Apply this diff to correct the typo:

-  --tv-Tooltip-validate-icon-color: var(--tv-color-error-tex);
+  --tv-Tooltip-validate-icon-color: var(--tv-color-error-text);
📝 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-Tooltip-validate-icon-color: var(--tv-color-error-tex);
--tv-Tooltip-validate-icon-color: var(--tv-color-error-text);

// 文本内容容器最大高度
--ti-tooltip-content-max-height: 50vh;
--tv-Tooltip-content-max-height: 50vh;
}
Loading