From 34b0ab6c4491e587393bbcc4146ed11c117f00c8 Mon Sep 17 00:00:00 2001
From: Illya Klymov <xanf@xanf.me>
Date: Tue, 14 Apr 2020 15:34:06 +0300
Subject: [PATCH 01/10] Fix visual_gitlab_integration job

* introduce new build_gitlab_css step to build original gitlab
css with variables, reset to default
---
 .gitignore                                    |   1 +
 .gitlab-ci.yml                                |  29 +++--
 .storybook/generate-preview-head.js           |   3 +
 .storybook/gitlab-css-builder/builder.js      | 117 ++++++++++++++++++
 .../@gitlab/at.js/dist/css/jquery.atwho.css   |   0
 .../stubs/dropzone/dist/basic.css             |   0
 .../stubs/font-awesome.scss                   |   7 ++
 .../stubs/select2/select2.css                 |   0
 .storybook/preview-head.pug                   |  44 ++++---
 .storybook/webpack.config.js                  |  13 +-
 README.md                                     |   7 +-
 doc/debugging-gitlab-ui-with-gitlab-css.md    |  27 ++++
 package.json                                  |   3 +
 .../avatar_labeled.documentation.js           |   2 +-
 .../avatar_link/avatar_link.documentation.js  |   2 +-
 .../avatars_inline.documentation.js           |   2 +-
 .../breadcrumb/breadcrumb.documentation.js    |   2 +-
 .../daterange_picker.documentation.js         |   2 +-
 .../form_checkbox.documentation.js            |   2 +-
 .../form_input/form_input.documentation.js    |   2 +-
 .../form_radio/form_radio.documentation.js    |   2 +-
 .../form_radio_group.documentation.js         |   2 +-
 .../base/label/label.documentation.js         |   2 +-
 .../pagination/pagination.documentation.js    |   2 +-
 .../search_box_by_type.documentation.js       |   2 +-
 .../skeleton_loader.documentation.js          |   2 +-
 .../base/tabs/tabs/tabs.documentation.js      |   2 +-
 .../base/token/token.documentation.js         |   2 +-
 .../charts/area/area.documentation.js         |   2 +-
 .../charts/line/line.documentation.js         |   2 +-
 .../stacked_column.documentation.js           |   2 +-
 static/gitlab/.gitkeep                        |   0
 yarn.lock                                     |  58 ++++++++-
 33 files changed, 279 insertions(+), 66 deletions(-)
 create mode 100644 .storybook/gitlab-css-builder/builder.js
 create mode 100644 .storybook/gitlab-css-builder/stubs/@gitlab/at.js/dist/css/jquery.atwho.css
 create mode 100644 .storybook/gitlab-css-builder/stubs/dropzone/dist/basic.css
 create mode 100644 .storybook/gitlab-css-builder/stubs/font-awesome.scss
 create mode 100644 .storybook/gitlab-css-builder/stubs/select2/select2.css
 create mode 100644 doc/debugging-gitlab-ui-with-gitlab-css.md
 create mode 100644 static/gitlab/.gitkeep

diff --git a/.gitignore b/.gitignore
index 0a3583c711..7c6ba1bb1f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,4 @@
 .DS_Store
 yarn-error.log
 /src/scss/utilities.scss
+/static/gitlab/
\ No newline at end of file
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index c1d13d972a..18b5bb77f9 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -17,11 +17,11 @@ variables:
   PUPPETEER_IMAGE: $CI_REGISTRY_IMAGE/puppeteer:$PUPPETEER_VERSION
   DANGER_GITLAB_API_TOKEN: $GITLAB_TOKEN
   # We want to utilize the faster SAST and Dependency Scanning which are not docker in docker
-  SAST_DISABLE_DIND: "true"
-  DS_DISABLE_DIND: "true"
+  SAST_DISABLE_DIND: 'true'
+  DS_DISABLE_DIND: 'true'
   # We only need javascript scanning, unfortunately our Danger code would lead to execution of ruby analysis as well
-  SAST_DEFAULT_ANALYZERS: "nodejs-scan, eslint"
-  DS_DEFAULT_ANALYZERS: "retire.js, gemnasium"
+  SAST_DEFAULT_ANALYZERS: 'nodejs-scan, eslint'
+  DS_DEFAULT_ANALYZERS: 'retire.js, gemnasium'
 
 include:
   # Disabled due to: https://gitlab.com/gitlab-org/gitlab/-/issues/207855
@@ -129,6 +129,18 @@ populate_npm_cache:
       when: always
     - when: never
 
+build_gitlab_css:
+  extends: [.node, .yarn_install]
+  stage: pre-build
+  script:
+    - mkdir .build
+    - git clone https://gitlab.com/gitlab-org/gitlab.git .build/gitlab --depth=1
+    - yarn build-gitlab-css .build/gitlab > static/gitlab-normalized.css
+  artifacts:
+    when: always
+    paths:
+      - static/gitlab
+
 danger-review:
   rules:
     - if: '$DANGER_GITLAB_API_TOKEN && $CI_MERGE_REQUEST_IID'
@@ -162,10 +174,11 @@ build_package:
 
 build_storybook:
   extends: [.node, .yarn_install]
-  needs: []
+  needs:
+    - build_gitlab_css
   stage: build
   script:
