Merge branch 'mg-integrate-styled-checkboxes' into 'master'

Integrate styled checkboxes from latest gitlab-ui changes

See merge request gitlab-org/gitlab!54188

app/assets/javascripts/diffs/components/diff_file_header.vue

@@ -339,14 +339,12 @@ export default {
         v-if="isReviewable && showLocalFileReviews"
         v-gl-tooltip.hover
         data-testid="fileReviewCheckbox"
-        class="gl-mb-0"
+        class="gl-mr-5 gl-display-flex gl-align-items-center"
         :title="$options.i18n.fileReviewTooltip"
         :checked="reviewed"
         @change="toggleReview"
       >
-        <span class="gl-line-height-20">
-          {{ $options.i18n.fileReviewLabel }}
-        </span>
+        {{ $options.i18n.fileReviewLabel }}
       </gl-form-checkbox>
       <gl-button-group class="gl-pt-0!">
         <gl-button

app/assets/javascripts/integrations/edit/components/active_checkbox.vue

@@ -38,7 +38,7 @@ export default {
     <gl-form-checkbox
       v-model="activated"
       name="service[active]"
-      class="gl-display-block gl-line-height-0"
+      class="gl-display-block"
       :disabled="isInheriting"
       @change="onChange"
     >

app/assets/stylesheets/disable_animations.scss

@@ -12,9 +12,3 @@
   animation: none !important;
   /* stylelint-enable property-no-vendor-prefix */
 }
-
-// Disable sticky changes bar for tests
-.diff-files-changed {
-  position: relative !important;
-  top: 0 !important;
-}

app/assets/stylesheets/framework/forms.scss

@@ -35,7 +35,8 @@ label {
     margin: 0;
   }
 
-  &.form-check-label {
+  &.form-check-label,
+  &.custom-control-label {
     font-weight: $gl-font-weight-normal;
   }
 

app/assets/stylesheets/test_environment.scss

+// Disable sticky changes bar for tests
+.diff-files-changed {
+  position: relative !important;
+  top: 0 !important;
+}
+
+// Un-hide inputs for @gitlab/ui custom checkboxes and radios so Capybara can target them
+.custom-control-input {
+  z-index: 500;
+  opacity: 1;
+}

app/views/layouts/_head.html.haml

@@ -44,6 +44,7 @@
     = yield :page_specific_styles
     = stylesheet_link_tag_defer "application_utilities"
   = stylesheet_link_tag "disable_animations", media: "all" if Rails.env.test? || Gitlab.config.gitlab['disable_animations']
+  = stylesheet_link_tag "test_environment", media: "all" if Rails.env.test?
 
   = stylesheet_link_tag_defer "highlight/themes/#{user_color_scheme}"
 

config/application.rb

@@ -219,6 +219,7 @@ module Gitlab
     config.assets.precompile << "lazy_bundles/select2.css"
     config.assets.precompile << "performance_bar.css"
     config.assets.precompile << "disable_animations.css"
+    config.assets.precompile << "test_environment.css"
     config.assets.precompile << "snippets.css"
     config.assets.precompile << "locale/**/app.js"
     config.assets.precompile << "emoji_sprites.css"

package.json

@@ -58,7 +58,7 @@
     "@gitlab/favicon-overlay": "2.0.0",
     "@gitlab/svgs": "1.184.0",
     "@gitlab/tributejs": "1.0.0",
-    "@gitlab/ui": "27.15.0",
+    "@gitlab/ui": "28.0.0",
     "@gitlab/visual-review-tools": "1.6.1",
     "@rails/actioncable": "^6.0.3-4",
     "@rails/ujs": "^6.0.3-4",

spec/frontend/artifacts_settings/components/__snapshots__/keep_latest_artifact_checkbox_spec.js.snap

@@ -7,7 +7,6 @@ exports[`Keep latest artifact checkbox when application keep latest artifact set
   <b-form-checkbox-stub
     checked="true"
     class="gl-form-checkbox"
-    plain="true"
     value="true"
   >
     <strong

spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js

@@ -23,7 +23,7 @@ describe('DuplicateDashboardForm', () => {
     findByRef(ref).setValue(val);
   };
   const setChecked = (value) => {
-    const input = wrapper.find(`.form-check-input[value="${value}"]`);
+    const input = wrapper.find(`.custom-control-input[value="${value}"]`);
     input.element.checked = true;
     input.trigger('click');
     input.trigger('change');

yarn.lock

@@ -907,10 +907,10 @@
   resolved "https://registry.yarnpkg.com/@gitlab/tributejs/-/tributejs-1.0.0.tgz#672befa222aeffc83e7d799b0500a7a4418e59b8"
   integrity sha512-nmKw1+hB6MHvlmPz63yPwVs1qQkycHwsKgxpEbzmky16Y6mL4EJMk3w1b8QlOAF/AIAzjCERPhe/R4MJiohbZw==
 
-"@gitlab/ui@27.15.0":
-  version "27.15.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-27.15.0.tgz#79fde9dd314f45aa4c061dc1bee8254f1101f79d"
-  integrity sha512-xkEu/ewbcGkqHcbS7LdQoygKPpt2hUFgFHTOJ2VirgnA810/wvb5N7MrwQvKX2dy8kAdGwIbYyOZQXt3DIKzYA==
+"@gitlab/ui@28.0.0":
+  version "28.0.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-28.0.0.tgz#712a24ba970e69eed595209194d69574851034c6"
+  integrity sha512-6gJKUEnqYAYxyWta/CJcSSPNu07iVrQ4m6Sxoh/Sjo7VpPE4VjLgTax3CdqET4KokUbIKGSWyH3s+IvtzDzFqA==
   dependencies:
     "@babel/standalone" "^7.0.0"
     "@gitlab/vue-toasted" "^1.3.0"