@gitlab/ui 75.2.0 → 76.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "75.2.0",
+  "version": "76.0.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -102,23 +102,23 @@
     "@gitlab/eslint-plugin": "19.4.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
-    "@gitlab/svgs": "3.84.0",
+    "@gitlab/svgs": "3.85.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "^7.6.16",
-    "@storybook/addon-docs": "^7.6.16",
-    "@storybook/addon-essentials": "^7.6.16",
-    "@storybook/addon-interactions": "^7.6.16",
-    "@storybook/addon-viewport": "^7.6.16",
-    "@storybook/builder-webpack5": "^7.6.16",
-    "@storybook/test": "^7.6.16",
+    "@storybook/addon-a11y": "^7.6.17",
+    "@storybook/addon-docs": "^7.6.17",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-viewport": "^7.6.17",
+    "@storybook/builder-webpack5": "^7.6.17",
+    "@storybook/test": "^7.6.17",
     "@storybook/test-runner": "0.16.0",
-    "@storybook/theming": "^7.6.16",
-    "@storybook/vue": "^7.6.16",
-    "@storybook/vue-webpack5": "^7.6.16",
-    "@storybook/vue3": "^7.6.16",
-    "@storybook/vue3-webpack5": "^7.6.16",
+    "@storybook/theming": "^7.6.17",
+    "@storybook/vue": "^7.6.17",
+    "@storybook/vue-webpack5": "^7.6.17",
+    "@storybook/vue3": "^7.6.17",
+    "@storybook/vue3-webpack5": "^7.6.17",
     "@types/jest-image-snapshot": "^6.4.0",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
@@ -131,7 +131,7 @@
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
     "bootstrap": "4.6.2",
-    "cypress": "13.6.4",
+    "cypress": "13.6.6",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.0.0",
@@ -170,7 +170,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "^7.6.16",
+    "storybook": "^7.6.17",
     "storybook-dark-mode": "3.0.3",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",

package/src/components/base/button/button.scss

@@ -418,7 +418,7 @@
     @include gl-fill-current-color;
     @include gl-inset-border-1-gray-200;
     @include gl-cursor-default;
-    @include gl-user-select-text;
+    user-select: text;
   }
 
   &.btn-link {

package/src/components/base/drawer/drawer.scss

@@ -66,7 +66,7 @@ $gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white)
     background: $gl-drawer-scrim-gradient;
     top: -$gl-border-size-1;
     @include gl-translate-y-n100;
-    @include gl-content-empty;
+    content: '';
     @include gl-left-0;
     @include gl-absolute;
     @include gl-pointer-events-none;
