Add enhanced styles and item states for config form list items.

Review Request #10429 — Created Feb. 26, 2019 and submitted

Information

Djblets
release-1.0.x

Reviewers

List items defaulted to an appearance where the left-hand side had some
indentation, and the right-hand side did not. This was styled for the
(currently) common use case of text on the left-hand side and action
buttons on the right-hand side. In other cases, such as when there's an
icon on the left-hand side or just text on the right-hand side, the
styles didn't look right, requiring that those specific use cases tweak
the styles. This led to some inconsistency.

We also just have more ways we want to use list items, that weren't
covered by the old styles. For instance, the extension list has a
colored border on the left-hand side of extension items indicating their
enabled/disabled state, which is something we'll want in other places as
well.

This change enhances the styling of list items to account for these
newer requirements. Now, the slight indentation found on the left-hand
side is now found on the right-hand side, but both can be turned off by
indicating, per-item, whether the item has an icon or actions. To reduce
code bloat in the HTML, there are -all-items-* versions of these
modifiers for the list as well.

Item state colors can also be defined and used through a new
#djblets-ns-config-forms.list.add-item-state() mixin. Two states are
defined by default: -is-enabled and -is-disabled.

There are also fixes for item borders. The last item in the list no
longer has a bottom border, helping prevent a fuzzy look when nested in
a container that has borders.

Tested with the new list I'm building, and tested with all existing
lists used in all config forms we currently have.

Summary ID
Add enhanced styles and item states for config form list items.
List items defaulted to an appearance where the left-hand side had some indentation, and the right-hand side did not. This was styled for the (currently) common use case of text on the left-hand side and action buttons on the right-hand side. In other cases, such as when there's an icon on the left-hand side or just text on the right-hand side, the styles didn't look right, requiring that those specific use cases tweak the styles. This led to some inconsistency. We also just have more ways we want to use list items, that weren't covered by the old styles. For instance, the extension list has a colored border on the left-hand side of extension items indicating their enabled/disabled state, which is something we'll want in other places as well. This change enhances the styling of list items to account for these newer requirements. Now, the slight indentation found on the left-hand side is now found on the right-hand side, but both can be turned off by indicating, per-item, whether the item has an icon or actions. To reduce code bloat in the HTML, there are ``-all-items-*`` versions of these modifiers for the list as well. Item state colors can also be defined and used through a new `#djblets-ns-config-forms.list.add-item-state()` mixin. Two states are defined by default: `-is-enabled` and `-is-disabled`.
ad3ad099aed22b76ae2855ccec76f4f2a82a8989
david
  1. Ship It!
  2. 
      
chipx86
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-1.0.x (5002082)
Loading...