From c04939c2a5eab13a1542edbff6550877477fd0ce Mon Sep 17 00:00:00 2001
From: Hawk Ticehurst <hawkticehurst@gmail.com>
Date: Mon, 14 Feb 2022 16:54:00 -0800
Subject: [PATCH 1/4] Add React sample code / docs for the badge, button, and
 checkbox components

---
 src/badge/README.md    | 10 ++++-
 src/button/README.md   | 69 +++++++++++++++++++++++++++---
 src/checkbox/README.md | 97 +++++++++++++++++++++++++++++++++++++++---
 3 files changed, 162 insertions(+), 14 deletions(-)

diff --git a/src/badge/README.md b/src/badge/README.md
index eadd98c7..628d3445 100644
--- a/src/badge/README.md
+++ b/src/badge/README.md
@@ -29,8 +29,16 @@ None
 
 ### Basic Badge
 
-[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-badge--default)
+**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-badge--default)
 
 ```html
 <vscode-badge>1</vscode-badge>
 ```
+
+**React Component**
+
+```jsx
+import {VSCodeBadge} from '@vscode/webview-ui-toolkit/react';
+
+<VSCodeBadge>1</VSCodeBadge>
+```
diff --git a/src/button/README.md b/src/button/README.md
index 9790ccf3..79563fc7 100644
--- a/src/button/README.md
+++ b/src/button/README.md
@@ -63,17 +63,25 @@ The `vscode-button` is a web component implementation of a [button element](http
 
 ### Basic Button
 
-[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-button--default)
+**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-button--default)
 
 ```html
 <vscode-button>Button Text</vscode-button>
 ```
 
+**React Component**
+
+```jsx
+import {VSCodeButton} from '@vscode/webview-ui-toolkit/react';
+
+<VSCodeButton>Button text</VSCodeButton>
+```
+
 ### Appearance Attribute
 
 There are a number of visual appearances that the `vscode-button` can have. The default appearance is `primary`.
 
-[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-button--default)
+**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-button--default)
 
 ```html
 <vscode-button appearance="primary">Button Text</vscode-button>
@@ -83,27 +91,55 @@ There are a number of visual appearances that the `vscode-button` can have. The
 </vscode-button>
 ```
 
+**React Component**
+
+```jsx
+import {VSCodeButton} from '@vscode/webview-ui-toolkit/react';
+
+<VSCodeButton appearance="primary">Button Text</VSCodeButton>
+<VSCodeButton appearance="secondary">Button Text</VSCodeButton>
+<VSCodeButton appearance="icon">
+	<span class="codicon codicon-check"></span>
+</VSCodeButton>
+```
+
 ### Autofocus Attribute
 
-[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-button--with-autofocus)
+**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-button--with-autofocus)
 
 ```html
 <vscode-button autofocus>Button Text</vscode-button>
 ```
 
+**React Component**
+
+```jsx
+import {VSCodeButton} from '@vscode/webview-ui-toolkit/react';
+
+<VSCodeButton autofocus>Button Text</VSCodeButton>
+```
+
 ### Disabled Attribute
 
-[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-button--with-disabled)
+**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-button--with-disabled)
 
 ```html
 <vscode-button disabled>Button Text</vscode-button>
 ```
 
+**React Component**
+
+```jsx
+import {VSCodeButton} from '@vscode/webview-ui-toolkit/react';
+
+<VSCodeButton disabled>Button Text</VSCodeButton>
+```
+
 ### Start Icon
 
 An icon can be added to the left of Button text by adding an element with the attribute `slot="start"`.
 
-[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-button--with-start-icon)
+**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-button--with-start-icon)
 
 ```html
 <!-- Note: Using Visual Studio Code Codicon Library -->
@@ -114,6 +150,17 @@ An icon can be added to the left of Button text by adding an element with the at
 </vscode-button>
 ```
 
+**React Component**
+
+```jsx
+import {VSCodeButton} from '@vscode/webview-ui-toolkit/react';
+
+<VSCodeButton>
+	Button Text
+	<span slot="start" class="codicon codicon-add"></span>
+</VSCodeButton>
+```
+
 ### Icon Only
 
 An icon can also fill the default slot of the Button component (instead of text) to create an icon button by using the `appearance="icon"` attribute and value.
@@ -126,7 +173,7 @@ An `aria-label` of "Icon Button" is automatically defined on all icon buttons so
 
 For example, if you're using an icon button to confirm a state change, adding an `aria-label` with the value "Confirm" or "Confirm Changes" would be appropriate.
 
-[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-button--with-icon-only)
+**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-button--with-icon-only)
 
 ```html
 <!-- Note: Using Visual Studio Code Codicon Library -->
@@ -135,3 +182,13 @@ For example, if you're using an icon button to confirm a state change, adding an
 	<span class="codicon codicon-check"></span>
 </vscode-button>
 ```
+
+**React Component**
+
+```jsx
+import {VSCodeButton} from '@vscode/webview-ui-toolkit/react';
+
+<VSCodeButton appearance="icon" aria-label="Confirm">
+	<span class="codicon codicon-check"></span>
+</VSCodeButton>
+```
diff --git a/src/checkbox/README.md b/src/checkbox/README.md
index dd4000c3..afeea857 100644
--- a/src/checkbox/README.md
+++ b/src/checkbox/README.md
@@ -47,63 +47,119 @@ The `vscode-checkbox` is a web component implementation of a [checkbox element](
 
 ### Basic Checkbox
 
-[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--default)
+**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--default)
 
 ```html
 <vscode-checkbox>Label</vscode-checkbox>
 ```
 
+**React Component**
+
+```jsx
+import {VSCodeCheckbox} from '@vscode/webview-ui-toolkit/react';
+
+<VSCodeCheckbox>Label</VSCodeCheckbox>
+```
+
 ### Autofocus Attribute
 
-[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--with-autofocus)
+**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--with-autofocus)
 
 ```html
 <vscode-checkbox autofocus>Label</vscode-checkbox>
 ```
 
+**React Component**
+
+```jsx
+import {VSCodeCheckbox} from '@vscode/webview-ui-toolkit/react';
+
+<VSCodeCheckbox autofocus>Label</VSCodeCheckbox>
+```
+
 ### Checked Attribute
 
-[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--with-checked)
+**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--with-checked)
 
 ```html
 <vscode-checkbox checked>Label</vscode-checkbox>
 ```
 
+**React Component**
+
+```jsx
+import {VSCodeCheckbox} from '@vscode/webview-ui-toolkit/react';
+
+<VSCodeCheckbox checked>Label</VSCodeCheckbox>
+```
+
 ### Disabled Attribute
 
-[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--with-disabled)
+**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--with-disabled)
 
 ```html
 <vscode-checkbox disabled>Label</vscode-checkbox>
 ```
 
+**React Component**
+
+```jsx
+import {VSCodeCheckbox} from '@vscode/webview-ui-toolkit/react';
+
+<VSCodeCheckbox disabled>Label</VSCodeCheckbox>
+```
+
 ### Readonly Attribute
 
-[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--with-read-only)
+**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--with-read-only)
 
 ```html
 <vscode-checkbox readonly>Label</vscode-checkbox>
 ```
 
+**React Component**
+
+```jsx
+import {VSCodeCheckbox} from '@vscode/webview-ui-toolkit/react';
+
+<VSCodeCheckbox readonly>Label</VSCodeCheckbox>
+```
+
 ### Required Attribute
 
 ```html
 <vscode-checkbox required>Label</vscode-checkbox>
 ```
 
+**React Component**
+
+```jsx
+import {VSCodeCheckbox} from '@vscode/webview-ui-toolkit/react';
+
+<VSCodeCheckbox required>Label</VSCodeCheckbox>
+```
+
 ### Value Attribute
 
-[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--with-value)
+**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--with-value)
 
 ```html
 <vscode-checkbox value="baz">Label</vscode-checkbox>
 ```
 
+**React Component**
+
+```jsx
+import {VSCodeCheckbox} from '@vscode/webview-ui-toolkit/react';
+
+<VSCodeCheckbox value="baz">Label</VSCodeCheckbox>
+```
+
 ### Indeterminate Property
 
 Checkboxes can also render an indeterminate state. This is achieved by getting a reference to a given checkbox using JavaScript and then setting the `indeterminate` property of the checkbox to `true`.
 
