Skip to content

Commit 06088ec

Browse files
wxiaoguangwxiaoguang
authored
Remove "class-name" from svg icon (#33540)
Only use "class" attribute
1 parent a52720b commit 06088ec

File tree

5 files changed

+20
-30
lines changed

5 files changed

+20
-30
lines changed

‎web_src/js/components/ActionRunStatus.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@ withDefaults(defineProps<{
1919

2020
<template>
2121
<span :data-tooltip-content="localeStatus ?? status" v-if="status">
22-
<SvgIcon name="octicon-check-circle-fill" class="text green" :size="size" :class-name="className" v-if="status === 'success'"/>
23-
<SvgIcon name="octicon-skip" class="text grey" :size="size" :class-name="className" v-else-if="status === 'skipped'"/>
24-
<SvgIcon name="octicon-stop" class="text yellow" :size="size" :class-name="className" v-else-if="status === 'cancelled'"/>
25-
<SvgIcon name="octicon-clock" class="text yellow" :size="size" :class-name="className" v-else-if="status === 'waiting'"/>
26-
<SvgIcon name="octicon-blocked" class="text yellow" :size="size" :class-name="className" v-else-if="status === 'blocked'"/>
27-
<SvgIcon name="octicon-meter" class="text yellow" :size="size" :class-name="'job-status-rotate ' + className" v-else-if="status === 'running'"/>
22+
<SvgIcon name="octicon-check-circle-fill" class="text green" :size="size" :class="className" v-if="status === 'success'"/>
23+
<SvgIcon name="octicon-skip" class="text grey" :size="size" :class="className" v-else-if="status === 'skipped'"/>
24+
<SvgIcon name="octicon-stop" class="text yellow" :size="size" :class="className" v-else-if="status === 'cancelled'"/>
25+
<SvgIcon name="octicon-clock" class="text yellow" :size="size" :class="className" v-else-if="status === 'waiting'"/>
26+
<SvgIcon name="octicon-blocked" class="text yellow" :size="size" :class="className" v-else-if="status === 'blocked'"/>
27+
<SvgIcon name="octicon-meter" class="text yellow" :size="size" :class="'job-status-rotate ' + className" v-else-if="status === 'running'"/>
2828
<SvgIcon name="octicon-x-circle-fill" class="text red" :size="size" v-else/><!-- failure, unknown -->
2929
</span>
3030
</template>

‎web_src/js/components/DashboardRepoList.vue‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -367,7 +367,7 @@ export default defineComponent({
367367
otherwise if the "input" handles click event for intermediate status, it breaks the internal state-->
368368
<input type="checkbox" class="tw-pointer-events-none" v-bind.prop="checkboxArchivedFilterProps">
369369
<label>
370-
<svg-icon name="octicon-archive" :size="16" class-name="tw-mr-1"/>
370+
<svg-icon name="octicon-archive" :size="16" class="tw-mr-1"/>
371371
{{ textShowArchived }}
372372
</label>
373373
</div>
@@ -376,7 +376,7 @@ export default defineComponent({
376376
<div class="ui checkbox" ref="checkboxPrivateFilter" :title="checkboxPrivateFilterTitle">
377377
<input type="checkbox" class="tw-pointer-events-none" v-bind.prop="checkboxPrivateFilterProps">
378378
<label>
379-
<svg-icon name="octicon-lock" :size="16" class-name="tw-mr-1"/>
379+
<svg-icon name="octicon-lock" :size="16" class="tw-mr-1"/>
380380
{{ textShowPrivate }}
381381
</label>
382382
</div>
@@ -413,15 +413,15 @@ export default defineComponent({
413413
<ul class="repo-owner-name-list">
414414
<li class="tw-flex tw-items-center tw-py-2" v-for="repo, index in repos" :class="{'active': index === activeIndex}" :key="repo.id">
415415
<a class="repo-list-link muted" :href="repo.link">
416-
<svg-icon :name="repoIcon(repo)" :size="16" class-name="repo-list-icon"/>
416+
<svg-icon :name="repoIcon(repo)" :size="16" class="repo-list-icon"/>
417417
<div class="text truncate">{{ repo.full_name }}</div>
418418
<div v-if="repo.archived">
419419
<svg-icon name="octicon-archive" :size="16"/>
420420
</div>
421421
</a>
422422
<a class="tw-flex tw-items-center" v-if="repo.latest_commit_status_state" :href="repo.latest_commit_status_state_link" :data-tooltip-content="repo.locale_latest_commit_status_state">
423423
<!-- the commit status icon logic is taken from templates/repo/commit_status.tmpl -->
424-
<svg-icon :name="statusIcon(repo.latest_commit_status_state)" :class-name="'tw-ml-2 commit-status icon text ' + statusColor(repo.latest_commit_status_state)" :size="16"/>
424+
<svg-icon :name="statusIcon(repo.latest_commit_status_state)" :class="'tw-ml-2 commit-status icon text ' + statusColor(repo.latest_commit_status_state)" :size="16"/>
425425
</a>
426426
</li>
427427
</ul>
@@ -432,7 +432,7 @@ export default defineComponent({
432432
class="item navigation tw-py-1" :class="{'disabled': page === 1}"
433433
@click="changePage(1)" :title="textFirstPage"
434434
>
435-
<svg-icon name="gitea-double-chevron-left" :size="16" class-name="tw-mr-1"/>
435+
<svg-icon name="gitea-double-chevron-left" :size="16" class="tw-mr-1"/>
436436
</a>
437437
<a
438438
class="item navigation tw-py-1" :class="{'disabled': page === 1}"
@@ -445,13 +445,13 @@ export default defineComponent({
445445
class="item navigation" :class="{'disabled': page === finalPage}"
446446
@click="changePage(page + 1)" :title="textNextPage"
447447
>
448-
<svg-icon name="octicon-chevron-right" :size="16" class-name="tw-ml-1"/>
448+
<svg-icon name="octicon-chevron-right" :size="16" class="tw-ml-1"/>
449449
</a>
450450
<a
451451
class="item navigation tw-py-1" :class="{'disabled': page === finalPage}"
452452
@click="changePage(finalPage)" :title="textLastPage"
453453
>
454-
<svg-icon name="gitea-double-chevron-right" :size="16" class-name="tw-ml-1"/>
454+
<svg-icon name="gitea-double-chevron-right" :size="16" class="tw-ml-1"/>
455455
</a>
456456
</div>
457457
</div>
@@ -471,7 +471,7 @@ export default defineComponent({
471471
<ul class="repo-owner-name-list">
472472
<li class="tw-flex tw-items-center tw-py-2" v-for="org in organizations" :key="org.name">
473473
<a class="repo-list-link muted" :href="subUrl + '/' + encodeURIComponent(org.name)">
474-
<svg-icon name="octicon-organization" :size="16" class-name="repo-list-icon"/>
474+
<svg-icon name="octicon-organization" :size="16" class="repo-list-icon"/>
475475
<div class="text truncate">{{ org.full_name ? `${org.full_name} (${org.name})` : org.name }}</div>
476476
<div><!-- div to prevent underline of label on hover -->
477477
<span class="ui tiny basic label" v-if="org.org_visibility !== 'public'">
@@ -481,7 +481,7 @@ export default defineComponent({
481481
</a>
482482
<div class="text light grey tw-flex tw-items-center tw-ml-2">
483483
{{ org.num_repos }}
484-
<svg-icon name="octicon-repo" :size="16" class-name="tw-ml-1 tw-mt-0.5"/>
484+
<svg-icon name="octicon-repo" :size="16" class="tw-ml-1 tw-mt-0.5"/>
485485
</div>
486486
</li>
487487
</ul>

‎web_src/js/components/RepoBranchTagSelector.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,7 @@ export default defineComponent({
226226
<strong ref="dropdownRefName" class="tw-ml-2 tw-inline-block gt-ellipsis">{{ currentRefShortName }}</strong>
227227
</template>
228228
</span>
229-
<svg-icon name="octicon-triangle-down" :size="14" class-name="dropdown icon"/>
229+
<svg-icon name="octicon-triangle-down" :size="14" class="dropdown icon"/>
230230
</div>
231231
<div class="menu transition" :class="{visible: menuVisible}" v-show="menuVisible" v-cloak>
232232
<div class="ui icon search input">
@@ -235,10 +235,10 @@ export default defineComponent({
235235
</div>
236236
<div v-if="showTabBranches" class="branch-tag-tab">
237237
<a class="branch-tag-item muted" :class="{active: selectedTab === 'branches'}" href="#" @click="handleTabSwitch('branches')">
238-
<svg-icon name="octicon-git-branch" :size="16" class-name="tw-mr-1"/>{{ textBranches }}
238+
<svg-icon name="octicon-git-branch" :size="16" class="tw-mr-1"/>{{ textBranches }}
239239
</a>
240240
<a v-if="showTabTags" class="branch-tag-item muted" :class="{active: selectedTab === 'tags'}" href="#" @click="handleTabSwitch('tags')">
241-
<svg-icon name="octicon-tag" :size="16" class-name="tw-mr-1"/>{{ textTags }}
241+
<svg-icon name="octicon-tag" :size="16" class="tw-mr-1"/>{{ textTags }}
242242
</a>
243243
</div>
244244
<div class="branch-tag-divider"/>

‎web_src/js/svg.test.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,11 @@ test('svgParseOuterInner', () => {
1616

1717
test('SvgIcon', () => {
1818
const root = document.createElement('div');
19-
createApp({render: () => h(SvgIcon, {name: 'octicon-link', size: 24, class: 'base', className: 'extra'})}).mount(root);
19+
createApp({render: () => h(SvgIcon, {name: 'octicon-link', size: 24, class: 'base'})}).mount(root);
2020
const node = root.firstChild as Element;
2121
expect(node.nodeName).toEqual('svg');
2222
expect(node.getAttribute('width')).toEqual('24');
2323
expect(node.getAttribute('height')).toEqual('24');
2424
expect(node.classList.contains('octicon-link')).toBeTruthy();
2525
expect(node.classList.contains('base')).toBeTruthy();
26-
expect(node.classList.contains('extra')).toBeTruthy();
2726
});

‎web_src/js/svg.ts‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,6 @@ export const SvgIcon = defineComponent({
201201
props: {
202202
name: {type: String as PropType<SvgName>, required: true},
203203
size: {type: Number, default: 16},
204-
className: {type: String, default: ''},
205204
symbolId: {type: String},
206205
},
207206
render() {
@@ -216,15 +215,7 @@ export const SvgIcon = defineComponent({
216215
attrs[`^width`] = this.size;
217216
attrs[`^height`] = this.size;
218217

219-
// make the <SvgIcon class="foo" class-name="bar"> classes work together
220-
const classes: Array<string> = [];
221-
for (const cls of svgOuter.classList) {
222-
classes.push(cls);
223-
}
224-
// TODO: drop the `className/class-name` prop in the future, only use "class" prop
225-
if (this.className) {
226-
classes.push(...this.className.split(/\s+/).filter(Boolean));
227-
}
218+
const classes = Array.from(svgOuter.classList);
228219
if (this.symbolId) {
229220
classes.push('tw-hidden', 'svg-symbol-container');
230221
svgInnerHtml = `<symbol id="${this.symbolId}" viewBox="${attrs['^viewBox']}">${svgInnerHtml}</symbol>`;

0 commit comments

Comments
 (0)