Skip to content

Commit 088802e

Browse files
Kateryna ProkopenkoDevtools-frontend LUCI CQ
Kateryna Prokopenko
authored and
Devtools-frontend LUCI CQ
committed
[DevToolsUIKit] Polish Icon documentation
Screenshot: https://imgur.com/a/thhbp9F Bug: 414330824 Change-Id: I8303e0f64d217109e9973635a10973d6331a46ff Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6513565 Reviewed-by: Kim-Anh Tran <kimanh@chromium.org> Auto-Submit: Kateryna Prokopenko <kprokopenko@chromium.org> Commit-Queue: Kateryna Prokopenko <kprokopenko@chromium.org>
1 parent 42ac720 commit 088802e

File tree

2 files changed

+36
-61
lines changed

2 files changed

+36
-61
lines changed

‎front_end/ui/components/docs/icon_component/basic.html‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,26 +21,22 @@
2121
height: 50px;
2222
}
2323

24-
.custom-color {
24+
.custom-size-and-color {
2525
color: blue;
26+
width: 14px;
27+
height: 14px;
2628
}
2729
</style>
2830
</head>
2931
<body>
3032

3133
<table id='icon-overview'>
3234
<tr>
33-
<th>Icon name</th>
35+
<th>Icon description</th>
3436
<th>Icon</th>
3537
</tr>
3638
</table>
3739

38-
<div style="display: flex; align-items: center;">
39-
<span>Some text</span>
40-
<devtools-icon id="icon-in-flex"></devtools-icon>
41-
<span>Some text</span>
42-
</div>
43-
4440
<script type="module" src="./basic.js"></script>
4541
</body>
4642
</html>

‎front_end/ui/components/docs/icon_component/basic.ts‎

Lines changed: 32 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,20 @@
22
// Use of this source code is governed by a BSD-style license that can be
33
// found in the LICENSE file.
44

5+
import * as Lit from '../../../lit/lit.js';
56
import * as ComponentHelpers from '../../helpers/helpers.js';
67
import * as IconButton from '../../icon_button/icon_button.js';
78

9+
const {html} = Lit;
10+
811
await ComponentHelpers.ComponentServerSetup.setup();
912

1013
const iconTable = document.getElementById('icon-overview');
1114

1215
const row1 = document.createElement('tr');
13-
const iconName1 = document.createElement('td');
14-
iconName1.textContent = 'select-element';
15-
row1.appendChild(iconName1);
16+
const iconDescription1 = document.createElement('td');
17+
iconDescription1.textContent = 'Programmatically created with default size and color';
18+
row1.appendChild(iconDescription1);
1619

1720
const icon = IconButton.Icon.create('select-element');
1821
const icon1 = document.createElement('td');
@@ -21,69 +24,45 @@ row1.appendChild(icon1);
2124

2225
iconTable?.appendChild(row1);
2326

24-
icon.onclick = () => {
25-
// Change of colour through a data-setter, which rerenders the component. Getting the data first in order not to specify the data fields all over again
26-
icon.data = {...icon.data, color: 'blue'};
27-
};
28-
2927
const row2 = document.createElement('tr');
30-
const iconName2 = document.createElement('td');
31-
iconName2.textContent = 'issue-exclamation-filled';
32-
row2.appendChild(iconName2);
28+
const iconDescription2 = document.createElement('td');
29+
iconDescription2.textContent = 'Programmatically created with custom size and color';
30+
row2.appendChild(iconDescription2);
3331

3432
const otherIcon = IconButton.Icon.create('issue-exclamation-filled');
35-
otherIcon.style.color = 'var(--icon-link)';
33+
otherIcon.classList.toggle('custom-size-and-color');
3634
const icon2 = document.createElement('td');
3735
icon2.appendChild(otherIcon);
3836
row2.appendChild(icon2);
3937

4038
iconTable?.appendChild(row2);
4139

4240
const row3 = document.createElement('tr');
43-
const iconName3 = document.createElement('td');
44-
iconName3.textContent = 'select-element';
45-
row3.appendChild(iconName3);
41+
const iconDescription3 = document.createElement('td');
42+
iconDescription3.textContent = 'Created through html template with default size and color';
43+
row3.appendChild(iconDescription3);
4644

47-
const otherIcon2 = IconButton.Icon.create('select-element', 'custom-color');
4845
const icon3 = document.createElement('td');
49-
icon3.appendChild(otherIcon2);
46+
Lit.render(
47+
html`
48+
<devtools-icon name="select-element"></devtools-icon>
49+
`,
50+
icon3);
5051
row3.appendChild(icon3);
5152

5253
iconTable?.appendChild(row3);
5354

54-
(() => {
55-
const div = document.createElement('div');
56-
const span1 = document.createElement('span');
57-
span1.textContent = 'Some text';
58-
div.appendChild(span1);
59-
const otherIcon3 = IconButton.Icon.create('select-element', 'custom-color');
60-
div.appendChild(otherIcon3);
61-
const span2 = document.createElement('span');
62-
span2.textContent = 'with a large icon';
63-
div.appendChild(span2);
64-
document.body.append(div);
65-
})();
66-
67-
(() => {
68-
const div = document.createElement('div');
69-
const span1 = document.createElement('span');
70-
span1.textContent = 'Some text';
71-
div.appendChild(span1);
72-
const otherIcon3 = IconButton.Icon.create('select-element', 'custom-color');
73-
otherIcon3.style.width = '14px';
74-
otherIcon3.style.height = '14px';
75-
div.appendChild(otherIcon3);
76-
const span2 = document.createElement('span');
77-
span2.textContent = 'with a small icon';
78-
div.appendChild(span2);
79-
80-
document.body.append(div);
81-
})();
82-
83-
const iconInFlex = document.getElementById('icon-in-flex') as IconButton.Icon.Icon;
84-
iconInFlex.data = {
85-
iconName: 'cross-circle',
86-
width: '20px',
87-
height: '20px',
88-
color: 'var(--icon-error)',
89-
};
55+
const row4 = document.createElement('tr');
56+
const iconDescription4 = document.createElement('td');
57+
iconDescription4.textContent = 'Created through html template with custom size and color';
58+
row4.appendChild(iconDescription4);
59+
60+
const icon4 = document.createElement('td');
61+
Lit.render(
62+
html`
63+
<devtools-icon name="select-element" class="custom-size-and-color"></devtools-icon>
64+
`,
65+
icon4);
66+
row4.appendChild(icon4);
67+
68+
iconTable?.appendChild(row4);

0 commit comments

Comments
 (0)