@gitlab/ui 32.42.0 → 32.43.3

package/documentation/documented_stories.js

@@ -94,6 +94,7 @@ export const setupStorybookReadme = () =>
         'GlMarkdown',
         'GlTokenSelector',
         'GlTooltip',
+        'GlFormTextarea',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.42.0",
+  "version": "32.43.3",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -60,7 +60,7 @@
     "@babel/standalone": "^7.0.0",
     "bootstrap-vue": "2.20.1",
     "copy-to-clipboard": "^3.0.8",
-    "dompurify": "^2.3.3",
+    "dompurify": "^2.3.4",
     "echarts": "^5.2.1",
     "highlight.js": "^10.6.0",
     "js-beautify": "^1.8.8",
@@ -84,19 +84,19 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "10.0.0",
     "@gitlab/stylelint-config": "2.6.0",
-    "@gitlab/svgs": "1.223.0",
+    "@gitlab/svgs": "1.226.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.4.5",
-    "@storybook/addon-docs": "6.4.5",
-    "@storybook/addon-essentials": "6.4.5",
+    "@storybook/addon-a11y": "6.4.8",
+    "@storybook/addon-docs": "6.4.8",
+    "@storybook/addon-essentials": "6.4.8",
     "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-storyshots": "6.4.5",
-    "@storybook/addon-storyshots-puppeteer": "6.4.5",
-    "@storybook/addon-viewport": "6.4.5",
-    "@storybook/theming": "6.4.5",
-    "@storybook/vue": "6.4.5",
+    "@storybook/addon-storyshots": "6.4.8",
+    "@storybook/addon-storyshots-puppeteer": "6.4.8",
+    "@storybook/addon-viewport": "6.4.8",
+    "@storybook/theming": "6.4.8",
+    "@storybook/vue": "6.4.8",
     "@vue/test-utils": "1.1.3",
     "autoprefixer": "^9.7.6",
     "babel-jest": "^26.6.3",

package/src/components/base/form/form_group/examples/form_group/form_group.validation.example.vue

