Merge branch 'leipert-upgrade-bootstrap-ce' into 'master'

Update bootstrap to 4.3.1

Closes #52091

See merge request gitlab-org/gitlab-ce!25911

3 files changed, 68 insertions, 1 deletions

diff --git a/app/assets/javascripts/commons/bootstrap.js b/app/assets/javascripts/commons/bootstrap.js
index fba30aea9ae..e5e1cbb1e62 100644
--- a/app/assets/javascripts/commons/bootstrap.js
+++ b/app/assets/javascripts/commons/bootstrap.js
@@ -16,3 +16,63 @@ $.fn.extend({
       .removeClass('disabled');
   },
 });
+
+/*
+ Starting with bootstrap 4.3.1, bootstrap sanitizes html used for tooltips / popovers.
+ This extends the default whitelists with more elements / attributes:
+ https://getbootstrap.com/docs/4.3/getting-started/javascript/#sanitizer
+ */
+const whitelist = $.fn.tooltip.Constructor.Default.whiteList;
+
+const inputAttributes = ['value', 'type'];
+
+const dataAttributes = [
+  'data-toggle',
+  'data-placement',
+  'data-container',
+  'data-title',
+  'data-class',
+  'data-clipboard-text',
+  'data-placement',
+];
+
+// Whitelisting data attributes
+whitelist['*'] = [
+  ...whitelist['*'],
+  ...dataAttributes,
+  'title',
+  'width height',
+  'abbr',
+  'datetime',
+  'name',
+  'width',
+  'height',
+];
+
+// Whitelist missing elements:
+whitelist.label = ['for'];
+whitelist.button = [...inputAttributes];
+whitelist.input = [...inputAttributes];
+
+whitelist.tt = [];
+whitelist.samp = [];
+whitelist.kbd = [];
+whitelist.var = [];
+whitelist.dfn = [];
+whitelist.cite = [];
+whitelist.big = [];
+whitelist.address = [];
+whitelist.dl = [];
+whitelist.dt = [];
+whitelist.dd = [];
+whitelist.abbr = [];
+whitelist.acronym = [];
+whitelist.blockquote = [];
+whitelist.del = [];
+whitelist.ins = [];
+whitelist['gl-emoji'] = [];
+
+// Whitelisting SVG tags and attributes
+whitelist.svg = ['viewBox'];
+whitelist.use = ['xlink:href'];
+whitelist.path = ['d'];
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index efebbd124d0..5d4c84c494d 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -711,3 +711,11 @@ $mr-version-controls-height: 56px;
 Compare Branches
 */
 $compare-branches-sticky-header-height: 68px;
+
+/**
+ Bootstrap 4.2.0 introduced new icons for validating forms.
+ Our design system does not use those, so we are disabling them for now:
+ - Docs: https://getbootstrap.com/docs/4.3/components/forms/#server-side
+ - Issue: https://gitlab.com/gitlab-org/design.gitlab.com/issues/242
+ */
+$enable-validation-icons: false;
diff --git a/app/assets/stylesheets/framework/variables_overrides.scss b/app/assets/stylesheets/framework/variables_overrides.scss
index efcc437bd7f..fb4d3f23cd9 100644
--- a/app/assets/stylesheets/framework/variables_overrides.scss
+++ b/app/assets/stylesheets/framework/variables_overrides.scss
@@ -9,7 +9,6 @@ $input-border-color: $gray-200;
 $input-color: $gl-text-color;
 $font-family-sans-serif: $regular-font;
 $font-family-monospace: $monospace-font;
-$input-line-height: 20px;
 $btn-line-height: 20px;
 $table-accent-bg: $gray-light;
 $card-border-color: $border-color;