@@ -115,7 +115,7 @@ $gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white)
 .gl-drawer-body-scrim {
   &::after {
     background: $gl-drawer-scrim-gradient;
-    @include gl-content-empty;
+    content: '';
     @include gl-bottom-0;
     @include gl-pointer-events-none;
     @include gl-w-full;

package/src/components/base/dropdown/dropdown.scss

@@ -94,12 +94,12 @@
   .dropdown-toggle-split {
     &::after {
       @include gl-border-0;
-      @include gl-content-empty;
+      content: '';
       @include gl-display-block;
       @include gl-w-5;
       @include gl-h-5;
       @include gl-bg-current-color;
-      @include gl-mask-chevron-down;
+      @include mask-chevron-down;
     }
 
     &.btn-default:not(:disabled)::after {

package/src/components/base/form/form_input/form_input.scss

@@ -11,7 +11,7 @@
   @include gl-inset-border-1-gray-400;
   @include gl-border-none;
   @include form-control-focus($ignore-warning: true);
-  @include gl-appearance-none;
+  appearance: none;
 
   &:disabled,
   &:not(.form-control-plaintext):not([type='color']):read-only {

package/src/components/base/form/form_select/form_select.scss

@@ -20,7 +20,7 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
   @include gl-h-auto;
   @include gl-inset-border-1-gray-400;
   @include gl-border-none;
-  @include gl-appearance-none;
+  appearance: none;
   @include gl-text-truncate;
   @include gl-bg-no-repeat;
   background-image: url($gl-icon-select-chevron-down);

package/src/components/base/table/table.scss

@@ -57,7 +57,7 @@ table.gl-table {
   @mixin gl-tmp-stacked-override {
     tbody > tr {
       &::after {
-        @include gl-content-empty;
+        content: '';
         @include gl-h-6;
         @include gl-w-full;
         @include gl-display-block;

package/src/components/base/toggle/toggle.scss

@@ -88,7 +88,7 @@
   @include gl-w-9;
   @include gl-h-6;
   @include gl-outline-none;
-  @include gl-user-select-none;
+  user-select: none;
   @include gl-rounded-pill;
   @include gl-transition-slow;
   @include gl-line-height-normal;

package/src/components/charts/legend/legend.scss

@@ -19,7 +19,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
   &::after {
     background-image: linear-gradient(to bottom, $transparent-rgba, var(--white, #{$white}));
     @include gl-bottom-0;
-    @include gl-content-empty;
+    content: '';
     @include gl-display-block;
     @include gl-h-4;
     @include gl-absolute;

package/src/directives/safe_html/safe_html.stories.js

@@ -1,5 +1,5 @@
 import DOMPurify from 'dompurify';
-import GlSafeHtml from './safe_html';
+import { SafeHtmlDirective as SafeHtml } from './safe_html';
 import readme from './safe_html.md';
 
 const { sanitize } = DOMPurify;
@@ -12,7 +12,7 @@ const generateProps = ({
 
 export const Default = (_args, { argTypes }) => ({
   directives: {
-    GlSafeHtml,
+    SafeHtml,
   },
   props: Object.keys(argTypes),
   computed: {
@@ -38,7 +38,7 @@ export const Default = (_args, { argTypes }) => ({
       <tr>
         <td><strong>v-safe-html</strong></td>
         <td><code>{{ sanitizedHtml }}</code></td>
-        <td v-gl-safe-html="unsafeHTML"></td>
+        <td v-safe-html="unsafeHTML"></td>
       </tr>
     </tbody>
   </table>
@@ -48,7 +48,7 @@ Default.args = generateProps();
 
 export default {
   title: 'directives/safe-html-directive',
-  component: GlSafeHtml,
+  component: SafeHtml,
   tags: ['skip-visual-test'],
   parameters: {
     docs: {

package/src/scss/mixins.scss

@@ -7,6 +7,13 @@
   max-width: $max-width;
 }
 
+@mixin mask-chevron-down {
+  mask-image: url('#{$gl-icon-chevron-down}');
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: cover;
+}
+
 @mixin gl-fluid-font-size($min, $max) {
   @include gl-responsive-property('font-size', $min, $max);
 }

package/src/scss/utilities.scss

@@ -122,18 +122,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
     animation-iteration-count: 3 !important;
   }
 }
-.gl-appearance-none {
-  appearance: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-}
-
-.gl-appearance-none\! {
-  appearance: none !important;
-  -moz-appearance: none !important;
-  -webkit-appearance: none !important;
-}
-
 .gl-number-as-text-input {
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
@@ -143,7 +131,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 
   -moz-appearance: textfield;
 }
-
 .gl-number-as-text-input\! {
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
@@ -2936,12 +2923,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 .gl-focus--focus\!:focus{
   @include gl-focus
 }
-.gl-content-empty {
-  content: ''
-}
-.gl-content-empty\! {
-  content: '' !important
-}
 .gl-cursor-default {
   cursor: default
 }
@@ -4192,24 +4173,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 .gl-list-style-position-inside\! {
   list-style-position: inside !important
 }
-.gl-mask-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-repeat: no-repeat !important;
-  mask-position: center !important;
-  mask-size: cover !important
-}
-.gl-mix-blend-mode-luminosity {
-  mix-blend-mode: luminosity
-}
-.gl-mix-blend-mode-luminosity\! {
-  mix-blend-mode: luminosity !important
-}
 .gl-opacity-0 {
   opacity: 0
 }
@@ -8451,12 +8414,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 .gl-fill-transparent\! {
   fill: transparent !important
 }
-.gl-table-layout-fixed {
-  table-layout: fixed
-}
-.gl-table-layout-fixed\! {
-  table-layout: fixed !important
-}
 .gl-text-left {
   text-align: left;
 }
@@ -9524,21 +9481,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 .gl-letter-spacing-n01em\!{
   letter-spacing: -0.01em !important;
 }
-.gl-user-select-none {
-  user-select: none
-}
-
-.gl-user-select-none\! {
-  user-select: none !important
-}
-
-.gl-user-select-text {
-  user-select: text
-}
-
-.gl-user-select-text\! {
-  user-select: text !important
-}
 .gl-vertical-align-baseline {
   vertical-align: baseline
 }

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

@@ -1,10 +1,4 @@
 /* stylelint-disable property-no-vendor-prefix */
-@mixin gl-appearance-none {
-  appearance: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-}
-
 @mixin gl-number-as-text-input {
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {

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

@@ -23,15 +23,12 @@
 @import './box-shadow';
 @import './color';
 @import './composite';
-@import './content';
 @import './cursor';
 @import './display';
 @import './flex';
 @import './grid';
 @import './image';
 @import './list-style';
-@import './masks';
-@import './mix-blend-mode';
 @import './opacity';
 @import './outline';
 @import './overflow';
@@ -40,12 +37,10 @@
 @import './sizing';
 @import './spacing';
 @import './svg';
-@import './table';
 @import './text';
 @import './transform';
 @import './transition';
 @import './typography';
-@import './user-select';
 @import './vertical-align';
 @import './visibility';
 @import './z-index';

package/src/scss/variables.scss

@@ -18,6 +18,7 @@ $gl-spacing-scale-11-5: 9 * $grid-size;
 $gl-spacing-scale-12: 10 * $grid-size;
 $gl-spacing-scale-13: 12 * $grid-size;
 $gl-spacing-scale-15: 15 * $grid-size;
+$gl-spacing-scale-18: 18 * $grid-size;
 $gl-spacing-scale-20: 20 * $grid-size;
 $gl-spacing-scale-26: 26 * $grid-size;
 $gl-spacing-scale-28: 28 * $grid-size;

package/tailwind.defaults.js

@@ -66,5 +66,18 @@ module.exports = {
       ...themeColors,
     },
     spacing,
+    fontSize: {
+      xs: '0.625rem',
+      sm: '0.75rem',
+      base: '0.875rem',
+      lg: '1rem',
+    },
+    fontWeight: {
+      100: 100,
+      300: 300,
+      normal: 400,
+      semibold: 500,
+      bold: 600,
+    },
   },
 };

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

@@ -1,8 +0,0 @@
-/**
-* Content utilities.
-*
-* naming convention: gl-content-{value}
-*/
-@mixin gl-content-empty {
-  content: '';
-}

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

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

package/src/scss/utility-mixins/mix-blend-mode.scss

@@ -1,3 +0,0 @@
-@mixin gl-mix-blend-mode-luminosity {
-  mix-blend-mode: luminosity;
-}

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

@@ -1,8 +0,0 @@
-/**
-* Table utilities
-*
-* naming convention: gl-table-{table-property}-{value}
-*/
-@mixin gl-table-layout-fixed {
-  table-layout: fixed;
-}

package/src/scss/utility-mixins/user-select.scss

@@ -1,12 +0,0 @@
-/**
-* User select utilities
-*
-* naming convention: gl-user-select-{config-name}
-*/
-@mixin gl-user-select-none {
-  user-select: none;
-}
-
-@mixin gl-user-select-text {
-  user-select: text;
-}