tesseract-design
/
kitchen-sink-server
1
0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Publicaties 0 Wiki Activiteit
Bladeren bron

Add more component proposals 

Update philosophy doc.
master
TheoryOfNekomata 2 jaren geleden
bovenliggende
a49eb68076
commit
f7caee6f79
2 gewijzigde bestanden met toevoegingen van 33 en 20 verwijderingen
Zij-aan-zij weergave
Diff opties
Statistieken weergeven Download Patch-bestand Download Diff-bestand
  1. +32
    -20
      docs/philosophy.md
  2. +1
    -0
      src/modules/option/components/ToggleSwitch/index.tsx

+ 32
- 20
docs/philosophy.md Bestand weergeven

@@ -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 Bestand weergeven

@@ -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
}

/**


Schrijf Voorbeeld
Laden…
Annuleren
Opslaan