@gitlab/ui 32.60.0 → 32.64.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.60.0",
+  "version": "32.64.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -90,15 +90,15 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.4.10",
-    "@storybook/addon-docs": "6.4.10",
-    "@storybook/addon-essentials": "6.4.10",
+    "@storybook/addon-a11y": "6.4.13",
+    "@storybook/addon-docs": "6.4.13",
+    "@storybook/addon-essentials": "6.4.13",
     "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-storyshots": "6.4.10",
-    "@storybook/addon-storyshots-puppeteer": "6.4.10",
-    "@storybook/addon-viewport": "6.4.10",
-    "@storybook/theming": "6.4.10",
-    "@storybook/vue": "6.4.10",
+    "@storybook/addon-storyshots": "6.4.13",
+    "@storybook/addon-storyshots-puppeteer": "6.4.13",
+    "@storybook/addon-viewport": "6.4.13",
+    "@storybook/theming": "6.4.13",
+    "@storybook/vue": "6.4.13",
     "@vue/test-utils": "1.3.0",
     "autoprefixer": "^9.7.6",
     "babel-jest": "^26.6.3",

package/scss_to_js/scss_variables.js

@@ -240,6 +240,7 @@ export const glLineHeight24 = '1.5rem'
 export const glLineHeight28 = '1.75rem'
 export const glLineHeight32 = '2rem'
 export const glLineHeight36 = '2.25rem'
+export const glLineHeight42 = '2.625rem'
 export const glLineHeight44 = '2.75rem'
 export const glLineHeight52 = '3.25rem'
 export const glFontSize = '0.875rem'

package/scss_to_js/scss_variables.json

@@ -1249,6 +1249,11 @@
       "value": "px-to-rem(36px)",
       "compiledValue": "2.25rem"
     },
+    {
+      "name": "$gl-line-height-42",
+      "value": "px-to-rem(42px)",
+      "compiledValue": "2.625rem"
+    },
     {
       "name": "$gl-line-height-44",
       "value": "px-to-rem(44px)",

package/src/scss/utilities.scss

@@ -2940,6 +2940,18 @@
   }
 }
 
+.gl-md-flex-direction-column {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-flex-direction-column;
+  }
+}
+
+.gl-md-flex-direction-column\! {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-flex-direction-column;
+  }
+}
+
 .gl-xs-flex-direction-column {
   @include gl-media-breakpoint-down(sm) {
     flex-direction: column;
@@ -4666,6 +4678,12 @@
 .gl-pr-9\! {
   padding-right: $gl-spacing-scale-9 !important;
 }
+.gl-pr-10 {
+  padding-right: $gl-spacing-scale-10;
+}
+.gl-pr-10\! {
+  padding-right: $gl-spacing-scale-10 !important;
+}
 .gl-pl-0 {
   padding-left: 0;
 }
@@ -4726,6 +4744,12 @@
 .gl-pl-9\! {
   padding-left: $gl-spacing-scale-9 !important;
 }
+.gl-pl-10 {
+  padding-left: $gl-spacing-scale-10;
+}
+.gl-pl-10\! {
+  padding-left: $gl-spacing-scale-10 !important;
+}
 .gl-pl-11 {
   padding-left: $gl-spacing-scale-11;
 }
@@ -6306,6 +6330,16 @@
   padding-left: $gl-spacing-scale-5 !important;
   }
 }
+.gl-md-pl-7 {
+  @include gl-media-breakpoint-up(md) {
+  padding-left: $gl-spacing-scale-7;
+  }
+}
+.gl-md-pl-7\! {
+  @include gl-media-breakpoint-up(md) {
+  padding-left: $gl-spacing-scale-7 !important;
+  }
+}
 .gl-lg-pt-0 {
   @include gl-media-breakpoint-up(lg) {
   padding-top: 0;
@@ -7297,6 +7331,14 @@
   line-height: $gl-line-height-36 !important;
 }
 
+.gl-line-height-42 {
+  line-height: $gl-line-height-42;
+}
+
+.gl-line-height-42\! {
+  line-height: $gl-line-height-42 !important;
+}
+
 .gl-line-height-52 {
   line-height: $gl-line-height-52;
 }

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

@@ -96,6 +96,12 @@
   }
 }
 
+@mixin gl-md-flex-direction-column {
+  @include gl-media-breakpoint-up(md) {
+    @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/spacing.scss

@@ -134,6 +134,10 @@
   padding-right: $gl-spacing-scale-9;
 }
 
+@mixin gl-pr-10 {
+  padding-right: $gl-spacing-scale-10;
+}
+
 @mixin gl-pl-0 {
   padding-left: 0;
 }
@@ -174,6 +178,10 @@
   padding-left: $gl-spacing-scale-9;
 }
 
+@mixin gl-pl-10 {
+  padding-left: $gl-spacing-scale-10;
+}
+
 @mixin gl-pl-11 {
   padding-left: $gl-spacing-scale-11;
 }
@@ -1195,6 +1203,12 @@
   }
 }
 
+@mixin gl-md-pl-7 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pl-7;
+  }
+}
+
 @mixin gl-lg-pt-0 {
   @include gl-media-breakpoint-up(lg) {
     @include gl-pt-0;

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

@@ -177,6 +177,10 @@
   line-height: $gl-line-height-36;
 }
 
+@mixin gl-line-height-42 {
+  line-height: $gl-line-height-42;
+}
+
 @mixin gl-line-height-52 {
   line-height: $gl-line-height-52;
 }

package/src/scss/variables.scss

@@ -316,6 +316,7 @@ $gl-line-height-24: px-to-rem(24px);
 $gl-line-height-28: px-to-rem(28px);
 $gl-line-height-32: px-to-rem(32px);
 $gl-line-height-36: px-to-rem(36px);
+$gl-line-height-42: px-to-rem(42px);
 $gl-line-height-44: px-to-rem(44px);
 $gl-line-height-52: px-to-rem(52px);