@gitlab/ui 52.11.0 → 52.12.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [52.12.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v52.11.0...v52.12.0) (2023-01-17)
+
+
+### Features
+
+* **GlEmptyState:** Add content-class prop ([7f850d7](https://gitlab.com/gitlab-org/gitlab-ui/commit/7f850d7661ffcb6a2db1cccfaca87cd7d794e01b))
+
 # [52.11.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v52.10.0...v52.11.0) (2023-01-16)
 
 

package/dist/components/regions/empty_state/empty_state.js

@@ -82,6 +82,14 @@ var script = {
       type: Boolean,
       required: false,
       default: true
+    },
+    /**
+     * CSS classes to add to the content container
+     */
+    contentClass: {
+      type: [Array, String, Object],
+      required: false,
+      default: () => []
     }
   },
   computed: {
@@ -96,6 +104,9 @@ var script = {
     },
     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];
     }
   }
 };
@@ -107,7 +118,7 @@ const __vue_script__ = script;
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',{staticClass:"gl-display-flex",class:{
     'empty-state gl-text-center gl-flex-direction-column': !_vm.compact,
     'gl-flex-direction-row': _vm.compact,
-  }},[_c('div',{class:{ 'gl-display-none gl-sm-display-block gl-px-4': _vm.compact, 'gl-max-w-full': !_vm.compact }},[(_vm.svgPath)?_c('div',{staticClass:"svg-250",class:{ 'svg-content': !_vm.compact }},[_c('img',{staticClass:"gl-max-w-full",class:{ 'gl-dark-invert-keep-hue': _vm.invertInDarkMode },attrs:{"src":_vm.svgPath,"alt":"","role":"img","height":_vm.height}})]):_vm._e()]),_vm._v(" "),_c('div',{class:_vm.compact ? 'gl-flex-grow-1 gl-flex-basis-0 gl-px-4' : 'gl-max-w-full gl-m-auto'},[_c('div',{staticClass:"gl-mx-auto gl-my-0",class:{ 'gl-p-5': !_vm.compact }},[_vm._t("title",function(){return [_c('h1',{staticClass:"gl-font-size-h-display gl-line-height-36",class:_vm.compact ? 'h5' : 'h4'},[_vm._v("\n          "+_vm._s(_vm.title)+"\n        ")])]}),_vm._v(" "),(_vm.description || _vm.$scopedSlots.description)?_c('p',{ref:"description",staticClass:"gl-mt-3"},[_vm._t("description",function(){return [_vm._v("\n          "+_vm._s(_vm.description)+"\n        ")]})],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-flex-wrap",class:{ 'gl-justify-content-center': !_vm.compact }},[_vm._t("actions",function(){return [(_vm.shouldRenderPrimaryButton)?_c('gl-button',{staticClass:"gl-mb-3",class:_vm.compact ? 'gl-mr-3' : 'gl-mx-2',attrs:{"variant":"confirm","href":_vm.primaryButtonLink}},[_vm._v(_vm._s(_vm.primaryButtonText))]):_vm._e(),_vm._v(" "),(_vm.shouldRenderSecondaryButton)?_c('gl-button',{staticClass:"gl-mb-3 gl-mr-3",class:{ 'gl-mx-2!': !_vm.compact },attrs:{"href":_vm.secondaryButtonLink}},[_vm._v(_vm._s(_vm.secondaryButtonText)+"\n          ")]):_vm._e()]})],2)],2)])])};
+  }},[_c('div',{class:{ 'gl-display-none gl-sm-display-block gl-px-4': _vm.compact, 'gl-max-w-full': !_vm.compact }},[(_vm.svgPath)?_c('div',{staticClass:"svg-250",class:{ 'svg-content': !_vm.compact }},[_c('img',{staticClass:"gl-max-w-full",class:{ 'gl-dark-invert-keep-hue': _vm.invertInDarkMode },attrs:{"src":_vm.svgPath,"alt":"","role":"img","height":_vm.height}})]):_vm._e()]),_vm._v(" "),_c('div',{class:_vm.contentClasses,attrs:{"data-testid":"gl-empty-state-content"}},[_c('div',{staticClass:"gl-mx-auto gl-my-0",class:{ 'gl-p-5': !_vm.compact }},[_vm._t("title",function(){return [_c('h1',{staticClass:"gl-font-size-h-display gl-line-height-36",class:_vm.compact ? 'h5' : 'h4'},[_vm._v("\n          "+_vm._s(_vm.title)+"\n        ")])]}),_vm._v(" "),(_vm.description || _vm.$scopedSlots.description)?_c('p',{ref:"description",staticClass:"gl-mt-3"},[_vm._t("description",function(){return [_vm._v("\n          "+_vm._s(_vm.description)+"\n        ")]})],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-flex-wrap",class:{ 'gl-justify-content-center': !_vm.compact }},[_vm._t("actions",function(){return [(_vm.shouldRenderPrimaryButton)?_c('gl-button',{staticClass:"gl-mb-3",class:_vm.compact ? 'gl-mr-3' : 'gl-mx-2',attrs:{"variant":"confirm","href":_vm.primaryButtonLink}},[_vm._v(_vm._s(_vm.primaryButtonText))]):_vm._e(),_vm._v(" "),(_vm.shouldRenderSecondaryButton)?_c('gl-button',{staticClass:"gl-mb-3 gl-mr-3",class:{ 'gl-mx-2!': !_vm.compact },attrs:{"href":_vm.secondaryButtonLink}},[_vm._v(_vm._s(_vm.secondaryButtonText)+"\n          ")]):_vm._e()]})],2)],2)])])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "52.11.0",
+  "version": "52.12.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -85,7 +85,7 @@
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
     "@gitlab/eslint-plugin": "18.1.0",
-    "@gitlab/fonts": "^1.0.1",
+    "@gitlab/fonts": "^1.1.0",
     "@gitlab/stylelint-config": "4.1.0",
     "@gitlab/svgs": "3.16.0",
     "@rollup/plugin-commonjs": "^11.1.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.