Re: [PR] refactor(form): Migrate Form component to Ant Design 5 [superset]

Wed, 19 Mar 2025 01:13:31 -0700 


korbit-ai[bot] commented on code in PR #32729:
URL: https://github.com/apache/superset/pull/32729#discussion_r2002695197


##########
superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx:
##########
@@ -78,30 +78,30 @@ const HorizontalOverflowFilterControlTitleBox = styled(
 
 const VerticalFilterControlContainer = styled(Form)`
   width: 100%;
-  && .ant-form-item-label > label {
+  && .antd5-form-item-label > label {
     text-transform: none;
     width: 100%;
     padding-right: ${({ theme }) => theme.sizeUnit * 11}px;
   }
-  .ant-form-item-tooltip {
+  .antd5-form-item-tooltip {
     margin-bottom: ${({ theme }) => theme.sizeUnit}px;
   }
 `;
 
 const HorizontalFilterControlContainer = styled(Form)`
-  && .ant-form-item-label > label {
+  && .antd5-form-item-label > label {
     margin-bottom: 0;
     text-transform: none;
   }
-  .ant-form-item-tooltip {
+  .antd5-form-item-tooltip {
     margin-bottom: ${({ theme }) => theme.sizeUnit}px;
   }
 `;

Review Comment:
   ### Duplicated styled component styles <sub>![category 
Design](https://img.shields.io/badge/Design-0d9488)</sub>
   
   <details>
     <summary>Tell me more</summary>
   
   ###### What is the issue?
   The styled components for Vertical and Horizontal containers have duplicated 
CSS rules and similar structures, violating the DRY principle.
   
   ###### Why this matters
   Code duplication increases maintenance overhead and the risk of 
inconsistencies when changes are needed.
   
   ###### Suggested change ∙ *Feature Preview*
   Create a base styled component with common styles and extend it for specific 
variations:
   ```typescript
   const BaseFilterControlContainer = styled(Form)`
     .antd5-form-item-tooltip {
       margin-bottom: ${({ theme }) => theme.sizeUnit}px;
     }
     && .antd5-form-item-label > label {
       text-transform: none;
     }
   `;
   
   const VerticalFilterControlContainer = styled(BaseFilterControlContainer)`
     width: 100%;
     && .antd5-form-item-label > label {
       width: 100%;
       padding-right: ${({ theme }) => theme.sizeUnit * 11}px;
     }
   `;
   
   const HorizontalFilterControlContainer = styled(BaseFilterControlContainer)`
     && .antd5-form-item-label > label {
       margin-bottom: 0;
     }
   `;
   ```
   
   
   ###### 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/5ae875a6-a203-4e15-ae9b-3598d590b5eb/upvote)
 
[![Incorrect](https://img.shields.io/badge/👎%20Incorrect-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/5ae875a6-a203-4e15-ae9b-3598d590b5eb?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/5ae875a6-a203-4e15-ae9b-3598d590b5eb?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/5ae875a6-a203-4e15-ae9b-3598d590b5eb?what_not_in_standard=true)
 
[![Other](https://img.shields.io/badge/👎%20Other-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/5ae875a6-a203-4e15-ae9b-3598d590b5eb)
   </details>
   
   <sub>
   
   💬 Looking for more details? Reply to this comment to chat with Korbit.
   </sub>
   
   <!--- korbi internal id:377f8022-fe0b-4a68-85b4-0fefc35c8cef -->
   
   [](377f8022-fe0b-4a68-85b4-0fefc35c8cef)



-- 
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