-[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--with-indeterminate)
+**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--with-indeterminate)
 
 ```javascript
 const checkbox = document.getElementById('basic-checkbox');
@@ -114,6 +170,14 @@ checkbox.indeterminate = true;
 <vscode-checkbox id="basic-checkbox">Label</vscode-checkbox>
 ```
 
+**React Component**
+
+```jsx
+import {VSCodeCheckbox} from '@vscode/webview-ui-toolkit/react';
+
+// TODO: Add example
+```
+
 ### Form Usage
 
 Here is an example of the Visual Studio Code Checkbox and its various attributes being used in a form.
@@ -131,3 +195,22 @@ Here is an example of the Visual Studio Code Checkbox and its various attributes
 	<vscode-button type="submit">Submit Button</vscode-button>
 </form>
 ```
+
+**React Component**
+
+```jsx
+import {VSCodeButton, VSCodeCheckbox} from '@vscode/webview-ui-toolkit/react';
+
+<VSCodeCheckbox value="baz">Label</VSCodeCheckbox>
+<form>
+	<fieldset>
+		<legend>Fieldset Legend</legend>
+		<VSCodeCheckbox checked required>Checked + Required</VSCodeCheckbox>
+		<VSCodeCheckbox checked readonly>Checked + Readonly</VSCodeCheckbox>
+		<VSCodeCheckbox autofocus>Autofocus</VSCodeCheckbox>
+		<VSCodeCheckbox disabled>Disabled</VSCodeCheckbox>
+		<VSCodeCheckbox value="baz">Value Set To "baz"</VSCodeCheckbox>
+	</fieldset>
+	<VSCodeButton type="submit">Submit Button</VSCodeButton>
+</form>
+```

From 645ba99165e327ca5b260eded40af993ba30ee50 Mon Sep 17 00:00:00 2001
From: Hawk Ticehurst <hawkticehurst@gmail.com>
Date: Tue, 15 Feb 2022 15:07:31 -0800
Subject: [PATCH 2/4] Undo React doc changes and update prettier config for doc
 files

---
 .prettierrc               |   2 +-
 src/badge/README.md       |  10 +--
 src/button/README.md      |  77 +++---------------
 src/checkbox/README.md    | 117 ++++-----------------------
 src/data-grid/README.md   | 124 ++++++++++++++--------------
 src/dropdown/README.md    |  38 ++++-----
 src/panels/README.md      | 166 ++++++++++++++++++--------------------
 src/radio-group/README.md |  48 +++++------
 src/text-area/README.md   |   8 +-
 src/text-field/README.md  |  16 ++--
 10 files changed, 219 insertions(+), 387 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index cf13ef07..a4f1ec35 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -11,7 +11,7 @@
 	"arrowParens": "avoid",
 	"overrides": [
 		{
-			"files": "docs/*.md",
+			"files": ["docs/*.md", "src/**/README.md"],
 			"options": {
 				"printWidth": 130,
 				"singleQuote": false,
diff --git a/src/badge/README.md b/src/badge/README.md
index 628d3445..eadd98c7 100644
--- a/src/badge/README.md
+++ b/src/badge/README.md
@@ -29,16 +29,8 @@ None
 
 ### Basic Badge
 
-**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-badge--default)
+[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-badge--default)
 
 ```html
 <vscode-badge>1</vscode-badge>
 ```
-
-**React Component**
-
-```jsx
-import {VSCodeBadge} from '@vscode/webview-ui-toolkit/react';
-
-<VSCodeBadge>1</VSCodeBadge>
-```
diff --git a/src/button/README.md b/src/button/README.md
index 79563fc7..605d868b 100644
--- a/src/button/README.md
+++ b/src/button/README.md
@@ -63,104 +63,57 @@ The `vscode-button` is a web component implementation of a [button element](http
 
 ### Basic Button
 
-**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-button--default)
+[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-button--default)
 
 ```html
 <vscode-button>Button Text</vscode-button>
 ```
 
-**React Component**
-
-```jsx
-import {VSCodeButton} from '@vscode/webview-ui-toolkit/react';
-
-<VSCodeButton>Button text</VSCodeButton>
-```
-
 ### Appearance Attribute
 
 There are a number of visual appearances that the `vscode-button` can have. The default appearance is `primary`.
 
-**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-button--default)
+[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-button--default)
 
 ```html
 <vscode-button appearance="primary">Button Text</vscode-button>
 <vscode-button appearance="secondary">Button Text</vscode-button>
 <vscode-button appearance="icon">
-	<span class="codicon codicon-check"></span>
+  <span class="codicon codicon-check"></span>
 </vscode-button>
 ```
 
-**React Component**
-
-```jsx
-import {VSCodeButton} from '@vscode/webview-ui-toolkit/react';
-
-<VSCodeButton appearance="primary">Button Text</VSCodeButton>
-<VSCodeButton appearance="secondary">Button Text</VSCodeButton>
-<VSCodeButton appearance="icon">
-	<span class="codicon codicon-check"></span>
-</VSCodeButton>
-```
-
 ### Autofocus Attribute
 
-**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-button--with-autofocus)
+[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-button--with-autofocus)
 
 ```html
 <vscode-button autofocus>Button Text</vscode-button>
 ```
 
-**React Component**
-
-```jsx
-import {VSCodeButton} from '@vscode/webview-ui-toolkit/react';
-
-<VSCodeButton autofocus>Button Text</VSCodeButton>
-```
-
 ### Disabled Attribute
 
-**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-button--with-disabled)
+[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-button--with-disabled)
 
 ```html
 <vscode-button disabled>Button Text</vscode-button>
 ```
 
-**React Component**
-
-```jsx
-import {VSCodeButton} from '@vscode/webview-ui-toolkit/react';
-
-<VSCodeButton disabled>Button Text</VSCodeButton>
-```
-
 ### Start Icon
 
 An icon can be added to the left of Button text by adding an element with the attribute `slot="start"`.
 
-**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-button--with-start-icon)
+[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-button--with-start-icon)
 
 ```html
 <!-- Note: Using Visual Studio Code Codicon Library -->
 
 <vscode-button>
-	Button Text
-	<span slot="start" class="codicon codicon-add"></span>
+  Button Text
+  <span slot="start" class="codicon codicon-add"></span>
 </vscode-button>
 ```
 
-**React Component**
-
-```jsx
-import {VSCodeButton} from '@vscode/webview-ui-toolkit/react';
-
-<VSCodeButton>
-	Button Text
-	<span slot="start" class="codicon codicon-add"></span>
-</VSCodeButton>
-```
-
 ### Icon Only
 
 An icon can also fill the default slot of the Button component (instead of text) to create an icon button by using the `appearance="icon"` attribute and value.
@@ -173,22 +126,12 @@ An `aria-label` of "Icon Button" is automatically defined on all icon buttons so
 
 For example, if you're using an icon button to confirm a state change, adding an `aria-label` with the value "Confirm" or "Confirm Changes" would be appropriate.
 
-**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-button--with-icon-only)
+[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-button--with-icon-only)
 
 ```html
 <!-- Note: Using Visual Studio Code Codicon Library -->
 
 <vscode-button appearance="icon" aria-label="Confirm">
