| 1 | # addons/components/ |
| 2 | |
| 3 | This directory contains a component library used internally by ISL, in an isolated shareable location. |
| 4 | |
| 5 | This library is (visually) heavily based on the [VS Code Webview UI Toolkit](https://github.com/microsoft/vscode-webview-ui-toolkit), but slightly streamlined for react usage and doesn't share any code. |
| 6 | It is visually almost identical, since it was used to migrate away from the toolkit without requiring restyling. |
| 7 | |
| 8 | ## Usage |
| 9 | |
| 10 | This package is currently not published to npm, and must be copied or referenced directly. |
| 11 | |
| 12 | There's a simple component explorer available by running `npm run start` in this directory. |
| 13 | |
| 14 | Alternatively, search ../isl/ for usage examples. |
| 15 | |
| 16 | ## Differences from vscode-webivew-ui-toolkit |
| 17 | |
| 18 | - requires react & stylex |
| 19 | - does not use HTML Custom Elements / Shadow root |
| 20 | - includes default light and dark theme variable definitions as an optional import. But still uses vscode theme variables when used inside of vscode. |
| 21 | - component APIs are changed to fit react usage a bit more directly |
| 22 | - some component designs are tweaked, like `<Button icon>` has a border and background color by default |
| 23 | - added some components |
| 24 | |
| 25 | ## Components |
| 26 | |
| 27 | Like vscode-webview-ui-toolkit: |
| 28 | |
| 29 | - **Badge**: usually used for numbers |
| 30 | - **Button** |
| 31 | - **Checkbox** |
| 32 | - **Dropdown**: `<select>` |
| 33 | - **Divider**: `<hr>` |
| 34 | - **Panels** |
| 35 | - **Radio** |
| 36 | - **LinkButton**: `<a>` |
| 37 | - **Tag**: used for text. Unlike the toolkit, this is not forced to be uppercase |
| 38 | - **TextArea**: `<textarea>` for long-form text |
| 39 | - **TextField**: `<input type="text">` for one line of text |
| 40 | |
| 41 | Additional components: |
| 42 | |
| 43 | - **Banner**: informational banner |
| 44 | - **ButtonDropdown**: `<button>` with a dropdown to change which action to take |
| 45 | - **ButtonGroup**: add multiple button children to meld them into a side-by-side button |
| 46 | - **ErrorNotice**: Used to show an error message + stack trace |
| 47 | - **Flex**: Simple flexbox containers so you don't need to repeat `display: flex` all over the place |
| 48 | - **Icon**: codicon exposed as a component |
| 49 | - **Kbd**: looks like a keyboard key, used for keyboard shortcuts |
| 50 | - **Subtle**: Simply makes text smaller and lighter, to use as an informational byline that is less intense than normal text |
| 51 | - **ThemedComponentRoot**: Unlike the toolkit, we require this parent component at the root of the tree to provide theme variables. This is also how you set the current theme if being used outside of VS Code. |
| 52 | - **Typeahead** |
| 53 | - **ViewportOverlay**: Another top level wrapper used to add tooltips and modals. |
| 54 | - **Tooltip**: Tooltips that can appear on hover or click |
| 55 | |