@gitlab/ui 32.50.0 → 32.51.3

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_select/examples/form_select.basic.example.js

@@ -1,55 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      selected: 'pizza',
-      options: [{
-        text: 'Pizza',
-        value: 'pizza'
-      }, {
-        text: 'Tacos',
-        value: 'tacos'
-      }]
-    };
-  }
-
-};
-
-/* 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-select',{attrs:{"options":_vm.options},model:{value:(_vm.selected),callback:function ($$v) {_vm.selected=$$v;},expression:"selected"}})};
-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_select/examples/form_select.disabled.example.js

@@ -1,55 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      selected: 'pizza',
-      options: [{
-        text: 'Pizza',
-        value: 'pizza'
-      }, {
-        text: 'Tacos',
-        value: 'tacos'
-      }]
-    };
-  }
-
-};
-
-/* 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-select',{attrs:{"options":_vm.options,"disabled":true},model:{value:(_vm.selected),callback:function ($$v) {_vm.selected=$$v;},expression:"selected"}})};
-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_select/examples/form_select.manual_options.example.js

@@ -1,48 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      selected: 'pizza'
-    };
-  }
-
-};
-
-/* 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-select',{model:{value:(_vm.selected),callback:function ($$v) {_vm.selected=$$v;},expression:"selected"}},[_c('option',{attrs:{"value":"pizza"}},[_vm._v("Pizza")]),_vm._v(" "),_c('option',{attrs:{"value":"tacos"}},[_vm._v("Tacos")]),_vm._v(" "),_c('option',{attrs:{"value":"pad-thai","disabled":""}},[_vm._v("Pad Thai")])])};
-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_select/examples/form_select.mixed_options.example.js

@@ -1,55 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      selected: 'pizza',
-      options: [{
-        text: 'Pizza',
-        value: 'pizza'
-      }, {
-        text: 'Tacos',
-        value: 'tacos'
-      }]
-    };
-  }
-
-};
-
-/* 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-select',{attrs:{"options":_vm.options},scopedSlots:_vm._u([{key:"first",fn:function(){return [_c('option',{attrs:{"disabled":""},domProps:{"value":null}},[_vm._v("Select a dish")])]},proxy:true}]),model:{value:(_vm.selected),callback:function ($$v) {_vm.selected=$$v;},expression:"selected"}})};
-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_select/examples/index.js

@@ -1,27 +0,0 @@
-import FormSelectBasicExample from './form_select.basic.example';
-import FormSelectDisabledExample from './form_select.disabled.example';
-import FormSelectManualOptionsExample from './form_select.manual_options.example';
-import FormSelectMixedOptionsExample from './form_select.mixed_options.example';
-
-var index = [{
-  name: 'Form Select',
-  items: [{
-    id: 'form-select-options-array',
-    name: 'Form select with options property',
-    component: FormSelectBasicExample
-  }, {
-    id: 'form-select-manual-options',
-    name: 'Form select with manual options',
-    component: FormSelectManualOptionsExample
-  }, {
-    id: 'form-select-mixed-options',
-    name: 'Form select with mixed options',
-    component: FormSelectMixedOptionsExample
-  }, {
-    id: 'form-select-disabled',
-    name: 'Form select disabled',
-    component: FormSelectDisabledExample
-  }]
-}];
-
-export default index;

package/src/components/base/form/examples/form.basic.example.vue

@@ -1,73 +0,0 @@
-<script>
-export default {
-  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>
-
-<template>
-  <div>
-    <gl-form @submit="onSubmit" @reset="onReset">
-      <gl-form-group
-        id="input-group-1"
-        label="Email address:"
-        label-for="input-1"
-        description="We'll never share your email with anyone else."
-      >
-        <gl-form-input
-          id="input-1"
-          v-model="form.email"
-          type="email"
-          required
-          placeholder="Enter email"
-        />
-      </gl-form-group>
-
-      <gl-form-group id="input-group-2" label="Your Name:" label-for="input-2">
-        <gl-form-input id="input-2" v-model="form.name" required placeholder="Enter name" />
-      </gl-form-group>
-
-      <gl-form-group id="input-group-3" label="Merge State:" label-for="input-3">
-        <gl-form-select id="input-3" v-model="form.mergeState" :options="states" required />
-      </gl-form-group>
-
-      <gl-form-group id="input-group-4">
-        <gl-form-checkbox-group id="checkboxes-4" v-model="form.checked">
-          <gl-form-checkbox value="squash">Squash Commits</gl-form-checkbox>
-          <gl-form-checkbox value="new">Create New Issue</gl-form-checkbox>
-        </gl-form-checkbox-group>
-      </gl-form-group>
-
-      <div class="gl-display-flex gl-justify-content-end">
-        <gl-button type="reset" variant="secondary" class="gl-mr-3">Cancel</gl-button>
-        <gl-button type="submit" variant="success">Submit</gl-button>
-      </div>
-    </gl-form>
-  </div>
-</template>