-	<span class="codicon codicon-check"></span>
+  <span class="codicon codicon-check"></span>
 </vscode-button>
 ```
-
-**React Component**
-
-```jsx
-import {VSCodeButton} from '@vscode/webview-ui-toolkit/react';
-
-<VSCodeButton appearance="icon" aria-label="Confirm">
-	<span class="codicon codicon-check"></span>
-</VSCodeButton>
-```
diff --git a/src/checkbox/README.md b/src/checkbox/README.md
index afeea857..3e24bc31 100644
--- a/src/checkbox/README.md
+++ b/src/checkbox/README.md
@@ -47,122 +47,66 @@ The `vscode-checkbox` is a web component implementation of a [checkbox element](
 
 ### Basic Checkbox
 
-**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--default)
+[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--default)
 
 ```html
 <vscode-checkbox>Label</vscode-checkbox>
 ```
 
-**React Component**
-
-```jsx
-import {VSCodeCheckbox} from '@vscode/webview-ui-toolkit/react';
-
-<VSCodeCheckbox>Label</VSCodeCheckbox>
-```
-
 ### Autofocus Attribute
 
-**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--with-autofocus)
+[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--with-autofocus)
 
 ```html
 <vscode-checkbox autofocus>Label</vscode-checkbox>
 ```
 
-**React Component**
-
-```jsx
-import {VSCodeCheckbox} from '@vscode/webview-ui-toolkit/react';
-
-<VSCodeCheckbox autofocus>Label</VSCodeCheckbox>
-```
-
 ### Checked Attribute
 
-**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--with-checked)
+[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--with-checked)
 
 ```html
 <vscode-checkbox checked>Label</vscode-checkbox>
 ```
 
-**React Component**
-
-```jsx
-import {VSCodeCheckbox} from '@vscode/webview-ui-toolkit/react';
-
-<VSCodeCheckbox checked>Label</VSCodeCheckbox>
-```
-
 ### Disabled Attribute
 
-**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--with-disabled)
+[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--with-disabled)
 
 ```html
 <vscode-checkbox disabled>Label</vscode-checkbox>
 ```
 
-**React Component**
-
-```jsx
-import {VSCodeCheckbox} from '@vscode/webview-ui-toolkit/react';
-
-<VSCodeCheckbox disabled>Label</VSCodeCheckbox>
-```
-
 ### Readonly Attribute
 
-**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--with-read-only)
+[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--with-read-only)
 
 ```html
 <vscode-checkbox readonly>Label</vscode-checkbox>
 ```
 
-**React Component**
-
-```jsx
-import {VSCodeCheckbox} from '@vscode/webview-ui-toolkit/react';
-
-<VSCodeCheckbox readonly>Label</VSCodeCheckbox>
-```
-
 ### Required Attribute
 
 ```html
 <vscode-checkbox required>Label</vscode-checkbox>
 ```
 
-**React Component**
-
-```jsx
-import {VSCodeCheckbox} from '@vscode/webview-ui-toolkit/react';
-
-<VSCodeCheckbox required>Label</VSCodeCheckbox>
-```
-
 ### Value Attribute
 
-**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--with-value)
+[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--with-value)
 
 ```html
 <vscode-checkbox value="baz">Label</vscode-checkbox>
 ```
 
-**React Component**
-
-```jsx
-import {VSCodeCheckbox} from '@vscode/webview-ui-toolkit/react';
-
-<VSCodeCheckbox value="baz">Label</VSCodeCheckbox>
-```
-
 ### Indeterminate Property
 
 Checkboxes can also render an indeterminate state. This is achieved by getting a reference to a given checkbox using JavaScript and then setting the `indeterminate` property of the checkbox to `true`.
 
-**Web Component:** [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--with-indeterminate)
+[Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-checkbox--with-indeterminate)
 
 ```javascript
-const checkbox = document.getElementById('basic-checkbox');
+const checkbox = document.getElementById("basic-checkbox");
 checkbox.indeterminate = true;
 ```
 
@@ -170,47 +114,20 @@ checkbox.indeterminate = true;
 <vscode-checkbox id="basic-checkbox">Label</vscode-checkbox>
 ```
 
-**React Component**
-
-```jsx
-import {VSCodeCheckbox} from '@vscode/webview-ui-toolkit/react';
-
-// TODO: Add example
-```
-
 ### Form Usage
 
 Here is an example of the Visual Studio Code Checkbox and its various attributes being used in a form.
 
 ```html
 <form>
-	<fieldset>
-		<legend>Fieldset Legend</legend>
-		<vscode-checkbox checked required>Checked + Required</vscode-checkbox>
-		<vscode-checkbox checked readonly>Checked + Readonly</vscode-checkbox>
-		<vscode-checkbox autofocus>Autofocus</vscode-checkbox>
-		<vscode-checkbox disabled>Disabled</vscode-checkbox>
-		<vscode-checkbox value="baz">Value Set To "baz"</vscode-checkbox>
-	</fieldset>
-	<vscode-button type="submit">Submit Button</vscode-button>
-</form>
-```
-
-**React Component**
-
-```jsx
-import {VSCodeButton, VSCodeCheckbox} from '@vscode/webview-ui-toolkit/react';
-
-<VSCodeCheckbox value="baz">Label</VSCodeCheckbox>
-<form>
-	<fieldset>
-		<legend>Fieldset Legend</legend>
-		<VSCodeCheckbox checked required>Checked + Required</VSCodeCheckbox>
-		<VSCodeCheckbox checked readonly>Checked + Readonly</VSCodeCheckbox>
-		<VSCodeCheckbox autofocus>Autofocus</VSCodeCheckbox>
-		<VSCodeCheckbox disabled>Disabled</VSCodeCheckbox>
-		<VSCodeCheckbox value="baz">Value Set To "baz"</VSCodeCheckbox>
-	</fieldset>
-	<VSCodeButton type="submit">Submit Button</VSCodeButton>
+  <fieldset>
+    <legend>Fieldset Legend</legend>
+    <vscode-checkbox checked required>Checked + Required</vscode-checkbox>
+    <vscode-checkbox checked readonly>Checked + Readonly</vscode-checkbox>
+    <vscode-checkbox autofocus>Autofocus</vscode-checkbox>
+    <vscode-checkbox disabled>Disabled</vscode-checkbox>
+    <vscode-checkbox value="baz">Value Set To "baz"</vscode-checkbox>
+  </fieldset>
+  <vscode-button type="submit">Submit Button</vscode-button>
 </form>
 ```
diff --git a/src/data-grid/README.md b/src/data-grid/README.md
index 4bf9641a..e99fad3e 100644
--- a/src/data-grid/README.md
+++ b/src/data-grid/README.md
@@ -6,9 +6,9 @@ The `vscode-data-grid` enables developers to display data in a tabular layout.
 
 The data grid is created using three components that work together:
 
--   `<vscode-data-grid>`: The top level container element.
--   `<vscode-data-grid-row>`: Displays a single row of data associated with a single record or a header row.
--   `<vscode-data-grid-cell>`: Displays a single cell of data within a row.
+- `<vscode-data-grid>`: The top level container element.
+- `<vscode-data-grid-row>`: Displays a single row of data associated with a single record or a header row.
+- `<vscode-data-grid-cell>`: Displays a single cell of data within a row.
 
 ## Usage
 
@@ -70,10 +70,10 @@ Note that when using this method of data grid creation, the header row is automa
 ```javascript
 // A row is automatically generated for each object in the rowsData array.
 // A column is automatically generated for each key in the first object in the rowsData array.
-document.getElementById('basic-grid').rowsData = [
-	{Header1: 'Cell Data', Header2: 'Cell Data', Header3: 'Cell Data', Header4: 'Cell Data'},
-	{Header1: 'Cell Data', Header2: 'Cell Data', Header3: 'Cell Data', Header4: 'Cell Data'},
-	{Header1: 'Cell Data', Header2: 'Cell Data', Header3: 'Cell Data', Header4: 'Cell Data'},
+document.getElementById("basic-grid").rowsData = [
+  { Header1: "Cell Data", Header2: "Cell Data", Header3: "Cell Data", Header4: "Cell Data" },
+  { Header1: "Cell Data", Header2: "Cell Data", Header3: "Cell Data", Header4: "Cell Data" },
+  { Header1: "Cell Data", Header2: "Cell Data", Header3: "Cell Data", Header4: "Cell Data" },
 ];
 ```
 
