@gitlab/ui 64.6.2 → 64.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "64.6.2",
+  "version": "64.7.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -94,18 +94,18 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.0.18",
-    "@storybook/addon-docs": "7.0.18",
-    "@storybook/addon-essentials": "7.0.18",
-    "@storybook/addon-storyshots": "7.0.18",
-    "@storybook/addon-storyshots-puppeteer": "7.0.18",
-    "@storybook/addon-viewport": "7.0.18",
-    "@storybook/builder-webpack5": "7.0.18",
-    "@storybook/theming": "7.0.18",
-    "@storybook/vue": "7.0.18",
-    "@storybook/vue-webpack5": "7.0.18",
-    "@storybook/vue3": "7.0.18",
-    "@storybook/vue3-webpack5": "7.0.18",
+    "@storybook/addon-a11y": "7.0.20",
+    "@storybook/addon-docs": "7.0.20",
+    "@storybook/addon-essentials": "7.0.20",
+    "@storybook/addon-storyshots": "7.0.20",
+    "@storybook/addon-storyshots-puppeteer": "7.0.20",
+    "@storybook/addon-viewport": "7.0.20",
+    "@storybook/builder-webpack5": "7.0.20",
+    "@storybook/theming": "7.0.20",
+    "@storybook/vue": "7.0.20",
+    "@storybook/vue-webpack5": "7.0.20",
+    "@storybook/vue3": "7.0.20",
+    "@storybook/vue3-webpack5": "7.0.20",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -153,7 +153,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.0.18",
+    "storybook": "7.0.20",
     "storybook-dark-mode": "3.0.0",
     "stylelint": "14.9.1",
     "stylelint-config-prettier": "9.0.4",

package/src/scss/utilities.scss

@@ -8318,254 +8318,375 @@
   font-family: $gl-monospace-font;
   font-variant-ligatures: none;
 }
+
 .gl-font-monospace\! {
   font-family: $gl-monospace-font !important;
   font-variant-ligatures: none !important;
 }
+
 .gl-font-regular {
   font-family: $gl-regular-font;
 }
+
 .gl-font-regular\! {
   font-family: $gl-regular-font !important;
 }
+
 .gl-font-style-italic {
   font-style: italic;
 }
+
 .gl-font-style-italic\! {
   font-style: italic !important;
 }
+
 .gl-font-style-normal {
   font-style: normal;
 }
+
 .gl-font-style-normal\! {
   font-style: normal !important;
 }
+
 .gl-font-xs {
   font-size: $gl-font-size-xs;
 }
+
 .gl-font-xs\! {
   font-size: $gl-font-size-xs !important;
 }
+
 .gl-font-sm {
   font-size: $gl-font-size-sm;
 }
+
 .gl-font-sm\! {
   font-size: $gl-font-size-sm !important;
 }
+
 .gl-font-base {
   font-size: $gl-font-size;
 }
+
 .gl-font-base\! {
   font-size: $gl-font-size !important;
 }
+
 .gl-font-lg {
   font-size: $gl-font-size-lg;
 }
+
 .gl-font-lg\! {
   font-size: $gl-font-size-lg !important;
 }
+
 .gl-font-size-h-display {
   font-size: $gl-font-size-h-display;
 }
+
 .gl-font-size-h-display\! {
   font-size: $gl-font-size-h-display !important;
 }
+
 .gl-font-size-h1 {
   font-size: $gl-font-size-h1;
 }
+
 .gl-font-size-h1\! {
   font-size: $gl-font-size-h1 !important;
 }
+
 .gl-font-size-h2 {
   font-size: $gl-font-size-h2;
 }
+
 .gl-font-size-h2\! {
   font-size: $gl-font-size-h2 !important;
 }
+
 .gl-font-size-h-display-xl {
   font-size: $gl-font-size-h-display-xl;
 }
+
 .gl-font-size-h-display-xl\! {
   font-size: $gl-font-size-h-display-xl !important;
 }
+
 .gl-font-size-h1-xl {
   font-size: $gl-font-size-h1-xl;
 }
+
 .gl-font-size-h1-xl\! {
   font-size: $gl-font-size-h1-xl !important;
 }
+
 .gl-font-size-h2-xl {
   font-size: $gl-font-size-h2-xl;
 }
+
 .gl-font-size-h2-xl\! {
   font-size: $gl-font-size-h2-xl !important;
 }
+
 .gl-font-icon-size {
   font-size: $default-icon-size;
 }
+
 .gl-font-icon-size\! {
   font-size: $default-icon-size !important;
 }
+
 .gl-font-size-markdown-sm {
   font-size: $gl-font-size-markdown-sm;
 }
+
 .gl-font-size-markdown-sm\! {
   font-size: $gl-font-size-markdown-sm !important;
 }
+
 .gl-font-size-markdown {
   font-size: $gl-font-size-markdown;
 }
+
 .gl-font-size-markdown\! {
   font-size: $gl-font-size-markdown !important;
 }
+
 .gl-font-size-markdown-h1 {
   font-size: $gl-font-size-markdown-h1;
 }
+
 .gl-font-size-markdown-h1\! {
   font-size: $gl-font-size-markdown-h1 !important;
 }
+
 .gl-font-size-markdown-h2 {
   font-size: $gl-font-size-markdown-h2;
 }
+
 .gl-font-size-markdown-h2\! {
   font-size: $gl-font-size-markdown-h2 !important;
 }
+
 .gl-font-size-markdown-h3 {
   font-size: $gl-font-size-markdown-h3;
 }
+
 .gl-font-size-markdown-h3\! {
   font-size: $gl-font-size-markdown-h3 !important;
 }
+
 .gl-font-size-compact-markdown-h1 {
   font-size: $gl-font-size-compact-markdown-h1;
 }
