Change sidebar defaults and add new options for customizing visuals.

Review Request #10737 — Created Oct. 2, 2019 and submitted

Review Board

Sidebar items no longer reserve space for icons or make the active/hover
indicator appear connected to the content by default. These visuals were
useful for the dashboard, and other pages, but aren't a good starting
point for sidebars.

New options have been added to enable these visuals:

1) Both .rb-c-sidebar and .rb-c-sidebar__section now support
a -has-icons modifier, which enables the space reservation for icons
in items.

2) The #rb-ns-ui.sidebars.set-display-style(@style) mixin can be
called with a value of connected-right to enable the visual of
connecting to content on the right. We'll be able to extend this down
the road to offer other visual styles, if needed. The page sidebar
currently turns this on. Future changes may change that default as
well, depending on needs.

Templates can add modifiers (or entire new CSS classes) to the main
.rb-c-sidebar through a sidebar-css-classes template block. The
datagrid template takes advantage of this to enable icon reservation.

There's also a fix for setting the width of a sidebar from within a
rule for a page CSS class. Previously, sidebar widths could only be
set at the top level of a stylesheet.

Verified that the main page sidebar for the dashboard looks as it did
before this change, but that other sidebars (in upcoming changes) didn't
have the space reservation or connected style by default.

  1. Ship It!
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-4.0.x (91fd5f4)