You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
4.7 KiB
4.7 KiB
Tesseract Web
Rationale
- Every component library makes their own conventions of component organization
- Graceful degradation through backwards compatibility with HTML controls is not the main focus
- In return, aspects such as accessibility may suffer since HTML controls are generally compliant to accessibility considerations suggested by approved standards
- Emerging Web applications are at risk of deviating through said standards which can fragment the Web platform implementation
- Hopefully we can inspire component development through the component organization we are proposing;
everyone can have their own implementations
- cf. Authoring (publishing interfaces) vs Dependency (coercing consumers to adapt to concrete implementations)
Ground Rules
- Each component is an enhanced version of an HTML control (see HTML enhancement)
- Each component should only do one thing and one thing only in terms of purpose and appearance (contrast to HTML’s
<input>where its function is overloaded depending on itstypeattribute) - Each component has decoupled styling, wherein each styling has their own API
- This styling API is then made cross-framework compatible
- This styling API allows use of dynamic styles (which then requires CSS-in-JS way of application)
HTML enhancement
| HTML element | Tesseract counterpart | Remarks |
|---|---|---|
<button> |
action/ActionButton |
|
<input type="button"> |
action/ActionButton |
|
<input type="reset"> |
action/ActionButton |
|
<input type="submit"> |
action/ActionButton |
|
<textarea> |
freeform/MultilineTextInput |
|
<input type="text"> |
freeform/TextInput |
|
<input type="search"> |
freeform/TextInput |
|
<input type="password"> |
freeform/MaskedTextInput |
|
<a> with button appearance |
navigation/LinkButton |
|
<select> without multiple attribute |
option/DropdownSelect |
|
<input type="checkbox"> with indeterminate state |
option/ToggleTickBox |
|
<input type="checkbox"> with indeterminate state and button appearance |
option/ToggleButton |
|
<input type="checkbox"> without indeterminate state |
option/ToggleSwitch |
Prefer using this component when indeterminate state is not expected. |
<input type="radio"> |
option/RadioTickBox |
|
<input type="radio"> with button appearance |
option/RadioButton |
|
<input type="number"> |
number/Spinner |
Use this component for discrete values. |
<input type="range"> |
number/Slider |
Use this component for continuous values. |