@@ -10,12 +10,12 @@ export default {
       return this.name.length >= 4;
     },
     invalidFeedback() {
-      let feedbackText = 'Please enter something';
+      let feedbackText = 'This field is required.';
 
       if (this.name.length > 4) {
         feedbackText = '';
       } else if (this.name.length > 0) {
-        feedbackText = 'Enter at least 4 characters';
+        feedbackText = 'Enter at least 4 characters.';
       }
 
       return feedbackText;
@@ -26,7 +26,7 @@ export default {
 <template>
   <gl-form-group
     label="Name"
-    description="Please enter your name"
+    description="Enter a first and last name."
     :invalid-feedback="invalidFeedback"
     :state="state"
     label-for="input1"

package/src/components/base/form/form_group/form_group.stories.js

@@ -101,19 +101,19 @@ documentedStoriesOf('base/form/form-group', readme)
     `,
   }))
   .add('with validations', () => ({
-    props: generateProps({ label: 'Name', description: 'Please enter your name' }),
+    props: generateProps({ label: 'Name', description: 'Enter a first and last name.' }),
     components,
     computed: {
       state() {
         return this.name.length >= 4;
       },
       invalidFeedback() {
-        let feedbackText = 'Please enter something';
+        let feedbackText = 'This field is required.';
 
         if (this.name.length > 4) {
           feedbackText = '';
         } else if (this.name.length > 0) {
-          feedbackText = 'Enter at least 4 characters';
+          feedbackText = 'Enter at least 4 characters.';
         }
 
         return feedbackText;

package/src/components/base/form/form_textarea/form_textarea.documentation.js

@@ -1,30 +1,5 @@
-import examples from './examples';
 import description from './form_textarea.md';
 
 export default {
   description,
-  examples,
-  bootstrapComponent: 'b-form-textarea',
-  events: [
-    {
-      event: 'input',
-      args: [
-        {
-          arg: 'value',
-          description: '(String)',
-        },
-      ],
-      description: 'Emitted to update the v-model',
-    },
-    {
-      event: 'update',
-      args: [
-        {
-          arg: 'value',
-          description: '(String)',
-        },
-      ],
-      description: `Triggered by user interaction. Emitted after any formatting (not including 'trim' or 'number' props). Useful for getting the currently entered value when the 'debounce' or 'lazy' props are set.`,
-    },
-  ],
 };

package/src/components/base/form/form_textarea/form_textarea.stories.js

@@ -1,12 +1,6 @@
-import { withKnobs, boolean } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
 import { GlFormTextarea } from '../../../../../index';
 import readme from './form_textarea.md';
 
-const components = {
-  GlFormTextarea,
-};
-
 const template = `
   <gl-form-textarea
     v-model="model"
@@ -16,28 +10,35 @@ const template = `
   />
 `;
 
-function generateProps({ noResize = GlFormTextarea.props.noResize.default } = {}) {
-  return {
-    model: {
-      type: String,
-      default:
-        'We take inspiration from other companies, and we always go for the boring solutions. Just like the rest of our work, we continually adjust our values and strive always to make them better. We used to have more values, but it was difficult to remember them all, so we condensed them and gave sub-values and created an acronym. Everyone is welcome to suggest improvements.',
-    },
-    placeholder: {
-      type: String,
-      default: 'hello',
-    },
-    noResize: {
-      type: Boolean,
-      default: boolean('no-resize', noResize),
-    },
-  };
-}
+const generateProps = ({
+  model = 'We take inspiration from other companies, and we always go for the boring solutions. Just like the rest of our work, we continually adjust our values and strive always to make them better. We used to have more values, but it was difficult to remember them all, so we condensed them and gave sub-values and created an acronym. Everyone is welcome to suggest improvements.',
+  placeholder = 'hello',
+  noResize = GlFormTextarea.props.noResize.default,
+} = {}) => ({
+  model,
+  placeholder,
+  noResize,
+});
 
-documentedStoriesOf('base/form/form-textarea', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    props: generateProps(),
-    template,
-  }));
+const Template = (args) => ({
+  components: { GlFormTextarea },
+  props: Object.keys(args),
+  template,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export default {
+  title: 'base/form/form-textarea',
+  component: GlFormTextarea,
+  parameters: {
+    bootstrapComponent: 'b-form-textarea',
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

package/src/components/base/form/form_textarea/form_textarea.vue

@@ -38,9 +38,17 @@ export default {
         // Swap purpose of input and update events from underlying BFormTextarea.
         // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/631.
         input: (...args) => {
+          /**
+           * Emitted to update the v-model
+           */
           this.$emit('update', ...args);
         },
         update: (...args) => {
+          /**
+           * Triggered by user interaction.
+           * Emitted after any formatting (not including 'trim' or 'number' props).
+           * Useful for getting the currently entered value when the 'debounce' or 'lazy' props are set.
+           */
           this.$emit(model.event, ...args);
         },
       };

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

@@ -104,8 +104,14 @@ export default {
     </div>
     <div :class="compact ? 'col-sm-9' : 'col-12'">
       <div class="text-content gl-mx-auto gl-my-0" :class="{ 'gl-p-5': !compact }">
-        <h1 ref="title" :class="compact ? 'h5' : 'h4'">{{ title }}</h1>
-        <p v-if="description || $scopedSlots.description" ref="description">
+        <h1
+          ref="title"
+          class="gl-font-size-h-display gl-line-height-36"
+          :class="compact ? 'h5' : 'h4'"
+        >
+          {{ title }}
+        </h1>
+        <p v-if="description || $scopedSlots.description" ref="description" class="gl-mt-3">
           <!--
             @slot Use this slot to customize the empty state's description
             area. Overrides the `description` prop.

package/src/scss/utilities.scss

@@ -4384,6 +4384,18 @@
     max-width: 50% !important;
   }
 }
+
+.gl-md-max-w-70p {
+  @include gl-media-breakpoint-up(md) {
+    max-width: 70%;
+  }
+}
+
+.gl-md-max-w-70p\! {
+  @include gl-media-breakpoint-up(md) {
+    max-width: 70% !important;
+  }
+}
 .gl-p-0 {
   padding: 0;
 }

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

@@ -314,3 +314,9 @@
     max-width: 50%;
   }
 }
+
+@mixin gl-md-max-w-70p {
+  @include gl-media-breakpoint-up(md) {
+    max-width: 70%;
+  }
+}

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

@@ -1,47 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  // We need this because without a v-model this input will reset on every keystroke
-  // https://github.com/bootstrap-vue/bootstrap-vue/issues/1915
-  data: () => ({
-    text: ''
-  })
-};
-
-/* 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-textarea',{attrs:{"placeholder":"Enter something"},model:{value:(_vm.text),callback:function ($$v) {_vm.text=$$v;},expression:"text"}})};
-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_textarea/examples/form_textarea.invalid.example.js

@@ -1,47 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  // We need this because without a v-model this input will reset on every keystroke
-  // https://github.com/bootstrap-vue/bootstrap-vue/issues/1915
-  data: () => ({
-    text: 'This is invalid'
-  })
-};
-
-/* 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-textarea',{attrs:{"placeholder":"Enter something","state":false},model:{value:(_vm.text),callback:function ($$v) {_vm.text=$$v;},expression:"text"}})};
-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_textarea/examples/form_textarea.plaintext.example.js

@@ -1,47 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  // We need this because without a v-model this input will reset on every keystroke
-  // https://github.com/bootstrap-vue/bootstrap-vue/issues/1915
-  data: () => ({
-    text: "This is some plain text.\nIt is read only and doesn't look like an input."
-  })
-};
-
-/* 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-textarea',{attrs:{"plaintext":""},model:{value:(_vm.text),callback:function ($$v) {_vm.text=$$v;},expression:"text"}})};
-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_textarea/examples/form_textarea.readonly.example.js

@@ -1,45 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data: () => ({
-    text: 'This is some readonly text.'
-  })
-};
-
-/* 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-textarea',{attrs:{"readonly":""},model:{value:(_vm.text),callback:function ($$v) {_vm.text=$$v;},expression:"text"}})};
-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_textarea/examples/form_textarea.submit.example.js

@@ -1,47 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  // We need this because without a v-model this input will reset on every keystroke
-  // https://github.com/bootstrap-vue/bootstrap-vue/issues/1915
-  data: () => ({
-    text: ''
-  })
-};
-
-/* 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-textarea',{attrs:{"placeholder":"Enter something","submit-on-enter":""},model:{value:(_vm.text),callback:function ($$v) {_vm.text=$$v;},expression:"text"}})};
-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_textarea/examples/index.js

@@ -1,37 +0,0 @@
-import FormTextAreaBasic from './form_textarea.basic.example';
-import FormTextAreaInvalid from './form_textarea.invalid.example';
-import FormTextAreaPlaintext from './form_textarea.plaintext.example';
-import FormTextReadOnlytext from './form_textarea.readonly.example';
-import FormTextSubmitOnEnter from './form_textarea.submit.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'form-textarea-basic',
-    name: 'Basic',
-    description: 'Basic Form Textarea',
-    component: FormTextAreaBasic
-  }, {
-    id: 'form-textarea-invalid',
-    name: 'Invalid',
-    description: 'Invalid Form Textarea',
-    component: FormTextAreaInvalid
-  }, {
-    id: 'form-textarea-plaintext',
-    name: 'Plaintext',
-    description: 'Plaintext Form Textarea',
-    component: FormTextAreaPlaintext
-  }, {
-    id: 'form-textarea-readonly',
-    name: 'Read Only',
-    description: 'Read Only Form Textarea',
-    component: FormTextReadOnlytext
-  }, {
-    id: 'form-textarea-submit-on-enter',
-    name: 'Submit On Enter',
-    description: 'Submit On Enter Form Textarea',
-    component: FormTextSubmitOnEnter
-  }]
-}];
-
-export default index;

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

@@ -1,11 +0,0 @@
-<script>
-export default {
-  // We need this because without a v-model this input will reset on every keystroke
-  // https://github.com/bootstrap-vue/bootstrap-vue/issues/1915
-  data: () => ({ text: '' }),
-};
-</script>
-
-<template>
-  <gl-form-textarea v-model="text" placeholder="Enter something" />
-</template>

package/src/components/base/form/form_textarea/examples/form_textarea.invalid.example.vue

@@ -1,11 +0,0 @@
-<script>
-export default {
-  // We need this because without a v-model this input will reset on every keystroke
-  // https://github.com/bootstrap-vue/bootstrap-vue/issues/1915
-  data: () => ({ text: 'This is invalid' }),
-};
-</script>
-
-<template>
-  <gl-form-textarea v-model="text" placeholder="Enter something" :state="false" />
-</template>

package/src/components/base/form/form_textarea/examples/form_textarea.plaintext.example.vue

@@ -1,13 +0,0 @@
-<script>
-export default {
-  // We need this because without a v-model this input will reset on every keystroke
-  // https://github.com/bootstrap-vue/bootstrap-vue/issues/1915
-  data: () => ({
-    text: "This is some plain text.\nIt is read only and doesn't look like an input.",
-  }),
-};
-</script>
-
-<template>
-  <gl-form-textarea v-model="text" plaintext />
-</template>

package/src/components/base/form/form_textarea/examples/form_textarea.readonly.example.vue

@@ -1,9 +0,0 @@
-<script>
-export default {
-  data: () => ({ text: 'This is some readonly text.' }),
-};
-</script>
-
-<template>
-  <gl-form-textarea v-model="text" readonly />
-</template>

package/src/components/base/form/form_textarea/examples/form_textarea.submit.example.vue

@@ -1,11 +0,0 @@
-<script>
-export default {
-  // We need this because without a v-model this input will reset on every keystroke
-  // https://github.com/bootstrap-vue/bootstrap-vue/issues/1915
-  data: () => ({ text: '' }),
-};
-</script>
-
-<template>
-  <gl-form-textarea v-model="text" placeholder="Enter something" submit-on-enter />
-</template>

package/src/components/base/form/form_textarea/examples/index.js

@@ -1,43 +0,0 @@
-import FormTextAreaBasic from './form_textarea.basic.example.vue';
-import FormTextAreaInvalid from './form_textarea.invalid.example.vue';
-import FormTextAreaPlaintext from './form_textarea.plaintext.example.vue';
-import FormTextReadOnlytext from './form_textarea.readonly.example.vue';
-import FormTextSubmitOnEnter from './form_textarea.submit.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'form-textarea-basic',
-        name: 'Basic',
-        description: 'Basic Form Textarea',
-        component: FormTextAreaBasic,
-      },
-      {
-        id: 'form-textarea-invalid',
-        name: 'Invalid',
-        description: 'Invalid Form Textarea',
-        component: FormTextAreaInvalid,
-      },
-      {
-        id: 'form-textarea-plaintext',
-        name: 'Plaintext',
-        description: 'Plaintext Form Textarea',
-        component: FormTextAreaPlaintext,
-      },
-      {
-        id: 'form-textarea-readonly',
-        name: 'Read Only',
-        description: 'Read Only Form Textarea',
-        component: FormTextReadOnlytext,
-      },
-      {
-        id: 'form-textarea-submit-on-enter',
-        name: 'Submit On Enter',
-        description: 'Submit On Enter Form Textarea',
-        component: FormTextSubmitOnEnter,
-      },
-    ],
-  },
-];