Skip to content
This repository has been archived by the owner on Aug 2, 2024. It is now read-only.

Update component gallery examples to fix radio bug #178

Merged
merged 1 commit into from
Oct 11, 2023
Merged

Update component gallery examples to fix radio bug #178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 16 additions & 12 deletions default/component-gallery/src/panels/demos/radio-group.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,44 @@
// Note: There is a known bug with vscode-radio component selection on first interaction. A workaround fix is
// to make sure that all radio components have a unique `value` attribute applied as demonstrated below.
// Read more about the issue here: https://github.com/microsoft/vscode-webview-ui-toolkit/issues/476

export const radioGroupDemo = /*html*/ `
<section class="component-container">
<h2>Radio Group + Radio</h2>
<section class="component-example">
<p>Default Radio Group</p>
<vscode-radio-group>
<label slot="label">Group Label</label>
<vscode-radio>Label</vscode-radio>
<vscode-radio>Label</vscode-radio>
<vscode-radio>Label</vscode-radio>
<vscode-radio value="value-1">Label</vscode-radio>
<vscode-radio value="value-2">Label</vscode-radio>
<vscode-radio value="value-3">Label</vscode-radio>
</vscode-radio-group>
</section>
<section class="component-example">
<p>With Disabled</p>
<vscode-radio-group disabled>
<label slot="label">Group Label</label>
<vscode-radio>Radio Label</vscode-radio>
<vscode-radio>Radio Label</vscode-radio>
<vscode-radio>Radio Label</vscode-radio>
<vscode-radio value="value-1">Radio Label</vscode-radio>
<vscode-radio value="value-2">Radio Label</vscode-radio>
<vscode-radio value="value-3">Radio Label</vscode-radio>
</vscode-radio-group>
</section>
<section class="component-example">
<p>With Readonly</p>
<vscode-radio-group readonly>
<label slot="label">Group Label</label>
<vscode-radio>Radio Label</vscode-radio>
<vscode-radio>Radio Label</vscode-radio>
<vscode-radio>Radio Label</vscode-radio>
<vscode-radio value="value-1">Radio Label</vscode-radio>
<vscode-radio value="value-2">Radio Label</vscode-radio>
<vscode-radio value="value-3">Radio Label</vscode-radio>
</vscode-radio-group>
</section>
<section class="component-example">
<p>With Vertical Orientation</p>
<vscode-radio-group orientation="vertical">
<label slot="label">Group Label</label>
<vscode-radio>Radio Label</vscode-radio>
<vscode-radio>Radio Label</vscode-radio>
<vscode-radio>Radio Label</vscode-radio>
<vscode-radio value="value-1">Radio Label</vscode-radio>
<vscode-radio value="value-2">Radio Label</vscode-radio>
<vscode-radio value="value-3">Radio Label</vscode-radio>
</vscode-radio-group>
</section>
</section>
Expand Down
28 changes: 16 additions & 12 deletions frameworks/component-gallery-react/webview-ui/src/demos/RadioGroupDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import { VSCodeRadio, VSCodeRadioGroup } from "@vscode/webview-ui-toolkit/react";

// Note: There is a known bug with VSCodeRadio component selection on first interaction. A workaround fix is
// to make sure that all radio components have a unique `value` attribute applied as demonstrated below.
// Read more about the issue here: https://github.com/microsoft/vscode-webview-ui-toolkit/issues/476

export function RadioGroupDemo() {
return (
<section className="component-container">
Expand All @@ -8,36 +12,36 @@ export function RadioGroupDemo() {
<p>Default Radio Group</p>
<VSCodeRadioGroup>
<label slot="label">Group Label</label>
<VSCodeRadio>Label</VSCodeRadio>
<VSCodeRadio>Label</VSCodeRadio>
<VSCodeRadio>Label</VSCodeRadio>
<VSCodeRadio value="value-1">Label</VSCodeRadio>
<VSCodeRadio value="value-2">Label</VSCodeRadio>
<VSCodeRadio value="value-3">Label</VSCodeRadio>
</VSCodeRadioGroup>
</section>
<section className="component-example">
<p>With Disabled</p>
<VSCodeRadioGroup disabled>
<label slot="label">Group Label</label>
<VSCodeRadio>Radio Label</VSCodeRadio>
<VSCodeRadio>Radio Label</VSCodeRadio>
<VSCodeRadio>Radio Label</VSCodeRadio>
<VSCodeRadio value="value-1">Radio Label</VSCodeRadio>
<VSCodeRadio value="value-2">Radio Label</VSCodeRadio>
<VSCodeRadio value="value-3">Radio Label</VSCodeRadio>
</VSCodeRadioGroup>
</section>
<section className="component-example">
<p>With Readonly</p>
<VSCodeRadioGroup readOnly>
<label slot="label">Group Label</label>
<VSCodeRadio>Radio Label</VSCodeRadio>
<VSCodeRadio>Radio Label</VSCodeRadio>
<VSCodeRadio>Radio Label</VSCodeRadio>
<VSCodeRadio value="value-1">Radio Label</VSCodeRadio>
<VSCodeRadio value="value-2">Radio Label</VSCodeRadio>
<VSCodeRadio value="value-3">Radio Label</VSCodeRadio>
</VSCodeRadioGroup>
</section>
<section className="component-example">
<p>With Vertical Orientation</p>
<VSCodeRadioGroup orientation="vertical">
<label slot="label">Group Label</label>
<VSCodeRadio>Radio Label</VSCodeRadio>
<VSCodeRadio>Radio Label</VSCodeRadio>
<VSCodeRadio>Radio Label</VSCodeRadio>
<VSCodeRadio value="value-1">Radio Label</VSCodeRadio>
<VSCodeRadio value="value-2">Radio Label</VSCodeRadio>
<VSCodeRadio value="value-3">Radio Label</VSCodeRadio>
</VSCodeRadioGroup>
</section>
</section>
Expand Down