Update the My Account page to work with modern configforms styling.

Review Request #11332 — Created Dec. 16, 2020 and submitted

Information

Review Board
release-4.0.x

Reviewers

The My Account page was written with legacy configforms styling in
mind. We worked around layout issues with custom styling, dynamically
altering some classes, and trying to make some parts of the UI line up
and blend together in somewhat hacky ways.

Djblets 2.0 switches configform pages over to a cleaner, more modern CSS
Component structure, with improved styling and layout. This definitely
breaks a lot of the My Account page, which this change fixes by
utilizing the new layout constructs and stripping away old hacks.

For the most part, this includes wrapping some elements in a
djblets-l-config-forms-container container element, switching to newer
class names, and removing unwanted styling to allow some of the fixes in
the core classes to work correctly.

There are a couple cases where we've had to alter some CSS to work
correctly in modern configforms. For instance, rb-c-search-input and
rb-c-form-field__errors needed to work around configforms taking
precedence and overriding some styling. These are unfortunate hacks,
currently. The plan, a bit further down the road, is to centralize our
styling in a more common component, but for now this is a necessary
evil.

Unit tests pass.

Tested every subpage and form in the My Account page.

Summary ID
Update the My Account page to work with modern configforms styling.
The My Account page was written with legacy configforms styling in mind. We worked around layout issues with custom styling, dynamically altering some classes, and trying to make some parts of the UI line up and blend together in somewhat hacky ways. Djblets 2.0 switches configform pages over to a cleaner, more modern CSS Component structure, with improved styling and layout. This definitely breaks a lot of the My Account page, which this change fixes by utilizing the new layout constructs and stripping away old hacks. For the most part, this includes wrapping some elements in a `djblets-l-config-forms-container` container element, switching to newer class names, and removing unwanted styling to allow some of the fixes in the core classes to work correctly. There are a couple cases where we've had to alter some CSS to work correctly in modern configforms. For instance, `rb-c-search-input` and `rb-c-form-field__errors` needed to work around configforms taking precedence and overriding some styling. These are unfortunate hacks, currently. The plan, a bit further down the road, is to centralize our styling in a more common component, but for now this is a necessary evil.
4f136482fec919c7e84d7e2057124e0bccff15db

Description From Last Updated

<input> is an empty element that doesn't need any kind of closing tag

daviddavid

I've had issues with using <div /> outside of XHTML, and using <div></div> would be more consistent with the <span> …

daviddavid

Trailing comma?

daviddavid
david
  1. 
      
  2. <input> is an empty element that doesn't need any kind of closing tag

  3. I've had issues with using <div /> outside of XHTML, and using <div></div> would be more consistent with the <span> tag above.

    1. Agreed. It was just there before so I didn't change it.

      I think the template/jQuery stuff handles this correctly, but I'll change it.

  4. 
      
chipx86
david
  1. Ship It!
  2. 
      
chipx86
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-4.0.x (a1cff21)
Loading...