You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by "msyavuz (via GitHub)" <gi...@apache.org> on 2025/03/25 14:27:59 UTC
[PR] refactor(theming): Fixes to previously migrated components [superset]
msyavuz opened a new pull request, #32845:
URL: https://github.com/apache/superset/pull/32845
<!---
Please write the PR title following the conventions at https://www.conventionalcommits.org/en/v1.0.0/
Example:
fix(dashboard): load charts correctly
-->
### SUMMARY
<!--- Describe the change below, including rationale and design decisions -->
There are some components that were migrated before #31590 that needs checking and small fixes after Ant Design tokens are decoupled from them. This PR aims to provide those fixes.
These components are:
Migrated Components Checklist:
- Avatar
- Badge
- Button
- Default color is primary which seems better than master
- tertiary color is different
- no warning success colors which were available in the old button but unused.
- Card
- DatePicker
- Divider
- Dropdown
- Input
- InputNumber
- List
- Menu
- MainNav hover on already selected item is different.
- Decision for MainNav: vanilla or current fixed version
- Modal
- Tag
- Progress
- Slight font size on percent text but vanilla looks fine
- Popover
- No visual differences but overlayInnerStyle is deprecated
- Slider
- Slightly larger tooltip but it looks fine
- Steps
- Line colors are a bit darker on vanilla text is a bit lighter
- Switch
- Bit darker color
- Tooltip
### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
<!--- Skip this if not applicable -->
WIP
### TESTING INSTRUCTIONS
<!--- Required! What steps can be taken to manually verify the changes? -->
Compare stories of listed components for style changes.
### ADDITIONAL INFORMATION
<!--- Check any relevant boxes with "x" -->
<!--- HINT: Include "Fixes #nnn" if you are fixing an existing issue -->
- [ ] Has associated issue:
- [ ] Required feature flags:
- [ ] Changes UI
- [ ] Includes DB Migration (follow approval process in [SIP-59](https://github.com/apache/superset/issues/13351))
- [ ] Migration is atomic, supports rollback & is backwards-compatible
- [ ] Confirm DB migration upgrade and downgrade tested
- [ ] Runtime estimates and downtime expectations provided
- [ ] Introduces new feature or API
- [ ] Removes existing feature or API
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] refactor(theming): Fixes to previously migrated components [superset]
Posted by "msyavuz (via GitHub)" <gi...@apache.org>.
msyavuz commented on code in PR #32845:
URL: https://github.com/apache/superset/pull/32845#discussion_r2022670170
##########
superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigItem.tsx:
##########
@@ -47,8 +47,8 @@ export default memo(function ColumnConfigItem({
)}
trigger="click"
placement="right"
- overlayInnerStyle={{ width, height }}
- overlayClassName="column-config-popover"
+ styles={{ body: { width, height } }}
+ rootClassName="column-config-popover"
>
Review Comment:
Yes, thought might as well change these
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] refactor(theming): Fixes to previously migrated components [superset]
Posted by "mistercrunch (via GitHub)" <gi...@apache.org>.
mistercrunch commented on PR #32845:
URL: https://github.com/apache/superset/pull/32845#issuecomment-2773637948
I think I broke (and fixed) something on the base branch, you may need to remerge/rebase
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] refactor(theming): Fixes to previously migrated components [superset]
Posted by "msyavuz (via GitHub)" <gi...@apache.org>.
msyavuz commented on code in PR #32845:
URL: https://github.com/apache/superset/pull/32845#discussion_r2022669467
##########
superset-frontend/src/components/DropdownContainer/index.tsx:
##########
@@ -364,9 +364,11 @@ const DropdownContainer = forwardRef(
/>
<Popover
- overlayInnerStyle={{
- maxHeight: `${MAX_HEIGHT}px`,
- overflow: showOverflow ? 'auto' : 'visible',
+ styles={{
+ body: {
+ maxHeight: `${MAX_HEIGHT}px`,
+ overflow: showOverflow ? 'auto' : 'visible',
+ },
}}
Review Comment:
Yes
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] refactor(theming): Fixes to previously migrated components [superset]
Posted by "msyavuz (via GitHub)" <gi...@apache.org>.
msyavuz commented on code in PR #32845:
URL: https://github.com/apache/superset/pull/32845#discussion_r2025478553
##########
superset-frontend/src/components/Menu/index.tsx:
##########
@@ -86,25 +86,31 @@ const StyledNav = styled(AntdMenu)`
align-items: center;
height: 100%;
gap: 0;
+ border-bottom: 0;
+ line-height: ${theme.lineHeight};
&.antd5-menu-horizontal > .antd5-menu-item {
height: 100%;
display: flex;
align-items: center;
margin: 0;
- border-bottom: 2px solid transparent;
padding: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 4}px;
- &:hover {
- background-color: ${theme.colors.primary.light5};
- border-bottom: 2px solid transparent;
- & a:after {
- opacity: 1;
- width: 100%;
- }
+ ::after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 2px;
+ background-color: ${theme.colors.primary.base};
Review Comment:
Fixed! I think this colorPrimaryBorderHover is a better fit because this is used as a border color of MainNav on hover
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] refactor(theming): Fixes to previously migrated components [superset]
Posted by "mistercrunch (via GitHub)" <gi...@apache.org>.
mistercrunch commented on code in PR #32845:
URL: https://github.com/apache/superset/pull/32845#discussion_r2025130848
##########
superset-frontend/src/components/Menu/index.tsx:
##########
@@ -86,25 +86,31 @@ const StyledNav = styled(AntdMenu)`
align-items: center;
height: 100%;
gap: 0;
+ border-bottom: 0;
+ line-height: ${theme.lineHeight};
&.antd5-menu-horizontal > .antd5-menu-item {
height: 100%;
display: flex;
align-items: center;
margin: 0;
- border-bottom: 2px solid transparent;
padding: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 4}px;
- &:hover {
- background-color: ${theme.colors.primary.light5};
- border-bottom: 2px solid transparent;
- & a:after {
- opacity: 1;
- width: 100%;
- }
+ ::after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 2px;
+ background-color: ${theme.colors.primary.base};
Review Comment:
let's get in the habit of using native antd tokens, in this case maybe `colorPrimaryBg` since it's a background-color (?)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] refactor(theming): Fixes to previously migrated components [superset]
Posted by "korbit-ai[bot] (via GitHub)" <gi...@apache.org>.
korbit-ai[bot] commented on PR #32845:
URL: https://github.com/apache/superset/pull/32845#issuecomment-2751454190
Based on your review schedule, I'll hold off on reviewing this PR until it's marked as ready for review. If you'd like me to take a look now, comment `/korbit-review`.
> Your admin can change your review schedule in the [Korbit Console](https://app.korbit.ai/settings)
[](168f5aec-fabe-48d2-924e-ff0052567f91)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] refactor(theming): Fixes to previously migrated components [superset]
Posted by "alexandrusoare (via GitHub)" <gi...@apache.org>.
alexandrusoare commented on code in PR #32845:
URL: https://github.com/apache/superset/pull/32845#discussion_r2022665843
##########
superset-frontend/src/components/DropdownContainer/index.tsx:
##########
@@ -364,9 +364,11 @@ const DropdownContainer = forwardRef(
/>
<Popover
- overlayInnerStyle={{
- maxHeight: `${MAX_HEIGHT}px`,
- overflow: showOverflow ? 'auto' : 'visible',
+ styles={{
+ body: {
+ maxHeight: `${MAX_HEIGHT}px`,
+ overflow: showOverflow ? 'auto' : 'visible',
+ },
}}
Review Comment:
overlayInnerStyle is deprecated right?
##########
superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigItem.tsx:
##########
@@ -47,8 +47,8 @@ export default memo(function ColumnConfigItem({
)}
trigger="click"
placement="right"
- overlayInnerStyle={{ width, height }}
- overlayClassName="column-config-popover"
+ styles={{ body: { width, height } }}
+ rootClassName="column-config-popover"
>
Review Comment:
Here as well?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] refactor(theming): Fixes to previously migrated components [superset]
Posted by "EnxDev (via GitHub)" <gi...@apache.org>.
EnxDev commented on code in PR #32845:
URL: https://github.com/apache/superset/pull/32845#discussion_r2023186545
##########
superset-frontend/src/components/Menu/index.tsx:
##########
@@ -61,7 +61,7 @@ const StyledMenuItem = styled(AntdMenu.Item)`
height: 3px;
opacity: 0;
transform: translateX(-50%);
- transition: all ${({ theme }) => theme.motionDurationMid}s;
+ transition: translate ${({ theme }) => theme.motionDurationMid}s;
Review Comment:
Please, let's use something like that:
```
const SomeStyledThing=styled.div`
${({ theme }) => `
padding: ${theme.sizeUnit * 2}px;
border-radius: ${theme.borderRadius}px;
border: 1px solid ${theme.colorPrimary};
`}
`;
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] refactor(theming): Fixes to previously migrated components [superset]
Posted by "EnxDev (via GitHub)" <gi...@apache.org>.
EnxDev commented on code in PR #32845:
URL: https://github.com/apache/superset/pull/32845#discussion_r2023186545
##########
superset-frontend/src/components/Menu/index.tsx:
##########
@@ -61,7 +61,7 @@ const StyledMenuItem = styled(AntdMenu.Item)`
height: 3px;
opacity: 0;
transform: translateX(-50%);
- transition: all ${({ theme }) => theme.motionDurationMid}s;
+ transition: translate ${({ theme }) => theme.motionDurationMid}s;
Review Comment:
Please, let's use something like that:
```
const SomeStyledThing=styled.div`
${({ theme }) => css`
padding: ${theme.sizeUnit * 2}px;
border-radius: ${theme.borderRadius}px;
border: 1px solid ${theme.colorPrimary};
`}
`;
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] refactor(theming): Fixes to previously migrated components [superset]
Posted by "mistercrunch (via GitHub)" <gi...@apache.org>.
mistercrunch merged PR #32845:
URL: https://github.com/apache/superset/pull/32845
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] refactor(theming): Fixes to previously migrated components [superset]
Posted by "msyavuz (via GitHub)" <gi...@apache.org>.
msyavuz commented on code in PR #32845:
URL: https://github.com/apache/superset/pull/32845#discussion_r2025481887
##########
superset-frontend/src/components/Menu/index.tsx:
##########
@@ -61,7 +61,7 @@ const StyledMenuItem = styled(AntdMenu.Item)`
height: 3px;
opacity: 0;
transform: translateX(-50%);
- transition: all ${({ theme }) => theme.motionDurationMid}s;
+ transition: translate ${({ theme }) => theme.motionDurationMid}s;
Review Comment:
Done!
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] refactor(theming): Fixes to previously migrated components [superset]
Posted by "geido (via GitHub)" <gi...@apache.org>.
geido commented on code in PR #32845:
URL: https://github.com/apache/superset/pull/32845#discussion_r2024569248
##########
superset-frontend/src/components/Menu/index.tsx:
##########
@@ -86,25 +86,31 @@ const StyledNav = styled(AntdMenu)`
align-items: center;
height: 100%;
gap: 0;
+ border-bottom: 0;
+ line-height: ${theme.lineHeight};
&.antd5-menu-horizontal > .antd5-menu-item {
height: 100%;
display: flex;
align-items: center;
margin: 0;
- border-bottom: 2px solid transparent;
padding: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 4}px;
- &:hover {
- background-color: ${theme.colors.primary.light5};
- border-bottom: 2px solid transparent;
- & a:after {
- opacity: 1;
- width: 100%;
- }
+ ::after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 2px;
+ background-color: ${theme.colors.primary.base};
Review Comment:
I believe this is what we don't want right? With this approach there is no control over this style via the theme configuration. Isn't this supposed to be a vanilla feature? https://ant.design/components/menu#menu-demo-horizontal
##########
superset-frontend/src/components/Menu/index.tsx:
##########
@@ -61,7 +61,7 @@ const StyledMenuItem = styled(AntdMenu.Item)`
height: 3px;
opacity: 0;
transform: translateX(-50%);
- transition: all ${({ theme }) => theme.motionDurationMid}s;
+ transition: translate ${({ theme }) => theme.motionDurationMid}s;
background-color: ${({ theme }) => theme.colorPrimary};
Review Comment:
Do we need this background color here? Can't we use vanilla?
##########
superset-frontend/src/components/Menu/index.tsx:
##########
@@ -61,7 +61,7 @@ const StyledMenuItem = styled(AntdMenu.Item)`
height: 3px;
opacity: 0;
transform: translateX(-50%);
- transition: all ${({ theme }) => theme.motionDurationMid}s;
+ transition: translate ${({ theme }) => theme.motionDurationMid}s;
Review Comment:
Yeah we can move the theme top level if we use it in multiple instances
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] refactor(theming): Fixes to previously migrated components [superset]
Posted by "korbit-ai[bot] (via GitHub)" <gi...@apache.org>.
korbit-ai[bot] commented on code in PR #32845:
URL: https://github.com/apache/superset/pull/32845#discussion_r2022400240
##########
superset-frontend/src/components/Menu/index.tsx:
##########
@@ -86,25 +86,31 @@ const StyledNav = styled(AntdMenu)`
align-items: center;
height: 100%;
gap: 0;
+ border-bottom: 0;
+ line-height: ${theme.lineHeight};
&.antd5-menu-horizontal > .antd5-menu-item {
height: 100%;
display: flex;
align-items: center;
margin: 0;
- border-bottom: 2px solid transparent;
padding: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 4}px;
- &:hover {
- background-color: ${theme.colors.primary.light5};
- border-bottom: 2px solid transparent;
- & a:after {
- opacity: 1;
- width: 100%;
- }
+ ::after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 2px;
+ background-color: ${theme.colors.primary.base};
+ bottom: ${theme.sizeUnit / 4}px;
+ left: 0;
+ transform: scale(0);
+ transition: 0.2s all ease-out;
Review Comment:
### Inefficient CSS Transition <sub></sub>
<details>
<summary>Tell me more</summary>
###### What is the issue?
Using `all` in CSS transitions can negatively impact performance as it forces the browser to monitor and animate all animatable properties.
###### Why this matters
Transitioning all properties requires more computational resources and can cause unnecessary repaints/reflows. This becomes especially noticeable when many menu items are present or on lower-end devices.
###### Suggested change ∙ *Feature Preview*
Specify only the properties that need to be transitioned for better performance:
```css
transition: transform 0.2s ease-out;
```
###### Provide feedback to improve future suggestions
[](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/90ca48e2-3cbf-42b9-bbe5-26512e7515f6/upvote) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/90ca48e2-3cbf-42b9-bbe5-26512e7515f6?what_not_true=true) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/90ca48e2-3cbf-42b9-bbe5-26512e7515f6?what_out_of_scope=true) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/90ca48e2-3cbf-42b9-bbe5-26512e7515f6?what_not_in_standard=true) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/90ca48e2-3cbf-42b9-bbe5-26512e7515f6)
</details>
<sub>
💬 Looking for more details? Reply to this comment to chat with Korbit.
</sub>
<!--- korbi internal id:64688a11-3ba2-4c11-89b9-2e01d7fb2970 -->
[](64688a11-3ba2-4c11-89b9-2e01d7fb2970)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] refactor(theming): Fixes to previously migrated components [superset]
Posted by "EnxDev (via GitHub)" <gi...@apache.org>.
EnxDev commented on code in PR #32845:
URL: https://github.com/apache/superset/pull/32845#discussion_r2023186545
##########
superset-frontend/src/components/Menu/index.tsx:
##########
@@ -61,7 +61,7 @@ const StyledMenuItem = styled(AntdMenu.Item)`
height: 3px;
opacity: 0;
transform: translateX(-50%);
- transition: all ${({ theme }) => theme.motionDurationMid}s;
+ transition: translate ${({ theme }) => theme.motionDurationMid}s;
Review Comment:
let's use something like that:
```
const SomeStyledThing=styled.div`
${({ theme }) => css`
padding: ${theme.sizeUnit * 2}px;
border-radius: ${theme.borderRadius}px;
border: 1px solid ${theme.colorPrimary};
`}
`;
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] refactor(theming): Fixes to previously migrated components [superset]
Posted by "alexandrusoare (via GitHub)" <gi...@apache.org>.
alexandrusoare commented on code in PR #32845:
URL: https://github.com/apache/superset/pull/32845#discussion_r2022649182
##########
superset-frontend/src/components/Menu/index.tsx:
##########
@@ -86,25 +86,31 @@ const StyledNav = styled(AntdMenu)`
align-items: center;
height: 100%;
gap: 0;
+ border-bottom: 0;
+ line-height: ${theme.lineHeight};
&.antd5-menu-horizontal > .antd5-menu-item {
height: 100%;
display: flex;
align-items: center;
margin: 0;
- border-bottom: 2px solid transparent;
padding: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 4}px;
- &:hover {
- background-color: ${theme.colors.primary.light5};
- border-bottom: 2px solid transparent;
- & a:after {
- opacity: 1;
- width: 100%;
- }
+ ::after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 2px;
+ background-color: ${theme.colors.primary.base};
+ bottom: ${theme.sizeUnit / 4}px;
+ left: 0;
+ transform: scale(0);
+ transition: 0.2s all ease-out;
Review Comment:
What are these extra styles for?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] refactor(theming): Fixes to previously migrated components [superset]
Posted by "msyavuz (via GitHub)" <gi...@apache.org>.
msyavuz commented on code in PR #32845:
URL: https://github.com/apache/superset/pull/32845#discussion_r2022755837
##########
superset-frontend/src/components/Menu/index.tsx:
##########
@@ -86,25 +86,31 @@ const StyledNav = styled(AntdMenu)`
align-items: center;
height: 100%;
gap: 0;
+ border-bottom: 0;
+ line-height: ${theme.lineHeight};
&.antd5-menu-horizontal > .antd5-menu-item {
height: 100%;
display: flex;
align-items: center;
margin: 0;
- border-bottom: 2px solid transparent;
padding: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 4}px;
- &:hover {
- background-color: ${theme.colors.primary.light5};
- border-bottom: 2px solid transparent;
- & a:after {
- opacity: 1;
- width: 100%;
- }
+ ::after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 2px;
+ background-color: ${theme.colors.primary.base};
+ bottom: ${theme.sizeUnit / 4}px;
+ left: 0;
+ transform: scale(0);
+ transition: 0.2s all ease-out;
Review Comment:
I provided some screenshots. These styles are here to simplify the hover effects of MainNav.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [PR] refactor(theming): Fixes to previously migrated components [superset]
Posted by "msyavuz (via GitHub)" <gi...@apache.org>.
msyavuz commented on code in PR #32845:
URL: https://github.com/apache/superset/pull/32845#discussion_r2025481141
##########
superset-frontend/src/components/Menu/index.tsx:
##########
@@ -61,7 +61,7 @@ const StyledMenuItem = styled(AntdMenu.Item)`
height: 3px;
opacity: 0;
transform: translateX(-50%);
- transition: all ${({ theme }) => theme.motionDurationMid}s;
+ transition: translate ${({ theme }) => theme.motionDurationMid}s;
background-color: ${({ theme }) => theme.colorPrimary};
Review Comment:
You are right! I can't see the change without this
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org