Re: [PR] refactor(theming): Fixes to previously migrated components [superset]

Tue, 01 Apr 2025 02:10:44 -0700 


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>![category 
Performance](https://img.shields.io/badge/Performance-4f46e5)</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
   [![Nice 
Catch](https://img.shields.io/badge/👍%20Nice%20Catch-71BC78)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/90ca48e2-3cbf-42b9-bbe5-26512e7515f6/upvote)
 
[![Incorrect](https://img.shields.io/badge/👎%20Incorrect-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/90ca48e2-3cbf-42b9-bbe5-26512e7515f6?what_not_true=true)
  [![Not in 
Scope](https://img.shields.io/badge/👎%20Out%20of%20PR%20scope-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/90ca48e2-3cbf-42b9-bbe5-26512e7515f6?what_out_of_scope=true)
 [![Not in coding 
standard](https://img.shields.io/badge/👎%20Not%20in%20our%20standards-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/90ca48e2-3cbf-42b9-bbe5-26512e7515f6?what_not_in_standard=true)
 
[![Other](https://img.shields.io/badge/👎%20Other-white)](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: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]


---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to