-
Notifications
You must be signed in to change notification settings - Fork 277
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.
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): [popover] refactor popover theme vars #2259
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -17,25 +17,23 @@ | |
@popper-prefix-cls: ~'@{css-prefix}popper'; | ||
|
||
.@{popover-prefix-cls}.@{popper-prefix-cls} { | ||
.component-css-vars-popover(); | ||
.inject-Popover-vars(); | ||
|
||
position: absolute; | ||
background: var(--ti-popover-bg-color); | ||
color: var(--ti-popover-text-color); | ||
border-radius: var(--ti-popover-border-radius); | ||
border: 1px solid var(--ti-popover-border-color); | ||
padding: var(--ti-popover-padding-vertical) var(--ti-popover-padding-horizontal); | ||
background: var(--tv-Popover-bg-color); | ||
color: var(--tv-Popover-text-color); | ||
border-radius: var(--tv-Popover-border-radius); | ||
border: 1px solid transparent; | ||
padding: var(--tv-Popover-padding-y) var(--tv-Popover-padding-x); | ||
z-index: 2000; | ||
line-height: var(--ti-popover-line-height); | ||
line-height: var(--tv-Popover-line-height); | ||
text-align: justify; | ||
font-size: var(--ti-popover-font-size); | ||
font-family: var(--ti-popover-font-family); | ||
font-weight: var(--ti-popover-font-weight); | ||
box-shadow: var(--ti-popover-box-shadow); | ||
font-size: var(--tv-Popover-font-size); | ||
box-shadow: var(--tv-Popover-box-shadow); | ||
word-break: break-all; | ||
|
||
.popper__arrow, | ||
.popper__arrow::after { | ||
.popper__arrow:after { | ||
position: absolute; | ||
display: block; | ||
width: 0; | ||
|
@@ -46,89 +44,89 @@ | |
|
||
.popper__arrow, | ||
.@{popper-prefix-cls} .popper__arrow { | ||
border-width: var(--ti-popover-arrow-border-width); | ||
border-width: 6px; | ||
-webkit-filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); | ||
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); | ||
} | ||
|
||
.popper__arrow::after { | ||
.popper__arrow:after { | ||
content: ' '; | ||
border-width: var(--ti-popover-arrow-border-width); | ||
border-width: 6px; | ||
} | ||
|
||
&[x-placement^='top'] { | ||
margin-bottom: var(--ti-popover-placement-margin-vertical); | ||
margin-bottom: var(--tv-Popover-placement-margin-y); | ||
|
||
.popper__arrow { | ||
bottom: calc(var(--ti-popover-arrow-height) * -1); | ||
bottom: -8px; | ||
left: 50%; | ||
border-top-color: var(--ti-popover-arrow-border-color); | ||
border-top-color: transparent; | ||
border-bottom-width: 0; | ||
border-top-width: var(--ti-popover-arrow-height); | ||
border-top-width: 8px; | ||
|
||
&::after { | ||
&:after { | ||
bottom: 1px; | ||
margin-left: -6px; | ||
border-top-color: var(--ti-popover-placement-arrow-after-border-color); | ||
border-top-color: var(--tv-Popover-placement-arrow-after-border-color); | ||
border-bottom-width: 0; | ||
} | ||
} | ||
} | ||
|
||
&[x-placement^='bottom'] { | ||
margin-top: var(--ti-popover-placement-margin-vertical); | ||
margin-top: var(--tv-Popover-placement-margin-y); | ||
|
||
.popper__arrow { | ||
top: calc(var(--ti-popover-arrow-height) * -1); | ||
top: -8px; | ||
left: 50%; | ||
border-top-width: 0; | ||
border-bottom-color: var(--ti-popover-arrow-border-color); | ||
border-bottom-width: var(--ti-popover-arrow-height); | ||
border-bottom-color: transparent; | ||
border-bottom-width: 8px; | ||
|
||
&::after { | ||
&:after { | ||
top: 1px; | ||
margin-left: -6px; | ||
border-top-width: 0; | ||
border-bottom-color: var(--ti-popover-placement-arrow-after-border-color); | ||
border-bottom-color: var(--tv-Popover-placement-arrow-after-border-color); | ||
} | ||
} | ||
} | ||
|
||
&[x-placement^='right'] { | ||
margin-left: var(--ti-popover-placement-margin-horizontal); | ||
margin-left: var(--tv-Popover-placement-margin-x); | ||
|
||
.popper__arrow { | ||
top: 50%; | ||
left: calc(var(--ti-popover-arrow-height) * -1); | ||
border-right-color: var(--ti-popover-arrow-border-color); | ||
left: -8px; | ||
border-right-color: transparent; | ||
border-left-width: 0; | ||
border-right-width: var(--ti-popover-arrow-height); | ||
border-right-width: 8px; | ||
|
||
&::after { | ||
&:after { | ||
bottom: -6px; | ||
left: 1px; | ||
border-right-color: var(--ti-popover-placement-arrow-after-border-color); | ||
border-right-color: var(--tv-Popover-placement-arrow-after-border-color); | ||
border-left-width: 0; | ||
} | ||
} | ||
} | ||
|
||
&[x-placement^='left'] { | ||
margin-right: var(--ti-popover-placement-margin-horizontal); | ||
margin-right: var(--tv-Popover-placement-margin-x); | ||
|
||
.popper__arrow { | ||
top: 50%; | ||
right: calc(var(--ti-popover-arrow-height) * -1); | ||
right: -8px; | ||
border-right-width: 0; | ||
border-left-color: var(--ti-popover-arrow-border-color); | ||
border-left-width: var(--ti-popover-arrow-height); | ||
border-left-color: transparent; | ||
border-left-width: 8px; | ||
|
||
&::after { | ||
&:after { | ||
right: 1px; | ||
bottom: -6px; | ||
margin-left: -6px; | ||
border-right-width: 0; | ||
border-left-color: var(--ti-popover-placement-arrow-after-border-color); | ||
border-left-color: var(--tv-Popover-placement-arrow-after-border-color); | ||
Comment on lines
+47
to
+129
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Replace hardcoded values with theme variables for better theming support There are multiple instances of hardcoded pixel values in the arrow and placement-specific styles, such as For example, define theme variables like:
Update your code accordingly. For instance: -/* In general arrow styles */
-border-width: 6px;
+border-width: var(--tv-Popover-arrow-border-width);
-/* In placement-specific styles */
-margin-bottom: var(--tv-Popover-placement-margin-y);
+margin-bottom: var(--tv-Popover-placement-margin);
-bottom: -8px;
+bottom: calc(-1 * var(--tv-Popover-arrow-offset));
-border-top-width: 8px;
+border-top-width: var(--tv-Popover-arrow-border-top-width); Ensure that these variables are defined in your variables file (
|
||
} | ||
} | ||
} | ||
|
@@ -138,11 +136,11 @@ | |
} | ||
|
||
.@{popover-prefix-cls}__title { | ||
color: var(--ti-popover-title-text-color); | ||
font-size: var(--ti-popover-title-font-size); | ||
font-weight: var(--ti-popover-title-weight); | ||
color: var(--tv-Popover-title-text-color); | ||
font-size: var(--tv-Popover-title-font-size); | ||
font-weight: var(--tv-Popover-title-weight); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Consider renaming To maintain consistent naming conventions across your theme variables, consider renaming |
||
line-height: 1; | ||
margin-bottom: var(--ti-popover-title-padding-bottom); | ||
margin-bottom: 8px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Replace hardcoded Currently, the For example: -margin-bottom: 8px;
+margin-bottom: var(--tv-Popover-title-margin-bottom); Ensure that
|
||
} | ||
|
||
&:focus, | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Consider using theme variables for border properties for consistency
Currently, the
border
property is set to1px solid transparent
. To maintain consistency and enhance theming flexibility, consider using theme variables for the border width and color.You could define variables like
--tv-Popover-border-width
and--tv-Popover-border-color
and update the code as follows:Ensure these variables are defined in your theming variables file to allow for easier customization and maintenance.
📝 Committable suggestion