Merge branch...

Merge branch '27767-fix-the-following-style-lint-errors-and-warnings-for-app-assets-stylesheets-framework-toggle' into 'master'

Fix style-lint warnings for `app/assets/stylesheets/framework/toggle.scss`

See merge request gitlab-org/gitlab!38537

app/assets/javascripts/vue_shared/components/toggle_button.vue

 <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>

app/assets/stylesheets/framework/toggle.scss

@@ -31,7 +31,7 @@
   height: 24px;
   cursor: pointer;
   user-select: none;
-  background: $gl-gray-400;
+  background: $gray-400;
   border-radius: 12px;
   padding: 3px;
   transition: all 0.4s ease;
@@ -51,28 +51,12 @@
     display: block;
     left: 0;
     border-radius: 9px;
-    background: $feature-toggle-color;
+    background: $white;
     transition: all 0.2s ease;
-
-    &,
-    .toggle-icon-svg {
     width: $default-icon-size;
     height: $default-icon-size;
   }
 
-    .toggle-icon-svg {
-      fill: $gl-gray-400;
-    }
-
-    .toggle-status-checked {
-      display: none;
-    }
-
-    .toggle-status-unchecked {
-      display: inline;
-    }
-  }
-
   .loading-icon {
     display: none;
     font-size: 12px;
@@ -84,10 +68,6 @@
   }
 
   &.is-loading {
-    .toggle-icon {
-      display: none;
-    }
-
     .loading-icon {
       display: block;
 
@@ -101,24 +81,23 @@
   }
 
   &.is-checked {
-    background: $feature-toggle-color-enabled;
+    background: $blue-400;
 
     .toggle-icon {
       left: calc(100% - 18px);
-
-      .toggle-icon-svg {
-        fill: $feature-toggle-color-enabled;
+    }
   }
 
-      .toggle-status-checked {
+  &.is-checked .toggle-icon .toggle-status-checked,
+  .toggle-icon .toggle-status-unchecked {
     display: inline;
   }
 
-      .toggle-status-unchecked {
+  &.is-checked .toggle-icon .toggle-status-unchecked,
+  &.is-loading .toggle-icon,
+  .toggle-icon .toggle-status-checked {
     display: none;
   }
-    }
-  }
 
   &.is-disabled {
     opacity: 0.4;

app/assets/stylesheets/framework/variables.scss

@@ -751,10 +751,6 @@ $login-brand-holder-color: #888;
 $project-option-descr-color: #54565b;
 $project-network-controls-color: #888;
 
-$feature-toggle-color: #fff;
-$feature-toggle-text-color: #fff;
-$feature-toggle-color-enabled: #4a8bee;
-
 /*
  * Monitor Charts
  */

app/views/projects/pages_domains/_certificate.html.haml

@@ -19,8 +19,8 @@
           "aria-label": _("Automatic certificate management using Let's Encrypt") }
           = f.hidden_field :auto_ssl_enabled?, class: "js-project-feature-toggle-input"
           %span.toggle-icon
-            = sprite_icon("status_success_borderless", size: 16, css_class: "toggle-icon-svg toggle-status-checked")
-            = sprite_icon("status_failed_borderless", size: 16, css_class: "toggle-icon-svg toggle-status-unchecked")
+            = sprite_icon("status_success_borderless", size: 18, css_class: "gl-text-blue-500 toggle-status-checked")
+            = sprite_icon("status_failed_borderless", size: 18, css_class: "gl-text-gray-400 toggle-status-unchecked")
         %p.text-secondary.mt-3
           - docs_link_url = help_page_path("user/project/pages/custom_domains_ssl_tls_certification/lets_encrypt_integration.md")
           - docs_link_start = "<a href=\"%{docs_link_url}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-nowrap\">".html_safe % { docs_link_url: docs_link_url }

app/views/shared/buttons/_project_feature_toggle.html.haml

@@ -12,5 +12,5 @@
   - if yield.present?
     = yield
   %span.toggle-icon
-    = sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked')
-    = sprite_icon('status_failed_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-unchecked')
+    = sprite_icon('status_success_borderless', size: 18, css_class: 'gl-text-blue-500 toggle-status-checked')
+    = sprite_icon('status_failed_borderless', size: 18, css_class: 'gl-text-gray-400 toggle-status-unchecked')

changelogs/unreleased/27767-fix-the-following-style-lint-errors-and-warnings-for-app-assets-sty.yml

+---
+title: Update color and vertical alignment of project feature toggle
+merge_request: 38537
+author:
+type: changed

spec/frontend/vue_shared/components/toggle_button_spec.js

@@ -32,7 +32,7 @@ describe('Toggle Button', () => {
 
     it('renders input status icon', () => {
       expect(vm.$el.querySelectorAll('span.toggle-icon').length).toEqual(1);
-      expect(vm.$el.querySelectorAll('svg.s16.toggle-icon-svg').length).toEqual(1);
+      expect(vm.$el.querySelectorAll('svg.s18').length).toEqual(1);
     });
   });