• 
      

    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:
    Completed
    Change Summary:
    Pushed to release-1.0.x (5002082)