This commit replaces the `border` property with `outline` for input
elements, since the `outline` property is more suitable for focus
indicators. This change also removes the need for extra padding
adjustments due to the border's impact on layout.
This commit removes the JavaScript logic that was used to determine
whether an input field was empty or non-empty. The CSS pseudo-classes
and selectors seem robust enough to handle the styling based on the
input state without needing additional JS logic at the moment, and
removing this JS logic simplifies the codebase and prevents potential
conflicts with the CSS styles.
This commit refines the logic for determining when the filter input with
pills is empty. The JS logic is removed from web/src/topic_list.ts,
as this new logic is now handled in the CSS, common across all filter
inputs with pills — resulting in a consistent and predictable behavior
for empty states on all the new filter inputs.
This commit adjusts the left and right padding of the input element in
the filter topics input to account for the left and right borders.
This ensures that the text inside the input is aligned with the text in
other elements of the left sidebar grid.
This follow-up commit fixes the incorrect input color values that were
introduced in the initial commit. This change is most visible in the
'hover' state where the values were incorrectly set to the same values
as that of the normal state, leading to a lack of visual distinction.
This follow-up commit replaces the current left sidebar topic list
filter input implementation with the redesigned input_wrapper
component.
This commit also serves as the base for supporting inputs using the
search_pill_widget, and thus adjusts the previously defined logic at
certain places to ensure that the input pills are handled and
displayed accurately.
Fixes part of #34476.
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.
