@gitlab/ui 43.0.0 → 43.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "43.0.0",
+  "version": "43.2.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -79,22 +79,22 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.18.9",
-    "@babel/preset-env": "^7.18.9",
+    "@babel/core": "^7.18.10",
+    "@babel/preset-env": "^7.18.10",
     "@gitlab/eslint-plugin": "15.0.0",
     "@gitlab/stylelint-config": "4.1.0",
     "@gitlab/svgs": "2.33.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.5.9",
-    "@storybook/addon-docs": "6.5.9",
-    "@storybook/addon-essentials": "6.5.9",
-    "@storybook/addon-storyshots": "6.5.9",
-    "@storybook/addon-storyshots-puppeteer": "6.5.9",
-    "@storybook/addon-viewport": "6.5.9",
-    "@storybook/theming": "6.5.9",
-    "@storybook/vue": "6.5.9",
+    "@storybook/addon-a11y": "6.5.10",
+    "@storybook/addon-docs": "6.5.10",
+    "@storybook/addon-essentials": "6.5.10",
+    "@storybook/addon-storyshots": "6.5.10",
+    "@storybook/addon-storyshots-puppeteer": "6.5.10",
+    "@storybook/addon-viewport": "6.5.10",
+    "@storybook/theming": "6.5.10",
+    "@storybook/vue": "6.5.10",
     "@vue/test-utils": "1.3.0",
     "@vue/vue2-jest": "27.0.0",
     "autoprefixer": "^9.7.6",

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

