From d2dd20fc9cebbdeff12a8eae2d18361d9c5c18b2 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Tue, 19 Dec 2023 16:33:30 +0100
Subject: [PATCH] Simplified labels FF

This MR introduces the FF :simplified_labels

For testing purposes we moved the changes from GitLab UI
https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3306
directly to GitLab as this is a change which spans over the
hole product and can make a lot of impacts.

Once verified we'll move things to GitLab UI and remove those
overrides again from the product.
---
 app/assets/stylesheets/framework.scss         |  1 +
 app/assets/stylesheets/framework/labels.scss  | 56 +++++++++++++++++++
 app/views/layouts/application.html.haml       |  3 +-
 .../development/simplified_labels.yml         |  8 +++
 4 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/stylesheets/framework/labels.scss
 create mode 100644 config/feature_flags/development/simplified_labels.yml

diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 19eaac9e9084c0..dd4b6f51ebee51 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -26,6 +26,7 @@
 @import 'framework/header';
 @import 'framework/top_bar';
 @import 'framework/highlight';
+@import 'framework/labels';
 @import 'framework/lists';
 @import 'framework/logo';
 @import 'framework/markdown_area';
diff --git a/app/assets/stylesheets/framework/labels.scss b/app/assets/stylesheets/framework/labels.scss
new file mode 100644
index 00000000000000..1933af5151c327
--- /dev/null
+++ b/app/assets/stylesheets/framework/labels.scss
@@ -0,0 +1,56 @@
+// FF :simplified_labels
+//
+// Temporarily override label styles
+// globally
+//
+// Once verified we will update the
+// label component in GitLab UI
+// refactor GitLab and remove this
+// custom code
+//
+// see https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3307
+.ff-simplified-labels-enabled {
+  // These changes will be moved to
+  // GitLab UI's label component
+  .gl-label,
+  .gl-label-sm {
+    @include gl-vertical-align-bottom;
+
+    &:focus:active {
+      @include gl-reset-color;
+      @include gl-shadow-none;
+      @include gl-outline-none;
+    }
+
+    .gl-label-text,
+    .gl-label-text-scoped {
+      @include gl-font-sm;
+      padding-block: $gl-spacing-scale-1;
+      padding-inline: calc(#{$gl-spacing-scale-3} - 2px);
+    }
+
+    > .gl-label-close.gl-button {
+      width: px-to-rem(14px);
+      height: px-to-rem(14px);
+      margin-left: calc(#{-$gl-spacing-scale-2} - 1px);
+      margin-right: calc(#{$gl-spacing-scale-2} - 1px);
+    }
+  }
+
+  // These changes will be moved to
+  // app/assets/stylesheets/framework/sidebar.scss
+  .issuable-show-labels .gl-label {
+    margin-bottom: $gl-spacing-scale-2;
+    margin-right: $gl-spacing-scale-2;
+  }
+
+  // These changes will be moved to
+  // app/assets/stylesheets/framework/typography.scss
+  .md p > code {
+    font-size: px-to-rem(13px);
+  }
+
+  .md code {
+    @include gl-vertical-align-bottom;
+  }
+}
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 78fa40167f8236..71c5e2d24a7aa1 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -1,11 +1,12 @@
 - page_classes = page_class << @html_class
 - page_classes = [user_application_theme, page_classes.flatten.compact]
 - body_classes = [user_tab_width, @body_class, client_class_list, *custom_diff_color_classes]
+- ff_simplified_labels_enabled = Feature.enabled?(:simplified_labels) ? 'ff-simplified-labels-enabled' : ''
 
 !!! 5
 %html{ lang: I18n.locale, class: page_classes }
   = render "layouts/head"
-  %body{ class: body_classes, data: body_data }
+  %body{ class: [body_classes, ff_simplified_labels_enabled], data: body_data }
     = render "layouts/init_auto_complete" if @gfm_form
     = render "layouts/init_client_detection_flags"
     = render "layouts/visual_review" if review_apps_enabled?
diff --git a/config/feature_flags/development/simplified_labels.yml b/config/feature_flags/development/simplified_labels.yml
new file mode 100644
index 00000000000000..95619cd5ea53d3
--- /dev/null
+++ b/config/feature_flags/development/simplified_labels.yml
@@ -0,0 +1,8 @@
+---
+name: simplified_labels
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/140239
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/437859
+milestone: '16.8'
+type: development
+group: group::ux paper cuts
+default_enabled: false
-- 
GitLab