paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-02 04:53:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

inputs: Implement redesigned input component.

Browse Source 
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 commit is contained in:
Sayam Samal
2025-05-23 17:56:45 +05:30
committed by Tim Abbott
parent f8d82775d1
commit 71d75532fe
13 changed files with 212 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/templates/components/input.hbs Normal file
View File

@@ -0,0 +1,9 @@
<div {{#if id}}id="{{id}}"{{/if}} class="input-element-wrapper{{#if input_type}} {{input_type}}{{/if}}{{#if custom_classes}} {{custom_classes}}{{/if}}{{#if icon}} has-input-icon{{/if}}{{#if input_button_icon}} has-input-button{{/if}}">
{{#if icon}}
<i class="input-icon zulip-icon zulip-icon-{{icon}}" aria-hidden="true"></i>
{{/if}}
{{> @partial-block .}}
{{#if input_button_icon}}
{{> icon_button custom_classes="input-button" squared=true icon=input_button_icon intent="neutral" }}
{{/if}}
</div>

3
web/templates/components/showroom/filter_input.hbs Normal file
View File

@@ -0,0 +1,3 @@
{{#> input input_type="filter-input" icon="search" input_button_icon="close"}}
<input class="input-element" type="text" placeholder="{{t 'Filter component' }}" />
{{/input}}