@@ -508,15 +508,15 @@ export default {
   },
   argTypes: {
     category: {
-      options: buttonCategoryOptions,
+      options: Object.keys(buttonCategoryOptions),
       control: 'select',
     },
     variant: {
-      options: buttonVariantOptions,
+      options: Object.keys(buttonVariantOptions),
       control: 'select',
     },
     size: {
-      options: buttonSizeOptions,
+      options: Object.keys(buttonSizeOptions),
       control: 'select',
     },
     target: {

package/src/components/base/markdown/markdown.scss

@@ -45,22 +45,18 @@
 
   h1,
   .gl-h1 {
-    @include gl-font-size-markdown-h1;
-    @include gl-line-height-32;
     @include gl-fluid-font-size(
-      $min: $gl-font-size-markdown-h1-md,
+      $min: $gl-font-size-markdown-h1,
       $max: $gl-font-size-markdown-h1-xl
     );
-    @include gl-fluid-line-height($min: $gl-line-height-36, $max: $gl-line-height-52);
+    @include gl-fluid-line-height($min: $gl-line-height-32, $max: $gl-line-height-52);
     @include gl-mt-0;
   }
 
   h2,
   .gl-h2 {
-    @include gl-font-size-markdown-h2;
-    @include gl-line-height-28;
     @include gl-fluid-font-size(
-      $min: $gl-font-size-markdown-h2-md,
+      $min: $gl-font-size-markdown-h2,
       $max: $gl-font-size-markdown-h2-xl
     );
     @include gl-fluid-line-height($min: $gl-line-height-28, $max: $gl-line-height-36);
@@ -69,10 +65,8 @@
 
   h3,
   .gl-h3 {
-    @include gl-font-size-markdown-h3;
-    @include gl-line-height-24;
     @include gl-fluid-font-size(
-      $min: $gl-font-size-markdown-h3-md,
+      $min: $gl-font-size-markdown-h3,
       $max: $gl-font-size-markdown-h3-xl
     );
     @include gl-fluid-line-height($min: $gl-line-height-24, $max: $gl-line-height-28);
@@ -239,10 +233,8 @@
 
   h1,
   .gl-h1 {
-    @include gl-font-size-compact-markdown-h1;
-    @include gl-line-height-24;
     @include gl-fluid-font-size(
-      $min: $gl-font-size-compact-markdown-h1-md,
+      $min: $gl-font-size-compact-markdown-h1,
       $max: $gl-font-size-compact-markdown-h1-xl
     );
     @include gl-fluid-line-height($min: $gl-line-height-24, $max: $gl-line-height-28);

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

@@ -65,7 +65,7 @@ export default {
   argTypes: {
     ...disableControls(['name']),
     labelPosition: {
-      options: toggleLabelPosition,
+      options: Object.keys(toggleLabelPosition),
       control: 'select',
     },
     label: {

package/src/scss/functions.scss

@@ -49,3 +49,13 @@
 @function if-important($important) {
   @return #{if($important, '!important', '')};
 }
+
+@function clamp-between($min, $max, $min-width: $breakpoint-md, $max-width: $breakpoint-xl) {
+  $min-width: px-to-rem($min-width);
+  $max-width: px-to-rem($max-width);
+
+  $slope: ($max - $min) / ($max-width - $min-width);
+  $intersection: (-$min-width * $slope) + $min;
+
+  @return clamp(#{$min}, #{$intersection} + #{$slope * 100vw}, #{$max});
+}

package/src/scss/mixins.scss

@@ -21,30 +21,14 @@
 * should be numeric.
 *
 * Values are expected in rem units.
+* Fluid range: between 48rem (768px) – 75rem (1200px).
 *
 * @param $property Property name, i.e. line-height, font-size, width, height, etc.
-* @param $property-min Property value lower bound.
-* @param $property-max Property value upper bound.
+* @param $min Property value lower bound.
+* @param $max Property value upper bound.
 */
-@mixin gl-responsive-property(
-  $property,
-  $property-min,
-  $property-max,
-  $breakpoint-min: $breakpoint-md,
-  $breakpoint-max: $breakpoint-xl
-) {
-  $property-range: ($property-max - $property-min) / 1rem;
-  $breakpoint-range: px-to-rem($breakpoint-max - $breakpoint-min) / 1rem;
-
-  @media (min-width: $breakpoint-min) {
-    #{$property}: calc(
-      #{$property-min} + #{$property-range} * ((100vw - #{$breakpoint-min}) / #{$breakpoint-range})
-    );
-  }
-
-  @media (min-width: $breakpoint-max) {
-    #{$property}: $property-max;
-  }
+@mixin gl-responsive-property($property, $min, $max) {
+  #{$property}: clamp-between($min, $max);
 }
 
 /**

package/src/scss/mixins.spec.scss

@@ -9,14 +9,8 @@
         @include gl-fluid-font-size(2rem, 3.5rem);
       }
       @include expect {
-        @media (min-width: 768px) {
-          // prettier-ignore
-          font-size: calc( 2rem + 1.5 * ((100vw - 768px) / 27));
-        }
-
-        @media (min-width: 1200px) {
-          font-size: 3.5rem;
-        }
+        // prettier-ignore
+        font-size: clamp(2rem, #{-0.66667rem} + #{5.55556vw}, 3.5rem);
       }
     }
   }
@@ -29,14 +23,8 @@
         @include gl-fluid-line-height(2rem, 3.5rem);
       }
       @include expect {
-        @media (min-width: 768px) {
-          // prettier-ignore
-          line-height: calc( 2rem + 1.5 * ((100vw - 768px) / 27));
-        }
-
-        @media (min-width: 1200px) {
-          line-height: 3.5rem;
-        }
+        // prettier-ignore
+        line-height: clamp(2rem, #{-0.66667rem} + #{5.55556vw}, 3.5rem);
       }
     }
   }

package/src/scss/typescale/_index.scss

@@ -26,25 +26,19 @@
   }
 
   .h-display {
-    @include gl-font-size-h-display;
-    @include gl-line-height-32;
-    @include gl-fluid-font-size($min: $gl-font-size-h-display-md, $max: $gl-font-size-h-display-xl);
-    @include gl-fluid-line-height($min: $gl-line-height-36, $max: $gl-line-height-52);
+    @include gl-fluid-font-size($min: $gl-font-size-h-display, $max: $gl-font-size-h-display-xl);
+    @include gl-fluid-line-height($min: $gl-line-height-32, $max: $gl-line-height-52);
   }
 
   h1,
   .gl-h1 {
-    @include gl-font-size-h1;
-    @include gl-line-height-28;
-    @include gl-fluid-font-size($min: $gl-font-size-h1-md, $max: $gl-font-size-h1-xl);
+    @include gl-fluid-font-size($min: $gl-font-size-h1, $max: $gl-font-size-h1-xl);
     @include gl-fluid-line-height($min: $gl-line-height-28, $max: $gl-line-height-36);
   }
 
   h2,
   .gl-h2 {
-    @include gl-font-size-h2;
-    @include gl-line-height-24;
-    @include gl-fluid-font-size($min: $gl-font-size-h2-md, $max: $gl-font-size-h2-xl);
+    @include gl-fluid-font-size($min: $gl-font-size-h2, $max: $gl-font-size-h2-xl);
     @include gl-fluid-line-height($min: $gl-line-height-24, $max: $gl-line-height-28);
   }
 

package/src/scss/utilities.scss

@@ -859,27 +859,27 @@
 }
 
 .gl-bg-chevron-left {
-  background-image: url($gl-icon-chevron-left)
+  background-image: url('#{$gl-icon-chevron-left}')
 }
 
 .gl-bg-chevron-left\! {
-  background-image: url($gl-icon-chevron-left) !important
+  background-image: url('#{$gl-icon-chevron-left}') !important
 }
 
 .gl-bg-chevron-right {
-  background-image: url($gl-icon-chevron-right)
+  background-image: url('#{$gl-icon-chevron-right}')
 }
 
 .gl-bg-chevron-right\! {
-  background-image: url($gl-icon-chevron-right) !important
+  background-image: url('#{$gl-icon-chevron-right}') !important
 }
 
 .gl-bg-chevron-down {
-  background-image: url($gl-icon-chevron-down)
+  background-image: url('#{$gl-icon-chevron-down}')
 }
 
 .gl-bg-chevron-down\! {
-  background-image: url($gl-icon-chevron-down) !important
+  background-image: url('#{$gl-icon-chevron-down}') !important
 }
 
 .gl-backdrop-filter-blur-1 {
@@ -3236,6 +3236,18 @@
   }
 }
 
+.gl-lg-flex-direction-column {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-flex-direction-column;
+  }
+}
+
+.gl-lg-flex-direction-column\! {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-flex-direction-column;
+  }
+}
+
 .gl-xs-flex-direction-column {
   @include gl-media-breakpoint-down(sm) {
     flex-direction: column;
@@ -3631,13 +3643,13 @@
   list-style-position: inside !important
 }
 .gl-mask-chevron-down {
-  mask-image: url($gl-icon-chevron-down);
+  mask-image: url('#{$gl-icon-chevron-down}');
   mask-repeat: no-repeat;
   mask-position: center;
   mask-size: cover
 }
 .gl-mask-chevron-down\! {
-  mask-image: url($gl-icon-chevron-down) !important;
+  mask-image: url('#{$gl-icon-chevron-down}') !important;
   mask-repeat: no-repeat !important;
   mask-position: center !important;
   mask-size: cover !important

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

@@ -387,15 +387,15 @@
 * naming convention: gl-bg-{image-name}
 */
 @mixin gl-bg-chevron-left {
-  background-image: url($gl-icon-chevron-left);
+  background-image: url('#{$gl-icon-chevron-left}');
 }
 
 @mixin gl-bg-chevron-right {
-  background-image: url($gl-icon-chevron-right);
+  background-image: url('#{$gl-icon-chevron-right}');
 }
 
 @mixin gl-bg-chevron-down {
-  background-image: url($gl-icon-chevron-down);
+  background-image: url('#{$gl-icon-chevron-down}');
 }
 
 /**

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

@@ -95,6 +95,12 @@
   }
 }
 
+@mixin gl-lg-flex-direction-column {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-flex-direction-column;
+  }
+}
+
 @mixin gl-xs-flex-direction-column {
   @include gl-media-breakpoint-down(sm) {
     flex-direction: column;

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

@@ -1,5 +1,5 @@
 @mixin gl-mask-chevron-down {
-  mask-image: url($gl-icon-chevron-down);
+  mask-image: url('#{$gl-icon-chevron-down}');
   mask-repeat: no-repeat;
   mask-position: center;
   mask-size: cover;