@gitlab/ui 43.4.0 → 43.7.0

package/dist/utils/constants.js

@@ -1,6 +1,5 @@
 import { POSITION } from '../components/utilities/truncate/constants';
 
-const glThemes$1 = 'indigo ,  blue ,  light-blue ,  green ,  red ,  light-red';
 const glIconSizes = '8 12 14 16 24 32 48 72';
 
 function appendDefaultOption(options) {
@@ -10,7 +9,7 @@ function appendDefaultOption(options) {
 }
 
 const COMMA = ',';
-const glThemes = glThemes$1.split(COMMA).map(glTheme => glTheme.trim());
+const glThemes = ['indigo', 'blue', 'light-blue', 'green', 'red', 'light-red'];
 const variantOptions = {
   primary: 'primary',
   secondary: 'secondary',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "43.4.0",
+  "version": "43.7.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -73,15 +73,13 @@
   },
   "resolutions": {
     "chokidar": "^3.5.2",
-    "node-gyp": "^9.0.0",
-    "node-sass": "^6.0.0",
     "sane": "^5.0.1"
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
     "@babel/core": "^7.18.10",
     "@babel/preset-env": "^7.18.10",
-    "@gitlab/eslint-plugin": "15.0.0",
+    "@gitlab/eslint-plugin": "16.0.0",
     "@gitlab/stylelint-config": "4.1.0",
     "@gitlab/svgs": "3.0.0",
     "@rollup/plugin-commonjs": "^11.1.0",
@@ -106,10 +104,10 @@
     "bootstrap": "4.5.3",
     "cypress": "^6.6.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.21.0",
+    "eslint": "8.22.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-storybook": "0.6.3",
+    "eslint-plugin-storybook": "0.6.4",
     "file-loader": "^4.2.0",
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
@@ -121,7 +119,6 @@
     "jest-serializer-vue": "^2.0.2",
     "markdownlint-cli": "^0.29.0",
     "mockdate": "^2.0.5",
-    "node-sass": "^6.0.0",
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
     "plop": "^2.5.4",
@@ -138,9 +135,9 @@
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.6",
     "sass": "^1.49.9",
-    "sass-export": "^1.0.3",
+    "sass-export": "^2.1.2",
     "sass-loader": "^10.2.0",
-    "sass-true": "^5.0.0",
+    "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
     "storybook-dark-mode": "^1.0.8",
     "stylelint": "14.9.1",

package/scss_to_js/scss_variables.js

@@ -101,7 +101,6 @@ export const gray700 = '#525252'
 export const gray800 = '#404040'
 export const gray900 = '#303030'
 export const gray950 = '#1f1f1f'
-export const glThemes = 'indigo ,  blue ,  light-blue ,  green ,  red ,  light-red'
 export const themeIndigo50 = '#f1f1ff'
 export const themeIndigo100 = '#dbdbf8'
 export const themeIndigo200 = '#c7c7f2'
@@ -276,9 +275,9 @@ export const glFontSizeCompactMarkdownH1Xl = '1.4375rem'
 export const glFontSizeMonospace = '0.8125rem'
 export const glFontSizeMonospaceLg = '0.9375rem'
 export const glFontSizeMonospaceSm = '0.6875rem'
-export const glMonospaceFont = 'Menlo, DejaVu Sans Mono, Liberation Mono, Consolas, Ubuntu Mono, Courier New, andale mono, lucida console, monospace'
-export const glRegularFont = '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji'
-export const glFonts = '("monospace": "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace, "regular": -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")'
+export const glMonospaceFont = ''
+export const glRegularFont = ''
+export const glFonts = '("monospace": ("Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace), "regular": (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))'
 export const borderColor = '#dbdbdb'
 export const glBorderSize1 = '1px'
 export const glBorderSize2 = '2px'
@@ -297,18 +296,21 @@ export const glTransitionDurationMedium = '0.2s'
 export const outlineOffset = '1px'
 export const outlineWidth = '2px'
 export const outline = '3px'
-export const focusRing = '0 0 0 1px #fff, 0 0 0 3px #428fdc'
-export const focusRingInset = 'inset 0 0 0 3px #fff, inset 0 0 0 1px #fff'
-export const focusRingDark = '0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 3px #63a6e9'
+export const focusRing = ''
+export const focusRingInset = ''
+export const focusRingDark = ''
 export const focusRingOutline = '2px solid #428fdc'
 export const toastMaxWidth = '36.625rem'
 export const toastPaddingRight = '2.625rem'
 export const toastBackgroundColor = '#303030'
 export const chartTooltipMaxWidth = '32rem'
-export const glIconChevronLeft = '#{'data:image/svg+xml}'
-export const glIconChevronRight = '#{'data:image/svg+xml}'
-export const glIconChevronDown = '#{'data:image/svg+xml}'
-export const glIconSelectChevronDown = 'data'
+export const glIconChevronLeft = ''
+export const glIconChevronRight = ''
+export const glIconChevronDown = ''
+export const glIconSelectChevronDown = ''
+export const glIconCheck = ''
+export const glIconIndeterminate = ''
+export const glIconRadio = ''
 export const defaultIconSize = '1rem'
 export const glIconSizes = '8 12 14 16 24 32 48 72'
 export const glDropdownWidth = '15rem'
