diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-08-20 21:42:06 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-08-20 21:42:06 +0300 |
commit | 6e4e1050d9dba2b7b2523fdd1768823ab85feef4 (patch) | |
tree | 78be5963ec075d80116a932011d695dd33910b4e /app/assets/javascripts/vue_shared/components/toggle_button.vue | |
parent | 1ce776de4ae122aba3f349c02c17cebeaa8ecf07 (diff) |
Add latest changes from gitlab-org/gitlab@13-3-stable-ee
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/toggle_button.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/toggle_button.vue | 20 |
1 files changed, 14 insertions, 6 deletions
diff --git a/app/assets/javascripts/vue_shared/components/toggle_button.vue b/app/assets/javascripts/vue_shared/components/toggle_button.vue index 1de866bed37..540edc9f61c 100644 --- a/app/assets/javascripts/vue_shared/components/toggle_button.vue +++ b/app/assets/javascripts/vue_shared/components/toggle_button.vue @@ -1,7 +1,6 @@ <script> -import { GlLoadingIcon } from '@gitlab/ui'; +import { GlLoadingIcon, GlIcon } from '@gitlab/ui'; import { s__ } from '../../locale'; -import icon from './icon.vue'; const ICON_ON = 'status_success_borderless'; const ICON_OFF = 'status_failed_borderless'; @@ -10,7 +9,7 @@ const LABEL_OFF = s__('ToggleButton|Toggle Status: OFF'); export default { components: { - icon, + GlIcon, GlLoadingIcon, }, @@ -63,18 +62,27 @@ export default { <label class="toggle-wrapper"> <input v-if="name" :name="name" :value="value" type="hidden" /> <button + type="button" + role="switch" + class="project-feature-toggle" :aria-label="ariaLabel" + :aria-checked="value" :class="{ 'is-checked': value, + 'gl-blue-500': value, 'is-disabled': disabledInput, 'is-loading': isLoading, }" - type="button" - class="project-feature-toggle" @click="toggleFeature" > <gl-loading-icon class="loading-icon" /> - <span class="toggle-icon"> <icon :name="toggleIcon" class="toggle-icon-svg" /> </span> + <span class="toggle-icon"> + <gl-icon + :size="18" + :name="toggleIcon" + :class="value ? 'gl-text-blue-500' : 'gl-text-gray-400'" + /> + </span> </button> </label> </template> |