+
 .gl-font-size-compact-markdown-h1\! {
   font-size: $gl-font-size-compact-markdown-h1 !important;
 }
+
 .gl-reset-font-size {
   font-size: inherit;
 }
+
 .gl-reset-font-size\! {
   font-size: inherit !important;
 }
+
 .gl-font-weight-100 {
   font-weight: 100;
 }
+
 .gl-font-weight-100\! {
   font-weight: 100 !important;
 }
+
 .gl-font-weight-300 {
   font-weight: 300;
 }
+
 .gl-font-weight-300\! {
   font-weight: 300 !important;
 }
+
 .gl-font-weight-normal {
   font-weight: $gl-font-weight-normal;
 }
+
 .gl-font-weight-normal\! {
   font-weight: $gl-font-weight-normal !important;
 }
+
 .gl-font-weight-semibold {
   font-weight: $gl-font-weight-semibold;
 }
+
 .gl-font-weight-semibold\! {
   font-weight: $gl-font-weight-semibold !important;
 }
+
 .gl-font-weight-bold {
   font-weight: $gl-font-weight-bold;
 }
+
 .gl-font-weight-bold\! {
   font-weight: $gl-font-weight-bold !important;
 }
+
 .gl-sm-font-weight-bold {
   @include gl-media-breakpoint-up(sm) {
   font-weight: $gl-font-weight-bold;
   }
 }
+
 .gl-sm-font-weight-bold\! {
   @include gl-media-breakpoint-up(sm) {
   font-weight: $gl-font-weight-bold !important;
   }
 }
+
 .gl-line-height-0 {
   line-height: 0;
 }
+
 .gl-line-height-0\! {
   line-height: 0 !important;
 }
+
 .gl-line-height-1 {
   line-height: 1;
 }
+
 .gl-line-height-1\! {
   line-height: 1 !important;
 }
+
+.gl-line-height-ratio-0000 {
+  line-height: 0;
+}
+
+.gl-line-height-ratio-0000\! {
+  line-height: 0 !important;
+}
+
+.gl-line-height-ratio-1000 {
+  line-height: 1;
+}
+
+.gl-line-height-ratio-1000\! {
+  line-height: 1 !important;
+}
+
+.gl-line-height-ratio-1125 {
+  line-height: 1.125;
+}
+
+.gl-line-height-ratio-1125\! {
+  line-height: 1.125 !important;
+}
+
+.gl-line-height-ratio-1250 {
+  line-height: 1.25;
+}
+
+.gl-line-height-ratio-1250\! {
+  line-height: 1.25 !important;
+}
+
 .gl-line-height-normal {
   line-height: $gl-line-height-16;
 }
+
 .gl-line-height-normal\! {
   line-height: $gl-line-height-16 !important;
 }
+
 .gl-line-height-12 {
   line-height: $gl-line-height-12;
 }
+
 .gl-line-height-12\! {
   line-height: $gl-line-height-12 !important;
 }
+
 .gl-line-height-20 {
   line-height: $gl-line-height-20;
 }
+
 .gl-line-height-20\! {
   line-height: $gl-line-height-20 !important;
 }
+
 .gl-line-height-24 {
   line-height: $gl-line-height-24;
 }
+
 .gl-line-height-24\! {
   line-height: $gl-line-height-24 !important;
 }
+
 .gl-line-height-28 {
   line-height: $gl-line-height-28;
 }
+
 .gl-line-height-28\! {
   line-height: $gl-line-height-28 !important;
 }
+
 .gl-line-height-32 {
   line-height: $gl-line-height-32;
 }
+
 .gl-line-height-32\! {
   line-height: $gl-line-height-32 !important;
 }
+
 .gl-line-height-36 {
   line-height: $gl-line-height-36;
 }
+
 .gl-line-height-36\! {
   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;
 }
+
 .gl-line-height-52\! {
   line-height: $gl-line-height-52 !important;
 }
+
 .gl-reset-line-height {
   line-height: inherit;
 }
+
 .gl-reset-line-height\! {
   line-height: inherit !important;
 }
+
 .gl-letter-spacing-06em {
   letter-spacing: 0.06em;
 }
+
 .gl-letter-spacing-06em\! {
   letter-spacing: 0.06em !important;
 }
+
+.gl-letter-spacing-n01em {
+  letter-spacing: -0.01em;
+}
+
+.gl-letter-spacing-n01em\! {
+  letter-spacing: -0.01em !important;
+}
 .gl-user-select-none {
   user-select: none
 }

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

@@ -142,18 +142,39 @@
 /**
 * Line height utilities.
 *
-* naming convention: gl-line-height-{line-height-in-pixels}
+* naming convention: 
+* - gl-line-height-ratio-{ratio-multiplied-by-1000}
+* - gl-line-height-{line-height-in-pixels}
 * notes:
 * - Strictly based in gl-line-height-{n} variables
 */
+
+// TODO: Remove after migration
 @mixin gl-line-height-0 {
   line-height: 0;
 }
 
+// TODO: Remove after migration
 @mixin gl-line-height-1 {
   line-height: 1;
 }
 
+@mixin gl-line-height-ratio-0000 {
+  line-height: 0;
+}
+
+@mixin gl-line-height-ratio-1000 {
+  line-height: 1;
+}
+
+@mixin gl-line-height-ratio-1125 {
+  line-height: 1.125;
+}
+
+@mixin gl-line-height-ratio-1250 {
+  line-height: 1.25;
+}
+
 @mixin gl-line-height-normal {
   line-height: $gl-line-height-16;
 }
@@ -202,3 +223,7 @@
 @mixin gl-letter-spacing-06em {
   letter-spacing: 0.06em;
 }
+
+@mixin gl-letter-spacing-n01em {
+  letter-spacing: -0.01em;
+}