@gitlab/ui 74.9.3 → 75.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "74.9.3",
+  "version": "75.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -102,7 +102,7 @@
     "@gitlab/eslint-plugin": "19.4.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
-    "@gitlab/svgs": "3.83.0",
+    "@gitlab/svgs": "3.84.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/src/components/base/drawer/drawer.md

@@ -4,7 +4,7 @@ handle actions on the information.
 ### By default
 
 ```html
-<gl-drawer :open="open" @close="close">
+<gl-drawer :open="open" @close="close" @opened="opened">
   <template #header>Your Title</template>
   <template>
    ...children
@@ -14,3 +14,4 @@ handle actions on the information.
 
 - `v-bind:open` will be a boolean you will pass to `gl-drawer` and `@close` is a listener that will
 be a function that will toggle open to `false`.
+- The component emits an `opened` event after the opening animation has finished.

package/src/components/base/drawer/drawer.stories.js

@@ -69,6 +69,7 @@ const createSidebarTemplate = (content) => `
     :header-sticky="headerSticky"
     :z-index="zIndex"
     :variant="variant"
+    @opened="opened"
     @close="close">${content}</gl-drawer>
   `;
 
@@ -105,9 +106,23 @@ const storyOptions = (viewMode) => ({
 });
 
 export const Default = (_args, { viewMode }) => ({
+  mixins: [
+    {
+      data() {
+        return {
+          timesOpened: 0,
+        };
+      },
+      methods: {
+        opened() {
+          this.timesOpened += 1;
+        },
+      },
+    },
+  ],
   ...storyOptions(viewMode),
   template: `
-    <div>
+    <div :data-opened-count="timesOpened">
       <gl-button @click="toggle">Toggle Drawer</gl-button>
       ${createSidebarTemplate(`
         <template #title>List Settings</template>

package/src/components/base/drawer/drawer.vue

@@ -81,6 +81,13 @@ export default {
     document.removeEventListener('keydown', this.handleEscape);
   },
   methods: {
+    emitOpened() {
+      /**
+       * Emits when the opening animation has finished.
+       * @event opened
+       */
+      this.$emit('opened');
+    },
     handleEscape(e) {
       const ESC = 27;
 
@@ -92,7 +99,7 @@ export default {
 };
 </script>
 <template>
-  <transition name="gl-drawer">
+  <transition name="gl-drawer" @after-enter="emitOpened">
     <aside v-if="open" :style="drawerStyles" class="gl-drawer" :class="variantClass">
       <div
         class="gl-drawer-header"

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

@@ -109,7 +109,7 @@ export default {
     <template v-if="isAssistantMessage">
       <documentation-sources v-if="sources" :sources="sources" />
 
-      <div class="gl-display-flex gl-align-items-flex-end gl-mt-4">
+      <div class="gl-display-flex gl-align-items-flex-end gl-mt-4 duo-chat-message-feedback">
         <gl-duo-user-feedback @feedback="$emit('track-feedback', $event)" />
       </div>
     </template>

package/src/scss/utilities.scss

@@ -4177,12 +4177,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   object-fit: contain !important
 }
 
-.gl-isolation-isolate {
-  isolation: isolate
-}
-.gl-isolation-isolate\! {
-  isolation: isolate !important
-}
 .gl-list-style-none {
   list-style-type: none
 }
@@ -9670,11 +9664,3 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 .gl-z-index-9999\! {
   z-index: 9999 !important
 }
-
-.gl-isolate {
-  isolation: isolate
-}
-
-.gl-isolate\! {
-  isolation: isolate !important
-}

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

@@ -29,7 +29,6 @@
 @import './flex';
 @import './grid';
 @import './image';
-@import './isolation';
 @import './list-style';
 @import './masks';
 @import './mix-blend-mode';

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

@@ -35,7 +35,3 @@
 @mixin gl-z-index-9999 {
   z-index: 9999;
 }
-
-@mixin gl-isolate {
-  isolation: isolate;
-}

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

@@ -1,3 +0,0 @@
-@mixin gl-isolation-isolate {
-  isolation: isolate;
-}