|
12345678910111213141516171819202122232425262728293031323334353637383940414243444546 |
- # 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">` | `number/Spinner` | Use this component for discrete values. |
- | `<input type="range">` | `number/Slider` | Use this component for continuous values. |
-
|
