This commit serves as the base for the ongoing effort to standardize
redesigned input elements throughout the Zulip Web UI. It introduces a
new Handlebars partial block for inputs, located at
web/templates/components/input.hbs.
The partial can be used with the partial block syntax: {{#> input}},
allowing contributors to pass in the input element as a template. This
approach wraps the input with a consistent structure that includes
support for an icon and an action button. It also applies the necessary
styling to ensure visual and functional consistency across the web UI.
This commit also implements the filter input component at
/devtools/inputs/ showroom page for design discussions and prototyping.
This refactors a CSS variable for checkbox field margin for checkboxes
nested in another field. For example, the "integration events" options
in the "Generate integration URL" modal. Those nested checkboxes are
spaced out closer together.
This is a prep commit for #34524, that PR will add another nested
checkbox in the "Add a new bot" modal.
This commit sets the focus outline offset in action and icon buttons
to 0, following the discussions at CZO concerning the visuals and
jagged corners in some cases when the outline offset was applied.
This commit cleans up the data URIs for the custom
chevron icons, and sets the same color as used on
select text.
Additionally, the background-image size now scales as
expected, so that browser-native <select> elements
have chevrons that much more closely resemble those
of button-based selects for our custom widgets.
This commit contains the following changes:
- Updates the unmute stream icon in Personal settings
> Notifications to use the `icon-button-brand` CSS class.
- Adjusts the tooltip delay for the unmute icon.
- Removes unused CSS.
Prep commit for #19860.
This commit improves the button outline on focus by changing the color
of the outline to black-on-light and white-on-dark, and tweaking the
outline width and offset.
Migrate the demo organization warning that's shown on all the tabs
for organization settings to use the shared banner code.
Updates links in the current warning to be buttons in the banner,
and matches the navbar alert banner for demo organizations.
Fixes#34447.
The banner grid layout for the medium and small variants has 4 rows,
while the previously described `grid-template-areas` only had the
placement information for the first 3 rows.
This commit adds the spatial description of the banner elements in the
the final row, fixing the alignment of the banner elements in the cases
where there are no action buttons and only the banner label.
Until the owner of a demo organization sets an email, the submit
button on the invite user modal is now disabled.
The input div for email addresses is also disabled, which wasn't
disabled before because it's not an input element on the form.
We need this height to be flexible based on if the subheader has
overflowed into two rows or not, and our method of doing this
(with existing examples in the buddy list and stream list) is to
calculate what the height should be when a window is loaded or
resized.
