Skip to content

Commit 0ff2c11

Browse files
wxiaoguangGusted
wxiaoguang
authored and
Gusted
committed
Remove "class-name" from svg icon (go-gitea#33540)
Only use "class" attribute (cherry picked from commit 06088ec)
1 parent d81baf2 commit 0ff2c11

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
@@ -29,12 +29,12 @@ export default {
2929
</script>
3030
<template>
3131
<span class="tw-flex tw-items-center" :data-tooltip-content="localeStatus ?? status" v-if="status">
32-
<SvgIcon name="octicon-check-circle-fill" class="text green" :size="size" :class-name="className" v-if="status === 'success'"/>
33-
<SvgIcon name="octicon-skip" class="text grey" :size="size" :class-name="className" v-else-if="status === 'skipped'"/>
34-
<SvgIcon name="octicon-stop" class="text yellow" :size="size" :class-name="className" v-else-if="status === 'cancelled'"/>
35-
<SvgIcon name="octicon-clock" class="text yellow" :size="size" :class-name="className" v-else-if="status === 'waiting'"/>
36-
<SvgIcon name="octicon-blocked" class="text yellow" :size="size" :class-name="className" v-else-if="status === 'blocked'"/>
37-
<SvgIcon name="octicon-meter" class="text yellow" :size="size" :class-name="'job-status-rotate ' + className" v-else-if="status === 'running'"/>
32+
<SvgIcon name="octicon-check-circle-fill" class="text green" :size="size" :class="className" v-if="status === 'success'"/>
33+
<SvgIcon name="octicon-skip" class="text grey" :size="size" :class="className" v-else-if="status === 'skipped'"/>
34+
<SvgIcon name="octicon-stop" class="text yellow" :size="size" :class="className" v-else-if="status === 'cancelled'"/>
35+
<SvgIcon name="octicon-clock" class="text yellow" :size="size" :class="className" v-else-if="status === 'waiting'"/>
36+
<SvgIcon name="octicon-blocked" class="text yellow" :size="size" :class="className" v-else-if="status === 'blocked'"/>
37+
<SvgIcon name="octicon-meter" class="text yellow" :size="size" :class="'job-status-rotate ' + className" v-else-if="status === 'running'"/>
3838
<SvgIcon name="octicon-x-circle-fill" class="text red" :size="size" v-else/><!-- failure, unknown -->
3939
</span>
4040
</template>

‎web_src/js/components/DashboardRepoList.vue‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -359,7 +359,7 @@ export default sfc; // activate the IDE's Vue plugin
359359
otherwise if the "input" handles click event for intermediate status, it breaks the internal state-->
360360
<input type="checkbox" class="tw-pointer-events-none" v-bind.prop="checkboxArchivedFilterProps">
361361
<label>
362-
<svg-icon name="octicon-archive" :size="16" class-name="tw-mr-1"/>
362+
<svg-icon name="octicon-archive" :size="16" class="tw-mr-1"/>
363363
{{ textShowArchived }}
364364
</label>
365365
</div>
@@ -368,7 +368,7 @@ export default sfc; // activate the IDE's Vue plugin
368368
<div class="ui checkbox" ref="checkboxPrivateFilter" :title="checkboxPrivateFilterTitle">
369369
<input type="checkbox" class="tw-pointer-events-none" v-bind.prop="checkboxPrivateFilterProps">
370370
<label>
371-
<svg-icon name="octicon-lock" :size="16" class-name="tw-mr-1"/>
371+
<svg-icon name="octicon-lock" :size="16" class="tw-mr-1"/>
372372
{{ textShowPrivate }}
373373
</label>
374374
</div>
@@ -405,15 +405,15 @@ export default sfc; // activate the IDE's Vue plugin
405405
<ul class="repo-owner-name-list">
406406
<li class="tw-flex tw-items-center tw-py-2" v-for="repo, index in repos" :class="{'active': index === activeIndex}" :key="repo.id">
407407
<a class="repo-list-link muted" :href="repo.link">
408-
<svg-icon :name="repoIcon(repo)" :size="16" class-name="repo-list-icon"/>
408+
<svg-icon :name="repoIcon(repo)" :size="16" class="repo-list-icon"/>
409409
<div class="text truncate">{{ repo.full_name }}</div>
410410
<div v-if="repo.archived">
411411
<svg-icon name="octicon-archive" :size="16"/>
412412
</div>
413413
</a>
414414
<a class="tw-flex tw-items-center" v-if="repo.latest_commit_status" :href="repo.latest_commit_status.TargetURL" :data-tooltip-content="repo.locale_latest_commit_status">
415415
<!-- the commit status icon logic is taken from templates/repo/commit_status.tmpl -->
416-
<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"/>
416+
<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"/>
417417
</a>
418418
</li>
419419
</ul>
@@ -424,7 +424,7 @@ export default sfc; // activate the IDE's Vue plugin
424424
class="item navigation tw-py-1" :class="{'disabled': page === 1}"
425425
@click="changePage(1)" :title="textFirstPage"
426426
>
427-
<svg-icon name="gitea-double-chevron-left" :size="16" class-name="tw-mr-1"/>
427+
<svg-icon name="gitea-double-chevron-left" :size="16" class="tw-mr-1"/>
428428
</a>
429429
<a
430430
class="item navigation tw-py-1" :class="{'disabled': page === 1}"
@@ -437,13 +437,13 @@ export default sfc; // activate the IDE's Vue plugin
437437
class="item navigation" :class="{'disabled': page === finalPage}"
438438
@click="changePage(page + 1)" :title="textNextPage"
439439
>
440-
<svg-icon name="octicon-chevron-right" :size="16" class-name="tw-ml-1"/>
440+
<svg-icon name="octicon-chevron-right" :size="16" class="tw-ml-1"/>
441441
</a>
442442
<a
443443
class="item navigation tw-py-1" :class="{'disabled': page === finalPage}"
444444
@click="changePage(finalPage)" :title="textLastPage"
445445
>
446-
<svg-icon name="gitea-double-chevron-right" :size="16" class-name="tw-ml-1"/>
446+
<svg-icon name="gitea-double-chevron-right" :size="16" class="tw-ml-1"/>
447447
</a>
448448
</div>
449449
</div>
@@ -454,7 +454,7 @@ export default sfc; // activate the IDE's Vue plugin
454454
<ul class="repo-owner-name-list">
455455
<li class="tw-flex tw-items-center tw-py-2" v-for="org in organizations" :key="org.name">
456456
<a class="repo-list-link muted" :href="subUrl + '/' + encodeURIComponent(org.name)">
457-
<svg-icon name="octicon-organization" :size="16" class-name="repo-list-icon"/>
457+
<svg-icon name="octicon-organization" :size="16" class="repo-list-icon"/>
458458
<div class="text truncate">{{ org.name }}</div>
459459
<div><!-- div to prevent underline of label on hover -->
460460
<span class="ui tiny basic label" v-if="org.org_visibility !== 'public'">
@@ -464,7 +464,7 @@ export default sfc; // activate the IDE's Vue plugin
464464
</a>
465465
<div class="text light grey tw-flex tw-items-center tw-ml-2">
466466
{{ org.num_repos }}
467-
<svg-icon name="octicon-repo" :size="16" class-name="tw-ml-1 tw-mt-0.5"/>
467+
<svg-icon name="octicon-repo" :size="16" class="tw-ml-1 tw-mt-0.5"/>
468468
</div>
469469
</li>
470470
</ul>

‎web_src/js/components/RepoBranchTagSelector.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -256,7 +256,7 @@ export default sfc; // activate IDE's Vue plugin
256256
<strong ref="dropdownRefName" class="tw-ml-2 tw-inline-block gt-ellipsis">{{ refNameText }}</strong>
257257
</template>
258258
</span>
259-
<svg-icon name="octicon-triangle-down" :size="14" class-name="dropdown icon"/>
259+
<svg-icon name="octicon-triangle-down" :size="14" class="dropdown icon"/>
260260
</button>
261261
<div class="menu transition" :class="{visible: menuVisible}" v-show="menuVisible" v-cloak>
262262
<div class="ui icon search input">
@@ -265,10 +265,10 @@ export default sfc; // activate IDE's Vue plugin
265265
</div>
266266
<div v-if="showBranchesInDropdown" class="branch-tag-tab">
267267
<a class="branch-tag-item muted" :class="{active: mode === 'branches'}" href="#" @click="handleTabSwitch('branches')">
268-
<svg-icon name="octicon-git-branch" :size="16" class-name="tw-mr-1"/>{{ textBranches }}
268+
<svg-icon name="octicon-git-branch" :size="16" class="tw-mr-1"/>{{ textBranches }}
269269
</a>
270270
<a v-if="!noTag" class="branch-tag-item muted" :class="{active: mode === 'tags'}" href="#" @click="handleTabSwitch('tags')">
271-
<svg-icon name="octicon-tag" :size="16" class-name="tw-mr-1"/>{{ textTags }}
271+
<svg-icon name="octicon-tag" :size="16" class="tw-mr-1"/>{{ textTags }}
272272
</a>
273273
</div>
274274
<div class="branch-tag-divider"/>

‎web_src/js/svg.js‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,6 @@ export const SvgIcon = {
192192
props: {
193193
name: {type: String, required: true},
194194
size: {type: Number, default: 16},
195-
className: {type: String, default: ''},
196195
symbolId: {type: String},
197196
},
198197
render() {
@@ -207,15 +206,7 @@ export const SvgIcon = {
207206
attrs[`^width`] = this.size;
208207
attrs[`^height`] = this.size;
209208

210-
// make the <SvgIcon class="foo" class-name="bar"> classes work together
211-
const classes = [];
212-
for (const cls of svgOuter.classList) {
213-
classes.push(cls);
214-
}
215-
// TODO: drop the `className/class-name` prop in the future, only use "class" prop
216-
if (this.className) {
217-
classes.push(...this.className.split(/\s+/).filter(Boolean));
218-
}
209+
const classes = Array.from(svgOuter.classList);
219210
if (this.symbolId) {
220211
classes.push('tw-hidden', 'svg-symbol-container');
221212
svgInnerHtml = `<symbol id="${this.symbolId}" viewBox="${attrs['^viewBox']}">${svgInnerHtml}</symbol>`;

‎web_src/js/svg.test.js‎

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;
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
});

0 commit comments

Comments
 (0)