@@ -331,8 +333,8 @@ export const info = '#1f75cb'
 export const warning = '#ab6100'
 export const danger = '#dd2b0e'
 export const fontWeightBold = '600'
-export const fontFamilySansSerif = '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji'
-export const fontFamilyMonospace = 'Menlo, DejaVu Sans Mono, Liberation Mono, Consolas, Ubuntu Mono, Courier New, andale mono, lucida console, monospace'
+export const fontFamilySansSerif = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Noto Color Emoji'
+export const fontFamilyMonospace = '"Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace'
 export const h1FontSize = '2.1875rem'
 export const h2FontSize = '1.75rem'
 export const h3FontSize = '1.53125rem'

package/scss_to_js/scss_variables.json

@@ -542,11 +542,6 @@
       "value": "#1f1f1f",
       "compiledValue": "#1f1f1f"
     },
-    {
-      "name": "$gl-themes",
-      "value": "indigo', 'blue', 'light-blue', 'green', 'red', 'light-red",
-      "compiledValue": "indigo ,  blue ,  light-blue ,  green ,  red ,  light-red"
-    },
     {
       "name": "$theme-indigo-50",
       "value": "#f1f1ff",
@@ -1432,12 +1427,12 @@
     {
       "name": "$gl-monospace-font",
       "value": "'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace",
-      "compiledValue": "Menlo, DejaVu Sans Mono, Liberation Mono, Consolas, Ubuntu Mono, Courier New, andale mono, lucida console, monospace"
+      "compiledValue": ""
     },
     {
       "name": "$gl-regular-font",
       "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
-      "compiledValue": "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+      "compiledValue": ""
     },
     {
       "name": "$gl-fonts",
@@ -1446,15 +1441,15 @@
         {
           "name": "monospace",
           "value": "$gl-monospace-font",
-          "compiledValue": "Menlo, DejaVu Sans Mono, Liberation Mono, Consolas, Ubuntu Mono, Courier New, andale mono, lucida console, monospace"
+          "compiledValue": "\"Menlo\", \"DejaVu Sans Mono\", \"Liberation Mono\", \"Consolas\", \"Ubuntu Mono\", \"Courier New\", \"andale mono\", \"lucida console\", monospace"
         },
         {
           "name": "regular",
           "value": "$gl-regular-font",
-          "compiledValue": "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+          "compiledValue": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans\", Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", Noto Color Emoji"
         }
       ],
-      "compiledValue": "(\"monospace\": \"Menlo\", \"DejaVu Sans Mono\", \"Liberation Mono\", \"Consolas\", \"Ubuntu Mono\", \"Courier New\", \"andale mono\", \"lucida console\", monospace, \"regular\": -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans\", Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\")"
+      "compiledValue": "(\"monospace\": (\"Menlo\", \"DejaVu Sans Mono\", \"Liberation Mono\", \"Consolas\", \"Ubuntu Mono\", \"Courier New\", \"andale mono\", \"lucida console\", monospace), \"regular\": (-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans\", Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"))"
     },
     {
       "name": "$border-color",
@@ -1549,17 +1544,17 @@
     {
       "name": "$focus-ring",
       "value": "0 0 0 $outline-offset $white, 0 0 0 #{$outline-offset + $outline-width} $blue-400",
-      "compiledValue": "0 0 0 1px #fff, 0 0 0 3px #428fdc"
+      "compiledValue": ""
     },
     {
       "name": "$focus-ring-inset",
       "value": "inset 0 0 0 #{$outline-width + $outline-offset} $white, inset 0 0 0 $outline-offset $white",
-      "compiledValue": "inset 0 0 0 3px #fff, inset 0 0 0 1px #fff"
+      "compiledValue": ""
     },
     {
       "name": "$focus-ring-dark",
       "value": "0 0 0 $outline-offset rgba($black, 0.6), 0 0 0 #{$outline-offset + $outline-width} $blue-300",
-      "compiledValue": "0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 3px #63a6e9"
+      "compiledValue": ""
     },
     {
       "name": "$focus-ring-outline",
@@ -1596,7 +1591,7 @@
           "compiledValue": "image"
         }
       ],
