Skip to content

Commit 2f65b57

Browse files
benderabendera
committed
Add iconOnly property to Button
1 parent 0f21f45 commit 2f65b57

4 files changed

Lines changed: 195 additions & 61 deletions

File tree

‎dev/vscode-button-group.html‎

Lines changed: 0 additions & 61 deletions
This file was deleted.

‎dev/vscode-button-group/vscode-button-group.html‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>&lt;vscode-button-group&gt; Demo</title>
7+
<link
8+
rel="stylesheet"
9+
href="/node_modules/@vscode/codicons/dist/codicon.css"
10+
id="vscode-codicon-stylesheet"
11+
>
12+
<script
13+
type="module"
14+
src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
15+
></script>
16+
<script type="module" src="/dist/main.js"></script>
17+
<style>
18+
.wysiwyg-toolbar {
19+
display: flex;
20+
gap: 6px;
21+
}
22+
23+
.icon-letter {
24+
flex: 1;
25+
font-family: sans-serif;
26+
font-size: 15px;
27+
height: 16px;
28+
line-height: 15px;
29+
vertical-align: middle;
30+
text-align: center;
31+
width: 16px;
32+
}
33+
34+
.icon-letter.b {
35+
font-weight: bold;
36+
}
37+
38+
.icon-letter.i {
39+
font-style: italic;
40+
}
41+
42+
.icon-letter.u {
43+
text-decoration: underline;
44+
}
45+
</style>
46+
</head>
47+
48+
<body class="vscode-light">
49+
<main>
50+
<h2>Basic example</h2>
51+
52+
<vscode-demo>
53+
<p>
54+
<vscode-button-group>
55+
<vscode-button secondary id="button-1">Hello World</vscode-button>
56+
<vscode-button
57+
secondary
58+
icon="chevron-down"
59+
id="button-2"
60+
></vscode-button>
61+
</vscode-button-group>
62+
</p>
63+
64+
<p>
65+
<vscode-button-group>
66+
<vscode-button secondary>Left</vscode-button>
67+
<vscode-button secondary icon="arrow-swap"></vscode-button>
68+
<vscode-button secondary>Right</vscode-button>
69+
</vscode-button-group>
70+
</p>
71+
72+
<p>
73+
<vscode-button-group>
74+
<vscode-button>Left</vscode-button>
75+
<vscode-button icon="arrow-swap"></vscode-button>
76+
<vscode-button>Right</vscode-button>
77+
</vscode-button-group>
78+
</p>
79+
80+
<p>
81+
<vscode-button-group>
82+
<vscode-button>Primary</vscode-button>
83+
<vscode-button secondary>Secondary</vscode-button>
84+
</vscode-button-group>
85+
</p>
86+
87+
<div class="wysiwyg-toolbar">
88+
<vscode-button-group>
89+
<vscode-button secondary title="Align left" icon-only
90+
><svg
91+
width="16"
92+
height="16"
93+
viewBox="0 0 16 16"
94+
fill="none"
95+
xmlns="http://www.w3.org/2000/svg"
96+
>
97+
<path
98+
d="M1 3.5C1 3.22386 1.22386 3 1.5 3H10.5C10.7761 3 11 3.22386 11 3.5C11 3.77614 10.7761 4 10.5 4H1.5C1.22386 4 1 3.77614 1 3.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H14.5C14.7761 7 15 7.22386 15 7.5C15 7.77614 14.7761 8 14.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H6.5C6.77614 11 7 11.2239 7 11.5C7 11.7761 6.77614 12 6.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
99+
fill="#212121"
100+
/></svg
101+
></vscode-button>
102+
<vscode-button secondary title="Align center" icon-only
103+
><svg
104+
width="16"
105+
height="16"
106+
viewBox="0 0 16 16"
107+
fill="none"
108+
xmlns="http://www.w3.org/2000/svg"
109+
>
110+
<path
111+
d="M3 3.5C3 3.22386 3.22386 3 3.5 3H12.5C12.7761 3 13 3.22386 13 3.5C13 3.77614 12.7761 4 12.5 4H3.5C3.22386 4 3 3.77614 3 3.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H14.5C14.7761 7 15 7.22386 15 7.5C15 7.77614 14.7761 8 14.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM5 11.5C5 11.2239 5.22386 11 5.5 11H10.5C10.7761 11 11 11.2239 11 11.5C11 11.7761 10.7761 12 10.5 12H5.5C5.22386 12 5 11.7761 5 11.5Z"
112+
fill="#212121"
113+
/></svg
114+
></vscode-button>
115+
<vscode-button secondary title="Align right" icon-only
116+
><svg
117+
width="16"
118+
height="16"
119+
viewBox="0 0 16 16"
120+
fill="none"
121+
xmlns="http://www.w3.org/2000/svg"
122+
>
123+
<path
124+
d="M5 3.5C5 3.22386 5.22386 3 5.5 3H14.5C14.7761 3 15 3.22386 15 3.5C15 3.77614 14.7761 4 14.5 4H5.5C5.22386 4 5 3.77614 5 3.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H14.5C14.7761 7 15 7.22386 15 7.5C15 7.77614 14.7761 8 14.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM9 11.5C9 11.2239 9.22386 11 9.5 11H14.5C14.7761 11 15 11.2239 15 11.5C15 11.7761 14.7761 12 14.5 12H9.5C9.22386 12 9 11.7761 9 11.5Z"
125+
fill="#212121"
126+
/></svg
127+
></vscode-button>
128+
<vscode-button secondary title="Justified" icon-only
129+
><svg
130+
xmlns="http://www.w3.org/2000/svg"
131+
width="16"
132+
height="16"
133+
fill="none"
134+
>
135+
<path
136+
fill="#212121"
137+
d="M1 3.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Zm0 4a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Zm0 4a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Z"
138+
/>
139+
</svg>
140+
</vscode-button>
141+
</vscode-button-group>
142+
<vscode-button-group>
143+
<vscode-button secondary icon-only title="Bold"
144+
><span class="icon-letter b">B</span></vscode-button
145+
>
146+
<vscode-button secondary icon-only title="Italic"
147+
><span class="icon-letter i">I</span></vscode-button
148+
>
149+
<vscode-button secondary icon-only title="Underline"
150+
><span class="icon-letter u">U</span></vscode-button
151+
>
152+
</vscode-button-group>
153+
</div>
154+
</vscode-demo>
155+
</main>
156+
</body>
157+
</html>

