tesseract-design
/
kitchen-sink-server
1
0
Forka 0
Codice Problemi 0 Pull Requests 0 Rilasci 0 Wiki Attività
Sfoglia il codice sorgente

Add more component proposals 

Update philosophy doc.
master
TheoryOfNekomata 3 anni fa
parent
a49eb68076
commit
f7caee6f79
2 ha cambiato i file con 33 aggiunte e 20 eliminazioni
Visualizzazione separata
Opzioni Diff
Mostra statistiche Scarica il file Patch Scarica il file Diff
  1. +32
    -20
      docs/philosophy.md
  2. +1
    -0
      src/modules/option/components/ToggleSwitch/index.tsx

+ 32
- 20
docs/philosophy.md Vedi File

@@ -23,24 +23,36 @@

## 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 Vedi File

@@ -14,6 +14,7 @@ export type ToggleSwitchProps = Omit<React.HTMLProps<HTMLInputElement>, 'size' |
* Complementary content of the component.
*/
subtext?: React.ReactNode,
// TODO - opposite children - label used for "off" value
}

/**


Scrivi Anteprima
Caricamento…
Annulla
Salva