@gitlab/ui 81.0.0 → 82.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "81.0.0",
+  "version": "82.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -17,8 +17,9 @@
   "files": [
     "src",
     "dist",
-    "translations.json",
+    "translations.js",
     "tailwind.defaults.js",
+    "!src/vendor",
     "!*.stories.js",
     "!*.snap",
     "!*.spec.{js,scss}"
@@ -63,12 +64,12 @@
     "stylelint": "stylelint 'src/**/*.scss'",
     "prestylelint": "yarn generate-utilities",
     "stylelint:fix": "yarn stylelint --fix",
-    "markdownlint": "markdownlint '**/*.md' --ignore node_modules --ignore CHANGELOG.md",
+    "markdownlint": "markdownlint '**/*.md' --ignore node_modules --ignore CHANGELOG.md --ignore src/vendor",
     "markdownlint:fix": "yarn markdownlint --fix",
     "lint": "run-p prettier eslint stylelint markdownlint",
     "lint:fix": "run-s eslint:fix prettier:fix stylelint:fix markdownlint:fix",
     "generate:component": "plop",
-    "translations:collect": "make translations.json",
+    "translations:collect": "make translations.js",
     "tailwind-config-viewer": "tailwind-config-viewer -o"
   },
   "dependencies": {
@@ -107,7 +108,7 @@
     "@gitlab/eslint-plugin": "19.5.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
-    "@gitlab/svgs": "3.101.0",
+    "@gitlab/svgs": "3.102.0",
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
@@ -132,6 +133,9 @@
     "@vue/test-utils-vue3": "npm:@vue/test-utils@2.2.0",
     "@vue/vue2-jest": "29.0.0",
     "@vue/vue3-jest": "^29.1.1",
+    "@yarnpkg/lockfile": "^1.1.0",
+    "acorn": "^8.11.3",
+    "acorn-walk": "^8.3.2",
     "autoprefixer": "^9.7.6",
     "axe-core": "^4.2.3",
     "babel-jest": "29.0.1",
@@ -146,6 +150,7 @@
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "3.3.0",
     "eslint-plugin-storybook": "0.8.0",
+    "gitlab-api-async-iterator": "^1.3.1",
     "glob": "10.3.3",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",

package/src/components/base/datepicker/datepicker.vue

@@ -181,6 +181,11 @@ export default {
       default: null,
       validator: (value) => Object.keys(datepickerWidthOptionsMap).includes(value),
     },
+    state: {
+      type: Boolean,
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -382,6 +387,7 @@ export default {
             :autocomplete="inputAutocomplete"
             :disabled="disabled"
             :aria-label="inputLabel"
+            :state="state"
             @keydown.enter="onKeydown"
           />
         </slot>

package/src/components/base/daterange_picker/daterange_picker.vue

@@ -83,6 +83,11 @@ export default {
       required: false,
       default: '',
     },
+    startPickerState: {
+      type: Boolean,
+      required: false,
+      default: null,
+    },
     endPickerClass: {
       type: String,
       required: false,
@@ -98,6 +103,11 @@ export default {
       required: false,
       default: '',
     },
+    endPickerState: {
+      type: Boolean,
+      required: false,
+      default: null,
+    },
     labelClass: {
       type: String,
       required: false,
@@ -277,6 +287,7 @@ export default {
         :target="startPickerTarget"
         :container="startPickerContainer"
         :start-opened="startOpened"
+        :state="startPickerState"
         :width="width"
         @input="onStartDateSelected"
         @open="onStartPickerOpen"
@@ -303,6 +314,7 @@ export default {
         :start-opened="openToCalendar"
         :default-date="toCalendarDefaultDate"
         :width="width"
+        :state="endPickerState"
         @input="onEndDateSelected"
         @open="onEndPickerOpen"
         @close="onEndPickerClose"

package/src/components/base/form/form_text/form_text.vue

@@ -1,5 +1,11 @@
 <script>
 import { BFormText } from 'bootstrap-vue';
 
-export default BFormText;
+export default {
+  ...BFormText.options,
+  name: 'GlFormText',
+  render(createElement, context) {
+    return BFormText.options.render(createElement, context);
+  },
+};
 </script>

package/src/components/base/label/label.scss

@@ -54,8 +54,8 @@ $label-close-button: '.gl-label-close.gl-button';
     @include gl-display-flex;
     width: px-to-rem(14px);
     height: px-to-rem(14px);
-    margin-left: #{-$gl-spacing-scale-1 - ($gl-spacing-scale-1 / 2)};
-    margin-right: #{$gl-spacing-scale-2 - ($gl-spacing-scale-1 / 2)};
+    margin-left: calc(#{-$gl-spacing-scale-1} - (#{$gl-spacing-scale-1} / 2));
+    margin-right: calc(#{$gl-spacing-scale-2} - (#{$gl-spacing-scale-1} / 2));
     @include gl-p-0;
     @include gl-rounded-full;
     @include gl-shadow-none;

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.vue

@@ -1,5 +1,6 @@
 <script>
 import GlIcon from '../../../../../base/icon/icon.vue';
+import GlLoadingIcon from '../../../../../base/loading_icon/loading_icon.vue';
 import { GlTooltipDirective } from '../../../../../../directives/tooltip';
 import GlDuoUserFeedback from '../../../user_feedback/user_feedback.vue';
 import GlFormGroup from '../../../../../base/form/form_group/form_group.vue';
@@ -37,6 +38,7 @@ export default {
     GlFormGroup,
     GlFormTextarea,
     GlIcon,
+    GlLoadingIcon,
   },
   directives: {
     SafeHtml,
@@ -199,7 +201,9 @@ export default {
           <documentation-sources v-if="sources" :sources="sources" />
 
           <div class="gl-display-flex gl-align-items-flex-end gl-mt-4 duo-chat-message-feedback">
+            <gl-loading-icon v-if="isChunk" class="gl-pt-4" variant="dots" inline />
             <gl-duo-user-feedback
+              v-if="!isChunk"
               :feedback-received="hasFeedback"
               :modal-title="$options.i18n.MODAL.TITLE"
               :modal-alert="$options.i18n.MODAL.ALERT_TEXT"

package/src/config.js

@@ -1,6 +1,6 @@
 import { BVConfigPlugin } from 'bootstrap-vue';
 import Vue from 'vue';
-import translationKeys from '../translations.json';
+import translationKeys from '../translations';
 import { tooltipDelay } from './utils/constants';
 
 const bFormTextGlobalConfig = {

package/src/scss/functions.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 /*
 * SASS preserves units in arithmetic operations. For example:
 * 12em * 0 = 0em. This function return the unit of a numeric value.
@@ -10,7 +12,7 @@
 
 @function strip-unit($number) {
   @if type-of($number) == 'number' and not unitless($number) {
-    @return $number / extract-unit($number);
+    @return math.div($number, extract-unit($number));
   }
 
   @return $number;
@@ -21,10 +23,7 @@
     @return $value;
   }
 
-  // Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0
-  // We can't update this yet since GitLab uses SassC, which doesn't support math.div
-  // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1954#note_1078281533
-  $converted: $value / $font-size-base;
+  $converted: math.div($value, $font-size-base);
 
   @return strip-unit($converted) * 1rem;
 }
@@ -57,14 +56,8 @@
   $min-width: px-to-rem($min-width);
   $max-width: px-to-rem($max-width);
 
-  // Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0
-  // We can't update this yet since GitLab uses SassC, which doesn't support math.div
-  // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1954#note_1078281533
-  $slope: ($max - $min) / ($max-width - $min-width);
+  $slope: math.div($max - $min, $max-width - $min-width);
   $intersection: (-$min-width * $slope) + $min;
 
-  // 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});
+  @return clamp(#{$min}, #{$intersection} + #{$slope * 100vw}, #{$max});
 }

package/src/scss/storybook_dark_mode.scss

@@ -10,8 +10,6 @@
 // to use Custom Properties instead
 
 .gl-dark {
-  --color-body-bg: #1f1f1f;
-
   // Note that we are assigning variables with different values due to the way GitLab inverts variables in dark mode.
   // e.g. text color is usually $gray-900, but in dark mode $gray-900 variable gets inverted to $gray-50
   --gl-text-color: #{$gray-50};
@@ -23,9 +21,7 @@
 
   &,
   body {
-    // We can delete these once $body-bg and $body-color
-    // variables in variables.scss are updated to use CSS custom properties
-    background-color: var(--color-body-bg);
-    color: var(--gl-text-color);
+    background-color: var(--gl-background-color-default);
+    color: var(--gl-text-color-default);
   }
 }

package/translations.js

@@ -0,0 +1,13 @@
+/* eslint-disable import/no-default-export */
+export default {
+  'ClearIconButton.title': 'Clear',
+  'GlBreadcrumb.showMoreLabel': 'Show more breadcrumbs',
+  'GlCollapsibleListbox.srOnlyResultsLabel': 'Results count',
+  'GlKeysetPagination.navigationLabel': 'Pagination',
+  'GlKeysetPagination.nextText': 'Next',
+  'GlKeysetPagination.prevText': 'Previous',
+  'GlSearchBoxByType.clearButtonTitle': 'Clear',
+  'GlSearchBoxByType.input.placeholder': 'Search',
+  'GlSorting.sortAscending': 'Sort direction: ascending',
+  'GlSorting.sortDescending': 'Sort direction: descending',
+};

package/translations.json

@@ -1,12 +0,0 @@
-{
-  "ClearIconButton.title": "Clear",
-  "GlBreadcrumb.showMoreLabel": "Show more breadcrumbs",
-  "GlCollapsibleListbox.srOnlyResultsLabel": "Results count",
-  "GlKeysetPagination.navigationLabel": "Pagination",
-  "GlKeysetPagination.nextText": "Next",
-  "GlKeysetPagination.prevText": "Previous",
-  "GlSearchBoxByType.clearButtonTitle": "Clear",
-  "GlSearchBoxByType.input.placeholder": "Search",
-  "GlSorting.sortAscending": "Sort direction: ascending",
-  "GlSorting.sortDescending": "Sort direction: descending"
-}