diff options
Diffstat (limited to 'app')
25 files changed, 38 insertions, 92 deletions
diff --git a/app/assets/javascripts/boards/components/issue_time_estimate.vue b/app/assets/javascripts/boards/components/issue_time_estimate.vue index 3385aad5b11..5c33ba9461c 100644 --- a/app/assets/javascripts/boards/components/issue_time_estimate.vue +++ b/app/assets/javascripts/boards/components/issue_time_estimate.vue @@ -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 > diff --git a/app/assets/javascripts/cycle_analytics/components/stage_card_list_item.vue b/app/assets/javascripts/cycle_analytics/components/stage_card_list_item.vue index 63549596fac..fc6d83bf96c 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_card_list_item.vue +++ b/app/assets/javascripts/cycle_analytics/components/stage_card_list_item.vue @@ -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> diff --git a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue index b1d568532a6..1d54c4a4264 100644 --- a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue +++ b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue @@ -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> diff --git a/app/assets/javascripts/groups/components/item_actions.vue b/app/assets/javascripts/groups/components/item_actions.vue index cafd22731b1..4b569970204 100644 --- a/app/assets/javascripts/groups/components/item_actions.vue +++ b/app/assets/javascripts/groups/components/item_actions.vue @@ -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> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue index 3156a398113..b6fc567f8cc 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue @@ -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> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue index 302adccd759..47b205f0a75 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue @@ -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> diff --git a/app/assets/javascripts/ide/components/external_link.vue b/app/assets/javascripts/ide/components/external_link.vue index d1857f0176a..558da9b706e 100644 --- a/app/assets/javascripts/ide/components/external_link.vue +++ b/app/assets/javascripts/ide/components/external_link.vue @@ -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> diff --git a/app/assets/javascripts/ide/components/file_row_extra.vue b/app/assets/javascripts/ide/components/file_row_extra.vue index 48be97c8952..5819999a459 100644 --- a/app/assets/javascripts/ide/components/file_row_extra.vue +++ b/app/assets/javascripts/ide/components/file_row_extra.vue @@ -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 diff --git a/app/assets/javascripts/ide/components/jobs/stage.vue b/app/assets/javascripts/ide/components/jobs/stage.vue index b1be25ea602..9ad9d4455b5 100644 --- a/app/assets/javascripts/ide/components/jobs/stage.vue +++ b/app/assets/javascripts/ide/components/jobs/stage.vue @@ -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" /> diff --git a/app/assets/javascripts/ide/components/mr_file_icon.vue b/app/assets/javascripts/ide/components/mr_file_icon.vue index 821be319cce..cf8a1abbde4 100644 --- a/app/assets/javascripts/ide/components/mr_file_icon.vue +++ b/app/assets/javascripts/ide/components/mr_file_icon.vue @@ -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> diff --git a/app/assets/javascripts/ide/components/new_dropdown/button.vue b/app/assets/javascripts/ide/components/new_dropdown/button.vue index 062a64a19d7..5bd6642930c 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/button.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/button.vue @@ -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> diff --git a/app/assets/javascripts/ide/components/repo_file_status_icon.vue b/app/assets/javascripts/ide/components/repo_file_status_icon.vue index 84a962bfc7d..9773e835a5c 100644 --- a/app/assets/javascripts/ide/components/repo_file_status_icon.vue +++ b/app/assets/javascripts/ide/components/repo_file_status_icon.vue @@ -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> diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue index 6cc873359da..89d434a60ba 100644 --- a/app/assets/javascripts/notes/components/note_actions.vue +++ b/app/assets/javascripts/notes/components/note_actions.vue @@ -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"> diff --git a/app/assets/javascripts/notes/components/note_actions/reply_button.vue b/app/assets/javascripts/notes/components/note_actions/reply_button.vue index 8bdee759a23..20551279aec 100644 --- a/app/assets/javascripts/notes/components/note_actions/reply_button.vue +++ b/app/assets/javascripts/notes/components/note_actions/reply_button.vue @@ -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> diff --git a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue index 35eba266625..396ecc3e291 100644 --- a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue +++ b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue @@ -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> diff --git a/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue b/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue index e6f2fe2b5fc..3d96405896d 100644 --- a/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue +++ b/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue @@ -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> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue b/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue index 457a71cab95..75f557d05dd 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue @@ -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> diff --git a/app/assets/javascripts/vue_shared/components/changed_file_icon.vue b/app/assets/javascripts/vue_shared/components/changed_file_icon.vue index a97538d813a..54cd0c9c642 100644 --- a/app/assets/javascripts/vue_shared/components/changed_file_icon.vue +++ b/app/assets/javascripts/vue_shared/components/changed_file_icon.vue @@ -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> diff --git a/app/assets/javascripts/vue_shared/components/ci_icon.vue b/app/assets/javascripts/vue_shared/components/ci_icon.vue index 5d373e179b2..162cfc02959 100644 --- a/app/assets/javascripts/vue_shared/components/ci_icon.vue +++ b/app/assets/javascripts/vue_shared/components/ci_icon.vue @@ -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> diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue index c6d61d6ee62..fe1a2a092ad 100644 --- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue @@ -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> diff --git a/app/assets/javascripts/vue_shared/components/file_icon.vue b/app/assets/javascripts/vue_shared/components/file_icon.vue index b69ecc1dce6..952ffa1fa0e 100644 --- a/app/assets/javascripts/vue_shared/components/file_icon.vue +++ b/app/assets/javascripts/vue_shared/components/file_icon.vue @@ -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> diff --git a/app/assets/javascripts/vue_shared/components/icon.vue b/app/assets/javascripts/vue_shared/components/icon.vue index fa89473da62..73f4dfef062 100644 --- a/app/assets/javascripts/vue_shared/components/icon.vue +++ b/app/assets/javascripts/vue_shared/components/icon.vue @@ -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> diff --git a/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue b/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue index 61239a564a8..5d7e9557aff 100644 --- a/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue +++ b/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue @@ -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" diff --git a/app/assets/javascripts/vue_shared/components/toggle_button.vue b/app/assets/javascripts/vue_shared/components/toggle_button.vue index de70fa2182b..1de866bed37 100644 --- a/app/assets/javascripts/vue_shared/components/toggle_button.vue +++ b/app/assets/javascripts/vue_shared/components/toggle_button.vue @@ -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> diff --git a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue index a60d5eb491e..7c7d46ee759 100644 --- a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue +++ b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue @@ -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 |