@gitlab/ui 32.48.0 → 32.51.1

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

@@ -80,6 +80,22 @@ export default {
       default: false,
     },
   },
+  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']
+      );
+    },
+  },
   methods: {
     show() {
       this.$refs.modal.show();
@@ -139,6 +155,10 @@ export default {
 </script>
 
 <template>
+  <!-- 
+  Emitted when the modal visibility changes
+  @event change
+ -->
   <b-modal
     :id="modalId"
     ref="modal"
@@ -154,45 +174,66 @@ export default {
     @cancel="canceled"
     @change="$emit('change', $event)"
   >
-    <slot></slot>
+    <template #default>
+      <slot name="default"></slot>
+    </template>
     <template #modal-header>
+      <!-- @slot Entire modal header container contents (including the close button on the top right corner) -->
       <slot name="modal-header">
         <h4 class="modal-title">
+          <!-- @slot Modal title. If modal-header slot is used, this slot will not be shown. -->
           <slot name="modal-title">{{ title }}</slot>
         </h4>
       </slot>
+      <!-- @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>
-    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-    <slot slot="modal-ok" name="modal-ok"></slot>
-    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-    <slot slot="modal-cancel" name="modal-cancel"></slot>
-    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-    <slot slot="modal-footer" name="modal-footer">
-      <gl-button
-        v-if="actionCancel"
-        class="js-modal-action-cancel"
-        v-bind="buttonBinding(actionCancel, 'actionCancel')"
-        @click="cancel"
-      >
-        {{ actionCancel.text }}
-      </gl-button>
-      <gl-button
-        v-if="actionSecondary"
-        class="js-modal-action-secondary"
-        v-bind="buttonBinding(actionSecondary, 'actionSecondary')"
-        @click="secondary"
-      >
-        {{ actionSecondary.text }}
-      </gl-button>
-      <gl-button
-        v-if="actionPrimary"
-        class="js-modal-action-primary"
-        v-bind="buttonBinding(actionPrimary, 'actionPrimary')"
-        @click="ok"
-      >
-        {{ actionPrimary.text }}
-      </gl-button>
-    </slot>
+    <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 v-if="shouldRenderModalFooter" #modal-footer>
+      <slot name="modal-footer">
+        <!--
+        Emitted when clicked on modal-action-cancel
+        @event canceled
+       -->
+        <gl-button
+          v-if="actionCancel"
+          class="js-modal-action-cancel"
+          v-bind="buttonBinding(actionCancel, 'actionCancel')"
+          @click="cancel"
+        >
+          {{ actionCancel.text }}
+        </gl-button>
+        <!--
+        Emitted when clicked on modal-action-secondary
+        @event secondary
+       -->
+        <gl-button
+          v-if="actionSecondary"
+          class="js-modal-action-secondary"
+          v-bind="buttonBinding(actionSecondary, 'actionSecondary')"
+          @click="secondary"
+        >
+          {{ actionSecondary.text }}
+        </gl-button>
+        <!--
+        Emitted when clicked on modal-action-primary
+        @event primary
+       -->
+        <gl-button
+          v-if="actionPrimary"
+          class="js-modal-action-primary"
+          v-bind="buttonBinding(actionPrimary, 'actionPrimary')"
+          @click="ok"
+        >
+          {{ actionPrimary.text }}
+        </gl-button>
+      </slot>
+    </template>
   </b-modal>
 </template>

package/src/scss/utilities.scss

@@ -4313,6 +4313,22 @@
   max-width: $gl-spacing-scale-15 !important;
 }
 
+.gl-max-w-26 {
+  max-width: $gl-spacing-scale-26;
+}
+
+.gl-max-w-26\! {
+  max-width: $gl-spacing-scale-26 !important;
+}
+
+.gl-max-w-62 {
+  max-width: $gl-spacing-scale-62;
+}
+
+.gl-max-w-62\! {
+  max-width: $gl-spacing-scale-62 !important;
+}
+
 .gl-max-w-none {
   max-width: none;
 }

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

@@ -271,6 +271,14 @@
   max-width: $gl-spacing-scale-15;
 }
 
+@mixin gl-max-w-26 {
+  max-width: $gl-spacing-scale-26;
+}
+
+@mixin gl-max-w-62 {
+  max-width: $gl-spacing-scale-62;
+}
+
 @mixin gl-max-w-none {
   max-width: none;
 }

package/src/scss/variables.scss

@@ -18,6 +18,8 @@ $gl-spacing-scale-12: 10 * $grid-size;
 $gl-spacing-scale-13: 12 * $grid-size;
 $gl-spacing-scale-15: 15 * $grid-size;
 $gl-spacing-scale-20: 20 * $grid-size;
+$gl-spacing-scale-26: 26 * $grid-size;
+$gl-spacing-scale-62: 62 * $grid-size;
 
 // Responsive breakpoints
 

package/src/utils/string_utils.js

@@ -1,3 +1,5 @@
+import emojiRegexFactory from 'emoji-regex';
+
 /**
  * Split the given string after each occurrence of each of the given symbols.
  *
@@ -60,10 +62,12 @@ export const splitAfterSymbols = (symbols, string) => {
   return textParts;
 };
 
+const startsWithEmojiRegex = `^(${emojiRegexFactory().source})`;
+
 export const getAvatarChar = (name) => {
   if (name) {
-    // Check if first character is an emjoi
-    const match = name.match(/^\p{Emoji}/u);
+    // Check if string starts with an emoji (which could be multiple characters and zero-width joined)
+    const match = name.match(startsWithEmojiRegex);
     if (match) {
       // Return the first match
       return match[0];

package/src/utils/string_utils.spec.js

@@ -44,5 +44,13 @@ describe('string utils', () => {
     it('Returns first character if emoji is not first in name', () => {
       expect(getAvatarChar('tanuki🦊')).toBe('T');
     });
+
+    it('Returns zero-width joined emoji if the name starts with it', () => {
+      expect(getAvatarChar('🏴‍☠️Zero-width join')).toBe('🏴‍☠️');
+    });
+
+    it('Returns only first emoji if the name starts with multiple', () => {
+      expect(getAvatarChar('🏴‍☠️🙂Multiple Emoji')).toBe('🏴‍☠️');
+    });
   });
 });

package/dist/components/base/form/examples/form.basic.example.js

@@ -1,76 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      form: {
-        submitDisabled: false,
-        email: '',
-        name: '',
-        mergeState: null,
-        checked: []
-      },
-      states: [{
-        text: 'Select One',
-        value: null
-      }, 'Open', 'Resolved', 'Closed', 'Blocked'],
-      show: true
-    };
-  },
-
-  methods: {
-    onReset() {
-      this.form.name = '';
-      this.form.submitDisabled = false;
-    },
-
-    onSubmit(evt) {
-      evt.preventDefault();
-      this.form.submitDisabled = true;
-      setTimeout(() => {
-        this.form.submitDisabled = false; // eslint-disable-next-line no-alert
-
-        alert(JSON.stringify(this.form));
-      }, 1000);
-    }
-
-  }
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('gl-form',{on:{"submit":_vm.onSubmit,"reset":_vm.onReset}},[_c('gl-form-group',{attrs:{"id":"input-group-1","label":"Email address:","label-for":"input-1","description":"We'll never share your email with anyone else."}},[_c('gl-form-input',{attrs:{"id":"input-1","type":"email","required":"","placeholder":"Enter email"},model:{value:(_vm.form.email),callback:function ($$v) {_vm.$set(_vm.form, "email", $$v);},expression:"form.email"}})],1),_vm._v(" "),_c('gl-form-group',{attrs:{"id":"input-group-2","label":"Your Name:","label-for":"input-2"}},[_c('gl-form-input',{attrs:{"id":"input-2","required":"","placeholder":"Enter name"},model:{value:(_vm.form.name),callback:function ($$v) {_vm.$set(_vm.form, "name", $$v);},expression:"form.name"}})],1),_vm._v(" "),_c('gl-form-group',{attrs:{"id":"input-group-3","label":"Merge State:","label-for":"input-3"}},[_c('gl-form-select',{attrs:{"id":"input-3","options":_vm.states,"required":""},model:{value:(_vm.form.mergeState),callback:function ($$v) {_vm.$set(_vm.form, "mergeState", $$v);},expression:"form.mergeState"}})],1),_vm._v(" "),_c('gl-form-group',{attrs:{"id":"input-group-4"}},[_c('gl-form-checkbox-group',{attrs:{"id":"checkboxes-4"},model:{value:(_vm.form.checked),callback:function ($$v) {_vm.$set(_vm.form, "checked", $$v);},expression:"form.checked"}},[_c('gl-form-checkbox',{attrs:{"value":"squash"}},[_vm._v("Squash Commits")]),_vm._v(" "),_c('gl-form-checkbox',{attrs:{"value":"new"}},[_vm._v("Create New Issue")])],1)],1),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-justify-content-end"},[_c('gl-button',{staticClass:"gl-mr-3",attrs:{"type":"reset","variant":"secondary"}},[_vm._v("Cancel")]),_vm._v(" "),_c('gl-button',{attrs:{"type":"submit","variant":"success"}},[_vm._v("Submit")])],1)],1)],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/form/examples/form.edit.example.js

@@ -1,66 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      originalName: 'First last',
-      name: 'First last',
-      submitDisabled: false
-    };
-  },
-
-  computed: {
-    formClean() {
-      return this.name === this.originalName;
-    }
-
-  },
-  methods: {
-    onSubmit(evt) {
-      evt.preventDefault();
-      this.submitDisabled = true;
-      setTimeout(() => {
-        this.submitDisabled = true;
-      }, 1000);
-    }
-
-  }
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form',{on:{"submit":_vm.onSubmit}},[_c('gl-form-group',{attrs:{"label":"Name"}},[_c('gl-form-input',{attrs:{"type":"text","required":""},model:{value:(_vm.name),callback:function ($$v) {_vm.name=$$v;},expression:"name"}})],1),_vm._v(" "),_c('gl-button',{attrs:{"disabled":_vm.formClean || _vm.submitDisabled,"type":"submit","variant":"success"}},[_vm._v("Submit")])],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/form/examples/form.inline.example.js

@@ -1,62 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      name: {
-        first: '',
-        last: '',
-        submitDisabled: false
-      }
-    };
-  },
-
-  methods: {
-    onSubmit(evt) {
-      evt.preventDefault();
-      this.submitDisabled = true;
-      setTimeout(() => {
-        this.submitDisabled = false;
-      }, 1000);
-    }
-
-  }
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form',{attrs:{"inline":""},on:{"submit":_vm.onSubmit}},[_c('label',{staticClass:"gl-mr-3",attrs:{"for":"input-name"}},[_vm._v("First name")]),_vm._v(" "),_c('gl-form-input',{staticClass:"ml-1",attrs:{"name":"input-name","type":"text","required":""},model:{value:(_vm.name.first),callback:function ($$v) {_vm.$set(_vm.name, "first", $$v);},expression:"name.first"}}),_vm._v(" "),_c('label',{staticClass:"gl-mx-3",attrs:{"for":"input-surname"}},[_vm._v("Surname")]),_vm._v(" "),_c('gl-form-input',{staticClass:"ml-1",attrs:{"name":"input-surname","type":"text","required":""},model:{value:(_vm.name.last),callback:function ($$v) {_vm.$set(_vm.name, "last", $$v);},expression:"name.last"}}),_vm._v(" "),_c('gl-button',{staticClass:"gl-ml-3",attrs:{"small":"","disabled":_vm.submitDisabled,"type":"submit","variant":"success"}},[_vm._v("Save")])],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/form/examples/form.novalidate.example.js

@@ -1,61 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      name: '',
-      errorText: ''
-    };
-  },
-
-  methods: {
-    onSubmit(evt) {
-      evt.preventDefault();
-
-      if (this.name === '') {
-        this.errorText = 'Please enter your name';
-      } else {
-        this.errorText = '';
-      }
-    }
-
-  }
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form',{attrs:{"novalidate":""},on:{"submit":_vm.onSubmit}},[_c('gl-form-group',{attrs:{"label":"Name"}},[_c('gl-form-input',{attrs:{"type":"text","required":""},model:{value:(_vm.name),callback:function ($$v) {_vm.name=$$v;},expression:"name"}})],1),_vm._v(" "),_c('p',{staticClass:"text-danger"},[_vm._v(_vm._s(_vm.errorText))]),_vm._v(" "),_c('gl-button',{attrs:{"type":"submit","variant":"success"}},[_vm._v("Submit")])],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/form/examples/index.js

@@ -1,27 +0,0 @@
-import FormExample from './form.basic.example';
-import EditFormExample from './form.edit.example';
-import InlineFormExample from './form.inline.example';
-import NoValidateFormExample from './form.novalidate.example';
-
-var index = [{
-  name: 'Form',
-  items: [{
-    id: 'form-basic',
-    name: 'Form in the default state',
-    component: FormExample
-  }, {
-    id: 'form-inline',
-    name: 'Form in the inline state',
-    component: InlineFormExample
-  }, {
-    id: 'form-edit',
-    name: 'Form with existing data',
-    component: EditFormExample
-  }, {
-    id: 'form-novalidate',
-    name: 'Form with HTML validation disabled',
-    component: NoValidateFormExample
-  }]
-}];
-
-export default index;

package/dist/components/base/form/form_radio/examples/form_radio.basic.example.js

@@ -1,48 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      selected: 'one'
-    };
-  }
-
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('gl-form-radio',{attrs:{"value":"one"},model:{value:(_vm.selected),callback:function ($$v) {_vm.selected=$$v;},expression:"selected"}},[_vm._v("One")]),_vm._v(" "),_c('gl-form-radio',{attrs:{"value":"two"},model:{value:(_vm.selected),callback:function ($$v) {_vm.selected=$$v;},expression:"selected"}},[_vm._v("Two")])],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/form/form_radio/examples/form_radio.checked_disabled.example.js

@@ -1,48 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      checked: 'foo'
-    };
-  }
-
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-radio',{attrs:{"value":"foo","disabled":""},model:{value:(_vm.checked),callback:function ($$v) {_vm.checked=$$v;},expression:"checked"}},[_vm._v("Disabled and checked")])};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/form/form_radio/examples/index.js

@@ -1,19 +0,0 @@
-import FormRadioBasic from './form_radio.basic.example';
-import FormRadioCheckedDisabled from './form_radio.checked_disabled.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'form-radio-basic',
-    name: 'Basic',
-    description: 'Basic GlFormRadio',
-    component: FormRadioBasic
-  }, {
-    id: 'form-radio-checked-disabled',
-    name: 'Checked and disabled radio',
-    description: 'Checked and disabled GlFormRadio',
-    component: FormRadioCheckedDisabled
-  }]
-}];
-
-export default index;