2 changed files with 33 additions and 20 deletions
Unified View
Diff Options
+ 32
- 20
docs/philosophy.md
View File
| @@ -23,24 +23,36 @@ | |||||
| ## HTML enhancement | ## 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. | | |||||
| | 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). | | |||||
+ 1
- 0
src/modules/option/components/ToggleSwitch/index.tsx
View File
| @@ -14,6 +14,7 @@ export type ToggleSwitchProps = Omit<React.HTMLProps<HTMLInputElement>, 'size' | | |||||
| * Complementary content of the component. | * Complementary content of the component. | ||||
| */ | */ | ||||
| subtext?: React.ReactNode, | subtext?: React.ReactNode, | ||||
| // TODO - opposite children - label used for "off" value | |||||
| } | } | ||||
| /** | /** | ||||