@gitlab/ui 78.19.0 → 79.1.0

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 22 Apr 2024 11:22:17 GMT
+ * Generated on Wed, 24 Apr 2024 11:54:45 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 22 Apr 2024 11:22:17 GMT
+ * Generated on Wed, 24 Apr 2024 11:54:45 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 22 Apr 2024 11:22:17 GMT
+ * Generated on Wed, 24 Apr 2024 11:54:45 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 22 Apr 2024 11:22:17 GMT
+ * Generated on Wed, 24 Apr 2024 11:54:45 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 22 Apr 2024 11:22:17 GMT
+// Generated on Wed, 24 Apr 2024 11:54:45 GMT
 
 $gl-text-tertiary: #737278 !default;
 $gl-text-secondary: #89888d !default;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 22 Apr 2024 11:22:17 GMT
+// Generated on Wed, 24 Apr 2024 11:54:45 GMT
 
 $gl-text-tertiary: #89888d !default;
 $gl-text-secondary: #737278 !default;

package/dist/utils/story_decorators/container.js

@@ -5,12 +5,15 @@
  * @param {object} style The style attribute to apply to the container.
  * @return {function} The story decorator.
  */
-const makeContainer = style => Story => ({
-  render(h) {
-    return h('div', {
-      style
-    }, [h(Story())]);
-  }
-});
+const makeContainer = function (style) {
+  let tag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'div';
+  return Story => ({
+    render(h) {
+      return h(tag, {
+        style
+      }, [h(Story())]);
+    }
+  });
+};
 
 export { makeContainer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "78.19.0",
+  "version": "79.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/filtered_search/filtered_search_suggestion.scss

@@ -7,4 +7,5 @@
   @include gl-text-decoration-none;
   @include gl-text-gray-900;
   @include gl-outline-0;
+  @include gl-focus($inset: true);
 }

package/src/components/base/filtered_search/filtered_search_suggestion_list.scss

