@gitlab/ui 43.5.0 → 43.6.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.5.0",
+  "version": "43.6.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",
@@ -109,7 +107,7 @@
     "eslint": "8.21.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,18 @@ 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 defaultIconSize = '1rem'
 export const glIconSizes = '8 12 14 16 24 32 48 72'
 export const glDropdownWidth = '15rem'
@@ -331,8 +330,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,7 @@
           "compiledValue": "image"
         }
       ],
-      "compiledValue": "data"
+      "compiledValue": ""
     },
     {
       "name": "$default-icon-size",
@@ -1747,12 +1742,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 +1787,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/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;

package/src/utils/constants.js

@@ -1,7 +1,4 @@
-import {
-  glThemes as glThemesVariable,
-  glIconSizes as glIconSizesVariable,
-} from '../../scss_to_js/scss_variables'; // eslint-disable-line import/no-unresolved
+import { glIconSizes as glIconSizesVariable } from '../../scss_to_js/scss_variables'; // eslint-disable-line import/no-unresolved
 
 import { POSITION } from '../components/utilities/truncate/constants';
 
@@ -11,7 +8,7 @@ function appendDefaultOption(options) {
 
 export const COMMA = ',';
 
-export const glThemes = glThemesVariable.split(COMMA).map((glTheme) => glTheme.trim());
+export const glThemes = ['indigo', 'blue', 'light-blue', 'green', 'red', 'light-red'];
 
 export const variantOptions = {
   primary: 'primary',