Skip to content

G
gitlab-ce
Commit 108fdade authored by Paul Slaughter's avatar Paul Slaughter
Browse files
Options

Merge branch 'mg-refactor-icon-component' into 'master' 

Remove unnecessary attributes from icon.vue

See merge request gitlab-org/gitlab!17839
parents 38c88bbe 36e5537a
Hide whitespace changes
Inline Side-by-side
Showing with 81 additions and 174 deletions
app/assets/javascripts/boards/components/issue_time_estimate.vue
View file @ 108fdade
......@@ -34,7 +34,7 @@ export default {
<template>
<span>
<span ref="issueTimeEstimate" class="board-card-info card-number">
<icon name="hourglass" css-classes="board-card-info-icon align-top" /><time
<icon name="hourglass" class="board-card-info-icon align-top" /><time
class="board-card-info-text"
>{{ timeEstimate }}</time
>
......
app/assets/javascripts/cycle_analytics/components/stage_card_list_item.vue
View file @ 108fdade
......@@ -34,7 +34,7 @@ export default {
class="more-actions-toggle btn btn-transparent p-0"
data-toggle="dropdown"
>
<icon css-classes="icon" name="ellipsis_v" />
<icon class="icon" name="ellipsis_v" />
</gl-button>
<ul class="more-actions-dropdown dropdown-menu dropdown-open-left">
<slot name="dropdown-options"></slot>
......
app/assets/javascripts/error_tracking/components/error_tracking_list.vue
View file @ 108fdade
......@@ -100,7 +100,7 @@ export default {
<template slot="lastSeen" slot-scope="errors">
<div class="d-flex align-items-center">
<icon name="calendar" css-classes="text-secondary mr-1" />
<icon name="calendar" class="text-secondary mr-1" />
<time-ago :time="errors.item.lastSeen" class="text-secondary" />
</div>
</template>
......
app/assets/javascripts/groups/components/item_actions.vue
View file @ 108fdade
......@@ -56,7 +56,7 @@ export default {
class="leave-group btn btn-xs no-expand"
@click.prevent="onLeaveGroup"
>
<icon name="leave" css-classes="position-top-0" />
<icon name="leave" class="position-top-0" />
</a>
<a
v-if="group.canEdit"
......@@ -68,7 +68,7 @@ export default {
data-placement="bottom"
class="edit-group btn btn-xs no-expand"
>
<icon name="settings" css-classes="position-top-0" />
<icon name="settings" class="position-top-0" />
</a>
</div>
</template>
app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue
View file @ 108fdade
......@@ -86,7 +86,7 @@ export default {
data-placement="left"
class="append-bottom-10"
>
<icon :name="additionIconName" :size="18" :css-classes="addedFilesIconClass" />
<icon :name="additionIconName" :size="18" :class="addedFilesIconClass" />
</div>
{{ addedFilesLength }}
<div
......@@ -96,7 +96,7 @@ export default {
data-placement="left"
class="prepend-top-10 append-bottom-10"
>
<icon :name="modifiedIconName" :size="18" :css-classes="modifiedFilesClass" />
<icon :name="modifiedIconName" :size="18" :class="modifiedFilesClass" />
</div>
{{ modifiedFilesLength }}
</div>
......
app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
View file @ 108fdade
......@@ -114,7 +114,7 @@ export default {
</span>
<div class="ml-auto d-flex align-items-center">
<div class="d-flex align-items-center ide-commit-list-changed-icon">
<icon :name="iconName" :size="16" :css-classes="iconClass" />
<icon :name="iconName" :size="16" :class="iconClass" />
</div>
</div>
</div>
......
app/assets/javascripts/ide/components/external_link.vue
View file @ 108fdade
......@@ -28,7 +28,7 @@ export default {
rel="noopener noreferrer"
>
<span class="vertical-align-middle">{{ __('Open in file view') }}</span>
<icon :size="16" name="external-link" css-classes="vertical-align-middle space-right" />
<icon :size="16" name="external-link" class="vertical-align-middle space-right" />
</a>
</div>
</template>
app/assets/javascripts/ide/components/file_row_extra.vue
View file @ 108fdade
......@@ -79,7 +79,7 @@ export default {
data-container="body"
data-placement="right"
name="file-modified"
css-classes="prepend-left-5 ide-file-modified"
class="prepend-left-5 ide-file-modified"
/>
</span>
<changed-file-icon
......
app/assets/javascripts/ide/components/jobs/stage.vue
View file @ 108fdade
......@@ -77,7 +77,7 @@ export default {
<div v-if="!stage.isLoading || stage.jobs.length" class="append-right-8 prepend-left-4">
<span class="badge badge-pill"> {{ jobsCount }} </span>
</div>
<icon :name="collapseIcon" css-classes="ide-stage-collapse-icon" />
<icon :name="collapseIcon" class="ide-stage-collapse-icon" />
</div>
<div v-show="!stage.isCollapsed" class="card-body">
<gl-loading-icon v-if="showLoadingIcon" />
......
app/assets/javascripts/ide/components/mr_file_icon.vue
View file @ 108fdade
......@@ -18,6 +18,6 @@ export default {
:title="__('Part of merge request changes')"
:size="12"
name="git-merge"
css-classes="append-right-8"
class="append-right-8"
/>
</template>
app/assets/javascripts/ide/components/new_dropdown/button.vue
View file @ 108fdade
......@@ -52,7 +52,7 @@ export default {
class="btn-blank"
@click.stop.prevent="clicked"
>
<icon :name="icon" :css-classes="iconClasses" />
<icon :name="icon" :class="iconClasses" />
<template v-if="showLabel">
{{ label }}
</template>
......
app/assets/javascripts/ide/components/repo_file_status_icon.vue
View file @ 108fdade
......@@ -29,6 +29,6 @@ export default {
<template>
<span v-if="file.file_lock" v-tooltip :title="lockTooltip" data-container="body">
<icon name="lock" css-classes="file-status-icon" />
<icon name="lock" class="file-status-icon" />
</span>
</template>
app/assets/javascripts/notes/components/note_actions.vue
View file @ 108fdade
......@@ -149,9 +149,9 @@ export default {
title="Add reaction"
data-position="right"
>
<icon css-classes="link-highlight award-control-icon-neutral" name="slight-smile" />
<icon css-classes="link-highlight award-control-icon-positive" name="smiley" />
<icon css-classes="link-highlight award-control-icon-super-positive" name="smiley" />
<icon class="link-highlight award-control-icon-neutral" name="slight-smile" />
<icon class="link-highlight award-control-icon-positive" name="smiley" />
<icon class="link-highlight award-control-icon-super-positive" name="smiley" />
</a>
</div>
<reply-button
......@@ -168,7 +168,7 @@ export default {
class="note-action-button js-note-edit btn btn-transparent qa-note-edit-button"
@click="onEdit"
>
<icon name="pencil" css-classes="link-highlight" />
<icon name="pencil" class="link-highlight" />
</button>
</div>
<div v-if="showDeleteAction" class="note-actions-item">
......@@ -191,7 +191,7 @@ export default {
data-toggle="dropdown"
@click="closeTooltip"
>
<icon css-classes="icon" name="ellipsis_v" />
<icon class="icon" name="ellipsis_v" />
</button>
<ul class="dropdown-menu more-actions-dropdown dropdown-open-left">
<li v-if="canReportAsAbuse">
......
app/assets/javascripts/notes/components/note_actions/reply_button.vue
View file @ 108fdade
......@@ -26,7 +26,7 @@ export default {
:title="__('Reply to comment')"
@click="$emit('startReplying')"
>
<icon name="comment" css-classes="link-highlight" />
<icon name="comment" class="link-highlight" />
</gl-button>
</div>
</template>
app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
View file @ 108fdade
......@@ -194,9 +194,9 @@ export default {
v-show="noEmoji"
class="js-no-emoji-placeholder no-emoji-placeholder position-relative"
>
<icon name="slight-smile" css-classes="award-control-icon-neutral" />
<icon name="smiley" css-classes="award-control-icon-positive" />
<icon name="smile" css-classes="award-control-icon-super-positive" />
<icon name="slight-smile" class="award-control-icon-neutral" />
<icon name="smiley" class="award-control-icon-positive" />
<icon name="smile" class="award-control-icon-super-positive" />
</span>
</button>
</span>
......
app/assets/javascripts/sidebar/components/todo_toggle/todo.vue
View file @ 108fdade
......@@ -82,11 +82,7 @@ export default {
data-boundary="viewport"
@click="handleButtonClick"
>
<icon
v-show="collapsed"
:css-classes="collapsedButtonIconClasses"
:name="collapsedButtonIcon"
/>
<icon v-show="collapsed" :class="collapsedButtonIconClasses" :name="collapsedButtonIcon" />
<span v-show="!collapsed" class="issuable-todo-inner"> {{ buttonLabel }} </span>
<gl-loading-icon v-show="isActionActive" :inline="true" />
</button>
......
app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue
View file @ 108fdade
......@@ -19,6 +19,6 @@ export default {
</script>
<template>
<a :href="link" target="_blank" rel="noopener noreferrer nofollow" :class="cssClass">
{{ __('View app') }} <icon css-classes="fgray" name="external-link" />
{{ __('View app') }} <icon class="fgray" name="external-link" />
</a>
</template>
app/assets/javascripts/vue_shared/components/changed_file_icon.vue
View file @ 108fdade
......@@ -83,7 +83,7 @@ export default {
:class="{ 'ml-auto': isCentered }"
class="file-changed-icon d-inline-block"
>
<icon v-if="showIcon" :name="changedIcon" :size="size" :css-classes="changedIconClass" />
<icon v-if="showIcon" :name="changedIcon" :size="size" :class="changedIconClass" />
</span>
</template>
......
app/assets/javascripts/vue_shared/components/ci_icon.vue
View file @ 108fdade
......@@ -66,5 +66,5 @@ export default {
};
</script>
<template>
<span :class="cssClass"> <icon :name="icon" :size="size" :css-classes="cssClasses" /> </span>
<span :class="cssClass"> <icon :name="icon" :size="size" :class="cssClasses" /> </span>
</template>
app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
View file @ 108fdade
......@@ -40,7 +40,7 @@ export default {
</template>
</p>
<gl-link :href="path" class="btn btn-default" rel="nofollow" download target="_blank">
<icon :size="16" name="download" css-classes="float-left append-right-8" />
<icon :size="16" name="download" class="float-left append-right-8" />
{{ __('Download') }}
</gl-link>
</div>
......
app/assets/javascripts/vue_shared/components/file_icon.vue
View file @ 108fdade
......@@ -75,7 +75,7 @@ export default {
<svg v-if="!loading && !folder" :class="[iconSizeClass, cssClasses]">
<use v-bind="{ 'xlink:href': spriteHref }" />
</svg>
<icon v-if="!loading && folder" :name="folderIconName" :size="size" css-classes="folder-icon" />
<icon v-if="!loading && folder" :name="folderIconName" :size="size" class="folder-icon" />
<gl-loading-icon v-if="loading" :inline="true" />
</span>
</template>
app/assets/javascripts/vue_shared/components/icon.vue
View file @ 108fdade
......@@ -27,7 +27,7 @@ if (process.env.NODE_ENV !== 'production') {
* <icon
* name="retry"
* :size="32"
* css-classes="top"
* class="top"
* />
*/
export default {
......@@ -42,45 +42,7 @@ export default {
type: Number,
required: false,
default: 16,
validator(value) {
return validSizes.includes(value);
},
},
cssClasses: {
type: String,
required: false,
default: '',
},
width: {
type: Number,
required: false,
default: null,
},
height: {
type: Number,
required: false,
default: null,
},
y: {
type: Number,
required: false,
default: null,
},
x: {
type: Number,
required: false,
default: null,
},
tabIndex: {
type: String,
required: false,
default: null,
validator: value => validSizes.includes(value),
},
},
......@@ -99,15 +61,7 @@ export default {
</script>
<template>
<svg
:class="[iconSizeClass, iconTestClass, cssClasses]"
:width="width"
:height="height"
:x="x"
:y="y"
:tabindex="tabIndex"
aria-hidden="true"
>
<svg :class="[iconSizeClass, iconTestClass]" aria-hidden="true">
<use v-bind="{ 'xlink:href': spriteHref }" />
</svg>
</template>
app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue
View file @ 108fdade
......@@ -63,7 +63,7 @@ export default {
<icon
v-if="hasState"
ref="iconElementXL"
:css-classes="iconClass"
:class="iconClass"
:name="iconName"
:size="16"
:title="stateTitle"
......@@ -100,7 +100,7 @@ export default {
<span ref="iconElement">
<icon
v-if="hasState"
:css-classes="iconClass"
:class="iconClass"
:name="iconName"
:title="stateTitle"
:aria-label="state"
......
app/assets/javascripts/vue_shared/components/toggle_button.vue
View file @ 108fdade
......@@ -74,7 +74,7 @@ export default {
@click="toggleFeature"
>
<gl-loading-icon class="loading-icon" />
<span class="toggle-icon"> <icon :name="toggleIcon" css-classes="toggle-icon-svg" /> </span>
<span class="toggle-icon"> <icon :name="toggleIcon" class="toggle-icon-svg" /> </span>
</button>
</label>
</template>
app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
View file @ 108fdade
......@@ -71,15 +71,11 @@ export default {
</div>
<div class="text-secondary">
<div v-if="user.bio" class="js-bio d-flex mb-1">
<icon name="profile" css-classes="category-icon flex-shrink-0" />
<icon name="profile" class="category-icon flex-shrink-0" />
<span class="ml-1">{{ user.bio }}</span>
</div>
<div v-if="user.organization" class="js-organization d-flex mb-1">
<icon
v-show="!jobInfoIsLoading"
name="work"
css-classes="category-icon flex-shrink-0"
/>
<icon v-show="!jobInfoIsLoading" name="work" class="category-icon flex-shrink-0" />
<span class="ml-1">{{ user.organization }}</span>
</div>
<gl-skeleton-loading
......@@ -92,7 +88,7 @@ export default {
<icon
v-show="!locationIsLoading && user.location"
name="location"
css-classes="category-icon flex-shrink-0"
class="category-icon flex-shrink-0"
/>
<span class="ml-1">{{ user.location }}</span>
<gl-skeleton-loading
......
doc/development/fe_guide/icons.md
View file @ 108fdade
......@@ -59,8 +59,8 @@ export default {
<template>
<icon
name="issues"
:size="72"
css-classes="icon-danger"
:size="24"
class="icon-danger"
/>
</template>
```
......
ee/app/assets/javascripts/analytics/cycle_analytics/components/stage_card_list_item.vue
View file @ 108fdade
......@@ -40,7 +40,7 @@ export default {
class="more-actions-toggle btn btn-transparent p-0"
data-toggle="dropdown"
>
<icon css-classes="icon" name="ellipsis_v" />
<icon class="icon" name="ellipsis_v" />
</gl-button>
<ul class="more-actions-dropdown dropdown-menu dropdown-open-left">
<slot name="dropdown-options"></slot>
......
ee/app/assets/javascripts/boards/components/issue_card_weight.vue
View file @ 108fdade
......@@ -30,7 +30,7 @@ export default {
tabindex="1"
v-on="$listeners"
>
<icon name="weight" css-classes="board-card-info-icon" />
<icon name="weight" class="board-card-info-icon" />
<span class="board-card-info-text"> {{ weight }} </span>
<gl-tooltip
:target="() => $refs.itemWeight"
......
ee/app/assets/javascripts/design_management/components/list/item.vue
View file @ 108fdade
......@@ -77,7 +77,7 @@ export default {
<div class="card-body p-0 d-flex align-items-center overflow-hidden position-relative">
<div v-if="icon.name" class="design-event position-absolute">
<span :title="icon.tooltip" :aria-label="icon.tooltip">
<icon :name="icon.name" :size="18" :css-classes="icon.classes" />
<icon :name="icon.name" :size="18" :class="icon.classes" />
</span>
</div>
<img :src="image" :alt="name" class="block ml-auto mr-auto mw-100 mh-100 design-img" />
......
ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment_header.vue
View file @ 108fdade
......@@ -68,7 +68,7 @@ export default {
v-gl-tooltip
:title="$options.tooltips.information"
name="information"
css-classes="dashboard-card-icon"
class="dashboard-card-icon"
/>
<review-app-link
v-else-if="environment.external_url"
......
ee/app/assets/javascripts/epic/components/epic_header.vue
View file @ 108fdade
......@@ -82,7 +82,7 @@ export default {
:class="{ 'status-box-open': isEpicOpen, 'status-box-issue-closed': !isEpicOpen }"
class="issuable-status-box status-box"
>
<icon :name="statusIcon" css-classes="d-block d-sm-none" />
<icon :name="statusIcon" class="d-block d-sm-none" />
<span class="d-none d-sm-block">{{ statusText }}</span>
</div>
<div class="issuable-meta">
......
ee/app/assets/javascripts/epic/components/sidebar_items/sidebar_date_picker.vue
View file @ 108fdade
......@@ -199,8 +199,8 @@ export default {
<icon
v-popover="popoverOptions"
name="question-o"
css-classes="help-icon append-right-5"
tab-index="0"
class="help-icon append-right-5"
tabindex="0"
/>
<gl-button
v-show="canUpdate && !editing"
......@@ -244,8 +244,8 @@ export default {
v-if="isDateInvalid && selectedDateIsFixed"
v-popover="dateInvalidPopoverOptions"
name="warning"
css-classes="date-warning-icon append-right-5 prepend-left-5"
tab-index="0"
class="date-warning-icon append-right-5 prepend-left-5"
tabindex="0"
/>
<span v-if="selectedAndEditable" class="no-value d-flex">
&nbsp;&ndash;&nbsp;
......@@ -282,8 +282,8 @@ export default {
v-if="isDateInvalid && !selectedDateIsFixed"
v-popover="dateInvalidPopoverOptions"
name="warning"
css-classes="date-warning-icon prepend-left-5"
tab-index="0"
class="date-warning-icon prepend-left-5"
tabindex="0"
/>
</abbr>
</div>
......
ee/app/assets/javascripts/geo_nodes/components/geo_node_detail_item.vue
View file @ 108fdade
......@@ -128,7 +128,7 @@ export default {
v-if="hasHelpInfo"
v-popover="popoverConfig"
:size="12"
css-classes="node-detail-help-text prepend-left-5"
class="node-detail-help-text prepend-left-5"
name="question"
/>
</div>
......@@ -148,7 +148,7 @@ export default {
v-tooltip
:title="itemValueStaleTooltip"
name="time-out"
css-classes="prepend-left-10 detail-value-stale-icon"
class="prepend-left-10 detail-value-stale-icon"
data-container="body"
/>
</div>
......
ee/app/assets/javascripts/geo_nodes/components/geo_node_header.vue
View file @ 108fdade
......@@ -81,7 +81,7 @@ export default {
v-tooltip
:name="nodeStatusIconName"
:size="18"
:css-classes="nodeStatusIconClass"
:class="nodeStatusIconClass"
:title="nodeStatusIconTooltip"
data-container="body"
data-placement="bottom"
......
ee/app/assets/javascripts/geo_nodes/components/geo_node_sync_settings.vue
View file @ 108fdade
......@@ -118,7 +118,7 @@ export default {
data-placement="bottom"
>
<strong>{{ syncType }}</strong>
<icon name="retry" css-classes="sync-status-icon prepend-left-5" />
<icon name="retry" class="sync-status-icon prepend-left-5" />
<span v-if="!eventTimestampEmpty" class="sync-status-event-info prepend-left-5">
{{ syncStatusEventInfo }}
</span>
......
ee/app/assets/javascripts/licenses/components/cells/info_cell.vue
View file @ 108fdade
......@@ -44,7 +44,7 @@ export default {
<span class="mr-2 text">{{ title }}</span>
<button ref="popoverTarget" type="button" class="btn-link information-target">
<icon name="information" css-classes="icon d-block" />
<icon name="information" class="icon d-block" />
</button>
<gl-popover
......
ee/app/assets/javascripts/related_issues/components/issue_token.vue
View file @ 108fdade
......@@ -75,7 +75,7 @@ export default {
<icon
v-if="hasState"
v-tooltip
:css-classes="iconClass"
:class="iconClass"
:name="iconName"
:size="12"
:title="stateTitle"
......
ee/app/assets/javascripts/related_items_tree/components/related_items_tree_header.vue
View file @ 108fdade
......@@ -61,7 +61,7 @@ export default {
:class="{ 'ml-2': index }"
class="d-inline-flex align-items-center"
>
<icon :size="16" :name="item.iconName" css-classes="text-secondary mr-1" />
<icon :size="16" :name="item.iconName" class="text-secondary mr-1" />
{{ item.count }}
</span>
</div>
......
ee/app/assets/javascripts/related_items_tree/components/tree_item_body.vue
View file @ 108fdade
......@@ -110,7 +110,7 @@ export default {
<div class="item-title d-flex align-items-center mb-1 mb-xl-0">
<icon
ref="stateIconLg"
:css-classes="stateIconClass"
:class="stateIconClass"
:name="stateIconName"
:size="16"
:aria-label="stateText"
......@@ -129,7 +129,7 @@ export default {
:title="__('Confidential')"
:aria-label="__('Confidential')"
name="eye-slash"
css-classes="confidential-icon append-right-4 align-self-baseline align-self-md-auto mt-xl-0"
class="confidential-icon append-right-4 align-self-baseline align-self-md-auto mt-xl-0"
/>
<gl-link :href="computedPath" class="sortable-link">{{ item.title }}</gl-link>
</div>
......@@ -139,7 +139,7 @@ export default {
>
<icon
ref="stateIconMd"
:css-classes="stateIconClass"
:class="stateIconClass"
:name="stateIconName"
:size="16"
:aria-label="stateText"
......@@ -193,7 +193,7 @@ export default {
class="btn-svg btn-item-remove js-issue-item-remove-button qa-remove-issue-button"
@click="handleRemoveClick"
>
<icon :size="16" name="close" css-classes="btn-item-remove-icon" />
<icon :size="16" name="close" class="btn-item-remove-icon" />
</gl-button>
<span v-if="!parentItem.userPermissions.adminEpic" class="p-3"></span>
</div>
......
ee/app/assets/javascripts/security_dashboard/components/security_dashboard_table_row.vue
View file @ 108fdade
......@@ -84,7 +84,7 @@ export default {
<icon
v-show="vulnerability.dismissal_feedback.comment_details"
name="comment"
css-classes="text-warning vertical-align-middle"
class="text-warning vertical-align-middle"
/>
<span class="vertical-align-middle text-uppercase">{{
s__('vulnerability|dismissed')
......
ee/app/assets/javascripts/security_dashboard/components/vulnerability_issue_link.vue
View file @ 108fdade
......@@ -33,7 +33,7 @@ export default {
<icon
v-gl-tooltip
name="issue-created"
css-classes="text-success vertical-align-middle"
class="text-success vertical-align-middle"
:title="s__('Security Dashboard|Issue Created')"
/>
<a :href="issue.issue_url" class="vertical-align-middle">{{ linkText }}</a>
......
ee/app/assets/javascripts/vue_merge_request_widget/components/visual_review_app_link.vue
View file @ 108fdade
......@@ -147,7 +147,7 @@ export default {
<template slot="modal-ok">
<a :href="link" target="_blank" rel="noopener noreferrer nofollow" class="text-white">
{{ s__('VisualReviewApp|Open review app') }}
<icon css-classes="fwhite" name="external-link" />
<icon class="fwhite" name="external-link" />
</a>
</template>
<p v-html="instructionText.intro.p1"></p>
......
ee/app/assets/javascripts/vue_shared/security_reports/components/event_item.vue
View file @ 108fdade
......@@ -93,7 +93,7 @@ export default {
:title="button.title"
@click="$emit(button.emit)"
>
<icon :name="button.iconName" css-classes="link-highlight" />
<icon :name="button.iconName" class="link-highlight" />
</gl-button>
</div>
</div>
......
ee/spec/frontend/analytics/productivity_analytics/components/__snapshots__/metric_chart_spec.js.snap
View file @ 108fdade
......@@ -34,7 +34,6 @@ exports[`MetricChart component template when isLoading is false and chartData is
<icon-stub
aria-label="Selected"
class="flex-shrink-0 append-right-4 invisible"
cssclasses=""
name="mobile-issue-close"
size="16"
title="Selected"
......@@ -54,7 +53,6 @@ exports[`MetricChart component template when isLoading is false and chartData is
<icon-stub
aria-label="Selected"
class="flex-shrink-0 append-right-4 invisible"
cssclasses=""
name="mobile-issue-close"
size="16"
title="Selected"
......
ee/spec/frontend/analytics/productivity_analytics/components/__snapshots__/mr_table_spec.js.snap
View file @ 108fdade
......@@ -51,7 +51,6 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
>
<icon-stub
class="flex-shrink-0 append-right-4 invisible"
cssclasses=""
name="mobile-issue-close"
size="16"
/>
......@@ -69,7 +68,6 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
>
<icon-stub
class="flex-shrink-0 append-right-4"
cssclasses=""
name="mobile-issue-close"
size="16"
/>
......@@ -87,7 +85,6 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
>
<icon-stub
class="flex-shrink-0 append-right-4 invisible"
cssclasses=""
name="mobile-issue-close"
size="16"
/>
......
ee/spec/frontend/dependencies/components/__snapshots__/dependencies_actions_spec.js.snap
View file @ 108fdade
......@@ -18,7 +18,6 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
>
<icon-stub
class="flex-shrink-0 append-right-4"
cssclasses=""
name="mobile-issue-close"
size="16"
/>
......@@ -33,7 +32,6 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
>
<icon-stub
class="flex-shrink-0 append-right-4 invisible"
cssclasses=""
name="mobile-issue-close"
size="16"
/>
......@@ -48,7 +46,6 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
>
<icon-stub
class="flex-shrink-0 append-right-4 invisible"
cssclasses=""
name="mobile-issue-close"
size="16"
/>
......@@ -65,7 +62,6 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
title=""
>
<icon-stub
cssclasses=""
name="sort-lowest"
size="16"
/>
......@@ -80,7 +76,6 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
title=""
>
<icon-stub
cssclasses=""
name="download"
size="16"
/>
......
ee/spec/frontend/dependencies/components/__snapshots__/dependencies_table_row_spec.js.snap
View file @ 108fdade
......@@ -25,7 +25,6 @@ exports[`DependenciesTableRow component when a dependency with no vulnerabilitie
>
<icon-stub
class="align-middle mr-1"
cssclasses=""
name="check-circle"
size="16"
/>
......@@ -160,7 +159,6 @@ exports[`DependenciesTableRow component when a dependency with vulnerabilities i
>
<icon-stub
class="align-top text-secondary-700 d-none d-md-inline"
cssclasses=""
name="arrow-down"
size="16"
/>
......
ee/spec/frontend/dependencies/components/__snapshots__/dependency_list_alert_spec.js.snap
View file @ 108fdade
......@@ -10,7 +10,6 @@ exports[`DependencyListAlert component given no props matches the snapshot 1`] =
>
<icon-stub
aria-hidden="true"
cssclasses=""
name="close"
size="16"
/>
......@@ -37,7 +36,6 @@ exports[`DependencyListAlert component given the headerText prop matches the sna
>
<icon-stub
aria-hidden="true"
cssclasses=""
name="close"
size="16"
/>
......@@ -68,7 +66,6 @@ exports[`DependencyListAlert component given the warning type and headerText pro
>
<icon-stub
aria-hidden="true"
cssclasses=""
name="close"
size="16"
/>
......
ee/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap
View file @ 108fdade
......@@ -64,7 +64,7 @@ exports[`Design management list item component renders item with correct status
title="Added in this version"
>
<icon-stub
cssclasses="text-success-500"
class="text-success-500"
name="file-addition-solid"
size="18"
/>
......@@ -125,7 +125,7 @@ exports[`Design management list item component renders item with correct status
title="Deleted in this version"
>
<icon-stub
cssclasses="text-danger-500"
class="text-danger-500"
name="file-deletion-solid"
size="18"
/>
......@@ -186,7 +186,7 @@ exports[`Design management list item component renders item with correct status
title="Modified in this version"
>
<icon-stub
cssclasses="text-primary-500"
class="text-primary-500"
name="file-modified-solid"
size="18"
/>
......@@ -279,7 +279,6 @@ exports[`Design management list item component renders item with multiple commen
>
<icon-stub
class="ml-1"
cssclasses=""
name="comments"
size="16"
/>
......@@ -393,7 +392,6 @@ exports[`Design management list item component renders item with single comment
>
<icon-stub
class="ml-1"
cssclasses=""
name="comments"
size="16"
/>
......
ee/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap
View file @ 108fdade
......@@ -9,7 +9,6 @@ exports[`Design management toolbar component renders design and updated data 1`]
class="mr-3 text-plain"
>
<icon-stub
cssclasses=""
name="close"
size="18"
/>
......
ee/spec/frontend/design_management/components/toolbar/__snapshots__/pagination_button_spec.js.snap
View file @ 108fdade
......@@ -8,7 +8,6 @@ exports[`Design management pagination button component disables button when no d
to="[object Object]"
>
<icon-stub
cssclasses=""
name="angle-right"
size="16"
/>
......@@ -22,7 +21,6 @@ exports[`Design management pagination button component renders router-link 1`] =
to="[object Object]"
>
<icon-stub
cssclasses=""
name="angle-right"
size="16"
/>
......
ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_header_spec.js.snap
View file @ 108fdade
......@@ -119,7 +119,7 @@ exports[`Environment Header with environments grouped into a folder matches the
</div>
<icon-stub
cssclasses="dashboard-card-icon"
class="dashboard-card-icon"
data-original-title="You are looking at the last updated environment"
name="information"
size="16"
......
ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_spec.js.snap
View file @ 108fdade
......@@ -37,7 +37,6 @@ exports[`Environment matchs the snapshot 1`] = `
class="branch-commit"
>
<icon-stub
cssclasses=""
name="work"
size="16"
/>
......
ee/spec/frontend/environments_dashboard/components/__snapshots__/project_header_spec.js.snap
View file @ 108fdade
......@@ -59,7 +59,6 @@ exports[`Project Header matches the snapshot 1`] = `
>
<icon-stub
class="text-secondary"
cssclasses=""
name="ellipsis_v"
size="16"
/>
......
ee/spec/frontend/licenses/components/cards/__snapshots__/license_card_body_spec.js.snap
View file @ 108fdade
......@@ -203,7 +203,6 @@ exports[`LicenseCardBody renders a loading state if isRemoving 1`] = `
class="p-5 d-flex justify-content-center align-items-center license-card-loading"
>
<icon-stub
cssclasses=""
name="spinner"
size="16"
/>
......
ee/spec/frontend/licenses/components/cells/__snapshots__/header_cell_spec.js.snap
View file @ 108fdade
......@@ -7,7 +7,6 @@ exports[`HeaderCell renders an inflexible cell with a title with an icon through
<template>
<icon-stub
class="icon"
cssclasses=""
name="retry"
size="16"
/>
......
ee/spec/frontend/licenses/components/cells/__snapshots__/info_cell_spec.js.snap
View file @ 108fdade
......@@ -18,7 +18,7 @@ exports[`InfoCell renders a number value 1`] = `
type="button"
>
<icon-stub
cssclasses="icon d-block"
class="icon d-block"
name="information"
size="16"
/>
......@@ -52,7 +52,7 @@ exports[`InfoCell renders a title and string value with an info popover through
type="button"
>
<icon-stub
cssclasses="icon d-block"
class="icon d-block"
name="information"
size="16"
/>
......
spec/frontend/notes/components/__snapshots__/discussion_jump_to_next_button_spec.js.snap
View file @ 108fdade
......@@ -11,7 +11,6 @@ exports[`JumpToNextDiscussionButton matches the snapshot 1`] = `
title=""
>
<icon-stub
cssclasses=""
name="comment-next"
size="16"
/>
......
spec/frontend/sidebar/__snapshots__/confidential_issue_sidebar_spec.js.snap
View file @ 108fdade
......@@ -14,7 +14,6 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = false and
>
<icon-stub
aria-hidden="true"
cssclasses=""
name="eye"
size="16"
/>
......@@ -40,7 +39,6 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = false and
<icon-stub
aria-hidden="true"
class="sidebar-item-icon inline"
cssclasses=""
name="eye"
size="16"
/>
......@@ -68,7 +66,6 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = false and
>
<icon-stub
aria-hidden="true"
cssclasses=""
name="eye"
size="16"
/>
......@@ -104,7 +101,6 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = false and
<icon-stub
aria-hidden="true"
class="sidebar-item-icon inline"
cssclasses=""
name="eye"
size="16"
/>
......@@ -132,7 +128,6 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = true and
>
<icon-stub
aria-hidden="true"
cssclasses=""
name="eye-slash"
size="16"
/>
......@@ -158,7 +153,6 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = true and
<icon-stub
aria-hidden="true"
class="sidebar-item-icon inline is-active"
cssclasses=""
name="eye-slash"
size="16"
/>
......@@ -186,7 +180,6 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = true and
>
<icon-stub
aria-hidden="true"
cssclasses=""
name="eye-slash"
size="16"
/>
......@@ -222,7 +215,6 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = true and
<icon-stub
aria-hidden="true"
class="sidebar-item-icon inline is-active"
cssclasses=""
name="eye-slash"
size="16"
/>
......
spec/frontend/sidebar/__snapshots__/todo_spec.js.snap
View file @ 108fdade
......@@ -14,7 +14,7 @@ exports[`SidebarTodo template renders component container element with proper da
type="button"
>
<icon-stub
cssclasses="todo-undone"
class="todo-undone"
name="todo-done"
size="16"
style="display: none;"
......
spec/frontend/sidebar/todo_spec.js
View file @ 108fdade
......@@ -44,7 +44,12 @@ describe('SidebarTodo', () => {
({ isTodo, iconClass, label, icon }) => {
createComponent({ isTodo });
expect(wrapper.find(Icon).props('cssClasses')).toStrictEqual(iconClass);
expect(
wrapper
.find(Icon)
.classes()
.join(' '),
).toStrictEqual(iconClass);
expect(wrapper.find(Icon).props('name')).toStrictEqual(icon);
expect(wrapper.find('button').text()).toBe(label);
},
......
spec/frontend/vue_shared/components/changed_file_icon_spec.js
View file @ 108fdade
......@@ -28,10 +28,7 @@ describe('Changed file icon', () => {
const findIcon = () => wrapper.find(Icon);
const findIconName = () => findIcon().props('name');
const findIconClasses = () =>
findIcon()
.props('cssClasses')
.split(' ');
const findIconClasses = () => findIcon().classes();
const findTooltipText = () => wrapper.attributes('data-original-title');
it('with isCentered true, adds center class', () => {
......
spec/frontend/vue_shared/components/file_icon_spec.js
View file @ 108fdade
......@@ -49,7 +49,7 @@ describe('File Icon component', () => {
});
expect(findIcon().exists()).toBe(false);
expect(wrapper.find(Icon).props('cssClasses')).toContain('folder-icon');
expect(wrapper.find(Icon).classes()).toContain('folder-icon');
});
it('should render a loading icon', () => {
......
spec/javascripts/vue_shared/components/icon_spec.js
View file @ 108fdade
......@@ -12,8 +12,6 @@ describe('Sprite Icon Component', function() {
icon = mountComponent(IconComponent, {
name: 'commit',
size: 32,
cssClasses: 'extraclasses',
tabIndex: '0',
});
});
......@@ -47,10 +45,8 @@ describe('Sprite Icon Component', function() {
it('should properly render img css', function() {
const { classList } = icon.$el;
const containsSizeClass = classList.contains('s32');
const containsCustomClass = classList.contains('extraclasses');
expect(containsSizeClass).toBe(true);
expect(containsCustomClass).toBe(true);
});
it('`name` validator should return false for non existing icons', () => {
......@@ -60,9 +56,5 @@ describe('Sprite Icon Component', function() {
it('`name` validator should return false for existing icons', () => {
expect(Icon.props.name.validator('commit')).toBe(true);
});
it('should contain `tabindex` attribute on svg element when `tabIndex` prop is defined', () => {
expect(icon.$el.getAttribute('tabindex')).toBe('0');
});
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7