@@ -4,6 +4,10 @@
 .gl-filtered-search-suggestion-list.dropdown-menu {
   @include gl-display-block;
   width: $gl-dropdown-width;
+  @include gl-p-2;
+  @include gl-border-gray-200;
+  @include gl-rounded-lg;
+  @include gl-shadow-md;
 }
 
 .gl-filtered-search-suggestion-list {
@@ -11,6 +15,20 @@
   @include gl-overflow-y-auto;
   max-height: $gl-max-dropdown-max-height;
 
+  .gl-filtered-search-suggestion,
+  .gl-filtered-search-suggestion > a,
+  .gl-filtered-search-suggestion > button {
+    border-radius: $gl-border-radius-base !important;
+  }
+
+  .gl-dropdown-divider {
+    @include gl-mx-n2;
+  }
+
+  .gl-spinner-container {
+    @include gl-my-2;
+  }
+
   .gl-filtered-search-suggestion {
     @include gl-p-0;
   }

package/src/components/base/form/form_group/form_group.stories.js

@@ -1,8 +1,8 @@
+import { disableControls } from '../../../../utils/stories_utils';
 import GlFormInput from '../form_input/form_input.vue';
 import GlFormTextarea from '../form_textarea/form_textarea.vue';
-import { disableControls } from '../../../../utils/stories_utils';
-import GlFormGroup from './form_group.vue';
 import readme from './form_group.md';
+import GlFormGroup from './form_group.vue';
 
 const components = {
   GlFormGroup,
@@ -24,16 +24,24 @@ const generateProps = ({
   description,
 });
 
-const wrap = (template, bindings = '') => `
+const makeBindings = (overrides = {}) =>
+  Object.entries({
+    ':id': "id + '_group'",
+    ':label-for': 'id',
+    ':label': 'label',
+    ':label-description': 'labelDescription',
+    ':optional': 'optional',
+    ':optional-text': 'optionalText',
+    ':description': 'description',
+    ...overrides,
+  })
+    .map(([key, value]) => `${key}="${value}"`)
+    .join(' ');
+
+const wrap = (template, bindingsOverrides = {}) => `
   <gl-form-group
-    :id="id +  '_group'"
-    :label="label"
-    :label-description="labelDescription"
-    :optional="optional"
-    :optional-text="optionalText"
-    :description="description"
-    ${bindings}
-    :label-for="id">
+    ${makeBindings(bindingsOverrides)}
+    >
     ${template}
   </gl-form-group>
 `;
@@ -78,14 +86,15 @@ export const WithValidations = (_args, { argTypes }) => ({
   components: { ...components, GlFormInput },
   template: `
     <div>
-      ${wrap(
-        '<gl-form-input :id="id" :state="false" />',
-        'invalid-feedback="This field is required."'
-      )}
-      ${wrap(
-        '<gl-form-input :id="id" :state="true" value="Sidney Jones" />',
-        'valid-feedback="This field is valid."'
-      )}
+    ${wrap('<gl-form-input :id="id + \'-name1\'" :state="false" />', {
+      'invalid-feedback': 'This field is required.',
+      ':label-for': "id + '-name1'",
+    })}
+    ${wrap('<gl-form-input :id="id + \'-name2\'" :state="true" value="Sidney Jones" />', {
+      'valid-feedback': 'This field is valid.',
+      ':id': "'group2'",
+      ':label-for': "id + '-name2'",
+    })}
     </div>
   `,
 });

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.spec.js

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import { computePosition, autoUpdate, offset, autoPlacement } from '@floating-ui/dom';
+import { computePosition, autoUpdate, offset, autoPlacement, shift } from '@floating-ui/dom';
 import {
   ARROW_DOWN,
   GL_DROPDOWN_FOCUS_CONTENT,
@@ -15,8 +15,9 @@ import GlBaseDropdown from './base_dropdown.vue';
 
 jest.mock('@floating-ui/dom');
 const mockStopAutoUpdate = jest.fn();
-offset.mockImplementation((options) => options);
-autoPlacement.mockImplementation((options) => options);
+offset.mockImplementation((offsetOpts = {}) => ({ offsetOpts }));
+autoPlacement.mockImplementation((autoPlacementOpts = {}) => ({ autoPlacementOpts }));
+shift.mockImplementation((shiftOpts = {}) => ({ shiftOpts }));
 
 const DEFAULT_BTN_TOGGLE_CLASSES = [
   'btn',
@@ -29,7 +30,7 @@ const DEFAULT_BTN_TOGGLE_CLASSES = [
 describe('base dropdown', () => {
   let wrapper;
 
-  const buildWrapper = (propsData, slots = {}, listeners = {}) => {
+  const buildWrapper = (propsData, { slots = {}, ...options } = {}) => {
     wrapper = mount(GlBaseDropdown, {
       propsData: {
         toggleId: 'dropdown-toggle-btn-1',
@@ -40,7 +41,7 @@ describe('base dropdown', () => {
         ...slots,
       },
       attachTo: document.body,
-      listeners,
+      ...options,
     });
   };
 
@@ -99,6 +100,35 @@ describe('base dropdown', () => {
         autoUpdate.mockImplementation(jest.requireActual('@floating-ui/dom').autoUpdate);
       });
 
+      it('initializes Floating UI with a default boundary', async () => {
+        document.body.innerHTML = '<main><div></div></main>';
+
+        buildWrapper(undefined, {
+          attachTo: document.querySelector('main div'),
+        });
+        await findDefaultDropdownToggle().trigger('click');
+
+        expect(computePosition).toHaveBeenCalledWith(
+          findDefaultDropdownToggle().element,
+          findDropdownMenu().element,
+          {
+            placement: 'bottom-start',
+            strategy: 'absolute',
+            middleware: [
+              offset({ mainAxis: DEFAULT_OFFSET }),
+              autoPlacement({
+                alignment: 'start',
+                boundary: document.querySelector('main'),
+                allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
+              }),
+              shift(),
+            ],
+          }
+        );
+
+        document.body.innerHTML = '';
+      });
+
       it('initializes Floating UI with reference and floating elements and config for left-aligned menu', async () => {
         buildWrapper();
         await findDefaultDropdownToggle().trigger('click');
@@ -113,8 +143,10 @@ describe('base dropdown', () => {
               offset({ mainAxis: DEFAULT_OFFSET }),
               autoPlacement({
                 alignment: 'start',
+                boundary: 'clippingAncestors',
                 allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
               }),
+              shift(),
             ],
           }
         );
@@ -134,8 +166,10 @@ describe('base dropdown', () => {
               offset({ mainAxis: DEFAULT_OFFSET }),
               autoPlacement({
                 alignment: undefined,
+                boundary: 'clippingAncestors',
                 allowedPlacements: ['bottom', 'top'],
               }),
+              shift(),
             ],
           }
         );
@@ -155,8 +189,10 @@ describe('base dropdown', () => {
               offset({ mainAxis: DEFAULT_OFFSET }),
               autoPlacement({
                 alignment: 'end',
+                boundary: 'clippingAncestors',
                 allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
               }),
+              shift(),
             ],
           }
         );
@@ -176,8 +212,10 @@ describe('base dropdown', () => {
               offset({ mainAxis: DEFAULT_OFFSET }),
               autoPlacement({
                 alignment: 'start',
+                boundary: 'clippingAncestors',
                 allowedPlacements: ['right-start', 'right-end', 'left-start', 'left-end'],
               }),
+              shift(),
             ],
           }
         );
@@ -197,7 +235,7 @@ describe('base dropdown', () => {
           {
             placement: 'bottom-end',
             strategy: 'absolute',
-            middleware: [offset(customOffset), autoPlacement(expect.any(Object))],
+            middleware: [offset(customOffset), autoPlacement(expect.any(Object)), shift()],
           }
         );
       });
@@ -245,7 +283,7 @@ describe('base dropdown', () => {
     const slots = { default: defaultContent };
 
     it('renders the content', () => {
-      buildWrapper({}, slots);
+      buildWrapper({}, { slots });
       expect(wrapper.find('.gl-new-dropdown-inner').html()).toContain(defaultContent);
     });
   });
@@ -409,10 +447,12 @@ describe('base dropdown', () => {
 
     beforeEach(() => {
       event = undefined;
-      buildWrapper(undefined, undefined, {
-        [GL_DROPDOWN_BEFORE_CLOSE]({ originalEvent, preventDefault }) {
-          event = originalEvent;
-          preventDefault();
+      buildWrapper(undefined, {
+        listeners: {
+          [GL_DROPDOWN_BEFORE_CLOSE]({ originalEvent, preventDefault }) {
+            event = originalEvent;
+            preventDefault();
+          },
         },
       });
     });
@@ -467,7 +507,7 @@ describe('base dropdown', () => {
 
     beforeEach(() => {
       const slots = { toggle: toggleContent };
-      buildWrapper({}, slots);
+      buildWrapper({}, { slots });
     });
 
     it('does not render default toggle button', () => {

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue

@@ -1,6 +1,6 @@
 <script>
 import uniqueId from 'lodash/uniqueId';
-import { computePosition, autoUpdate, offset, size, autoPlacement } from '@floating-ui/dom';
+import { computePosition, autoUpdate, offset, size, autoPlacement, shift } from '@floating-ui/dom';
 import {
   buttonCategoryOptions,
   buttonSizeOptions,
@@ -9,6 +9,7 @@ import {
   dropdownVariantOptions,
 } from '../../../../utils/constants';
 import {
+  GL_DROPDOWN_BOUNDARY_SELECTOR,
   GL_DROPDOWN_SHOWN,
   GL_DROPDOWN_HIDDEN,
   GL_DROPDOWN_BEFORE_CLOSE,
@@ -272,8 +273,10 @@ export default {
           offset(this.offset),
           autoPlacement({
             alignment,
+            boundary: this.$el.closest(GL_DROPDOWN_BOUNDARY_SELECTOR) || 'clippingAncestors',
             allowedPlacements: dropdownAllowedAutoPlacements[this.placement],
           }),
+          shift(),
           size({
             apply: ({ availableHeight, elements }) => {
               const contentsEl = elements.floating.querySelector(`.${GL_DROPDOWN_CONTENTS_CLASS}`);

package/src/components/base/new_dropdowns/constants.js

@@ -1,4 +1,5 @@
 // base dropdown events
+export const GL_DROPDOWN_BOUNDARY_SELECTOR = 'main';
 export const GL_DROPDOWN_SHOWN = 'shown';
 export const GL_DROPDOWN_HIDDEN = 'hidden';
 export const GL_DROPDOWN_BEFORE_CLOSE = 'beforeClose';

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js

@@ -343,3 +343,31 @@ export default {
     startOpened: true,
   },
 };
+
+export const InMainWrapper = (args, { argTypes }) => ({
+  toggleId: TOGGLE_ID,
+  props: Object.keys(argTypes),
+  components: {
+    GlDisclosureDropdown,
+    GlTooltip,
+  },
+  template: `
+    <div>
+      ${template()}
+      <gl-tooltip :target="$options.toggleId" placement="right">
+        Automatic placement to stay inside &lt;main&gt; boundary
+      </gl-tooltip>
+    </div>
+  `,
+});
+InMainWrapper.args = {
+  items: mockItems,
+  icon: 'ellipsis_v',
+  noCaret: true,
+  toggleText: 'Disclosure',
+  textSrOnly: true,
+  toggleId: TOGGLE_ID,
+};
+InMainWrapper.decorators = [
+  makeContainer({ backgroundColor: '#efefef', textAlign: 'right', height: '200px' }, 'main'),
+];

package/src/utils/story_decorators/container.js

@@ -5,8 +5,10 @@
  * @param {object} style The style attribute to apply to the container.
  * @return {function} The story decorator.
  */
-export const makeContainer = (style) => (Story) => ({
-  render(h) {
-    return h('div', { style }, [h(Story())]);
-  },
-});
+export const makeContainer =
+  (style, tag = 'div') =>
+  (Story) => ({
+    render(h) {
+      return h(tag, { style }, [h(Story())]);
+    },
+  });