From 3b1ea8f980fd5d142c83d7aa48a5509c46202514 Mon Sep 17 00:00:00 2001
From: Illya Klymov <xanf@xanf.me>
Date: Wed, 8 Apr 2020 11:37:21 +0300
Subject: [PATCH] chore(ci): Fix CSS order in storyshots

This MR syncs CSS order in storyshots with real CSS order when
"Include GitLab CSS bundle" is ticked. This highlights issues with
multiple components marked as "follows design system". This mark is
cleared for offending components
---
 .storybook/webpack.config.js                         | 12 ++++++++++++
 src/components/base/alert/alert.documentation.js     |  2 +-
 .../avatar_labeled/avatar_labeled.documentation.js   |  2 +-
 .../base/avatar_link/avatar_link.documentation.js    |  2 +-
 .../avatars_inline/avatars_inline.documentation.js   |  2 +-
 src/components/base/banner/banner.documentation.js   |  2 +-
 .../base/breadcrumb/breadcrumb.documentation.js      |  2 +-
 .../broadcast_message.documentation.js               |  2 +-
 .../daterange_picker.documentation.js                |  2 +-
 .../form_checkbox/form_checkbox.documentation.js     |  2 +-
 .../base/form/form_input/form_input.documentation.js |  2 +-
 .../base/form/form_radio/form_radio.documentation.js |  2 +-
 .../form_radio_group.documentation.js                |  2 +-
 src/components/base/label/label.documentation.js     |  2 +-
 .../base/loading_icon/loading_icon.documentation.js  |  2 +-
 .../base/new_button/new_button.documentation.js      |  2 +-
 .../base/new_dropdown/new_dropdown.documentation.js  |  2 +-
 .../base/pagination/pagination.documentation.js      |  2 +-
 src/components/base/popover/popover.documentation.js |  2 +-
 .../search_box_by_click.documentation.js             |  2 +-
 .../search_box_by_type.documentation.js              |  2 +-
 .../skeleton_loader/skeleton_loader.documentation.js |  2 +-
 src/components/base/table/table.documentation.js     |  2 +-
 src/components/base/tabs/tabs/tabs.documentation.js  |  2 +-
 src/components/base/toast/toast.documentation.js     |  2 +-
 src/components/base/toggle/toggle.documentation.js   |  2 +-
 src/components/base/token/token.documentation.js     |  2 +-
 src/components/base/tooltip/tooltip.documentation.js |  2 +-
 .../charts/tooltip/tooltip.documentation.js          |  2 +-
 29 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index 1dd67e6b58..1b4db4dbac 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -36,6 +36,18 @@ 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);
+            },
             attributes: {
               'data-gitlab-ui-style': true,
             },
diff --git a/src/components/base/alert/alert.documentation.js b/src/components/base/alert/alert.documentation.js
index 57c42a0a52..90a8edafdb 100644
--- a/src/components/base/alert/alert.documentation.js
+++ b/src/components/base/alert/alert.documentation.js
@@ -4,7 +4,7 @@ import examples from './examples';
 export default {
   description,
   examples,
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   propsInfo: {
     primaryButtonText: {
       additionalInfo: 'If provided, renders a primary action button.',
diff --git a/src/components/base/avatar_labeled/avatar_labeled.documentation.js b/src/components/base/avatar_labeled/avatar_labeled.documentation.js
index a32123d4cb..0e4aa21f07 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: true,
+  followsDesignSystem: false,
   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 98f5662b33..0a2871eef6 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: true,
+  followsDesignSystem: false,
   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 bd66a8fa6a..41e83015f8 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: true,
+  followsDesignSystem: false,
   description,
   examples,
 };
diff --git a/src/components/base/banner/banner.documentation.js b/src/components/base/banner/banner.documentation.js
index d6f25cb61e..e21e66251f 100644
--- a/src/components/base/banner/banner.documentation.js
+++ b/src/components/base/banner/banner.documentation.js
@@ -2,7 +2,7 @@ import * as description from './banner.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   examples,
   description,
 };
diff --git a/src/components/base/breadcrumb/breadcrumb.documentation.js b/src/components/base/breadcrumb/breadcrumb.documentation.js
index 99e4db7db6..a7551bf844 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: true,
+  followsDesignSystem: false,
   examples,
   description,
   bootstrapComponent: 'b-breadcrumb',
diff --git a/src/components/base/broadcast_message/broadcast_message.documentation.js b/src/components/base/broadcast_message/broadcast_message.documentation.js
index a7f6903602..1bcc5c0b7c 100644
--- a/src/components/base/broadcast_message/broadcast_message.documentation.js
+++ b/src/components/base/broadcast_message/broadcast_message.documentation.js
@@ -2,7 +2,7 @@ import description from './broadcast_message.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   examples,
   description,
   propsInfo: {
diff --git a/src/components/base/daterange_picker/daterange_picker.documentation.js b/src/components/base/daterange_picker/daterange_picker.documentation.js
index dc3a4f01f3..bd96825048 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: true,
+  followsDesignSystem: false,
   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 32b63d7f57..e827e27368 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: true,
+  followsDesignSystem: false,
   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 b6d78cd586..39388ae6ef 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: true,
+  followsDesignSystem: false,
 };
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 b7a764d93f..4f02956af6 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: true,
+  followsDesignSystem: false,
   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 693ce2d3e3..05a5fd29c2 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: true,
+  followsDesignSystem: false,
   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 a0b94a6fd0..3eb2d3dbff 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: true,
+  followsDesignSystem: false,
   examples,
 };
