Merge branch '38239-update-toggle-design' into 'master'

Update feature toggle design to use icons and make it i18n friendly

Closes #38239

See merge request gitlab-org/gitlab-ce!15904

1 files changed, 23 insertions, 13 deletions

diff --git a/app/assets/javascripts/vue_shared/components/toggle_button.vue b/app/assets/javascripts/vue_shared/components/toggle_button.vue
index ddc9ddbc3a3..4277d9281a0 100644
--- a/app/assets/javascripts/vue_shared/components/toggle_button.vue
+++ b/app/assets/javascripts/vue_shared/components/toggle_button.vue
@@ -1,6 +1,13 @@
 <script>
+  import { s__ } from '../../locale';
+  import icon from './icon.vue';
   import loadingIcon from './loading_icon.vue';
 
+  const ICON_ON = 'status_success_borderless';
+  const ICON_OFF = 'status_failed_borderless';
+  const LABEL_ON = s__('ToggleButton|Toggle Status: ON');
+  const LABEL_OFF = s__('ToggleButton|Toggle Status: OFF');
+
   export default {
     props: {
       name: {
@@ -22,19 +29,10 @@
         required: false,
         default: false,
       },
-      enabledText: {
-        type: String,
-        required: false,
-        default: 'Enabled',
-      },
-      disabledText: {
-        type: String,
-        required: false,
-        default: 'Disabled',
-      },
     },
 
     components: {
+      icon,
       loadingIcon,
     },
 
@@ -43,6 +41,15 @@
       event: 'change',
     },
 
+    computed: {
+      toggleIcon() {
+        return this.value ? ICON_ON : ICON_OFF;
+      },
+      ariaLabel() {
+        return this.value ? LABEL_ON : LABEL_OFF;
+      },
+    },
+
     methods: {
       toggleFeature() {
         if (!this.disabledInput) this.$emit('change', !this.value);
@@ -60,10 +67,8 @@
     />
     <button
       type="button"
-      aria-label="Toggle"
       class="project-feature-toggle"
-      :data-enabled-text="enabledText"
-      :data-disabled-text="disabledText"
+      :aria-label="ariaLabel"
       :class="{
         'is-checked': value,
         'is-disabled': disabledInput,
@@ -72,6 +77,11 @@
       @click="toggleFeature"
     >
       <loadingIcon class="loading-icon" />
+      <span class="toggle-icon">
+        <icon
+          css-classes="toggle-icon-svg"
+          :name="toggleIcon"/>
+      </span>
     </button>
   </label>
 </template>