@@ -83,30 +83,30 @@ Note that when using this method of data grid creation, the `generate-header` at
 
 ```html
 <vscode-data-grid generate-header="none" aria-label="Basic">
-	<vscode-data-grid-row row-type="header">
-		<vscode-data-grid-cell cell-type="columnheader" grid-column="1">Header 1</vscode-data-grid-cell>
-		<vscode-data-grid-cell cell-type="columnheader" grid-column="2">Header 2</vscode-data-grid-cell>
-		<vscode-data-grid-cell cell-type="columnheader" grid-column="3">Header 3</vscode-data-grid-cell>
-		<vscode-data-grid-cell cell-type="columnheader" grid-column="3">Header 4</vscode-data-grid-cell>
-	</vscode-data-grid-row>
-	<vscode-data-grid-row>
-		<vscode-data-grid-cell grid-column="1">Cell Data</vscode-data-grid-cell>
-		<vscode-data-grid-cell grid-column="2">Cell Data</vscode-data-grid-cell>
-		<vscode-data-grid-cell grid-column="3">Cell Data</vscode-data-grid-cell>
-		<vscode-data-grid-cell grid-column="4">Cell Data</vscode-data-grid-cell>
-	</vscode-data-grid-row>
-	<vscode-data-grid-row>
-		<vscode-data-grid-cell grid-column="1">Cell Data</vscode-data-grid-cell>
-		<vscode-data-grid-cell grid-column="2">Cell Data</vscode-data-grid-cell>
-		<vscode-data-grid-cell grid-column="3">Cell Data</vscode-data-grid-cell>
-		<vscode-data-grid-cell grid-column="4">Cell Data</vscode-data-grid-cell>
-	</vscode-data-grid-row>
-	<vscode-data-grid-row>
-		<vscode-data-grid-cell grid-column="1">Cell Data</vscode-data-grid-cell>
-		<vscode-data-grid-cell grid-column="2">Cell Data</vscode-data-grid-cell>
-		<vscode-data-grid-cell grid-column="3">Cell Data</vscode-data-grid-cell>
-		<vscode-data-grid-cell grid-column="4">Cell Data</vscode-data-grid-cell>
-	</vscode-data-grid-row>
+  <vscode-data-grid-row row-type="header">
+    <vscode-data-grid-cell cell-type="columnheader" grid-column="1">Header 1</vscode-data-grid-cell>
+    <vscode-data-grid-cell cell-type="columnheader" grid-column="2">Header 2</vscode-data-grid-cell>
+    <vscode-data-grid-cell cell-type="columnheader" grid-column="3">Header 3</vscode-data-grid-cell>
+    <vscode-data-grid-cell cell-type="columnheader" grid-column="3">Header 4</vscode-data-grid-cell>
+  </vscode-data-grid-row>
+  <vscode-data-grid-row>
+    <vscode-data-grid-cell grid-column="1">Cell Data</vscode-data-grid-cell>
+    <vscode-data-grid-cell grid-column="2">Cell Data</vscode-data-grid-cell>
+    <vscode-data-grid-cell grid-column="3">Cell Data</vscode-data-grid-cell>
+    <vscode-data-grid-cell grid-column="4">Cell Data</vscode-data-grid-cell>
+  </vscode-data-grid-row>
+  <vscode-data-grid-row>
+    <vscode-data-grid-cell grid-column="1">Cell Data</vscode-data-grid-cell>
+    <vscode-data-grid-cell grid-column="2">Cell Data</vscode-data-grid-cell>
+    <vscode-data-grid-cell grid-column="3">Cell Data</vscode-data-grid-cell>
+    <vscode-data-grid-cell grid-column="4">Cell Data</vscode-data-grid-cell>
+  </vscode-data-grid-row>
+  <vscode-data-grid-row>
+    <vscode-data-grid-cell grid-column="1">Cell Data</vscode-data-grid-cell>
+    <vscode-data-grid-cell grid-column="2">Cell Data</vscode-data-grid-cell>
+    <vscode-data-grid-cell grid-column="3">Cell Data</vscode-data-grid-cell>
+    <vscode-data-grid-cell grid-column="4">Cell Data</vscode-data-grid-cell>
+  </vscode-data-grid-row>
 </vscode-data-grid>
 ```
 
@@ -116,9 +116,9 @@ The `generate-header` attribute is applied to the `<vscode-data-grid>` component
 
 There are three values that can be passed to the attribute:
 
--   `default`: A default header row will be automatically generated. This is the default value if the `generate-header` is not defined on the component.
--   `sticky`: A sticky header row will be automatically generated.
--   `none`: No header row will be generated.
+- `default`: A default header row will be automatically generated. This is the default value if the `generate-header` is not defined on the component.
+- `sticky`: A sticky header row will be automatically generated.
+- `none`: No header row will be generated.
 
 **Important Note**
 
@@ -133,10 +133,10 @@ As shown above in the Basic Usage example, if the `vscode-data-grid` is defined
 ```
 
 ```javascript
