@gitlab/ui 66.16.0 → 66.19.0

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

@@ -108,7 +108,7 @@ export default {
     },
     contentClasses() {
       return [
-        this.compact ? 'gl-flex-grow-1 gl-flex-basis-0 gl-px-4' : 'gl-max-w-88 gl-m-auto',
+        this.compact ? 'gl-flex-grow-1 gl-flex-basis-0 gl-px-4' : 'gl-m-auto gl-p-5',
         this.contentClass,
       ];
     },
@@ -127,68 +127,69 @@ export default {
     <div
       :class="{ 'gl-display-none gl-sm-display-block gl-px-4': compact, 'gl-max-w-full': !compact }"
     >
-      <div v-if="svgPath">
-        <img
-          :src="svgPath"
-          alt=""
-          role="img"
-          :class="{ 'gl-dark-invert-keep-hue': invertInDarkMode }"
-          class="gl-max-w-full"
-          :height="height"
-        />
-      </div>
+      <img
+        v-if="svgPath"
+        :src="svgPath"
+        alt=""
+        role="img"
+        :class="{ 'gl-dark-invert-keep-hue': invertInDarkMode }"
+        class="gl-max-w-full"
+        :height="height"
+      />
     </div>
-    <div :class="contentClasses" data-testid="gl-empty-state-content">
-      <div class="gl-mx-auto gl-my-0" :class="{ 'gl-p-5': !compact }">
+    <div
+      class="gl-empty-state-content gl-mx-auto gl-my-0"
+      :class="contentClasses"
+      data-testid="gl-empty-state-content"
+    >
+      <!--
+          @slot Use this slot to customize the empty state's title area.
+          Overrides the `title` prop.
+        -->
+      <slot ref="title" name="title">
+        <h1
+          class="gl-font-size-h-display gl-line-height-36 gl-mt-0 gl-mb-0"
+          :class="compact ? 'h5' : 'h4'"
+        >
+          {{ title }}
+        </h1>
+      </slot>
+      <p v-if="description || $scopedSlots.description" ref="description" class="gl-mt-4 gl-mb-0">
         <!--
-            @slot Use this slot to customize the empty state's title area.
-            Overrides the `title` prop.
-          -->
-        <slot ref="title" name="title">
-          <h1
-            class="gl-font-size-h-display gl-line-height-36 gl-mt-0 gl-mb-0"
-            :class="compact ? 'h5' : 'h4'"
+          @slot Use this slot to customize the empty state's description
+          area. Overrides the `description` prop.
+        -->
+        <slot name="description">
+          {{ description }}
+        </slot>
+      </p>
+      <div
+        class="gl-display-flex gl-flex-wrap gl-mt-5"
+        :class="{ 'gl-justify-content-center': !compact }"
+      >
+        <!--
+          @slot Use this slot to customize the empty state's actions area,
+          where the buttons are. Overrides button-related props:
+          `primaryButtonLink`, `primaryButtonText`, `secondaryButtonLink`,
+          `secondaryButtonText`.
+        -->
+        <slot name="actions">
+          <gl-button
+            v-if="shouldRenderPrimaryButton"
+            variant="confirm"
+            :class="compact ? 'gl-mr-3' : 'gl-mx-2'"
+            class="gl-mb-3"
+            :href="primaryButtonLink"
+            >{{ primaryButtonText }}</gl-button
           >
-            {{ title }}
-          </h1>
+          <gl-button
+            v-if="shouldRenderSecondaryButton"
+            class="gl-mb-3 gl-mr-3"
+            :class="{ 'gl-mx-2!': !compact }"
+            :href="secondaryButtonLink"
+            >{{ secondaryButtonText }}
+          </gl-button>
         </slot>
-        <p v-if="description || $scopedSlots.description" ref="description" class="gl-mt-4 gl-mb-0">
-          <!--
-            @slot Use this slot to customize the empty state's description
-            area. Overrides the `description` prop.
-          -->
-          <slot name="description">
-            {{ description }}
-          </slot>
-        </p>
-        <div
-          class="gl-display-flex gl-flex-wrap gl-mt-5"
-          :class="{ 'gl-justify-content-center': !compact }"
-        >
-          <!--
-            @slot Use this slot to customize the empty state's actions area,
-            where the buttons are. Overrides button-related props:
-            `primaryButtonLink`, `primaryButtonText`, `secondaryButtonLink`,
-            `secondaryButtonText`.
-          -->
-          <slot name="actions">
-            <gl-button
-              v-if="shouldRenderPrimaryButton"
-              variant="confirm"
-              :class="compact ? 'gl-mr-3' : 'gl-mx-2'"
-              class="gl-mb-3"
-              :href="primaryButtonLink"
-              >{{ primaryButtonText }}</gl-button
-            >
-            <gl-button
-              v-if="shouldRenderSecondaryButton"
-              class="gl-mb-3 gl-mr-3"
-              :class="{ 'gl-mx-2!': !compact }"
-              :href="secondaryButtonLink"
-              >{{ secondaryButtonText }}
-            </gl-button>
-          </slot>
-        </div>
       </div>
     </div>
   </section>

package/src/index.js

@@ -98,6 +98,7 @@ export { default as GlCarouselSlide } from './components/base/carousel/carousel_
 
 // Experimental
 export { default as GlExperimentBadge } from './components/experimental/experiment_badge/experiment_badge.vue';
+export { default as GlDuoUserFeedback } from './components/experimental/duo/user_feedback/user_feedback.vue';
 
 // Utilities
 export { default as GlAnimatedNumber } from './components/utilities/animated_number/animated_number.vue';

package/src/scss/components.scss

@@ -78,3 +78,4 @@
 @import '../components/base/new_dropdowns/dropdown';
 @import '../components/base/new_dropdowns/dropdown_item';
 @import '../components/base/new_dropdowns/listbox/listbox';
+@import '../components/regions/empty_state/empty_state';