Add standard CSS component classes for forms.

 






 

 


  Review Request #10831
  —
  Created Jan. 19, 2020 and submitted  — Latest diff uploaded 

 


















 

  

   Information

  





 
 

  chipx86
 









 
 

  Review Board
 









 
 

  release-4.0.x
 









 
 

  
 









 
 

  
 






 




 

  

   Reviewers

  





 
 

  reviewboard
 









 
 

  
 






 








 





  


 
 

  
This adds a new set of CSS component classes for defining forms in a

standard way. This consists of:


    

  • 

    rb-c-form: The CSS class for <form> elements, providing modifiers
    
  for standard alignment, functions for controlling alignment, and
    
  classes for an action area (for buttons).
    

    • 

  • 

    rb-c-form-fieldset: The CSS class for <fieldset> elements,
    
  providing modifiers for collapsed fieldsets and classes for
    
  descriptive and field content areas.
    

    • 

  • 

    rb-c-form-row: The CSS class for a row of fields in a form.
    

    • 

  • 

    rb-c-form-field: The CSS class for a field, providing standard
    
  styling for labels, inputs, errors, and help text, as well as
    
  modifiers for controlling some basic parts of the display.
    

    • 



It also introduces new namespaces for variables and methods, helping

other pieces of UI adopt the same styling used in forms, and to help

specialize form display. Older definitions in defs.less now make use

of these variables.


There's a few small improvements to other stylesheets to help

incorporate a form and display it correctly on mobile. For instance,

to display properly, we recommend a page using a form to use

<body class="is-content-flush-on-mobile"> and

<div class="page-content-box -is-content-flush">, and this led to a

fix needed in rb-c-content-header to display the header correctly.

The recommendations are documented in the rb-c-form component.


Upcoming changes to the administration UI will make use of these new

classes, replacing the older Django classes that used to comprise the

admin UI change forms.

 








  


 
 

  
Made use of all these styles in an upcoming change for the administration

UI. Tested on mobile and desktop mode.

 







 









 





  








 

  
  


   

    

     

     

     

    

   


   

    

     

     

     

    

   


   

    

     

     

     

    

   


   

  

 





 







   

    
    

    

    


    

      
Commits

      

        
      

    


    


      
Files