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

Merged
merged 1 commit into from
Oct 12, 2024
Merged

refactor(theme): [divider] refactor divider theme vars #2238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
12 changes: 5 additions & 7 deletions packages/theme/src/divider/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,13 @@
@divider-prefix-cls: ~'@{css-prefix}divider';

.@{divider-prefix-cls} {
.component-css-vars-divider();
.inject-Divider-vars();
Copy link

Choose a reason for hiding this comment

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

💡 Codebase verification



Mixin naming inconsistency detected across components


Multiple .less files are still using the old mixin pattern component-css-vars-*, while others have adopted the new inject-*vars(). To ensure uniformity and maintainable styling practices, please update the remaining files to use the new mixin pattern.


Files still using old mixin pattern:


    

  • packages/theme/src/notify/vars.less
    • 

  • packages/theme/src/wizard/vars.less
    • 

  • packages/theme/src/upload/vars.less
    • 

  • packages/theme/src/transfer/vars.less
    • 

  • packages/theme/src/tooltip/vars.less
    • 

  • packages/theme/src/tree/index.less
    • 

  • packages/theme/src/textarea/index.less
    • 

  • packages/theme/src/table/index.less
    • 

  • packages/theme/src/tabs/index.less
    • 

  • packages/theme/src/steps/index.less
    • 

  • packages/theme/src/slider/index.less
    • 

  • packages/theme/src/statistic/index.less
    • 

  • packages/theme/src/select/index.less
    • 

  • packages/theme/src/scrollbar/index.less
    • 

  • packages/theme/src/popover/index.less
    • 

  • packages/theme/src/popconfirm/index.less
    • 

  • packages/theme/src/picker/index.less
    • 

  • packages/theme/src/pager/index.less
    • 

  • packages/theme/src/modal/index.less
    • 

  • packages/theme/src/popeditor/index.less
    • 

  • packages/theme/src/milestone/index.less
    • 

  • packages/theme/src/loading/index.less
    • 

  • packages/theme/src/link/index.less
    • 

  • packages/theme/src/base-select/index.less
    • 

  • packages/theme/src/autocomplete/index.less
    • 

  • packages/theme/src/card-group/index.less
    • 

  • packages/theme/src/alert/index.less
    • 

  • packages/theme/src/badge/index.less
    • 

  • packages/theme/src/dropdown/index.less
    • 

  • packages/theme/src/drawer/index.less
    • 

  • packages/theme/src/crop/index.less
    • 

  • packages/theme/src/cascader/index.less
    • 

  • packages/theme/src/carousel/index.less
    • 

  • packages/theme/src/calendar/index.less
    • 

  • packages/theme/src/card/index.less
    • 

  • packages/theme/src/radio/index.less
    • 

  • packages/theme/src/radio-group/index.less
    • 

  • packages/theme/src/progress/index.less
    • 

  • packages/theme/src/numeric/index.less
    • 

  • packages/theme/src/radio-button/index.less
    • 

  • packages/theme/src/ip-address/index.less
    • 

  • packages/theme/src/guide/index.less
    • 

  • packages/theme/src/dept/index.less
    • 

  • packages/theme/src/dialog-box/index.less
    • 

  • packages/theme/src/collapse/index.less
    • 

  • packages/theme/src/collapse-item/index.less
    • 

  • packages/theme/src/checkbox-group/index.less
    • 

  • packages/theme/src/checkbox/index.less
    • 

  • packages/theme/src/checkbox-button/index.less
    • 

  • packages/theme/src/breadcrumb/index.less
    • 

  • packages/theme/src/bulletin-board/index.less
    • 

  • packages/theme/src/button/index.less
    • 

  • packages/theme/src/amount/index.less
    • 

  • packages/theme/src/anchor/index.less
    • 




🔗 Analysis chain

LGTM! Consider verifying consistency across components.


The change from component-css-vars-divider() to inject-Divider-vars() aligns with the PR objective and follows a more consistent naming convention. This is a good refactoring step.


To ensure consistency, let's check if similar changes have been made in other component files:






There was an error executing the previous script. Here's a corrected version to verify mixin consistency across components:





🏁 Scripts executed

The following scripts were executed for the analysis:


Script:


#!/bin/bash
# Description: Check for similar mixin changes in other component files

# Search for both old and new mixin patterns in all .less files
echo "Files still using old mixin pattern:"
rg -t less 'component-css-vars-\w+\(\)' packages/theme/src
echo "\nFiles using new mixin pattern:"
rg -t less 'inject-\w+-vars\(\)' packages/theme/src



Length of output: 403




Script:


#!/bin/bash
# Description: Check for similar mixin changes in other component files

# Search for the old mixin pattern
echo "Files still using old mixin pattern:"
rg -t less 'component-css-vars-\w+\(\)' packages/theme/src

# Search for the new mixin pattern
echo -e "\nFiles using new mixin pattern:"
rg -t less 'inject-\w+-vars\(\)' packages/theme/src



Length of output: 11286




    

  
  



    


        

      
  

    
  
    
    

  

  




        

      
    








    


  










    


  		



    

    

    

  
      position: relative;






    

    

    

  
    







    

    

    

  
      &&--horizontal {






    

    

    

  
        display: block;






    

    

    

  
        margin: 24px 0;






    

    

    

  
        border-top: 1px solid var(--ti-divider-dividing-line);






    

    

    

  
        opacity: var(--ti-divider-horizontal-opacity);






    

    

    

  
        border-top: 1px solid var(--tv-Divider-dividing-line);






    

    

    

  
      }






    

    

    

  
    







    

    

    

  
      &&--vertical {






      

    
        
          
        
        Expand All
    
    @@ -20,16 +19,15 @@
  


    

    

    

  
        height: 1em;






    

    

    

  
        margin: 0 8px;






    

    

    

  
        vertical-align: middle;






    

    

    

  
        border-left: 1px solid var(--ti-divider-dividing-line);






    

    

    

  
        opacity: var(--ti-divider-vertical-opacity);






    

    

    

  
        border-left: 1px solid var(--tv-Divider-dividing-line);






    

    

    

  
      }






    

    

    

  
    







    

    

    

  
      &__text {






    

    

    

  
        position: absolute;






    

    

    

  
        font-size: 14px;






    

    

    

  
        font-weight: 500;






    

    

    

  
        color: var(--ti-divider-text-color);






    

    

    

  
        background-color: var(--ti-divider-text-bg-color);






    

    

    

  
        color: var(--tv-Divider-text-color);






    

    

    

  
        background-color: var(--tv-Divider-text-bg-color);






    

    

    

  
    







    

    

    

  
        &.is-left {






    

    

    

  
          left: 20px;






  

    
          
            
          
          Expand Down
    
    
  



                
              


          


    

  



    
  

    

      

        



          



          
            14 changes: 5 additions & 9 deletions
          
          

        

  packages/theme/src/divider/vars.less

  
  
      
      
  





        
      


      

        










            


          

          

            
              

                
    

              

            
            
                            

                            


                              
   View file



                                    


                                  


                            


                            

                            

    Open in desktop



                
            
          

        

      

    



    



          

            




              
      
    
              

                
                  

                      Original file line number
                      Diff line number
                      Diff line change
                  

                
                
                      
      

    
    
    @@ -1,12 +1,8 @@
  


    

    

    

  
    .component-css-vars-divider() {






    

    

    

  
      // 不开放(hide)






    

    

    

  
      --ti-divider-dividing-line: var(--ti-common-color-bg-dark-disabled, #dbdbdb);






    

    

    

  
    .inject-Divider-vars() {






    

    

    

  
      // 分割线颜色






    

    

    

  
      --tv-Divider-dividing-line: var(--tv-color-border-divider-short);






    

    

    

  
      // 文案背景色






    

    

    

  
      --ti-divider-text-bg-color: var(--ti-common-color-line-dividing, #f0f0f0);






    

    

    

  
      --tv-Divider-text-bg-color: var(--tv-color-border-divider);






    

    

    

  
      // 文案文本色






    

    

    

  
      --ti-divider-text-color: var(--ti-common-color-text-primary, #191919);






    

    

    

  
      //分割线横向透明度






    

    

    

  
      --ti-divider-horizontal-opacity: 1;






    

    

    

  
      //分割线纵向透明度






    

    

    

  
      --ti-divider-vertical-opacity: 1;






    

    

    

  
      --tv-Divider-text-color: var(--tv-color-text);






    

    

    

  
    }








                
              


          


    

  



  



    

  
    
      Loading