Skip to content

Commit eb64dca

Browse files
benderabendera
committed
Add ButtonGroup docs
1 parent 8be0913 commit eb64dca

File tree

4 files changed

+97
-60
lines changed

4 files changed

+97
-60
lines changed

‎astro.config.mjs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ export default defineConfig({
7878
items: [
7979
{ label: "Badge", slug: "components/badge" },
8080
{ label: "Button", slug: "components/button" },
81+
{ label: "ButtonGroup", slug: "components/button-group" },
8182
{ label: "Checkbox", link: "components/checkbox" },
8283
{ label: "CheckboxGroup", link: "components/checkbox-group" },
8384
{ label: "Collapsible", link: "components/collapsible" },
@@ -122,6 +123,7 @@ export default defineConfig({
122123
items: [
123124
{ label: "Badge", link: "components/badge/api" },
124125
{ label: "Button", link: "components/button/api" },
126+
{ label: "ButtonGroup", link: "components/button-group/api" },
125127
{ label: "Checkbox", link: "components/checkbox/api" },
126128
{ label: "CheckboxGroup", link: "components/checkbox-group/api" },
127129
{ label: "Collapsible", link: "components/collapsible/api" },

‎src/components/examples/button-group/Imports.astro‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<script>
2+
import "@vscode-elements/elements/dist/vscode-button/index.js";
3+
import "@vscode-elements/elements/dist/vscode-button-group/index.js";
4+
</script>
5+
6+
<link rel="stylesheet" href="/codicon.css" id="vscode-codicon-stylesheet" />

‎src/content/docs/components/button-group.mdx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
title: ButtonGroup
3+
---
4+
5+
import Demo from "@components/Demo.astro";
6+
import PageSwitcher from "@components/PageSwitcher.astro";
7+
8+
import Imports from "@components/examples/button-group/Imports.astro";
9+
10+
<Imports />
11+
<PageSwitcher />
12+
13+
## Split button
14+
15+
<Demo>
16+
<vscode-button-group>
17+
<vscode-button>Split Button</vscode-button>
18+
<vscode-button icon="chevron-down" title="More actions..."></vscode-button>
19+
</vscode-button-group>
20+
<Fragment slot="html">
21+
```html
22+
<vscode-button-group>
23+
<vscode-button>Split Button</vscode-button>
24+
<vscode-button icon="chevron-down" title="More actions..."></vscode-button>
25+
</vscode-button-group>
26+
```
27+
</Fragment>
28+
</Demo>

‎src/pages/components/[component]/api.astro‎

Lines changed: 61 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,61 @@
1-
---
2-
import ApiPage from "@components/ApiPage/ApiPage.astro";
3-
4-
export function getStaticPaths() {
5-
return [
6-
{ params: { component: "badge" } },
7-
{ params: { component: "button" } },
8-
{ params: { component: "checkbox" } },
9-
{ params: { component: "checkbox-group" } },
10-
{ params: { component: "collapsible" } },
11-
{ params: { component: "context-menu" } },
12-
{ params: { component: "context-menu-item" } },
13-
{ params: { component: "divider" } },
14-
{ params: { component: "form-container" } },
15-
{ params: { component: "form-group" } },
16-
{ params: { component: "form-helper" } },
17-
{ params: { component: "icon" } },
18-
{ params: { component: "label" } },
19-
{ params: { component: "multi-select" } },
20-
{ params: { component: "option" } },
21-
{ params: { component: "progress-ring" } },
22-
{ params: { component: "radio" } },
23-
{ params: { component: "radio-group" } },
24-
{ params: { component: "scrollable" } },
25-
{ params: { component: "single-select" } },
26-
{ params: { component: "split-layout" } },
27-
{ params: { component: "tab-header" } },
28-
{ params: { component: "tab-panel" } },
29-
{ params: { component: "table" } },
30-
{ params: { component: "table-body" } },
31-
{ params: { component: "table-cell" } },
32-
{ params: { component: "table-header" } },
33-
{ params: { component: "table-header-cell" } },
34-
{ params: { component: "table-row" } },
35-
{ params: { component: "tabs" } },
36-
{ params: { component: "textarea" } },
37-
{ params: { component: "textfield" } },
38-
{ params: { component: "toolbar-button" } },
39-
{ params: { component: "tree" } },
40-
];
41-
}
42-
43-
const camelize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
44-
45-
const kebabToPascal = (kebab: string) => {
46-
const parts = kebab.split('-');
47-
48-
return parts.reduce(
49-
(prevVal, currentVal) => prevVal + camelize(currentVal),
50-
''
51-
);
52-
};
53-
54-
const { component } = Astro.params;
55-
const tagName = "vscode-" + component;
56-
const title = kebabToPascal(component);
57-
const cemPath = "node_modules/@vscode-elements/elements/custom-elements.json";
58-
---
59-
60-
<ApiPage cemPath={cemPath} tagName={tagName} title={title} />
1+
---
2+
import ApiPage from "@components/ApiPage/ApiPage.astro";
3+
4+
export function getStaticPaths() {
5+
return [
6+
{ params: { component: "badge" } },
7+
{ params: { component: "button" } },
8+
{ params: { component: "button-group" } },
9+
{ params: { component: "checkbox" } },
10+
{ params: { component: "checkbox-group" } },
11+
{ params: { component: "collapsible" } },
12+
{ params: { component: "context-menu" } },
13+
{ params: { component: "context-menu-item" } },
14+
{ params: { component: "divider" } },
15+
{ params: { component: "form-container" } },
16+
{ params: { component: "form-group" } },
17+
{ params: { component: "form-helper" } },
18+
{ params: { component: "icon" } },
19+
{ params: { component: "label" } },
20+
{ params: { component: "multi-select" } },
21+
{ params: { component: "option" } },
22+
{ params: { component: "progress-ring" } },
23+
{ params: { component: "radio" } },
24+
{ params: { component: "radio-group" } },
25+
{ params: { component: "scrollable" } },
26+
{ params: { component: "single-select" } },
27+
{ params: { component: "split-layout" } },
28+
{ params: { component: "tab-header" } },
29+
{ params: { component: "tab-panel" } },
30+
{ params: { component: "table" } },
31+
{ params: { component: "table-body" } },
32+
{ params: { component: "table-cell" } },
33+
{ params: { component: "table-header" } },
34+
{ params: { component: "table-header-cell" } },
35+
{ params: { component: "table-row" } },
36+
{ params: { component: "tabs" } },
37+
{ params: { component: "textarea" } },
38+
{ params: { component: "textfield" } },
39+
{ params: { component: "toolbar-button" } },
40+
{ params: { component: "tree" } },
41+
];
42+
}
43+
44+
const camelize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
45+
46+
const kebabToPascal = (kebab: string) => {
47+
const parts = kebab.split('-');
48+
49+
return parts.reduce(
50+
(prevVal, currentVal) => prevVal + camelize(currentVal),
51+
''
52+
);
53+
};
54+
55+
const { component } = Astro.params;
56+
const tagName = "vscode-" + component;
57+
const title = kebabToPascal(component);
58+
const cemPath = "node_modules/@vscode-elements/elements/custom-elements.json";
59+
---
60+
61+
<ApiPage cemPath={cemPath} tagName={tagName} title={title} />

0 commit comments

Comments
 (0)