-      "compiledValue": "#{'data:image/svg+xml}"
+      "compiledValue": ""
     },
     {
       "name": "$gl-icon-chevron-right",
@@ -1608,7 +1603,7 @@
           "compiledValue": "image"
         }
       ],
-      "compiledValue": "#{'data:image/svg+xml}"
+      "compiledValue": ""
     },
     {
       "name": "$gl-icon-chevron-down",
@@ -1620,7 +1615,7 @@
           "compiledValue": "image"
         }
       ],
-      "compiledValue": "#{'data:image/svg+xml}"
+      "compiledValue": ""
     },
     {
       "name": "$gl-icon-select-chevron-down",
@@ -1632,7 +1627,43 @@
           "compiledValue": "image"
         }
       ],
-      "compiledValue": "data"
+      "compiledValue": ""
+    },
+    {
+      "name": "$gl-icon-check",
+      "value": "data:image/svg+xml,%3Csvg width=\"8\" height=\"7\" viewBox=\"0 0 8 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M1 3.05299L2.99123 5L7 1\" stroke=\"white\" stroke-width=\"2\"/%3E%3C/svg%3E%0A",
+      "mapValue": [
+        {
+          "name": "data",
+          "value": "image",
+          "compiledValue": "image"
+        }
+      ],
+      "compiledValue": ""
+    },
+    {
+      "name": "$gl-icon-indeterminate",
+      "value": "data:image/svg+xml,%3Csvg width=\"8\" height=\"2\" viewBox=\"0 0 8 2\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M0 1L8 1\" stroke=\"white\" stroke-width=\"2\"/%3E%3C/svg%3E%0A",
+      "mapValue": [
+        {
+          "name": "data",
+          "value": "image",
+          "compiledValue": "image"
+        }
+      ],
+      "compiledValue": ""
+    },
+    {
+      "name": "$gl-icon-radio",
+      "value": "data:image/svg+xml,%3Csvg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Ccircle cx=\"3\" cy=\"3\" r=\"3\" fill=\"white\"/%3E%3C/svg%3E%0A",
+      "mapValue": [
+        {
+          "name": "data",
+          "value": "image",
+          "compiledValue": "image"
+        }
+      ],
+      "compiledValue": ""
     },
     {
       "name": "$default-icon-size",
@@ -1747,12 +1778,12 @@
     {
       "name": "$font-family-sans-serif",
       "value": "$gl-regular-font",
-      "compiledValue": "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+      "compiledValue": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans\", Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", Noto Color Emoji"
     },
     {
       "name": "$font-family-monospace",
       "value": "$gl-monospace-font",
-      "compiledValue": "Menlo, DejaVu Sans Mono, Liberation Mono, Consolas, Ubuntu Mono, Courier New, andale mono, lucida console, monospace"
+      "compiledValue": "\"Menlo\", \"DejaVu Sans Mono\", \"Liberation Mono\", \"Consolas\", \"Ubuntu Mono\", \"Courier New\", \"andale mono\", \"lucida console\", monospace"
     },
     {
       "name": "$h1-font-size",
@@ -1792,6 +1823,53 @@
     {
       "name": "$spacers",
       "value": "( 1: $gl-spacing-scale-2, 2: $gl-spacing-scale-3, 3: $gl-spacing-scale-5, 4: $gl-spacing-scale-6, 5: $gl-spacing-scale-7, 6: $gl-spacing-scale-8, 7: $gl-spacing-scale-9, 8: $gl-spacing-scale-10, 9: $gl-spacing-scale-11, )",
+      "mapValue": [
+        {
+          "name": "1",
+          "value": "$gl-spacing-scale-2",
+          "compiledValue": "0.25rem"
+        },
+        {
+          "name": "2",
+          "value": "$gl-spacing-scale-3",
+          "compiledValue": "0.5rem"
+        },
+        {
+          "name": "3",
+          "value": "$gl-spacing-scale-5",
+          "compiledValue": "1rem"
+        },
+        {
+          "name": "4",
+          "value": "$gl-spacing-scale-6",
+          "compiledValue": "1.5rem"
+        },
+        {
+          "name": "5",
+          "value": "$gl-spacing-scale-7",
+          "compiledValue": "2rem"
+        },
+        {
+          "name": "6",
+          "value": "$gl-spacing-scale-8",
+          "compiledValue": "2.5rem"
+        },
+        {
+          "name": "7",
+          "value": "$gl-spacing-scale-9",
+          "compiledValue": "3rem"
+        },
+        {
+          "name": "8",
+          "value": "$gl-spacing-scale-10",
+          "compiledValue": "3.5rem"
+        },
+        {
+          "name": "9",
+          "value": "$gl-spacing-scale-11",
+          "compiledValue": "4rem"
+        }
+      ],
       "compiledValue": "(1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2rem, 6: 2.5rem, 7: 3rem, 8: 3.5rem, 9: 4rem)"
     },
     {

package/src/components/base/accordion/accordion_item.spec.js

@@ -54,15 +54,15 @@ describe('GlAccordionItem', () => {
   it('renders the appropriate header element', () => {
     createComponent({}, { defaultHeaderLevel: 3 });
 
-    expect(wrapper.find('h3.gl-accordion-item-header').exists()).toBeTruthy();
-    expect(wrapper.find('h4.gl-accordion-item-header').exists()).toBeFalsy();
+    expect(wrapper.find('h3.gl-accordion-item-header').exists()).toBe(true);
+    expect(wrapper.find('h4.gl-accordion-item-header').exists()).toBe(false);
   });
 
   it('renders the appropriate header element when overridden', () => {
     createComponent({ headerLevel: 4 }, { defaultHeaderLevel: 3 });
 
-    expect(wrapper.find('h3.gl-accordion-item-header').exists()).toBeFalsy();
-    expect(wrapper.find('h4.gl-accordion-item-header').exists()).toBeTruthy();
+    expect(wrapper.find('h3.gl-accordion-item-header').exists()).toBe(false);
+    expect(wrapper.find('h4.gl-accordion-item-header').exists()).toBe(true);
   });
 
   it.each(['custom-header-class', ['custom-header-class'], { 'custom-header-class': true }])(

package/src/components/base/button/button.scss

@@ -463,7 +463,7 @@
   &[disabled]:active,
   &[disabled].selected {
     @include gl-bg-gray-10;
-    @include gl-text-gray-400;
+    @include gl-text-gray-500;
     @include gl-inset-border-1-gray-100;
     @include gl-opacity-10;
     cursor: not-allowed !important;

package/src/components/base/form/form_checkbox/form_checkbox.scss

@@ -79,6 +79,29 @@
       }
     }
 
+    .custom-control-input[type='checkbox']:checked ~ .custom-control-label,
+    .custom-control-input[type='checkbox']:indeterminate ~ .custom-control-label,
+    .custom-control-input[type='radio']:checked ~ .custom-control-label {
+      &::after {
+        @include gl-bg-none;
+        @include gl-bg-white;
+        mask-repeat: no-repeat;
+        mask-position: center center;
+      }
+    }
+
+    .custom-control-input[type='checkbox']:checked ~ .custom-control-label::after {
+      mask-image: url($gl-icon-check);
+    }
+
+    .custom-control-input[type='checkbox']:indeterminate ~ .custom-control-label::after {
+      mask-image: url($gl-icon-indeterminate);
+    }
+
+    .custom-control-input[type='radio']:checked ~ .custom-control-label::after {
+      mask-image: url($gl-icon-radio);
+    }
+
     .custom-control-input:not(:disabled):checked ~ .custom-control-label:hover,
     .custom-control-input:not(:disabled):focus:checked ~ .custom-control-label {
       &::before {
@@ -88,19 +111,15 @@
     }
 
     &.custom-checkbox {
-      .custom-control-input:indeterminate ~ .custom-control-label {
-        &::before {
-          @include gl-bg-blue-500;
-          @include gl-border-blue-500;
-        }
+      .custom-control-input:indeterminate ~ .custom-control-label::before {
+        @include gl-bg-blue-500;
+        @include gl-border-blue-500;
       }
 
-      .custom-control-input:not(:disabled):indeterminate ~ .custom-control-label:hover,
-      .custom-control-input:not(:disabled):focus:indeterminate ~ .custom-control-label {
-        &::before {
-          @include gl-bg-blue-700;
-          @include gl-border-blue-700;
-        }
+      .custom-control-input:not(:disabled):indeterminate ~ .custom-control-label:hover::before,
+      .custom-control-input:not(:disabled):focus:indeterminate ~ .custom-control-label::before {
+        @include gl-bg-blue-700;
+        @include gl-border-blue-700;
       }
     }
 
@@ -108,10 +127,23 @@
       @include gl-cursor-not-allowed;
 
       &::before {
-        @include gl-opacity-5;
+        @include gl-bg-gray-50;
+        @include gl-border-gray-100;
         @include gl-pointer-events-auto;
       }
     }
+
+    .custom-control-input:checked:disabled ~ .custom-control-label,
+    .custom-control-input:indeterminate:disabled ~ .custom-control-label {
+      &::before {
+        @include gl-bg-gray-100;
+        @include gl-border-gray-100;
+      }
+
+      &::after {
+        @include gl-bg-gray-500;
+      }
+    }
   }
 
   .help-text {

package/src/components/base/form/form_input/form_input.scss

@@ -21,7 +21,7 @@
 
   &:disabled {
     @include gl-cursor-not-allowed;
-    @include gl-text-gray-400;
+    @include gl-text-gray-500;
   }
 
   &:not(.form-control-plaintext):focus {

package/src/components/base/form/form_select/form_select.scss

@@ -32,7 +32,7 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
   &:disabled {
     @include gl-bg-gray-10;
     @include gl-inset-border-1-gray-100;
-    @include gl-text-gray-400;
+    @include gl-text-gray-500;
     @include gl-cursor-not-allowed;
   }
 

package/src/components/base/modal/modal.stories.js

@@ -27,6 +27,7 @@ const generateTemplate = ({ props = {}, slots = {} } = {}) => {
         :action-cancel="{text: 'Cancel'}"
         :visible="$options.viewMode !== 'docs'"
         :scrollable="scrollable"
+        :no-focus-on-show="noFocusOnShow"
         modal-id="test-modal-id"
         title="Example title"
         no-fade
@@ -54,6 +55,7 @@ const generateProps = ({
   variant = variantOptionsWithNoDefault.default,
   contentPagraphs = 1,
   scrollable = false,
+  noFocusOnShow = false,
 } = {}) => ({
   headerBgVariant: variant,
   headerBorderVariant: variant,
@@ -65,6 +67,7 @@ const generateProps = ({
   footerTextVariant: variant,
   contentParagraphs: contentPagraphs,
   scrollable,
+  noFocusOnShow,
 });
 
 export const Default = Template.bind({});
@@ -100,6 +103,11 @@ export const WithoutAFooter = (args, { argTypes, viewMode }) => ({
 });
 WithoutAFooter.args = generateProps();
 
+export const WithoutFocus = Template.bind({});
+WithoutFocus.args = generateProps({
+  noFocusOnShow: true,
+});
+
 export default {
   title: 'base/modal',
   component: GlModal,

package/src/components/base/modal/modal.vue

@@ -85,6 +85,11 @@ export default {
       required: false,
       default: '',
     },
+    noFocusOnShow: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     shouldRenderModalOk() {
@@ -151,6 +156,8 @@ export default {
       return prop.attributes;
     },
     setFocus() {
+      if (this.noFocusOnShow) return;
+
       const btnElts = [...this.$refs.modal.$refs.modal.querySelectorAll('button')];
       const modalElts = [
         ...this.$refs.modal.$refs.body.querySelectorAll(focusableTags.join(COMMA)),
@@ -171,10 +178,10 @@ export default {
 </script>
 
 <template>
-  <!-- 
+  <!--
   Emitted when the modal visibility changes
   @event change
- -->
+  -->
   <b-modal
     :id="modalId"
     ref="modal"
@@ -217,7 +224,7 @@ export default {
         <!--
         Emitted when clicked on modal-action-cancel
         @event canceled
-       -->
+        -->
         <gl-button
           v-if="actionCancel"
           class="js-modal-action-cancel"
@@ -229,7 +236,7 @@ export default {
         <!--
         Emitted when clicked on modal-action-secondary
         @event secondary
-       -->
+        -->
         <gl-button
           v-if="actionSecondary"
           class="js-modal-action-secondary"
@@ -241,7 +248,7 @@ export default {
         <!--
         Emitted when clicked on modal-action-primary
         @event primary
-       -->
+        -->
         <gl-button
           v-if="actionPrimary"
           class="js-modal-action-primary"

package/src/scss/mixins.spec.scss

@@ -10,7 +10,7 @@
       }
       @include expect {
         // prettier-ignore
-        font-size: clamp(2rem, calc(#{-0.66667rem} + #{5.55556vw}), 3.5rem);
+        font-size: clamp(2rem, #{calc(#{-0.6666666667rem} + #{5.5555555556vw})}, 3.5rem);
       }
     }
   }
@@ -24,7 +24,7 @@
       }
       @include expect {
         // prettier-ignore
-        line-height: clamp(2rem, calc(#{-0.66667rem} + #{5.55556vw}), 3.5rem);
+        line-height: clamp(2rem, #{calc(#{-0.6666666667rem} + #{5.5555555556vw})}, 3.5rem);
       }
     }
   }

package/src/scss/run_scss_tests.spec.js

@@ -1,3 +1,11 @@
+/**
+ * @jest-environment node
+ *
+ * sassTrue.runSass cannot find the file when testEnvironment is set to `test`
+ * only with dart-sass.
+ * See https://github.com/oddbird/true/issues/156
+ */
+
 const fs = require('fs');
 const path = require('path');
 const sassTrue = require('sass-true');

package/src/scss/utilities.scss

@@ -3136,6 +3136,18 @@
   }
 }
 
+.gl-sm-align-items-flex-start {
+  @include gl-media-breakpoint-up(sm) {
+  align-items: flex-start;
+  }
+}
+
+.gl-sm-align-items-flex-start\! {
+  @include gl-media-breakpoint-up(sm) {
+  align-items: flex-start !important;
+  }
+}
+
 .gl-sm-align-items-flex-end {
   @include gl-media-breakpoint-up(sm) {
   align-items: flex-end;

package/src/scss/utility-mixins/flex.scss

@@ -45,6 +45,12 @@
   }
 }
 
+@mixin gl-sm-align-items-flex-start {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-align-items-flex-start;
+  }
+}
+
 @mixin gl-sm-align-items-flex-end {
   @include gl-media-breakpoint-up(sm) {
     @include gl-align-items-flex-end;

package/src/scss/variables.scss

@@ -149,10 +149,6 @@ $gray-800: #404040 !default;
 $gray-900: #303030 !default;
 $gray-950: #1f1f1f !default;
 
-// GitLab themes
-
-$gl-themes: 'indigo', 'blue', 'light-blue', 'green', 'red', 'light-red';
-
 // The indigo light and indigo dark use $theme-indigo variables.
 $theme-indigo-50: #f1f1ff !default;
 $theme-indigo-100: #dbdbf8 !default;
@@ -442,6 +438,9 @@ $gl-icon-chevron-left: 'data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="
 $gl-icon-chevron-right: 'data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill-rule="evenodd" d="M10.707 7.293a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414L8.586 8 6.293 5.707a1 1 0 0 1 1.414-1.414l3 3z"/></svg>';
 $gl-icon-chevron-down: 'data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill-rule="evenodd" d="M7.293 10.707a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L8 8.586 5.707 6.293a1 1 0 0 0-1.414 1.414l3 3z"/></svg>';
 $gl-icon-select-chevron-down: 'data:image/svg+xml,%3Csvg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M0.21967 0.21967C0.512563 -0.0732232 0.987437 -0.0732232 1.28033 0.21967L4 2.93934L6.71967 0.21967C7.01256 -0.073223 7.48744 -0.0732229 7.78033 0.21967C8.07322 0.512563 8.07322 0.987437 7.78033 1.28033L4.53033 4.53033C4.23744 4.82322 3.76256 4.82322 3.46967 4.53033L0.21967 1.28033C-0.0732233 0.987437 -0.0732233 0.512563 0.21967 0.21967Z" fill="%23666666"/%3E%3C/svg%3E%0A';
+$gl-icon-check: 'data:image/svg+xml,%3Csvg width="8" height="7" viewBox="0 0 8 7" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1 3.05299L2.99123 5L7 1" stroke="white" stroke-width="2"/%3E%3C/svg%3E%0A';
+$gl-icon-indeterminate: 'data:image/svg+xml,%3Csvg width="8" height="2" viewBox="0 0 8 2" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 1L8 1" stroke="white" stroke-width="2"/%3E%3C/svg%3E%0A';
+$gl-icon-radio: 'data:image/svg+xml,%3Csvg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="3" cy="3" r="3" fill="white"/%3E%3C/svg%3E%0A';
 
 // Icons
 $default-icon-size: px-to-rem(16px);