@gitlab/ui 43.1.0 → 43.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "43.1.0",
+  "version": "43.2.2",
   "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/accordion/accordion.stories.js

@@ -44,7 +44,6 @@ export const AutoCollapse = Template.bind({});
 AutoCollapse.args = generateProps({ autoCollapse: true });
 
 export default {
-  followsDesignSystem: true,
   title: 'base/accordion',
   component: GlAccordion,
   parameters: {

package/src/components/base/badge/badge.scss

@@ -1,15 +1,23 @@
 @mixin gl-badge-variant(
   $variant,
   $color,
+  $icon-color,
   $bg,
   $hover-color,
+  $hover-icon-color,
   $border-color,
   $active-color,
+  $active-icon-color,
   $active-bg
 ) {
   .gl-badge.badge-#{$variant} {
     background-color: $bg;
     color: $color;
+
+    .gl-badge-icon {
+      color: $icon-color;
+      transition: inherit;
+    }
   }
 
   a.gl-badge.badge-#{$variant} {
@@ -19,18 +27,30 @@
       background-color: $bg;
       box-shadow: inset 0 0 0 $gl-border-size-1 $border-color;
       @include gl-text-decoration-none;
+
+      .gl-badge-icon {
+        color: $hover-icon-color;
+      }
     }
 
     &:focus {
       color: $hover-color;
       // Needed to override bootstrap's badge variant background
       background-color: $bg;
+
+      .gl-badge-icon {
+        color: $hover-icon-color;
+      }
     }
 
     &.active,
     &:active {
       color: $active-color;
       background-color: $active-bg;
+
+      .gl-badge-icon {
+        color: $active-icon-color;
+      }
     }
 
     &:active,
@@ -78,70 +98,91 @@
 @include gl-badge-variant(
   $variant: muted,
   $color: $gray-500,
+  $icon-color: $gray-400,
   $bg: $gray-50,
   $hover-color: $gray-600,
+  $hover-icon-color: $gray-500,
   $border-color: $gray-200,
-  $active-color: $gray-800,
+  $active-color: $gray-700,
+  $active-icon-color: $gray-600,
   $active-bg: $gray-100
 );
 
 @include gl-badge-variant(
   $variant: neutral,
   $color: $gray-700,
+  $icon-color: $gray-500,
   $bg: $gray-100,
   $hover-color: $gray-800,
+  $hover-icon-color: $gray-600,
   $border-color: $gray-200,
   $active-color: $gray-900,
+  $active-icon-color: $gray-700,
   $active-bg: $gray-200
 );
 
 @include gl-badge-variant(
   $variant: info,
   $color: $blue-700,
+  $icon-color: $blue-500,
   $bg: $blue-100,
   $hover-color: $blue-800,
+  $hover-icon-color: $blue-600,
   $border-color: $blue-200,
   $active-color: $blue-900,
+  $active-icon-color: $blue-700,
   $active-bg: $blue-200
 );
 
 @include gl-badge-variant(
   $variant: success,
   $color: $green-700,
+  $icon-color: $green-500,
   $bg: $green-100,
   $hover-color: $green-800,
+  $hover-icon-color: $green-600,
   $border-color: $green-200,
   $active-color: $green-900,
+  $active-icon-color: $green-700,
   $active-bg: $green-200
 );
 
 @include gl-badge-variant(
   $variant: warning,
   $color: $orange-700,
+  $icon-color: $orange-500,
   $bg: $orange-100,
   $hover-color: $orange-800,
+  $hover-icon-color: $orange-600,
   $border-color: $orange-200,
   $active-color: $orange-900,
+  $active-icon-color: $orange-700,
   $active-bg: $orange-200
 );
 
 @include gl-badge-variant(
   $variant: danger,
   $color: $red-700,
+  $icon-color: $red-500,
   $bg: $red-100,
   $hover-color: $red-800,
+  $hover-icon-color: $red-600,
   $border-color: $red-200,
   $active-color: $red-900,
+  $active-icon-color: $red-700,
   $active-bg: $red-200
 );
 
 @include gl-badge-variant(
   $variant: tier,
   $color: $purple-700,
+  $icon-color: $purple-500,
   $bg: $purple-100,
   $hover-color: $purple-800,
+  $hover-icon-color: $purple-600,
   $border-color: $purple-200,
   $active-color: $purple-900,
+  $active-icon-color: $purple-700,
   $active-bg: $purple-200
 );
 

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/daterange_picker/daterange_picker.stories.js

@@ -111,7 +111,6 @@ WithDatesSelectedAndTooltip.args = generateProps({
 });
 
 export default {
-  followsDesignSystem: true,
   title: 'base/daterange-picker',
   component: GlDaterangePicker,
   decorators: [makeContainer({ height: '300px' })],

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 {
@@ -3643,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/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;

package/dist/utils/validation_utils.js

@@ -1,14 +0,0 @@
-// Creates out of validation configurations from .documentation.js files and creates a readable string out of it
-const getValidationInfoText = function () {
-  let validation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-  switch (validation.type) {
-    case 'range':
-      return `${validation.min}-${validation.max}`;
-
-    default:
-      return '';
-  }
-};
-
-export { getValidationInfoText };

package/src/utils/validation_utils.js

@@ -1,9 +0,0 @@
-// Creates out of validation configurations from .documentation.js files and creates a readable string out of it
-export const getValidationInfoText = (validation = {}) => {
-  switch (validation.type) {
-    case 'range':
-      return `${validation.min}-${validation.max}`;
-    default:
-      return '';
-  }
-};