-document.getElementById('basic-grid').rowsData = [
-	{Header1: 'Cell Data', Header2: 'Cell Data', Header3: 'Cell Data', Header4: 'Cell Data'},
-	{Header1: 'Cell Data', Header2: 'Cell Data', Header3: 'Cell Data', Header4: 'Cell Data'},
-	{Header1: 'Cell Data', Header2: 'Cell Data', Header3: 'Cell Data', Header4: 'Cell Data'},
+document.getElementById("basic-grid").rowsData = [
+  { Header1: "Cell Data", Header2: "Cell Data", Header3: "Cell Data", Header4: "Cell Data" },
+  { Header1: "Cell Data", Header2: "Cell Data", Header3: "Cell Data", Header4: "Cell Data" },
+  { Header1: "Cell Data", Header2: "Cell Data", Header3: "Cell Data", Header4: "Cell Data" },
 ];
 ```
 
@@ -160,17 +160,17 @@ When defined on a `<vscode-data-grid-row>` component, the value of the attribute
 
 ```html
 <vscode-data-grid
-	id="basic-grid"
-	grid-template-columns="100px 10vw 3fr 30%"
-	aria-label="Custom Column Widths"
+  id="basic-grid"
+  grid-template-columns="100px 10vw 3fr 30%"
+  aria-label="Custom Column Widths"
 ></vscode-data-grid>
 ```
 
 ```javascript
-document.getElementById('basic-grid').rowsData = [
-	{Header1: 'Cell Data', Header2: 'Cell Data', Header3: 'Cell Data', Header4: 'Cell Data'},
-	{Header1: 'Cell Data', Header2: 'Cell Data', Header3: 'Cell Data', Header4: 'Cell Data'},
-	{Header1: 'Cell Data', Header2: 'Cell Data', Header3: 'Cell Data', Header4: 'Cell Data'},
+document.getElementById("basic-grid").rowsData = [
+  { Header1: "Cell Data", Header2: "Cell Data", Header3: "Cell Data", Header4: "Cell Data" },
+  { Header1: "Cell Data", Header2: "Cell Data", Header3: "Cell Data", Header4: "Cell Data" },
+  { Header1: "Cell Data", Header2: "Cell Data", Header3: "Cell Data", Header4: "Cell Data" },
 ];
 ```
 
@@ -178,9 +178,9 @@ document.getElementById('basic-grid').rowsData = [
 
 The `row-type` attribute is used to define what type of row should be rendered. There are three values that can be passed to the attribute:
 
--   `default`: A default row will be rendered. This is the default value if the `row-type` is not defined on the component.
--   `header`: A header row will be rendered.
--   `sticky`: A sticky header row will be rendered.
+- `default`: A default row will be rendered. This is the default value if the `row-type` is not defined on the component.
+- `header`: A header row will be rendered.
+- `sticky`: A sticky header row will be rendered.
 
 **Usage Note**
 
@@ -196,8 +196,8 @@ Use this attribute when defining a data grid using only HTML. This attribute is
 
 The `cell-type` attribute is used to define what type of cell should be rendered. There are two values that can be passed to the attribute:
 
--   `default`: A default cell will be rendered. This is the default value if the `cell-type` is not defined on the component.
--   `columnheader`: A column header cell will be rendered.
+- `default`: A default cell will be rendered. This is the default value if the `cell-type` is not defined on the component.
+- `columnheader`: A column header cell will be rendered.
 
 **Usage Note**
 
@@ -218,10 +218,10 @@ Use this attribute when defining a data grid using only HTML. This attribute is
 
 ```html
 <vscode-data-grid-row>
-	<vscode-data-grid-cell grid-column="1">Cell Data</vscode-data-grid-cell>
-	<vscode-data-grid-cell grid-column="2">Cell Data</vscode-data-grid-cell>
-	<vscode-data-grid-cell grid-column="3">Cell Data</vscode-data-grid-cell>
-	<vscode-data-grid-cell grid-column="4">Cell Data</vscode-data-grid-cell>
+  <vscode-data-grid-cell grid-column="1">Cell Data</vscode-data-grid-cell>
+  <vscode-data-grid-cell grid-column="2">Cell Data</vscode-data-grid-cell>
+  <vscode-data-grid-cell grid-column="3">Cell Data</vscode-data-grid-cell>
+  <vscode-data-grid-cell grid-column="4">Cell Data</vscode-data-grid-cell>
 </vscode-data-grid-row>
 ```
 
@@ -248,20 +248,20 @@ This is where you define the custom title for a given column.
 ```
 
 ```javascript
-const basicGrid = document.getElementById('basic-grid');
+const basicGrid = document.getElementById("basic-grid");
 
 // Populate grid with data
 basicGrid.rowsData = [
-	{ColumnKey1: 'Cell Data', ColumnKey2: 'Cell Data', ColumnKey3: 'Cell Data', ColumnKey4: 'Cell Data'},
-	{ColumnKey1: 'Cell Data', ColumnKey2: 'Cell Data', ColumnKey3: 'Cell Data', ColumnKey4: 'Cell Data'},
-	{ColumnKey1: 'Cell Data', ColumnKey2: 'Cell Data', ColumnKey3: 'Cell Data', ColumnKey4: 'Cell Data'},
+  { ColumnKey1: "Cell Data", ColumnKey2: "Cell Data", ColumnKey3: "Cell Data", ColumnKey4: "Cell Data" },
+  { ColumnKey1: "Cell Data", ColumnKey2: "Cell Data", ColumnKey3: "Cell Data", ColumnKey4: "Cell Data" },
+  { ColumnKey1: "Cell Data", ColumnKey2: "Cell Data", ColumnKey3: "Cell Data", ColumnKey4: "Cell Data" },
 ];
 
 // Add custom column titles to grid
 basicGrid.columnDefinitions = [
-	{columnDataKey: 'ColumnKey1', title: 'A Custom Header Title'},
-	{columnDataKey: 'ColumnKey2', title: 'Another Custom Title'},
-	{columnDataKey: 'ColumnKey3', title: 'Title Is Custom'},
-	{columnDataKey: 'ColumnKey4', title: 'Custom Title'},
+  { columnDataKey: "ColumnKey1", title: "A Custom Header Title" },
+  { columnDataKey: "ColumnKey2", title: "Another Custom Title" },
+  { columnDataKey: "ColumnKey3", title: "Title Is Custom" },
+  { columnDataKey: "ColumnKey4", title: "Custom Title" },
 ];
 ```
diff --git a/src/dropdown/README.md b/src/dropdown/README.md
index 9445385e..ad9cc492 100644
--- a/src/dropdown/README.md
+++ b/src/dropdown/README.md
@@ -39,9 +39,9 @@ The `vscode-dropdown` component must be used with the `vscode-option` component.
 
 ```html
 <vscode-dropdown>
-	<vscode-option>Option Label #1</vscode-option>
-	<vscode-option>Option Label #2</vscode-option>
-	<vscode-option>Option Label #3</vscode-option>
+  <vscode-option>Option Label #1</vscode-option>
+  <vscode-option>Option Label #2</vscode-option>
+  <vscode-option>Option Label #3</vscode-option>
 </vscode-dropdown>
 ```
 
@@ -51,9 +51,9 @@ The `vscode-dropdown` component must be used with the `vscode-option` component.
 
 ```html
 <vscode-dropdown disabled>
-	<vscode-option>Option Label #1</vscode-option>
-	<vscode-option>Option Label #2</vscode-option>
-	<vscode-option>Option Label #3</vscode-option>
+  <vscode-option>Option Label #1</vscode-option>
+  <vscode-option>Option Label #2</vscode-option>
+  <vscode-option>Option Label #3</vscode-option>
 </vscode-dropdown>
 ```
 
@@ -63,9 +63,9 @@ The `vscode-dropdown` component must be used with the `vscode-option` component.
 
 ```html
 <vscode-dropdown open>
-	<vscode-option>Option Label #1</vscode-option>
-	<vscode-option>Option Label #2</vscode-option>
-	<vscode-option>Option Label #3</vscode-option>
+  <vscode-option>Option Label #1</vscode-option>
+  <vscode-option>Option Label #2</vscode-option>
+  <vscode-option>Option Label #3</vscode-option>
 </vscode-dropdown>
 ```
 
@@ -75,17 +75,17 @@ The `vscode-dropdown` component must be used with the `vscode-option` component.
 
 ```html
 <vscode-dropdown position="above">
-	<vscode-option>Option Label #1</vscode-option>
-	<vscode-option>Option Label #2</vscode-option>
-	<vscode-option>Option Label #3</vscode-option>
+  <vscode-option>Option Label #1</vscode-option>
+  <vscode-option>Option Label #2</vscode-option>
+  <vscode-option>Option Label #3</vscode-option>
 </vscode-dropdown>
 ```
 
 ```html
 <vscode-dropdown position="below">
-	<vscode-option>Option Label #1</vscode-option>
-	<vscode-option>Option Label #2</vscode-option>
-	<vscode-option>Option Label #3</vscode-option>
+  <vscode-option>Option Label #1</vscode-option>
+  <vscode-option>Option Label #2</vscode-option>
+  <vscode-option>Option Label #3</vscode-option>
 </vscode-dropdown>
 ```
 
@@ -99,9 +99,9 @@ The default indicator is a downward facing chevron, but it can customized by add
 <!-- Note: Using Visual Studio Code Codicon Library -->
 
 <vscode-dropdown>
-	<span slot="indicator" class="codicon codicon-settings"></span>
-	<vscode-option>Option Label #1</vscode-option>
-	<vscode-option>Option Label #2</vscode-option>
-	<vscode-option>Option Label #3</vscode-option>
+  <span slot="indicator" class="codicon codicon-settings"></span>
+  <vscode-option>Option Label #1</vscode-option>
+  <vscode-option>Option Label #2</vscode-option>
+  <vscode-option>Option Label #3</vscode-option>
 </vscode-dropdown>
 ```
diff --git a/src/panels/README.md b/src/panels/README.md
index dc4bb0ea..bf419eb7 100644
--- a/src/panels/README.md
+++ b/src/panels/README.md
@@ -6,9 +6,9 @@ The `vscode-panels` component is a web component implementation of a [tab](https
 
 The component is created using three components that work together to interchangably display different content:
 
--   `<vscode-panels>`: The top level container element.
--   `<vscode-panel-tab>`: Renders the panel tab that will be associated with a panel view.
--   `<vscode-panel-view>`: The container element that will hold content associated with a given tab.
+- `<vscode-panels>`: The top level container element.
+- `<vscode-panel-tab>`: Renders the panel tab that will be associated with a panel view.
+- `<vscode-panel-view>`: The container element that will hold content associated with a given tab.
 
 ## Usage
 
@@ -59,7 +59,7 @@ To completely opt out of `<vscode-panel-view>` components rendering as flexbox c
 
 ```css
 vscode-panel-view {
-	display: block;
+  display: block;
 }
 ```
 
@@ -67,7 +67,7 @@ To make the content flow vertically:
 
 ```css
 vscode-panel-view {
-	flex-direction: column;
+  flex-direction: column;
 }
 ```
 
@@ -75,8 +75,8 @@ To center the content within the container:
 
 ```css
 vscode-panel-view {
-	justify-content: center;
-	align-items: center;
+  justify-content: center;
+  align-items: center;
 }
 ```
 
@@ -84,18 +84,18 @@ To apply styling to one `<vscode-panel-view>` component:
 
 ```html
 <vscode-panels>
-	...panel tabs...
-	<vscode-panel-view id="view-1">Problems content.</vscode-panel-view>
-	<vscode-panel-view id="view-2">Output content.</vscode-panel-view>
-	<vscode-panel-view id="view-3">Debug content.</vscode-panel-view>
-	<vscode-panel-view id="view-4">Terminal content.</vscode-panel-view>
+  ...panel tabs...
+  <vscode-panel-view id="view-1">Problems content.</vscode-panel-view>
+  <vscode-panel-view id="view-2">Output content.</vscode-panel-view>
+  <vscode-panel-view id="view-3">Debug content.</vscode-panel-view>
+  <vscode-panel-view id="view-4">Terminal content.</vscode-panel-view>
 </vscode-panels>
 ```
 
 ```css
 #view-1 {
-	justify-content: center;
-	align-items: center;
+  justify-content: center;
+  align-items: center;
 }
 ```
 
@@ -103,24 +103,18 @@ To apply styling to multiple `<vscode-panel-view>` components (but not all):
 
 ```html
 <vscode-panels>
-	...panel tabs...
-	<vscode-panel-view id="view-1"> Problems content. </vscode-panel-view>
-	<vscode-panel-view id="view-2" class="custom-styles">
-		Output content.
-	</vscode-panel-view>
-	<vscode-panel-view id="view-3" class="custom-styles">
-		Debug content.
-	</vscode-panel-view>
-	<vscode-panel-view id="view-4" class="custom-styles">
-		Terminal content.
-	</vscode-panel-view>
+  ...panel tabs...
+  <vscode-panel-view id="view-1"> Problems content. </vscode-panel-view>
+  <vscode-panel-view id="view-2" class="custom-styles"> Output content. </vscode-panel-view>
+  <vscode-panel-view id="view-3" class="custom-styles"> Debug content. </vscode-panel-view>
+  <vscode-panel-view id="view-4" class="custom-styles"> Terminal content. </vscode-panel-view>
 </vscode-panels>
 ```
 
 ```css
 .custom-styles {
-	justify-content: center;
-	align-items: center;
+  justify-content: center;
+  align-items: center;
 }
 ```
 
@@ -136,14 +130,14 @@ Also, the unique ID can follow any format or convention as long as each componen
 
 ```html
 <vscode-panels>
-	<vscode-panel-tab id="tab-1">PROBLEMS</vscode-panel-tab>
-	<vscode-panel-tab id="tab-2">OUTPUT</vscode-panel-tab>
-	<vscode-panel-tab id="tab-3">DEBUG CONSOLE</vscode-panel-tab>
-	<vscode-panel-tab id="tab-4">TERMINAL</vscode-panel-tab>
-	<vscode-panel-view id="view-1">Problems content.</vscode-panel-view>
-	<vscode-panel-view id="view-2">Output content.</vscode-panel-view>
-	<vscode-panel-view id="view-3">Debug content.</vscode-panel-view>
-	<vscode-panel-view id="view-4">Terminal content.</vscode-panel-view>
+  <vscode-panel-tab id="tab-1">PROBLEMS</vscode-panel-tab>
+  <vscode-panel-tab id="tab-2">OUTPUT</vscode-panel-tab>
+  <vscode-panel-tab id="tab-3">DEBUG CONSOLE</vscode-panel-tab>
+  <vscode-panel-tab id="tab-4">TERMINAL</vscode-panel-tab>
+  <vscode-panel-view id="view-1">Problems content.</vscode-panel-view>
+  <vscode-panel-view id="view-2">Output content.</vscode-panel-view>
+  <vscode-panel-view id="view-3">Debug content.</vscode-panel-view>
+  <vscode-panel-view id="view-4">Terminal content.</vscode-panel-view>
 </vscode-panels>
 ```
 
@@ -153,14 +147,14 @@ Also, the unique ID can follow any format or convention as long as each componen
 
 ```html
 <vscode-panels activeid="tab-4">
-	<vscode-panel-tab id="tab-1">PROBLEMS</vscode-panel-tab>
-	<vscode-panel-tab id="tab-2">OUTPUT</vscode-panel-tab>
-	<vscode-panel-tab id="tab-3">DEBUG CONSOLE</vscode-panel-tab>
-	<vscode-panel-tab id="tab-4">TERMINAL</vscode-panel-tab>
-	<vscode-panel-view id="view-1">Problems content.</vscode-panel-view>
-	<vscode-panel-view id="view-2">Output content.</vscode-panel-view>
-	<vscode-panel-view id="view-3">Debug content.</vscode-panel-view>
-	<vscode-panel-view id="view-4">Terminal content.</vscode-panel-view>
+  <vscode-panel-tab id="tab-1">PROBLEMS</vscode-panel-tab>
+  <vscode-panel-tab id="tab-2">OUTPUT</vscode-panel-tab>
+  <vscode-panel-tab id="tab-3">DEBUG CONSOLE</vscode-panel-tab>
+  <vscode-panel-tab id="tab-4">TERMINAL</vscode-panel-tab>
+  <vscode-panel-view id="view-1">Problems content.</vscode-panel-view>
+  <vscode-panel-view id="view-2">Output content.</vscode-panel-view>
+  <vscode-panel-view id="view-3">Debug content.</vscode-panel-view>
+  <vscode-panel-view id="view-4">Terminal content.</vscode-panel-view>
 </vscode-panels>
 ```
 
@@ -172,26 +166,26 @@ In addition to text, a Visual Studio Code Badge can be used in a panel tab to hi
 
 ```html
 <vscode-panels>
-	<vscode-panel-tab id="tab-1">
-		PROBLEMS
-		<vscode-badge appearance="secondary">1</vscode-badge>
-	</vscode-panel-tab>
-	<vscode-panel-tab id="tab-2">
-		OUTPUT
-		<vscode-badge appearance="secondary">1</vscode-badge>
-	</vscode-panel-tab>
-	<vscode-panel-tab id="tab-3">
-		DEBUG CONSOLE
-		<vscode-badge appearance="secondary">1</vscode-badge>
-	</vscode-panel-tab>
-	<vscode-panel-tab id="tab-4">
-		TERMINAL
-		<vscode-badge appearance="secondary">1</vscode-badge>
-	</vscode-panel-tab>
-	<vscode-panel-view id="view-1"> Problems Content </vscode-panel-view>
-	<vscode-panel-view id="view-2"> Output Content </vscode-panel-view>
-	<vscode-panel-view id="view-3"> Debug Console Content </vscode-panel-view>
-	<vscode-panel-view id="view-4"> Terminal Content </vscode-panel-view>
+  <vscode-panel-tab id="tab-1">
+    PROBLEMS
+    <vscode-badge appearance="secondary">1</vscode-badge>
+  </vscode-panel-tab>
+  <vscode-panel-tab id="tab-2">
+    OUTPUT
+    <vscode-badge appearance="secondary">1</vscode-badge>
+  </vscode-panel-tab>
+  <vscode-panel-tab id="tab-3">
+    DEBUG CONSOLE
+    <vscode-badge appearance="secondary">1</vscode-badge>
+  </vscode-panel-tab>
+  <vscode-panel-tab id="tab-4">
+    TERMINAL
+    <vscode-badge appearance="secondary">1</vscode-badge>
+  </vscode-panel-tab>
+  <vscode-panel-view id="view-1"> Problems Content </vscode-panel-view>
+  <vscode-panel-view id="view-2"> Output Content </vscode-panel-view>
+  <vscode-panel-view id="view-3"> Debug Console Content </vscode-panel-view>
+  <vscode-panel-view id="view-4"> Terminal Content </vscode-panel-view>
 </vscode-panels>
 ```
 
@@ -203,31 +197,25 @@ A `vscode-panel-view` can also contain any valid HTML.
 
 ```html
 <vscode-panels>
-	<vscode-panel-tab id="tab-1">PROBLEMS</vscode-panel-tab>
-	<vscode-panel-tab id="tab-2">OUTPUT</vscode-panel-tab>
-	<vscode-panel-tab id="tab-3">DEBUG CONSOLE</vscode-panel-tab>
-	<vscode-panel-tab id="tab-4">TERMINAL</vscode-panel-tab>
-	<vscode-panel-view id="view-1">
-		<section style="display: flex; flex-direction: column; width: 100%;">
-			<h1 style="margin-top: 0;">Smoothie Maker 🍓</h1>
-			<vscode-checkbox>Apples</vscode-checkbox>
-			<vscode-checkbox>Oranges</vscode-checkbox>
-			<vscode-checkbox>Grapes</vscode-checkbox>
-			<vscode-checkbox disabled>Blueberries</vscode-checkbox>
-			<vscode-checkbox>Pineapple</vscode-checkbox>
-			<vscode-checkbox>Mango</vscode-checkbox>
-			<vscode-checkbox>Lemon</vscode-checkbox>
-			<vscode-button>Make Smoothie!</vscode-button>
-		</section>
-	</vscode-panel-view>
-	<vscode-panel-view id="view-2">
-		... Insert Complex Content ...
-	</vscode-panel-view>
-	<vscode-panel-view id="view-3">
-		... Insert Complex Content ...
-	</vscode-panel-view>
-	<vscode-panel-view id="view-4">
-		... Insert Complex Content ...
-	</vscode-panel-view>
+  <vscode-panel-tab id="tab-1">PROBLEMS</vscode-panel-tab>
+  <vscode-panel-tab id="tab-2">OUTPUT</vscode-panel-tab>
+  <vscode-panel-tab id="tab-3">DEBUG CONSOLE</vscode-panel-tab>
+  <vscode-panel-tab id="tab-4">TERMINAL</vscode-panel-tab>
+  <vscode-panel-view id="view-1">
+    <section style="display: flex; flex-direction: column; width: 100%;">
+      <h1 style="margin-top: 0;">Smoothie Maker 🍓</h1>
+      <vscode-checkbox>Apples</vscode-checkbox>
+      <vscode-checkbox>Oranges</vscode-checkbox>
+      <vscode-checkbox>Grapes</vscode-checkbox>
+      <vscode-checkbox disabled>Blueberries</vscode-checkbox>
+      <vscode-checkbox>Pineapple</vscode-checkbox>
+      <vscode-checkbox>Mango</vscode-checkbox>
+      <vscode-checkbox>Lemon</vscode-checkbox>
+      <vscode-button>Make Smoothie!</vscode-button>
+    </section>
+  </vscode-panel-view>
+  <vscode-panel-view id="view-2"> ... Insert Complex Content ... </vscode-panel-view>
+  <vscode-panel-view id="view-3"> ... Insert Complex Content ... </vscode-panel-view>
+  <vscode-panel-view id="view-4"> ... Insert Complex Content ... </vscode-panel-view>
 </vscode-panels>
 ```
diff --git a/src/radio-group/README.md b/src/radio-group/README.md
index dd0c2aa8..9f4ed766 100644
--- a/src/radio-group/README.md
+++ b/src/radio-group/README.md
@@ -40,10 +40,10 @@ While any DOM content is permissible as a child of the `vscode-radio-group`, onl
 
 ```html
 <vscode-radio-group>
-	<label slot="label">Radio Group Label</label>
-	<vscode-radio>Radio Label</vscode-radio>
-	<vscode-radio>Radio Label</vscode-radio>
-	<vscode-radio>Radio Label</vscode-radio>
+  <label slot="label">Radio Group Label</label>
+  <vscode-radio>Radio Label</vscode-radio>
+  <vscode-radio>Radio Label</vscode-radio>
+  <vscode-radio>Radio Label</vscode-radio>
 </vscode-radio-group>
 ```
 
@@ -53,10 +53,10 @@ While any DOM content is permissible as a child of the `vscode-radio-group`, onl
 
 ```html
 <vscode-radio-group disabled>
-	<label slot="label">Radio Group Label</label>
-	<vscode-radio>Radio Label</vscode-radio>
-	<vscode-radio>Radio Label</vscode-radio>
-	<vscode-radio>Radio Label</vscode-radio>
+  <label slot="label">Radio Group Label</label>
+  <vscode-radio>Radio Label</vscode-radio>
+  <vscode-radio>Radio Label</vscode-radio>
+  <vscode-radio>Radio Label</vscode-radio>
 </vscode-radio-group>
 ```
 
@@ -64,10 +64,10 @@ While any DOM content is permissible as a child of the `vscode-radio-group`, onl
 
 ```html
 <vscode-radio-group name="example-radio-group">
-	<label slot="label">Radio Group Label</label>
-	<vscode-radio>Radio Label</vscode-radio>
-	<vscode-radio>Radio Label</vscode-radio>
-	<vscode-radio>Radio Label</vscode-radio>
+  <label slot="label">Radio Group Label</label>
+  <vscode-radio>Radio Label</vscode-radio>
+  <vscode-radio>Radio Label</vscode-radio>
+  <vscode-radio>Radio Label</vscode-radio>
 </vscode-radio-group>
 ```
 
@@ -79,17 +79,17 @@ If the orientation attribute is not set, the default orientation is `horizontal`
 
 ```html
 <vscode-radio-group orientation="vertical">
-	<label slot="label">Radio Group Label</label>
-	<vscode-radio>Radio Label</vscode-radio>
-	<vscode-radio>Radio Label</vscode-radio>
-	<vscode-radio>Radio Label</vscode-radio>
+  <label slot="label">Radio Group Label</label>
+  <vscode-radio>Radio Label</vscode-radio>
+  <vscode-radio>Radio Label</vscode-radio>
+  <vscode-radio>Radio Label</vscode-radio>
 </vscode-radio-group>
 
 <vscode-radio-group orientation="horizontal">
-	<label slot="label">Radio Group Label</label>
-	<vscode-radio>Radio Label</vscode-radio>
-	<vscode-radio>Radio Label</vscode-radio>
-	<vscode-radio>Radio Label</vscode-radio>
+  <label slot="label">Radio Group Label</label>
+  <vscode-radio>Radio Label</vscode-radio>
+  <vscode-radio>Radio Label</vscode-radio>
+  <vscode-radio>Radio Label</vscode-radio>
 </vscode-radio-group>
 ```
 
@@ -99,9 +99,9 @@ If the orientation attribute is not set, the default orientation is `horizontal`
 
 ```html
 <vscode-radio-group readonly>
-	<label slot="label">Radio Group Label</label>
-	<vscode-radio>Radio Label</vscode-radio>
-	<vscode-radio>Radio Label</vscode-radio>
-	<vscode-radio>Radio Label</vscode-radio>
+  <label slot="label">Radio Group Label</label>
+  <vscode-radio>Radio Label</vscode-radio>
+  <vscode-radio>Radio Label</vscode-radio>
+  <vscode-radio>Radio Label</vscode-radio>
 </vscode-radio-group>
 ```
diff --git a/src/text-area/README.md b/src/text-area/README.md
index 5dab42e9..3dd26aa6 100644
--- a/src/text-area/README.md
+++ b/src/text-area/README.md
@@ -100,9 +100,7 @@ If this attribute is not specified, the `vscode-text-area` should be a child of
 ### Name Attribute
 
 ```html
-<vscode-text-area name="example-vscode-text-area">
-	Text Area Label
-</vscode-text-area>
+<vscode-text-area name="example-vscode-text-area"> Text Area Label </vscode-text-area>
 ```
 
 ### Placeholder Attribute
@@ -110,9 +108,7 @@ If this attribute is not specified, the `vscode-text-area` should be a child of
 [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-text-area--with-placeholder)
 
 ```html
-<vscode-text-area placeholder="Placeholder Text">
-	Text Area Label
-</vscode-text-area>
+<vscode-text-area placeholder="Placeholder Text"> Text Area Label </vscode-text-area>
 ```
 
 ### Read Only Attribute
diff --git a/src/text-field/README.md b/src/text-field/README.md
index 9f016ff2..d9afed3b 100644
--- a/src/text-field/README.md
+++ b/src/text-field/README.md
@@ -77,9 +77,7 @@ The `vscode-text-field` is a web component implementation of a [text field eleme
 ### Name Attribute
 
 ```html
-<vscode-text-field name="example-vscode-text-field"
-	>Text Field Label</vscode-text-field
->
+<vscode-text-field name="example-vscode-text-field">Text Field Label</vscode-text-field>
 ```
 
 ### Placeholder Attribute
@@ -87,9 +85,7 @@ The `vscode-text-field` is a web component implementation of a [text field eleme
 [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-text-field--with-placeholder)
 
 ```html
-<vscode-text-field placeholder="Placeholder Text"
-	>Text Field Label</vscode-text-field
->
+<vscode-text-field placeholder="Placeholder Text">Text Field Label</vscode-text-field>
 ```
 
 ### Read Only Attribute
@@ -132,8 +128,8 @@ An icon can be added to the left of the text field by adding an element with the
 <!-- Note: Using Visual Studio Code Codicon Library -->
 
 <vscode-text-field>
-	Text Field Label
-	<span slot="start" class="codicon codicon-git-merge"></span>
+  Text Field Label
+  <span slot="start" class="codicon codicon-git-merge"></span>
 </vscode-text-field>
 ```
 
@@ -147,7 +143,7 @@ An icon can be added to the right of the text field by adding an element with th
 <!-- Note: Using Visual Studio Code Codicon Library -->
 
 <vscode-text-field>
-	Text Field Label
-	<span slot="end" class="codicon codicon-chevron-right"></span>
+  Text Field Label
+  <span slot="end" class="codicon codicon-chevron-right"></span>
 </vscode-text-field>
 ```

From 39283963c23ef9da8f9b7c8f336833b353852a7d Mon Sep 17 00:00:00 2001
From: Hawk Ticehurst <hawkticehurst@gmail.com>
Date: Tue, 15 Feb 2022 16:56:05 -0800
Subject: [PATCH 3/4] Add React specific docs

---
 .gitignore          |   5 +-
 src/react/README.md | 120 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 124 insertions(+), 1 deletion(-)
 create mode 100644 src/react/README.md

diff --git a/.gitignore b/.gitignore
index 08a09ef3..40c375fa 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,8 +3,11 @@ node_modules/
 
 # Production
 dist/
-react/
 storybook-static/
+react/
+
+# ensure that the react folder inside src is included
+!src/react/
 
 # Tests
 test-webview
diff --git a/src/react/README.md b/src/react/README.md
new file mode 100644
index 00000000..d9f811f5
--- /dev/null
+++ b/src/react/README.md
@@ -0,0 +1,120 @@
+# Visual Studio Code React Toolkit Components
+
+In addition to the web components that the Webview UI Toolkit for Visual Studio Code provides, the toolkit also provides a set of React components that can be used to build webview-based extension UIs.
+
+These components are actually built with the same exact web components that the toolkit ships under the hood, but they are wrapped in a React component using the [`@microsoft/fast-react-wrapper`](https://www.npmjs.com/package/@microsoft/fast-react-wrapper). You can find the wrapping code in the `src/react/index.ts` file.
+
+## Usage 
+
+To use the React components in your extension, simply install the `@vscode/webview-ui-toolkit` package and import the components using the following syntax:
+
+```ts
+import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
+```
+
+You should be able to (for the most part) follow the same usage pattern and attributes as the web components. See our [component documentation](../../docs/components.md) for more details.
+
+## Some exceptions
+
+There are still some exceptions to the general usage patterns when using the React components. These are listed below and will be updated as needed.
+
+### Use `onInput` instead of `onChange` to handle keystrokes
+
+Due to the fact that the toolkit React components are built with web components under the hood, it means that input components like `VSCodeTextField` or `VSCodeTextArea` follow the native browser `change` and `input` event model. This means the `onChange` event is fired focus is blurred away from the input element and `onInput` is fired on every keystroke. _Note that this exception is the result of the React team deciding to [override native browser behavior](https://reactjs.org/docs/dom-elements.html#onchange)._
+
+As an example, if you would like to update the value of a text field on every keystroke, the `onInput` should be used instead of `onChange`.
+
+```tsx
+import { VSCodeTextField } from '@vscode/webview-ui-toolkit/react';
+
+function SomeComponent() {
+  const [value, setValue] = useState('');
+  
+  return <VSCodeTextField value={value} onInput={e => setValue(e.target.value)} />
+}
+```
+
+### Some component attributes must use enums at this time
+
+At this time there is a slightly less convenient way of needing to define a handful of component attributes with enums instead of string values. There is an [upstream issue](https://github.com/microsoft/fast/issues/5494) open with the goal of addressing this. However, for the time being, if you use any of the following component attributes you will need to import an enum to use them.
+
+- Data grid `cell-type` attr ==> import `DataGridCellTypes` enum
+- Data grid `row-type` attr ==> import `DataGridRowTypes` enum
+- Data grid `generate-header` attr ==> import `GenerateHeaderOptions` enum
+- Divider `role` attr ==> import `DividerRole` enum
+- Dropdown `position` attr ==> import `DropdownPosition` enum
+- Radio group `orientation` attr ==> import `RadioGroupOrientation` enum
+- Text area `resize` attr ==> import `RadioGroupOrientation` enum
+- Text field `type` attr ==> import `TextFieldType` enum
+
+Here's an example of all of them in use:
+
+```js
+import {
+  DataGridCellTypes,
+  DataGridRowTypes,
+  DividerRole,
+  DropdownPosition,
+  GenerateHeaderOptions,
+  RadioGroupOrientation,
+  TextAreaResize,
+  TextFieldType,
+  VSCodeDataGrid,
+  VSCodeDataGridCell,
+  VSCodeDataGridRow,
+  VSCodeDivider,
+  VSCodeDropdown,
+  VSCodeOption,
+  VSCodeRadio,
+  VSCodeRadioGroup,
+  VSCodeTextArea,
+  VSCodeTextField,
+} from "@vscode/webview-ui-toolkit/react";
+
+function App() {
+  return (
+    <main>
+      // Data grid example code
+      <VSCodeDataGrid generate-header={GenerateHeaderOptions.none}>
+        <VSCodeDataGridRow row-type={DataGridRowTypes.header}>
+          <VSCodeDataGridCell cell-type={DataGridCellTypes.columnHeader} grid-column="1">
+            Header 1
+          </VSCodeDataGridCell>
+          <VSCodeDataGridCell cell-type={DataGridCellTypes.columnHeader} grid-column="2">
+            Header 2
+          </VSCodeDataGridCell>
+        </VSCodeDataGridRow>
+        <VSCodeDataGridRow>
+          <VSCodeDataGridCell grid-column="1">Cell Data</VSCodeDataGridCell>
+          <VSCodeDataGridCell grid-column="2">Cell Data</VSCodeDataGridCell>
+        </VSCodeDataGridRow>
+      </VSCodeDataGrid>
+
+      // Divider example code
+      <VSCodeDivider role={DividerRole.separator}></VSCodeDivider>
+
+      // Dropdown example code
+      <VSCodeDropdown position={DropdownPosition.below} open>
+        <VSCodeOption>Item 1</VSCodeOption>
+        <VSCodeOption>Item 2</VSCodeOption>
+        <VSCodeOption>Item 3</VSCodeOption>
+      </VSCodeDropdown>
+
+      // Radio example code
+      <VSCodeRadioGroup orientation={RadioGroupOrientation.vertical}>
+        <label slot="label">Radio Group Label</label>
+        <VSCodeRadio>Radio Label</VSCodeRadio>
+        <VSCodeRadio>Radio Label</VSCodeRadio>
+      </VSCodeRadioGroup>
+
+      // Text area example code
+      <VSCodeTextArea resize={TextAreaResize.both}>Text Area Label</VSCodeTextArea>
+
+      // Text field example code
+      <VSCodeTextField type={TextFieldType.password}>Text Field Label</VSCodeTextField>
+    </main>
+  );
+}
+
+export default App;
+```
\ No newline at end of file

From 520edaa031b92af97645dd38604ef4c03cc96eb3 Mon Sep 17 00:00:00 2001
From: Hawk Ticehurst <hawkticehurst@gmail.com>
Date: Wed, 16 Feb 2022 16:16:07 -0800
Subject: [PATCH 4/4] Fix some typos

---
 src/react/README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/react/README.md b/src/react/README.md
index d9f811f5..3bbf918d 100644
--- a/src/react/README.md
+++ b/src/react/README.md
@@ -20,7 +20,7 @@ There are still some exceptions to the general usage patterns when using the Rea
 
 ### Use `onInput` instead of `onChange` to handle keystrokes
 
-Due to the fact that the toolkit React components are built with web components under the hood, it means that input components like `VSCodeTextField` or `VSCodeTextArea` follow the native browser `change` and `input` event model. This means the `onChange` event is fired focus is blurred away from the input element and `onInput` is fired on every keystroke. _Note that this exception is the result of the React team deciding to [override native browser behavior](https://reactjs.org/docs/dom-elements.html#onchange)._
+Due to the fact that the toolkit React components are built with web components under the hood, it means that input components like `VSCodeTextField` or `VSCodeTextArea` follow the native browser `change` and `input` event model. This means the `onChange` event is fired when focus is blurred away from the input element and `onInput` is fired on every keystroke. _Note that this exception is the result of the React team deciding to [override native browser behavior](https://reactjs.org/docs/dom-elements.html#onchange)._
 
 As an example, if you would like to update the value of a text field on every keystroke, the `onInput` should be used instead of `onChange`.
 
@@ -34,9 +34,9 @@ function SomeComponent() {
 }
 ```
 
-### Some component attributes must use enums at this time
+### Some component attributes must use enums (for now)
 
-At this time there is a slightly less convenient way of needing to define a handful of component attributes with enums instead of string values. There is an [upstream issue](https://github.com/microsoft/fast/issues/5494) open with the goal of addressing this. However, for the time being, if you use any of the following component attributes you will need to import an enum to use them.
+At this time, there is a slightly less convenient way of needing to define a handful of component attributes with enums instead of string values. There is an [upstream issue](https://github.com/microsoft/fast/issues/5494) open with the goal of addressing this. However, for the time being, if you use any of the following component attributes you will need to import an enum to use them.
 
 - Data grid `cell-type` attr ==> import `DataGridCellTypes` enum
 - Data grid `row-type` attr ==> import `DataGridRowTypes` enum