‎dev/vscode-button/icon-button.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>VSCode Elements</title>
7+
<link
8+
rel="stylesheet"
9+
href="/node_modules/@vscode/codicons/dist/codicon.css"
10+
id="vscode-codicon-stylesheet"
11+
>
12+
<script
13+
type="module"
14+
src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
15+
></script>
16+
<script type="module" src="/dist/main.js"></script>
17+
<script>
18+
const logEvents = (selector, eventType) => {
19+
document.querySelector(selector).addEventListener(eventType, (ev) => {
20+
console.log(ev);
21+
});
22+
};
23+
</script>
24+
</head>
25+
26+
<body>
27+
<main>
28+
<vscode-demo>
29+
<vscode-button icon="account"></vscode-button>
30+
<vscode-button icon="add" secondary></vscode-button>
31+
</vscode-demo>
32+
</main>
33+
</body>
34+
</html>

‎src/vscode-button/vscode-button.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,9 @@ export class VscodeButton extends VscElement {
9898
@property({type: String, reflect: true})
9999
name: string | undefined = undefined;
100100

101+
@property({type: Boolean, reflect: true, attribute: 'icon-only'})
102+
iconOnly = false;
103+
101104
@property({reflect: true})
102105
type: 'submit' | 'reset' | 'button' = 'button';
103106

@@ -241,6 +244,7 @@ export class VscodeButton extends VscElement {
241244
wrapper: true,
242245
'has-icon-before': hasIcon,
243246
'has-icon-after': hasIconAfter,
247+
'icon-only': this.iconOnly,
244248
};
245249

246250
const iconElem = hasIcon

0 commit comments

Comments
 (0)