@gitlab/ui 43.2.0 → 43.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "43.2.0",
+  "version": "43.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -65,7 +65,7 @@
     "vue-runtime-helpers": "^1.1.2"
   },
   "peerDependencies": {
-    "@gitlab/svgs": "^1.116.0 || ^2.0.0",
+    "@gitlab/svgs": "^1.116.0 || ^2.0.0 || ^3.0.0",
     "bootstrap": "4.5.3",
     "emoji-regex": ">=10.0.0",
     "pikaday": "^1.8.0",
@@ -83,7 +83,7 @@
     "@babel/preset-env": "^7.18.10",
     "@gitlab/eslint-plugin": "15.0.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "2.33.0",
+    "@gitlab/svgs": "3.0.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -106,10 +106,10 @@
     "bootstrap": "4.5.3",
     "cypress": "^6.6.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.20.0",
+    "eslint": "8.21.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-storybook": "0.6.1",
+    "eslint-plugin-storybook": "0.6.3",
     "file-loader": "^4.2.0",
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",

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

@@ -31,7 +31,7 @@ export const Default = (_args, { argTypes }) => ({
         <gl-nav-item-dropdown text="Dropdown">
           <template #button-content>
             <gl-icon name="question" />
-            <gl-icon name="angle-down" />
+            <gl-icon name="chevron-down" />
           </template>
           <gl-dropdown-item>One</gl-dropdown-item>
           <gl-dropdown-item>Two</gl-dropdown-item>

package/src/scss/functions.scss

@@ -57,5 +57,8 @@
   $slope: ($max - $min) / ($max-width - $min-width);
   $intersection: (-$min-width * $slope) + $min;
 
-  @return clamp(#{$min}, #{$intersection} + #{$slope * 100vw}, #{$max});
+  // Use calc() inside of clamp() function to work around SassC
+  // compilation failure.
+  // See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2972
+  @return clamp(#{$min}, calc(#{$intersection} + #{$slope * 100vw}), #{$max});
 }

package/src/scss/mixins.spec.scss

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

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 '';
-  }
-};