|
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- # 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](#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 its `type` attribute)
- - 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` | The consumer may choose to add a search icon (magnifying glass) as indicator. |
- | `<input type="password">` | `freeform/MaskedTextInput` | |
- | `<a>` with button appearance | `navigation/LinkButton` | |
- | `<select>` without `multiple` attribute and with dropdown appearance | `option/DropdownSelect` | |
- | `<select>` with list box appearance | `option/MenuSelect` | The `multiple` prop can be set here. |
- | `<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">` | `numeric/Spinner` | Use this component for discrete values. |
- | `<input type="range">` | `numeric/Slider` | Use this component for continuous values. |
- | `<input type="date">` with dropdown calendar | `temporal/DateDropdown` | |
- | `<input type="date">` as inline calendar | `temporal/Calendar` | Falls back to native date input. |
- | `<input type="time">` with spinners for hour, minute, seconds, and milliseconds; switch for (AM/PM) selection | `temporal/TimeSpinner` | Optional seconds and milliseconds. |
- | `<input type="time">` with clock face | `temporal/Clock` | Falls back to native time input. |
-
- ## Additional components
-
- | Component | Tesseract implementation | Remarks |
- |-----------------------|--------------------------|------------------------------------------------------------------------------------------------------------------------------|
- | Tag input | `option/TagInput` | Can specify predefined options (like `<input>` with `list` attribute). |
- | X-Y select (2D range) | `numeric/Range2D` | |
- | Knob | `numeric/Knob` | |
- | Duration input | `temporal/DurationInput` | Can specify precision up to milliseconds, falls back to native number input (always returns milliseconds for compatibility). |
|