-    - yarn storybook-static
+    - GITLAB_CSS_LINK="/gitlab/gitlab.css" yarn storybook-static
     - mkdir public
     - mv storybook/* public
   artifacts:
@@ -208,9 +221,11 @@ visual:
 
 visual_gitlab_integration:
   extends: visual
+  needs:
+    - build_gitlab_css
   allow_failure: true
   script:
-    - yarn test:visual:gitlab
+    - GITLAB_CSS_LINK="/gitlab/gitlab.css" yarn test:visual:gitlab
 
 unit_tests:
   extends: [.node, .yarn_install]
diff --git a/.storybook/generate-preview-head.js b/.storybook/generate-preview-head.js
index 174a2a3ac5..3795112f2c 100644
--- a/.storybook/generate-preview-head.js
+++ b/.storybook/generate-preview-head.js
@@ -4,11 +4,14 @@ const fs = require('fs');
 
 const compile = pug.compileFile(path.resolve(__dirname, 'preview-head.pug'));
 const isGitlabIntegrationTest = Boolean(process.env.IS_GITLAB_INTEGRATION_TEST);
+const gitlabCssLink =
+  process.env.GITLAB_CSS_LINK || 'https://gitlab-org.gitlab.io/gitlab/application.css';
 
 fs.writeFile(
   path.resolve(__dirname, 'preview-head.html'),
   compile({
     isGitlabIntegrationTest,
+    gitlabCssLink,
   }),
   function(err) {
     if (err) {
diff --git a/.storybook/gitlab-css-builder/builder.js b/.storybook/gitlab-css-builder/builder.js
new file mode 100644
index 0000000000..ddbf6a070e
--- /dev/null
+++ b/.storybook/gitlab-css-builder/builder.js
@@ -0,0 +1,117 @@
+const sass = require('node-sass');
+const {
+  buildIncludePaths,
+  resolveGlobUrl,
+  resolveUrl,
+} = require('node-sass-magic-importer/dist/toolbox');
+const path = require('path');
+const { statSync, readFileSync, writeFileSync } = require('fs');
+
+const GITLAB_REPOSITORY = process.argv[2] || process.env.GITLAB_REPOSITORY;
+
+if (!GITLAB_REPOSITORY) {
+  throw new Error('You should provide path to GitLab repository');
+}
+
+const INPUT_FILE = path.resolve(GITLAB_REPOSITORY, 'app/assets/stylesheets/application.scss');
+const OUTPUT_FILE = process.argv[3] || path.resolve(__dirname, '../../static/gitlab/gitlab.css');
+
+const TRANSPARENT_1X1_PNG =
+  'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==)';
+const VARIABLE_DEFINITION_REGEXP = /(\$[^:]+):\s+([^;]+)/;
+
+const sassIncludePaths = [
+  path.resolve(GITLAB_REPOSITORY, 'app/assets/stylesheets'),
+  path.resolve(GITLAB_REPOSITORY, 'ee/app/assets/stylesheets'),
+  path.resolve(GITLAB_REPOSITORY, 'ee/app/assets/stylesheets/_ee'),
+  '.storybook/gitlab-css-builder/stubs',
+  './node_modules',
+].map(p => path.resolve(p));
+
+const gitlabUiDefaultVars = Object.fromEntries(
+  readFileSync('./src/scss/variables.scss', 'utf8')
+    .split('\n')
+    .filter(x => x.includes('!default'))
+    .map(entry => {
+      const [varName, strValue] = entry.split(':');
+
+      const value = strValue.replace(/!default;$/, '').trim();
+      return [varName, value];
+    })
+);
+
+function replaceVariables(content, vars) {
+  return content
+    .split('\n')
+    .map(line => {
+      const match = VARIABLE_DEFINITION_REGEXP.exec(line);
+      if (!match) {
+        return line;
+      }
+
+      const [, varName, gitlabValue] = match;
+      const gitlabUiValue = gitlabUiDefaultVars[varName];
+      if (!gitlabUiValue || gitlabValue === gitlabUiValue) {
+        return line;
+      }
+
+      return [
+        `/* ${varName}: ${gitlabValue} -> ${gitlabUiValue} */`,
+        `${varName}: ${gitlabUiValue};`,
+      ].join('\n');
+    })
+    .join('\n');
+}
+
+const gitlabCSSDir = path.dirname(INPUT_FILE);
+const patchedFrameworkVariables = replaceVariables(
+  readFileSync(path.resolve(gitlabCSSDir, 'framework/variables.scss'), 'utf8'),
+  gitlabUiDefaultVars
+);
+
+function smartImporter(url, prev) {
+  const nodeSassOptions = this.options;
+  const includePaths = buildIncludePaths(nodeSassOptions.includePaths, prev).filter(
+    path => !path.includes('node_modules')
+  );
+
+  if (url.startsWith('@gitlab/ui')) {
+    return { file: resolveUrl(url.replace('@gitlab/ui/', ''), includePaths) };
+  }
+
+  if (url === 'framework/variables') {
+    return { contents: patchedFrameworkVariables };
+  }
+
+  const filePaths = resolveGlobUrl(url, includePaths);
+
+  if (filePaths) {
+    const contents = filePaths
+      .filter(file => statSync(file).isFile())
+      .map(x => `@import '${x}';`)
+      .join(`\n`);
+    return { contents };
+  }
+
+  return null;
+}
+sass.render(
+  {
+    file: INPUT_FILE,
+    includePaths: sassIncludePaths,
+    importer: smartImporter,
+    functions: {
+      'image-url($url)': function() {
+        return new sass.types.String(TRANSPARENT_1X1_PNG);
+      },
+    },
+  },
+  function(err, result) {
+    if (err) {
+      console.error(err);
+      process.exit(1);
+    }
+
+    writeFileSync(OUTPUT_FILE, result.css);
+  }
+);
diff --git a/.storybook/gitlab-css-builder/stubs/@gitlab/at.js/dist/css/jquery.atwho.css b/.storybook/gitlab-css-builder/stubs/@gitlab/at.js/dist/css/jquery.atwho.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/.storybook/gitlab-css-builder/stubs/dropzone/dist/basic.css b/.storybook/gitlab-css-builder/stubs/dropzone/dist/basic.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/.storybook/gitlab-css-builder/stubs/font-awesome.scss b/.storybook/gitlab-css-builder/stubs/font-awesome.scss
new file mode 100644
index 0000000000..5417ff3f25
--- /dev/null
+++ b/.storybook/gitlab-css-builder/stubs/font-awesome.scss
@@ -0,0 +1,7 @@
+.fa-2x,
+.fa-thumb-tack,
+.fa-lightbulb-o,
+.fa-fire,
+.fa-exclamation-circle {
+  display: inline-block;
+}
diff --git a/.storybook/gitlab-css-builder/stubs/select2/select2.css b/.storybook/gitlab-css-builder/stubs/select2/select2.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/.storybook/preview-head.pug b/.storybook/preview-head.pug
index 636bca3166..b7f352e1e9 100644
--- a/.storybook/preview-head.pug
+++ b/.storybook/preview-head.pug
@@ -1,5 +1,3 @@
-- var gitlabCssLink = 'https://gitlab-org.gitlab.io/gitlab/application.css'
-
 if isGitlabIntegrationTest
   link(
     type='text/css'
@@ -7,28 +5,28 @@ if isGitlabIntegrationTest
     media='all'
     href=gitlabCssLink
   )
+else
+  script.
+    window.addEventListener('message', (message) => {
+      if (message.data !== 'toggleGitLabCss') {
+        return;
+      }
 
-script.
-  window.addEventListener('message', (message) => {
-    if (message.data !== 'toggleGitLabCss') {
-      return;
-    }
-
-    const linkStylesheetId = 'gitlab-css';
-    let linkStylesheet = document.querySelector(`#${linkStylesheetId}`);
+      const linkStylesheetId = 'gitlab-css';
+      let linkStylesheet = document.querySelector(`#${linkStylesheetId}`);
 
