@gitlab/ui 41.7.0 → 41.9.0

package/package.json

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

package/src/components/base/modal/modal.md

@@ -7,7 +7,11 @@ should serve a single purpose dedicated to completing the user’s task.
 You can use the `v-model` directive to control the modal’s visibility. The `v-model`
 directive interfaces with the `visible` property and the `@change` event.
 
-## Modal footer
+## Deprecation Warning
+
+We are deprecating the `modal-ok` and `modal-cancel` slots. We are also changing the way the
+`modal-footer` slot content is populated. This is in order to align this component with the design
+system.
 
 The `modal-footer` slot should only be populated via props: `action-primary`, `action-secondary` and
 `action-cancel`. These props allow you to handle how a primary, secondary and cancel button will

package/src/components/base/modal/modal.vue

@@ -86,6 +86,22 @@ export default {
       default: '',
     },
   },
+  computed: {
+    shouldRenderModalOk() {
+      return Boolean(this.$slots['modal-ok']);
+    },
+    shouldRenderModalCancel() {
+      return Boolean(this.$slots['modal-cancel']);
+    },
+    shouldRenderModalFooter() {
+      return Boolean(
+        this.actionCancel ||
+          this.actionSecondary ||
+          this.actionPrimary ||
+          this.$slots['modal-footer']
+      );
+    },
+  },
   mounted() {
     if (!this.ariaLabel && !this.title) {
       logWarning(
@@ -152,7 +168,7 @@ export default {
 </script>
 
 <template>
-  <!--
+  <!-- 
   Emitted when the modal visibility changes
   @event change
  -->
@@ -186,8 +202,14 @@ export default {
       <!-- @slot Content of Modal header close button. If modal-header slot is used, this slot will not be shown. -->
       <close-button ref="close-button" :label="dismissLabel" @click="close" />
     </template>
+    <template v-if="shouldRenderModalOk" #modal-ok>
+      <slot name="modal-ok"></slot>
+    </template>
+    <template v-if="shouldRenderModalCancel" #modal-cancel>
+      <slot name="modal-cancel"></slot>
+    </template>
     <!-- @slot Populated via props: modal-action-primary, modal-action-cancel and modal-action-secondary. -->
-    <template #modal-footer>
+    <template v-if="shouldRenderModalFooter" #modal-footer>
       <slot name="modal-footer">
         <!--
         Emitted when clicked on modal-action-cancel

package/src/components/base/tabs/tab/tab.spec.js

@@ -1,4 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
+import { BTab } from 'bootstrap-vue';
 import { DEFAULT_TAB_TITLE_LINK_CLASS } from '../constants';
 import GlTab from './tab.vue';
 
@@ -6,9 +7,7 @@ describe('Tab component', () => {
   let wrapper;
 
   const createComponent = (options) => {
-    wrapper = shallowMount(GlTab, {
-      ...options,
-    });
+    wrapper = shallowMount(GlTab, { ...options });
   };
 
   it.each`
@@ -22,14 +21,25 @@ describe('Tab component', () => {
     'computed title link class is $expectedProp when titleLinkClass is $titleLinkClass',
     ({ titleLinkClass, expectedProp }) => {
       createComponent({
-        propsData: {
-          titleLinkClass,
-        },
+        propsData: { titleLinkClass },
       });
 
-      expect(wrapper.html()).toBe(
-        `<b-tab-stub tag="div" title="" titlelinkclass="${expectedProp}"></b-tab-stub>`
-      );
+      expect(wrapper.findComponent(BTab).props('titleLinkClass')).toEqual(expectedProp);
     }
   );
+
+  it('passes title-link-attributes to b-tab when href is explicitly passed', () => {
+    const titleLinkAttributes = 'href-example';
+    const expectedProp = { href: titleLinkAttributes };
+    createComponent({
+      propsData: { href: titleLinkAttributes },
+    });
+    expect(wrapper.findComponent(BTab).props('titleLinkAttributes')).toEqual(expectedProp);
+  });
+
+  it('passes # as href to b-tab when href is not passed', () => {
+    const expectedProp = { href: '#' };
+    createComponent();
+    expect(wrapper.findComponent(BTab).props('titleLinkAttributes')).toEqual(expectedProp);
+  });
 });

package/src/components/base/tabs/tab/tab.vue

@@ -24,6 +24,14 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * Provide an `href` for the tab, for example to associate the tab with the tab panel's ID
+     */
+    href: {
+      type: String,
+      required: false,
+      default: '#',
+    },
   },
   computed: {
     linkClass() {
@@ -46,6 +54,7 @@ export default {
     :title-link-class="linkClass"
     :query-param-value="queryParamValue"
     v-bind="$attrs"
+    :title-link-attributes="{ href }"
     v-on="$listeners"
   >
     <template v-for="slot in Object.keys($slots)" #[slot]>

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

@@ -226,6 +226,20 @@ WithScrollAndGrowing.parameters = {
   storyshots: { disable: true },
 };
 
+export const WithHref = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ...components, GlBadge },
+  template: wrap(`
+    <gl-tab href="#tab-1" title="Tab 1">
+      <h2 id="tab-1">Tab panel 1</h2>
+      <p>Some paragraph text<p>
+    </gl-tab>
+    <gl-tab href="#tab-2" title="Tab 2">
+      <h2 id="tab-2">Tab panel 2</h2>
+      <p>Some paragraph text<p>
+    </gl-tab>`),
+});
+
 export default {
   title: 'base/tabs',
   component: GlTabs,

package/src/scss/utilities.scss

@@ -3005,6 +3005,18 @@
   display: grid !important;
 }
 
+.gl-sm-display-table-cell {
+  @include gl-media-breakpoint-up(sm) {
+  display: table-cell;
+  }
+}
+
+.gl-sm-display-table-cell\! {
+  @include gl-media-breakpoint-up(sm) {
+  display: table-cell !important;
+  }
+}
+
 .gl-md-display-table-cell {
   @include gl-media-breakpoint-up(md) {
   display: table-cell;

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

@@ -187,6 +187,12 @@
   display: grid;
 }
 
+@mixin gl-sm-display-table-cell {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-display-table-cell;
+  }
+}
+
 @mixin gl-md-display-table-cell {
   @include gl-media-breakpoint-up(md) {
     @include gl-display-table-cell;