@gitlab/ui 52.10.0 → 52.12.0

package/src/components/regions/empty_state/empty_state.spec.js

@@ -245,4 +245,39 @@ describe('empty state component', () => {
       expect(p.text()).not.toBe(props.description);
     });
   });
+
+  describe('with custom content class', () => {
+    const findContentContainer = () => component.find('[data-testid="gl-empty-state-content"]');
+    const customContentClass = 'gl-p-0';
+    const expectedDefaultContentClasses = ['gl-max-w-full', 'gl-m-auto', customContentClass];
+    const expectedCompactContentClasses = [
+      'gl-flex-grow-1',
+      'gl-flex-basis-0',
+      'gl-px-4',
+      customContentClass,
+    ];
+
+    it.each`
+      contentClass                      | compact  | expectedClasses
+      ${customContentClass}             | ${false} | ${expectedDefaultContentClasses}
+      ${[customContentClass]}           | ${false} | ${expectedDefaultContentClasses}
+      ${{ [customContentClass]: true }} | ${false} | ${expectedDefaultContentClasses}
+      ${customContentClass}             | ${true}  | ${expectedCompactContentClasses}
+      ${[customContentClass]}           | ${true}  | ${expectedCompactContentClasses}
+      ${{ [customContentClass]: true }} | ${true}  | ${expectedCompactContentClasses}
+    `(
+      'applies $contentClass class when compact is $compact',
+      ({ contentClass, compact, expectedClasses }) => {
+        component = shallowMount(EmptyState, {
+          propsData: {
+            ...props,
+            compact,
+            contentClass,
+          },
+        });
+
+        expect(findContentContainer().classes()).toEqual(expectedClasses);
+      }
+    );
+  });
 });

package/src/components/regions/empty_state/empty_state.stories.js

@@ -14,6 +14,7 @@ const template = `
     :compact="compact"
     :primary-button-link="primaryButtonLink"
     :secondary-button-link="secondaryButtonLink"
+    :contentClass="contentClass"
   />`;
 
 const Template = (args) => ({
@@ -34,6 +35,7 @@ const generateProps = ({
   primaryButtonLink = '#',
   secondaryButtonLink = '#',
   compact = false,
+  contentClass = [],
 } = {}) => ({
   title,
   svgPath,
@@ -44,6 +46,7 @@ const generateProps = ({
   primaryButtonLink,
   secondaryButtonLink,
   compact,
+  contentClass,
 });
 
 export const Default = Template.bind({});
@@ -82,6 +85,7 @@ export const CustomActions = (args) => ({
       :compact="compact"
       :primary-button-link="primaryButtonLink"
       :secondary-button-link="secondaryButtonLink"
+      :contentClass="contentClass"
     >
       <template #actions>
         <gl-button
@@ -125,6 +129,7 @@ export const SlottedDescription = (args) => ({
       :compact="compact"
       :primary-button-link="primaryButtonLink"
       :secondary-button-link="secondaryButtonLink"
+      :contentClass="contentClass"
     >
       <template #description>
         <p>A slotted description allows you to use more custom HTML such as <a href="#">links</a>.</p>

package/src/components/regions/empty_state/empty_state.vue

@@ -83,6 +83,14 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * CSS classes to add to the content container
+     */
+    contentClass: {
+      type: [Array, String, Object],
+      required: false,
+      default: () => [],
+    },
   },
   computed: {
     height() {
@@ -97,6 +105,12 @@ export default {
     shouldRenderSecondaryButton() {
       return Boolean(this.secondaryButtonLink && this.secondaryButtonText);
     },
+    contentClasses() {
+      return [
+        this.compact ? 'gl-flex-grow-1 gl-flex-basis-0 gl-px-4' : 'gl-max-w-full gl-m-auto',
+        this.contentClass,
+      ];
+    },
   },
 };
 </script>
@@ -123,7 +137,7 @@ export default {
         />
       </div>
     </div>
-    <div :class="compact ? 'gl-flex-grow-1 gl-flex-basis-0 gl-px-4' : 'gl-max-w-full gl-m-auto'">
+    <div :class="contentClasses" data-testid="gl-empty-state-content">
       <div class="gl-mx-auto gl-my-0" :class="{ 'gl-p-5': !compact }">
         <!--
             @slot Use this slot to customize the empty state's title area.

package/src/index.js

@@ -57,6 +57,9 @@ export {
   default as GlCollapsibleListbox,
 } from './components/base/new_dropdowns/listbox/listbox.vue';
 export { default as GlListboxItem } from './components/base/new_dropdowns/listbox/listbox_item.vue';
+export { default as GlDisclosureDropdown } from './components/base/new_dropdowns/disclosure/disclosure_dropdown.vue';
+export { default as GlDisclosureDropdownItem } from './components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue';
+export { default as GlDisclosureDropdownGroup } from './components/base/new_dropdowns/disclosure/disclosure_dropdown_group.vue';
 // new components aiming to replace GlDropdown  - end
 export { default as GlPath } from './components/base/path/path.vue';
 export { default as GlTable } from './components/base/table/table.vue';

package/src/scss/components.scss

@@ -3,6 +3,7 @@
 // @import '../components/base/dropdown/dropdown'
 //
 // ADD COMPONENT IMPORTS - needed for yarn generate:component. Do not remove
+@import '../components/base/new_dropdowns/disclosure/disclosure_dropdown';
 @import '../components/base/keyset_pagination/keyset_pagination';
 @import '../components/charts/gauge/gauge';
 @import '../components/base/token_selector/token_selector';
@@ -75,4 +76,5 @@
 @import '../components/shared_components/charts/tooltip_default_format';
 @import '../components/utilities/truncate/truncate';
 @import '../components/base/new_dropdowns/base_dropdown/base_dropdown';
+@import '../components/base/new_dropdowns/dropdown';
 @import '../components/base/new_dropdowns/listbox/listbox';