-    if (linkStylesheet) {
-      linkStylesheet.remove();
-    } else {
-      linkStylesheet = document.createElement('link');
-      linkStylesheet.setAttribute('id', linkStylesheetId);
-      linkStylesheet.setAttribute('href', '#{gitlabCssLink}');
-      linkStylesheet.setAttribute('type', 'text/css');
-      linkStylesheet.setAttribute('rel', 'stylesheet');
-      linkStylesheet.setAttribute('media', 'all');
+      if (linkStylesheet) {
+        linkStylesheet.remove();
+      } else {
+        linkStylesheet = document.createElement('link');
+        linkStylesheet.setAttribute('id', linkStylesheetId);
+        linkStylesheet.setAttribute('href', '#{gitlabCssLink}');
+        linkStylesheet.setAttribute('type', 'text/css');
+        linkStylesheet.setAttribute('rel', 'stylesheet');
+        linkStylesheet.setAttribute('media', 'all');
 
-      const head = document.querySelector('head');
+        const head = document.querySelector('head');
 
-      head.appendChild(linkStylesheet);
-    }
-  });
+        head.appendChild(linkStylesheet);
+      }
+    });
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index 8c6d0b33da..14660831d8 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -38,16 +38,9 @@ module.exports = ({ config }) => {
           loader: 'style-loader',
           options: {
             insert: function(styles) {
-              const gitlabStyles = Array.from(
-                document.head.querySelectorAll('[data-gitlab-ui-style]')
-              );
-
-              const targetPosition =
-                gitlabStyles.length > 0
-                  ? gitlabStyles[gitlabStyles.length - 1].nextSibling
-                  : document.head.firstChild;
-
-              document.head.insertBefore(styles, targetPosition);
+              if (!process.env.IS_GITLAB_INTEGRATION_TEST) {
+                document.head.appendChild(styles);
+              }
             },
             attributes: {
               'data-gitlab-ui-style': true,
diff --git a/README.md b/README.md
index 12429042e1..af8f9905af 100644
--- a/README.md
+++ b/README.md
@@ -84,11 +84,7 @@ In some occasions, the changes in a component’s appearance are justified. In t
 
 #### GitLab visual regression tests
 
-GitLab UI components are a reference implementation of the [Pajamas Design System components](https://design.gitlab.com/components/status). These components should conform with the design system specs, and they should look correct in the pajamas website and the GitLab product. To make sure GitLab UI’s components look precisely as their design specs dictate in GitLab, we created the `yarn run test:visual:gitlab` command.
-
-This command only runs visual tests for components that have the `followsDesignSystem: true` flag activated in their `*.documentation.js` file. It will include gitlab product’s final CSS output in storybook and run the visual snapshots against this version.
-
-The tests will fail if after including gitlab CSS, one or more components look different. These failures highlight how CSS that leaks from gitlab will affect a component’s final look in the product.
+GitLab UI components are a reference implementation of the [Pajamas Design System components](https://design.gitlab.com/components/status). These components should conform with the design system specs, and they should look correct in the pajamas website and the GitLab product. Please see [Debugging GitLab UI issues with GitLab product CSS](doc/debugging-gitlab-ui-with-gitlab-css.md) for information on how to debug issues with GitLab product CSS in GitLab UI.
 
 #### Running visual regression tests locally
 
@@ -124,6 +120,7 @@ npm install @gitlab/ui
 ```
 
 ## Releases
+
 Please see [Updating Gitlab UI Packages](doc/updating-gitlab-ui-packages.md) for information on how updated packages are included in Gitlab and Pajamas.
 
 ## Contributing guide
diff --git a/doc/debugging-gitlab-ui-with-gitlab-css.md b/doc/debugging-gitlab-ui-with-gitlab-css.md
new file mode 100644
index 0000000000..363edb77d2
--- /dev/null
+++ b/doc/debugging-gitlab-ui-with-gitlab-css.md
@@ -0,0 +1,27 @@
+# Debugging GitLab UI styling issues with GitLab product CSS
+
+To make sure GitLab UI’s components look precisely as their design specs dictate in GitLab we've created two tools:
+
+- `Include GitLab CSS bundle` checkbox in storybook
+- `test:visual:gitlab` script
+
+These tools will include GitLab product's final CSS to storybook. By default CSS of `master` branch of GitLab product is used. This means that if you made significant changes to your component CSS they will not be properly picked up, additionally since GitLab currently using different color palette you will notice difference in colors which are result of overriding default theme colors.
+
+In order to verify your component against proper color scheme and latest GitLab css you will need to build a custom CSS version of GitLab product. This could be done by running `yarn run storybook:gitlab` and passing location of your GitLab product Git repository as GITLAB_REPOSITORY env variable.
+For example:
+
+```shell
+# cloning gitlab to temp directory
+git clone https://gitlab.com/gitlab-org/gitlab.git /tmp/gitlab --depth=1
+# this will build gitlab.css to static/gitlab/gitlab.css file
+GITLAB_REPOSITORY="/tmp/gitlab" yarn run storybook:gitlab
+```
+
+Please take a note, that hot reloading features will not affect GitLab product CSS bundle so you will need to manually rerun last command to verify your changes
+
+## `yarn run test:visual:gitlab` command
+
+This command only runs visual tests for components that have the `followsDesignSystem: true` flag activated in their `*.documentation.js` file. It will include gitlab product’s final CSS output in storybook and run the visual snapshots against this version.
+
+The tests will fail if after rendering with gitlab CSS (which includes gitlab UI), one or more components look different. These failures highlight how CSS that leaks from gitlab will affect a component’s final look in the product.
+This job is consumed by CI and most likely will fail locally due to font rendering differences on different platforms
diff --git a/package.json b/package.json
index 1fc6dafc28..20afea6969 100644
--- a/package.json
+++ b/package.json
@@ -30,9 +30,11 @@
     "build-preview-head": "node .storybook/generate-preview-head.js",
     "generate-utilities": "make src/scss/utilities.scss",
     "build-scss-variables": "make scss_to_js/scss_variables.js",
+    "build-gitlab-css": "node .storybook/gitlab-css-builder/builder.js",
     "clean": "rm -r dist storybook scss_to_js/scss_variables.* src/scss/utilities.scss",
     "start": "yarn storybook",
     "storybook": "yarn storybook-prep && start-storybook --ci -p 9001 -c .storybook -s ./static",
+    "storybook:gitlab": "yarn build-gitlab-css && GITLAB_CSS_LINK='/gitlab/gitlab.css' yarn storybook",
     "storybook-prep": "run-s generate-utilities build-preview-head build-scss-variables",
     "storybook-static": "yarn storybook-prep && build-storybook -c .storybook -o storybook  -s ./static",
     "pretest:unit": "yarn build-scss-variables",
@@ -111,6 +113,7 @@
     "mockdate": "^2.0.5",
     "moment": "^2.22.2",
     "node-sass": "^4.12.0",
+    "node-sass-magic-importer": "^5.3.2",
     "nodemon": "^1.11.0",
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
diff --git a/src/components/base/avatar_labeled/avatar_labeled.documentation.js b/src/components/base/avatar_labeled/avatar_labeled.documentation.js
index 0e4aa21f07..a32123d4cb 100644
--- a/src/components/base/avatar_labeled/avatar_labeled.documentation.js
+++ b/src/components/base/avatar_labeled/avatar_labeled.documentation.js
@@ -2,7 +2,7 @@ import description from './avatar_labeled.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: false,
+  followsDesignSystem: true,
   description,
   examples,
 };
diff --git a/src/components/base/avatar_link/avatar_link.documentation.js b/src/components/base/avatar_link/avatar_link.documentation.js
index 0a2871eef6..98f5662b33 100644
--- a/src/components/base/avatar_link/avatar_link.documentation.js
+++ b/src/components/base/avatar_link/avatar_link.documentation.js
@@ -2,7 +2,7 @@ import description from './avatar_link.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: false,
+  followsDesignSystem: true,
   description,
   examples,
 };
diff --git a/src/components/base/avatars_inline/avatars_inline.documentation.js b/src/components/base/avatars_inline/avatars_inline.documentation.js
index 41e83015f8..bd66a8fa6a 100644
--- a/src/components/base/avatars_inline/avatars_inline.documentation.js
+++ b/src/components/base/avatars_inline/avatars_inline.documentation.js
@@ -2,7 +2,7 @@ import * as description from './avatars_inline.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: false,
+  followsDesignSystem: true,
   description,
   examples,
 };
diff --git a/src/components/base/breadcrumb/breadcrumb.documentation.js b/src/components/base/breadcrumb/breadcrumb.documentation.js
index a7551bf844..99e4db7db6 100644
--- a/src/components/base/breadcrumb/breadcrumb.documentation.js
+++ b/src/components/base/breadcrumb/breadcrumb.documentation.js
@@ -2,7 +2,7 @@ import description from './breadcrumb.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: false,
+  followsDesignSystem: true,
   examples,
   description,
   bootstrapComponent: 'b-breadcrumb',
diff --git a/src/components/base/daterange_picker/daterange_picker.documentation.js b/src/components/base/daterange_picker/daterange_picker.documentation.js
index bd96825048..dc3a4f01f3 100644
--- a/src/components/base/daterange_picker/daterange_picker.documentation.js
+++ b/src/components/base/daterange_picker/daterange_picker.documentation.js
@@ -2,7 +2,7 @@ import description from './daterange_picker.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: false,
+  followsDesignSystem: true,
   description,
   examples,
 };
diff --git a/src/components/base/form/form_checkbox/form_checkbox.documentation.js b/src/components/base/form/form_checkbox/form_checkbox.documentation.js
index e827e27368..32b63d7f57 100644
--- a/src/components/base/form/form_checkbox/form_checkbox.documentation.js
+++ b/src/components/base/form/form_checkbox/form_checkbox.documentation.js
@@ -5,7 +5,7 @@ export default {
   description,
   examples,
   bootstrapComponent: 'b-form-checkbox',
-  followsDesignSystem: false,
+  followsDesignSystem: true,
   events: [
     {
       event: 'input',
diff --git a/src/components/base/form/form_input/form_input.documentation.js b/src/components/base/form/form_input/form_input.documentation.js
index 39388ae6ef..b6d78cd586 100644
--- a/src/components/base/form/form_input/form_input.documentation.js
+++ b/src/components/base/form/form_input/form_input.documentation.js
@@ -5,5 +5,5 @@ export default {
   description,
   examples,
   bootstrapComponent: 'b-form-input',
-  followsDesignSystem: false,
+  followsDesignSystem: true,
 };
diff --git a/src/components/base/form/form_radio/form_radio.documentation.js b/src/components/base/form/form_radio/form_radio.documentation.js
index 4f02956af6..b7a764d93f 100644
--- a/src/components/base/form/form_radio/form_radio.documentation.js
+++ b/src/components/base/form/form_radio/form_radio.documentation.js
@@ -4,7 +4,7 @@ import examples from './examples';
 export default {
   description,
   examples,
-  followsDesignSystem: false,
+  followsDesignSystem: true,
   bootstrapComponent: 'b-form-radio',
   propsInfo: {
     checked: {
diff --git a/src/components/base/form/form_radio_group/form_radio_group.documentation.js b/src/components/base/form/form_radio_group/form_radio_group.documentation.js
index 05a5fd29c2..693ce2d3e3 100644
--- a/src/components/base/form/form_radio_group/form_radio_group.documentation.js
+++ b/src/components/base/form/form_radio_group/form_radio_group.documentation.js
@@ -4,7 +4,7 @@ import examples from './examples';
 export default {
   description,
   examples,
-  followsDesignSystem: false,
+  followsDesignSystem: true,
   bootstrapComponent: 'b-form-radio-group',
   propsInfo: {
     stacked: {
diff --git a/src/components/base/label/label.documentation.js b/src/components/base/label/label.documentation.js
index 3eb2d3dbff..a0b94a6fd0 100644
--- a/src/components/base/label/label.documentation.js
+++ b/src/components/base/label/label.documentation.js
@@ -1,6 +1,6 @@
 import examples from './examples';
 
 export default {
-  followsDesignSystem: false,
+  followsDesignSystem: true,
   examples,
 };
diff --git a/src/components/base/pagination/pagination.documentation.js b/src/components/base/pagination/pagination.documentation.js
index 75f406a42e..9e34bc7ec3 100644
--- a/src/components/base/pagination/pagination.documentation.js
+++ b/src/components/base/pagination/pagination.documentation.js
@@ -2,7 +2,7 @@ import description from './pagination.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: false,
+  followsDesignSystem: true,
   description,
   examples,
   propsInfo: {
diff --git a/src/components/base/search_box_by_type/search_box_by_type.documentation.js b/src/components/base/search_box_by_type/search_box_by_type.documentation.js
index 207d3df74a..aa464178dd 100644
--- a/src/components/base/search_box_by_type/search_box_by_type.documentation.js
+++ b/src/components/base/search_box_by_type/search_box_by_type.documentation.js
@@ -2,7 +2,7 @@ import description from './search_box_by_type.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: false,
+  followsDesignSystem: true,
   description,
   propsInfo: {
     value: {
diff --git a/src/components/base/skeleton_loader/skeleton_loader.documentation.js b/src/components/base/skeleton_loader/skeleton_loader.documentation.js
index 383c739c2e..6238b9e901 100644
--- a/src/components/base/skeleton_loader/skeleton_loader.documentation.js
+++ b/src/components/base/skeleton_loader/skeleton_loader.documentation.js
@@ -2,7 +2,7 @@ import * as description from './skeleton_loader.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: false,
+  followsDesignSystem: true,
   description,
   examples,
   propsInfo: {
diff --git a/src/components/base/tabs/tabs/tabs.documentation.js b/src/components/base/tabs/tabs/tabs.documentation.js
index 1fb1e391a4..0816ae305d 100644
--- a/src/components/base/tabs/tabs/tabs.documentation.js
+++ b/src/components/base/tabs/tabs/tabs.documentation.js
@@ -5,5 +5,5 @@ export default {
   description,
   examples,
   bootstrapComponent: 'b-tabs',
-  followsDesignSystem: false,
+  followsDesignSystem: true,
 };
diff --git a/src/components/base/token/token.documentation.js b/src/components/base/token/token.documentation.js
index d50dbf8d0c..c785a3cdca 100644
--- a/src/components/base/token/token.documentation.js
+++ b/src/components/base/token/token.documentation.js
@@ -1,7 +1,7 @@
 import examples from './examples';
 
 export default {
-  followsDesignSystem: false,
+  followsDesignSystem: true,
   examples,
   propsInfo: {
     variant: {
diff --git a/src/components/charts/area/area.documentation.js b/src/components/charts/area/area.documentation.js
index 3626e50002..11ef515e6f 100644
--- a/src/components/charts/area/area.documentation.js
+++ b/src/components/charts/area/area.documentation.js
@@ -2,7 +2,7 @@ import description from './area.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   description,
   examples,
 };
diff --git a/src/components/charts/line/line.documentation.js b/src/components/charts/line/line.documentation.js
index 477b50de9a..02933875ff 100644
--- a/src/components/charts/line/line.documentation.js
+++ b/src/components/charts/line/line.documentation.js
@@ -2,7 +2,7 @@ import description from './line.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   description,
   examples,
 };
diff --git a/src/components/charts/stacked_column/stacked_column.documentation.js b/src/components/charts/stacked_column/stacked_column.documentation.js
index b2baf07c8d..732927bd4b 100644
--- a/src/components/charts/stacked_column/stacked_column.documentation.js
+++ b/src/components/charts/stacked_column/stacked_column.documentation.js
@@ -2,7 +2,7 @@ import description from './stacked_column.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   description,
   examples,
 };
diff --git a/static/gitlab/.gitkeep b/static/gitlab/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/yarn.lock b/yarn.lock
index ac214adc9c..f8cf20fed9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3398,7 +3398,7 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-change-case@^3.1.0:
+change-case@^3.0.1, change-case@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/change-case/-/change-case-3.1.0.tgz#0e611b7edc9952df2e8513b27b42de72647dd17e"
   integrity sha512-2AZp7uJZbYEzRPsFoa+ijKdvp9zsrnnt6+yFokfwEpeJm0xuJDVoxiRCAaTzyJND8GJkofo2IcKWaUZ/OECVzw==
@@ -4159,6 +4159,14 @@ css-modules-loader-core@^1.1.0:
     postcss-modules-scope "1.1.0"
     postcss-modules-values "1.3.0"
 
+css-node-extract@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/css-node-extract/-/css-node-extract-2.1.3.tgz#ec388a857b8fdf13fefd94b3da733257162405da"
+  integrity sha512-E7CzbC0I4uAs2dI8mPCVe+K37xuja5kjIugOotpwICFL7vzhmFMAPHvS/MF9gFrmv8DDUANsxrgyT/I3OLukcw==
+  dependencies:
+    change-case "^3.0.1"
+    postcss "^6.0.14"
+
 css-parse@1.7.x:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-1.7.0.tgz#321f6cf73782a6ff751111390fc05e2c657d8c9b"
@@ -4189,6 +4197,13 @@ css-select@^2.0.0:
     domutils "^1.7.0"
     nth-check "^1.0.2"
 
+css-selector-extract@^3.3.6:
+  version "3.3.6"
+  resolved "https://registry.yarnpkg.com/css-selector-extract/-/css-selector-extract-3.3.6.tgz#5cc670cfeae743015e80faf2d722d7818657e3e5"
+  integrity sha512-bBI8ZJKKyR9iHvxXb4t3E6WTMkis94eINopVg7y2FmmMjLXUVduD7mPEcADi4i9FX4wOypFMFpySX+0keuefxg==
+  dependencies:
+    postcss "^6.0.14"
+
 css-selector-tokenizer@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz#e6988474ae8c953477bf5e7efecfceccd9cf4c86"
@@ -5702,6 +5717,16 @@ findup-sync@^2.0.0:
     micromatch "^3.0.4"
     resolve-dir "^1.0.1"
 
+findup-sync@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-3.0.0.tgz#17b108f9ee512dfb7a5c7f3c8b27ea9e1a9c08d1"
+  integrity sha512-YbffarhcicEhOrm4CtrwdKBdCuz576RLdhJDsIfvNtxUuhdRet1qZcsMjqbePtAseKdAnDyM/IyXbu7PRPRLYg==
+  dependencies:
+    detect-file "^1.0.0"
+    is-glob "^4.0.0"
+    micromatch "^3.0.4"
+    resolve-dir "^1.0.1"
+
 fined@^1.0.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/fined/-/fined-1.1.1.tgz#95d88ff329123dd1a6950fdfcd321f746271e01f"
@@ -9066,6 +9091,19 @@ node-releases@^1.1.13, node-releases@^1.1.53:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.53.tgz#2d821bfa499ed7c5dffc5e2f28c88e78a08ee3f4"
   integrity sha512-wp8zyQVwef2hpZ/dJH7SfSrIPD6YoJz6BDQDpGEkcA0s3LpAQoxBIYmfIq6QAhC1DhwsyCgTaTTcONwX8qzCuQ==
 
+node-sass-magic-importer@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/node-sass-magic-importer/-/node-sass-magic-importer-5.3.2.tgz#2f2248bb2e5cdb275ba34102ebf995edadf99175"
+  integrity sha512-T3wTUdUoXQE3QN+EsyPpUXRI1Gj1lEsrySQ9Kzlzi15QGKi+uRa9fmvkcSy2y3BKgoj//7Mt9+s+7p0poMpg6Q==
+  dependencies:
+    css-node-extract "^2.1.3"
+    css-selector-extract "^3.3.6"
+    findup-sync "^3.0.0"
+    glob "^7.1.3"
+    object-hash "^1.3.1"
+    postcss-scss "^2.0.0"
+    resolve "^1.10.1"
+
 node-sass@^4.12.0, node-sass@^4.5.2:
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.12.0.tgz#0914f531932380114a30cc5fa4fa63233a25f017"
@@ -9244,6 +9282,11 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
+object-hash@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.1.tgz#fde452098a951cb145f039bb7d455449ddc126df"
+  integrity sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==
+
 object-inspect@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
@@ -10436,6 +10479,15 @@ postcss@^5.2.5:
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
+postcss@^6.0.14:
+  version "6.0.23"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
+  integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
+  dependencies:
+    chalk "^2.4.1"
+    source-map "^0.6.1"
+    supports-color "^5.4.0"
+
 postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.27, postcss@^7.0.5, postcss@^7.0.6, postcss@^7.0.7:
   version "7.0.27"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.27.tgz#cc67cdc6b0daa375105b7c424a85567345fc54d9"
@@ -11624,7 +11676,7 @@ resolve@1.1.7:
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
   integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
 
-resolve@1.x, resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.3.2, resolve@^1.5.0:
+resolve@1.x, resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.3.2, resolve@^1.5.0:
   version "1.15.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.15.1.tgz#27bdcdeffeaf2d6244b95bb0f9f4b4653451f3e8"
   integrity sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==
@@ -12880,7 +12932,7 @@ supports-color@^3.2.3:
   dependencies:
     has-flag "^1.0.0"
 
-supports-color@^5.2.0, supports-color@^5.3.0:
+supports-color@^5.2.0, supports-color@^5.3.0, supports-color@^5.4.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
-- 
GitLab


From 5c7ab554463b0025bb3bba8e966ab2e56e4bc366 Mon Sep 17 00:00:00 2001
From: Illya Klymov <xanf@xanf.me>
Date: Mon, 27 Apr 2020 21:24:36 +0000
Subject: [PATCH 02/10] Apply suggestion to
 doc/debugging-gitlab-ui-with-gitlab-css.md

---
 doc/debugging-gitlab-ui-with-gitlab-css.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/doc/debugging-gitlab-ui-with-gitlab-css.md b/doc/debugging-gitlab-ui-with-gitlab-css.md
index 363edb77d2..029dce17e5 100644
--- a/doc/debugging-gitlab-ui-with-gitlab-css.md
+++ b/doc/debugging-gitlab-ui-with-gitlab-css.md
@@ -5,7 +5,7 @@ To make sure GitLab UI’s components look precisely as their design specs dicta
 - `Include GitLab CSS bundle` checkbox in storybook
 - `test:visual:gitlab` script
 
-These tools will include GitLab product's final CSS to storybook. By default CSS of `master` branch of GitLab product is used. This means that if you made significant changes to your component CSS they will not be properly picked up, additionally since GitLab currently using different color palette you will notice difference in colors which are result of overriding default theme colors.
+These tools will include GitLab product's final CSS in Storybook. By default CSS of `master` branch of GitLab product is used. This means that if you made significant changes to your component's CSS they will not be properly picked up, additionally since GitLab currently uses a different color palette you will notice differences in colors which are result of overriding default theme colors.
 
 In order to verify your component against proper color scheme and latest GitLab css you will need to build a custom CSS version of GitLab product. This could be done by running `yarn run storybook:gitlab` and passing location of your GitLab product Git repository as GITLAB_REPOSITORY env variable.
 For example:
-- 
GitLab


From d327975e81cca1c93783b85627287294d7b39cee Mon Sep 17 00:00:00 2001
From: Illya Klymov <xanf@xanf.me>
Date: Mon, 27 Apr 2020 21:24:40 +0000
Subject: [PATCH 03/10] Apply suggestion to
 doc/debugging-gitlab-ui-with-gitlab-css.md

---
 doc/debugging-gitlab-ui-with-gitlab-css.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/doc/debugging-gitlab-ui-with-gitlab-css.md b/doc/debugging-gitlab-ui-with-gitlab-css.md
index 029dce17e5..1d56513bc7 100644
--- a/doc/debugging-gitlab-ui-with-gitlab-css.md
+++ b/doc/debugging-gitlab-ui-with-gitlab-css.md
@@ -7,7 +7,7 @@ To make sure GitLab UI’s components look precisely as their design specs dicta
 
 These tools will include GitLab product's final CSS in Storybook. By default CSS of `master` branch of GitLab product is used. This means that if you made significant changes to your component's CSS they will not be properly picked up, additionally since GitLab currently uses a different color palette you will notice differences in colors which are result of overriding default theme colors.
 
-In order to verify your component against proper color scheme and latest GitLab css you will need to build a custom CSS version of GitLab product. This could be done by running `yarn run storybook:gitlab` and passing location of your GitLab product Git repository as GITLAB_REPOSITORY env variable.
+In order to verify your component against proper color scheme and latest GitLab CSS you will need to build a custom CSS version of GitLab product. This could be done by running `yarn run storybook:gitlab` and passing location of your GitLab product Git repository as `GITLAB_REPOSITORY` env variable.
 For example:
 
 ```shell
-- 
GitLab


From 76beffe2d2dcb83061b1c6401fa10dbe34c3ab22 Mon Sep 17 00:00:00 2001
From: Illya Klymov <xanf@xanf.me>
Date: Thu, 7 May 2020 08:35:38 +0000
Subject: [PATCH 04/10] Apply suggestion to
 doc/debugging-gitlab-ui-with-gitlab-css.md

---
 doc/debugging-gitlab-ui-with-gitlab-css.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/doc/debugging-gitlab-ui-with-gitlab-css.md b/doc/debugging-gitlab-ui-with-gitlab-css.md
index 1d56513bc7..d40af501ad 100644
--- a/doc/debugging-gitlab-ui-with-gitlab-css.md
+++ b/doc/debugging-gitlab-ui-with-gitlab-css.md
@@ -24,4 +24,5 @@ Please take a note, that hot reloading features will not affect GitLab product C
 This command only runs visual tests for components that have the `followsDesignSystem: true` flag activated in their `*.documentation.js` file. It will include gitlab product’s final CSS output in storybook and run the visual snapshots against this version.
 
 The tests will fail if after rendering with gitlab CSS (which includes gitlab UI), one or more components look different. These failures highlight how CSS that leaks from gitlab will affect a component’s final look in the product.
-This job is consumed by CI and most likely will fail locally due to font rendering differences on different platforms
+This job is consumed by GitLab CI/CD and most likely will fail locally due to font rendering differences 
+on different platforms.
-- 
GitLab


From 66e029af754d5508f678b6c04d3bdbf1e009af13 Mon Sep 17 00:00:00 2001
From: Illya Klymov <xanf@xanf.me>
Date: Thu, 7 May 2020 08:35:44 +0000
Subject: [PATCH 05/10] Apply suggestion to
 doc/debugging-gitlab-ui-with-gitlab-css.md

---
 doc/debugging-gitlab-ui-with-gitlab-css.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/doc/debugging-gitlab-ui-with-gitlab-css.md b/doc/debugging-gitlab-ui-with-gitlab-css.md
index d40af501ad..3ed6ba9b53 100644
--- a/doc/debugging-gitlab-ui-with-gitlab-css.md
+++ b/doc/debugging-gitlab-ui-with-gitlab-css.md
@@ -23,6 +23,8 @@ Please take a note, that hot reloading features will not affect GitLab product C
 
 This command only runs visual tests for components that have the `followsDesignSystem: true` flag activated in their `*.documentation.js` file. It will include gitlab product’s final CSS output in storybook and run the visual snapshots against this version.
 
-The tests will fail if after rendering with gitlab CSS (which includes gitlab UI), one or more components look different. These failures highlight how CSS that leaks from gitlab will affect a component’s final look in the product.
+The tests will fail if, after rendering with GitLab CSS (which includes the GitLab UI), one or more
+components look different. These failures highlight how CSS that leaks from GitLab will affect a
+component’s final look in the product.
 This job is consumed by GitLab CI/CD and most likely will fail locally due to font rendering differences 
 on different platforms.
-- 
GitLab


From 0c59c80755ea18f9b6ea5b08bc8cbd3d6a059e2e Mon Sep 17 00:00:00 2001
From: Illya Klymov <xanf@xanf.me>
Date: Thu, 7 May 2020 08:35:48 +0000
Subject: [PATCH 06/10] Apply suggestion to
 doc/debugging-gitlab-ui-with-gitlab-css.md

---
 doc/debugging-gitlab-ui-with-gitlab-css.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/doc/debugging-gitlab-ui-with-gitlab-css.md b/doc/debugging-gitlab-ui-with-gitlab-css.md
index 3ed6ba9b53..e0047b784b 100644
--- a/doc/debugging-gitlab-ui-with-gitlab-css.md
+++ b/doc/debugging-gitlab-ui-with-gitlab-css.md
@@ -21,7 +21,9 @@ Please take a note, that hot reloading features will not affect GitLab product C
 
 ## `yarn run test:visual:gitlab` command
 
-This command only runs visual tests for components that have the `followsDesignSystem: true` flag activated in their `*.documentation.js` file. It will include gitlab product’s final CSS output in storybook and run the visual snapshots against this version.
+This command only runs visual tests for components that have the `followsDesignSystem: true`
+flag activated in their `*.documentation.js` file. It will include the GitLab product’s final CSS
+output in the storybook and run the visual snapshots against this version.
 
 The tests will fail if, after rendering with GitLab CSS (which includes the GitLab UI), one or more
 components look different. These failures highlight how CSS that leaks from GitLab will affect a
-- 
GitLab


From e88755eac60da38161f0722609bb4d9cb2087e2d Mon Sep 17 00:00:00 2001
From: Illya Klymov <xanf@xanf.me>
Date: Thu, 7 May 2020 08:37:02 +0000
Subject: [PATCH 07/10] Apply suggestion to
 doc/debugging-gitlab-ui-with-gitlab-css.md

---
 doc/debugging-gitlab-ui-with-gitlab-css.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/doc/debugging-gitlab-ui-with-gitlab-css.md b/doc/debugging-gitlab-ui-with-gitlab-css.md
index e0047b784b..fc0cb97862 100644
--- a/doc/debugging-gitlab-ui-with-gitlab-css.md
+++ b/doc/debugging-gitlab-ui-with-gitlab-css.md
@@ -5,7 +5,11 @@ To make sure GitLab UI’s components look precisely as their design specs dicta
 - `Include GitLab CSS bundle` checkbox in storybook
 - `test:visual:gitlab` script
 
-These tools will include GitLab product's final CSS in Storybook. By default CSS of `master` branch of GitLab product is used. This means that if you made significant changes to your component's CSS they will not be properly picked up, additionally since GitLab currently uses a different color palette you will notice differences in colors which are result of overriding default theme colors.
+These tools will include GitLab product's final CSS in Storybook. By default CSS
+of `master` branch of GitLab product is used. This means that if you made
+significant changes to your component's CSS they will not be properly picked up.
+Additionally, since GitLab currently uses a different color palette, you will
+notice differences in colors that result in overriding the default theme colors.
 
 In order to verify your component against proper color scheme and latest GitLab CSS you will need to build a custom CSS version of GitLab product. This could be done by running `yarn run storybook:gitlab` and passing location of your GitLab product Git repository as `GITLAB_REPOSITORY` env variable.
 For example:
-- 
GitLab


From 5ae10628faee8fd18cae0698d3ffdd9fdc7d462b Mon Sep 17 00:00:00 2001
From: Illya Klymov <xanf@xanf.me>
Date: Thu, 7 May 2020 08:38:34 +0000
Subject: [PATCH 08/10] Apply suggestion to
 doc/debugging-gitlab-ui-with-gitlab-css.md

---
 doc/debugging-gitlab-ui-with-gitlab-css.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/doc/debugging-gitlab-ui-with-gitlab-css.md b/doc/debugging-gitlab-ui-with-gitlab-css.md
index fc0cb97862..d9fb3729ff 100644
--- a/doc/debugging-gitlab-ui-with-gitlab-css.md
+++ b/doc/debugging-gitlab-ui-with-gitlab-css.md
@@ -11,7 +11,9 @@ significant changes to your component's CSS they will not be properly picked up.
 Additionally, since GitLab currently uses a different color palette, you will
 notice differences in colors that result in overriding the default theme colors.
 
-In order to verify your component against proper color scheme and latest GitLab CSS you will need to build a custom CSS version of GitLab product. This could be done by running `yarn run storybook:gitlab` and passing location of your GitLab product Git repository as `GITLAB_REPOSITORY` env variable.
+In order to verify your component against proper color scheme and latest GitLab
+CSS, you will need to build a custom CSS version of GitLab product. This could be
+done by running `yarn run storybook:gitlab` and passing the location of your GitLab product Git repository as `GITLAB_REPOSITORY` env variable.
 For example:
 
 ```shell
-- 
GitLab


From d4c0d2d6cd6806481becd4ad59cab0807a81d907 Mon Sep 17 00:00:00 2001
From: Illya Klymov <xanf@xanf.me>
Date: Thu, 7 May 2020 08:38:40 +0000
Subject: [PATCH 09/10] Apply suggestion to
 doc/debugging-gitlab-ui-with-gitlab-css.md

---
 doc/debugging-gitlab-ui-with-gitlab-css.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/doc/debugging-gitlab-ui-with-gitlab-css.md b/doc/debugging-gitlab-ui-with-gitlab-css.md
index d9fb3729ff..cf950320b9 100644
--- a/doc/debugging-gitlab-ui-with-gitlab-css.md
+++ b/doc/debugging-gitlab-ui-with-gitlab-css.md
@@ -23,7 +23,8 @@ git clone https://gitlab.com/gitlab-org/gitlab.git /tmp/gitlab --depth=1
 GITLAB_REPOSITORY="/tmp/gitlab" yarn run storybook:gitlab
 ```
 
-Please take a note, that hot reloading features will not affect GitLab product CSS bundle so you will need to manually rerun last command to verify your changes
+Note that hot reloading features will not affect the GitLab product CSS bundle so
+you will need to manually rerun the last command to verify your changes.
 
 ## `yarn run test:visual:gitlab` command
 
-- 
GitLab


From 2894aeef72bd6b0c2802f0eb6a36da91c235459f Mon Sep 17 00:00:00 2001
From: Illya Klymov <xanf@xanf.me>
Date: Thu, 7 May 2020 11:58:48 +0300
Subject: [PATCH 10/10] fix(ci): invoke prebuild for gitlab css

---
 .gitlab-ci.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 18b5bb77f9..3b9c202adf 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -135,6 +135,7 @@ build_gitlab_css:
   script:
     - mkdir .build
     - git clone https://gitlab.com/gitlab-org/gitlab.git .build/gitlab --depth=1
+    - yarn prebuild
     - yarn build-gitlab-css .build/gitlab > static/gitlab-normalized.css
   artifacts:
     when: always
-- 
GitLab