diff --git a/src/components/base/loading_icon/loading_icon.documentation.js b/src/components/base/loading_icon/loading_icon.documentation.js
index 811ea1dd74..61d5355369 100644
--- a/src/components/base/loading_icon/loading_icon.documentation.js
+++ b/src/components/base/loading_icon/loading_icon.documentation.js
@@ -2,7 +2,7 @@ import description from './loading_icon.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   description,
   examples,
 };
diff --git a/src/components/base/new_button/new_button.documentation.js b/src/components/base/new_button/new_button.documentation.js
index 83cf218c54..faa0df0f2b 100644
--- a/src/components/base/new_button/new_button.documentation.js
+++ b/src/components/base/new_button/new_button.documentation.js
@@ -4,7 +4,7 @@ import examples from './examples';
 export default {
   description,
   examples,
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   bootstrapComponent: 'b-button',
   bootstrapPropsInfo: {
     category: {
diff --git a/src/components/base/new_dropdown/new_dropdown.documentation.js b/src/components/base/new_dropdown/new_dropdown.documentation.js
index e603f86920..d606b3105e 100644
--- a/src/components/base/new_dropdown/new_dropdown.documentation.js
+++ b/src/components/base/new_dropdown/new_dropdown.documentation.js
@@ -5,5 +5,5 @@ export default {
   description,
   bootstrapComponent: 'b-dropdown',
   examples,
-  followsDesignSystem: true,
+  followsDesignSystem: false,
 };
diff --git a/src/components/base/pagination/pagination.documentation.js b/src/components/base/pagination/pagination.documentation.js
index 9e34bc7ec3..75f406a42e 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: true,
+  followsDesignSystem: false,
   description,
   examples,
   propsInfo: {
diff --git a/src/components/base/popover/popover.documentation.js b/src/components/base/popover/popover.documentation.js
index 6d595cba8d..cfaa409bb2 100644
--- a/src/components/base/popover/popover.documentation.js
+++ b/src/components/base/popover/popover.documentation.js
@@ -1,7 +1,7 @@
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   examples,
   bootstrapComponent: 'b-popover',
   bootstrapPropsInfo: {
diff --git a/src/components/base/search_box_by_click/search_box_by_click.documentation.js b/src/components/base/search_box_by_click/search_box_by_click.documentation.js
index 0c3cfcd95e..596dc4eecc 100644
--- a/src/components/base/search_box_by_click/search_box_by_click.documentation.js
+++ b/src/components/base/search_box_by_click/search_box_by_click.documentation.js
@@ -2,7 +2,7 @@ import description from './search_box_by_click.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   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 aa464178dd..207d3df74a 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: true,
+  followsDesignSystem: false,
   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 6238b9e901..383c739c2e 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: true,
+  followsDesignSystem: false,
   description,
   examples,
   propsInfo: {
diff --git a/src/components/base/table/table.documentation.js b/src/components/base/table/table.documentation.js
index b553acd5a2..6a13d83927 100644
--- a/src/components/base/table/table.documentation.js
+++ b/src/components/base/table/table.documentation.js
@@ -2,7 +2,7 @@ import description from './table.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   description,
   examples,
   bootstrapComponent: 'b-table',
diff --git a/src/components/base/tabs/tabs/tabs.documentation.js b/src/components/base/tabs/tabs/tabs.documentation.js
index 0816ae305d..1fb1e391a4 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: true,
+  followsDesignSystem: false,
 };
diff --git a/src/components/base/toast/toast.documentation.js b/src/components/base/toast/toast.documentation.js
index 9df07bd93b..521e1e8c68 100644
--- a/src/components/base/toast/toast.documentation.js
+++ b/src/components/base/toast/toast.documentation.js
@@ -2,7 +2,7 @@ import description from './toast.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   description,
   examples,
 };
diff --git a/src/components/base/toggle/toggle.documentation.js b/src/components/base/toggle/toggle.documentation.js
index 9d69e2ea64..a70b1d646c 100644
--- a/src/components/base/toggle/toggle.documentation.js
+++ b/src/components/base/toggle/toggle.documentation.js
@@ -1,7 +1,7 @@
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   examples,
   events: [
     {
diff --git a/src/components/base/token/token.documentation.js b/src/components/base/token/token.documentation.js
index c785a3cdca..d50dbf8d0c 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: true,
+  followsDesignSystem: false,
   examples,
   propsInfo: {
     variant: {
diff --git a/src/components/base/tooltip/tooltip.documentation.js b/src/components/base/tooltip/tooltip.documentation.js
index 34d95adb02..2fb9ff943b 100644
--- a/src/components/base/tooltip/tooltip.documentation.js
+++ b/src/components/base/tooltip/tooltip.documentation.js
@@ -2,7 +2,7 @@ import description from './tooltip.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   description,
   examples,
   bootstrapComponent: 'b-tooltip',
diff --git a/src/components/charts/tooltip/tooltip.documentation.js b/src/components/charts/tooltip/tooltip.documentation.js
index c4ea3ca753..09719adc6e 100644
--- a/src/components/charts/tooltip/tooltip.documentation.js
+++ b/src/components/charts/tooltip/tooltip.documentation.js
@@ -2,7 +2,7 @@ import description from './tooltip.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   description,
   examples,
   bootstrapComponent: 'b-popover',
-- 
GitLab