@gitlab/ui 32.50.0 → 32.51.0

package/documentation/documented_stories.js

@@ -90,6 +90,7 @@ export const setupStorybookReadme = () =>
         'GlAccordion',
         'GlAccordionItem',
         'GlIntersperse',
+        'GlFormSelect',
         'GlDaterangePicker',
         'GlAvatarLabeled',
         'GlBarChart',
@@ -114,6 +115,7 @@ export const setupStorybookReadme = () =>
         'GlFormRadio',
         'GlModal',
         'GlKeysetPagination',
+        'GlForm',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

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

package/scss_to_js/scss_variables.js

@@ -15,6 +15,8 @@ export const glSpacingScale12 = '5rem'
 export const glSpacingScale13 = '6rem'
 export const glSpacingScale15 = '7.5rem'
 export const glSpacingScale20 = '10rem'
+export const glSpacingScale26 = '13rem'
+export const glSpacingScale62 = '31rem'
 export const breakpointSm = '576px'
 export const breakpointMd = '768px'
 export const breakpointLg = '992px'

package/scss_to_js/scss_variables.json

@@ -85,6 +85,16 @@
       "value": "20 * $grid-size",
       "compiledValue": "10rem"
     },
+    {
+      "name": "$gl-spacing-scale-26",
+      "value": "26 * $grid-size",
+      "compiledValue": "13rem"
+    },
+    {
+      "name": "$gl-spacing-scale-62",
+      "value": "62 * $grid-size",
+      "compiledValue": "31rem"
+    },
     {
       "name": "$breakpoint-sm",
       "value": "576px",

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

@@ -1,8 +1,5 @@
-import examples from './examples';
 import description from './form.md';
 
 export default {
   description,
-  examples,
-  bootstrapComponent: 'b-form',
 };

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

@@ -1,17 +1,102 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlForm } from '../../../../index';
+import {
+  GlForm,
+  GlFormGroup,
+  GlFormInput,
+  GlFormSelect,
+  GlFormCheckbox,
+  GlButton,
+} from '../../../../index';
+import { setStoryTimeout } from '../../../utils/test_utils';
 import readme from './form.md';
 
-const components = {
-  GlForm,
-};
+export const Default = (args) => ({
+  components: {
+    GlForm,
+    GlFormGroup,
+    GlFormInput,
+    GlFormSelect,
+    GlFormCheckbox,
+    GlButton,
+  },
+  props: Object.keys(args),
+  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;
+      setStoryTimeout(() => {
+        this.form.submitDisabled = false;
+        // eslint-disable-next-line no-alert
+        alert(JSON.stringify(this.form));
+      }, 1000);
+    },
+  },
+  template: `
+    <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>
 
-documentedStoriesOf('base/form/form', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    template: `
-      <gl-form />
-    `,
-  }));
+      <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" class="gl-mr-3">Cancel</gl-button>
+        <gl-button type="submit" variant="confirm">Submit</gl-button>
+      </div>
+    </gl-form>
+  `,
+});
+
+export default {
+  title: 'base/form/form',
+  component: GlForm,
+  parameters: {
+    bootstrapComponent: 'b-form',
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

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

@@ -1,25 +1,6 @@
-import examples from './examples';
 import description from './form_select.md';
 
 export default {
   description,
-  examples,
   followDesignSystem: true,
-  bootstrapComponent: 'b-form-select',
-  events: [
-    {
-      event: 'change',
-      description: 'Emitted with the select value changes via user interaction.',
-    },
-    {
-      event: 'input',
-      description: 'Emitted with the select value changes.',
-    },
-  ],
-  slots: [
-    {
-      name: 'first',
-      description: 'Slot to place option tags above options provided via options prop',
-    },
-  ],
 };

package/src/components/base/form/form_select/form_select.md

@@ -1,3 +1 @@
-# Form Select
-
 Form select component used to select from group of options in a form.

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

@@ -1,19 +1,11 @@
-import { withKnobs, boolean, select, number, object } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
 import { GlFormSelect } from '../../../../../index';
 import { sizeOptions, formStateOptions } from '../../../../utils/constants';
 import { formSelectOptions } from './constants';
 import readme from './form_select.md';
 
-const components = {
-  GlFormSelect,
-};
-
-const data = () => {
-  return {
-    selected: 'Pizza',
-  };
-};
+const data = () => ({
+  selected: 'Pizza',
+});
 
 const template = `
 <gl-form-select 
@@ -27,86 +19,112 @@ const template = `
 </gl-form-select>
 `;
 
-function generateProps({
+const generateProps = ({
   size = null,
   state = null,
   disabled = false,
   multiple = false,
   selectSize = 1,
   options = formSelectOptions,
-} = {}) {
-  return {
-    size: {
-      type: String,
-      default: select('size', sizeOptions, size),
+} = {}) => ({
+  size,
+  disabled,
+  state,
+  multiple,
+  selectSize,
+  options,
+});
+
+const Template = (args) => ({
+  components: { GlFormSelect },
+  props: Object.keys(args),
+  data,
+  template,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export const Disabled = Template.bind({});
+Disabled.args = generateProps({ disabled: true });
+
+export const ValidState = Template.bind({});
+ValidState.args = generateProps({ state: true });
+
+export const InvalidState = Template.bind({});
+InvalidState.args = generateProps({ state: false });
+
+export const WithTruncation = (args, { argTypes }) => ({
+  components: { GlFormSelect },
+  props: Object.keys(argTypes),
+  data() {
+    return {
+      selected: 1,
+    };
+  },
+  template: `
+    <div style="max-width: 300px;">
+      ${template}
+    </div>
+    `,
+});
+WithTruncation.args = generateProps({
+  options: [
+    {
+      value: 1,
+      text: 'A form select option with a very looooooooong label',
+    },
+  ],
+});
+
+export default {
+  title: 'base/form/form-select',
+  component: GlFormSelect,
+  parameters: {
+    bootstrapComponent: 'b-form-select',
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
     },
-    disabled: {
-      type: Boolean,
-      default: boolean('disabled', disabled),
+  },
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+        options: sizeOptions,
+      },
     },
     state: {
-      type: Boolean,
-      default: select('state', formStateOptions, state),
+      control: {
+        type: 'select',
+        options: formStateOptions,
+      },
     },
-    multiple: {
-      type: Boolean,
-      default: boolean('multiple', multiple),
+    input: {
+      description: 'Emitted with the select value changes.',
+      table: {
+        category: 'events',
+      },
     },
-    selectSize: {
-      type: Number,
-      default: number('select size', selectSize),
+    change: {
+      description: 'Emitted with the select value changes via user interaction.',
+      table: {
+        category: 'events',
+      },
     },
-    options: {
-      type: Array,
-      default: object('options', options),
+    first: {
+      description: 'Slot to place option tags above options provided via options prop.',
+      table: {
+        category: 'slots',
+      },
     },
-  };
-}
-
-documentedStoriesOf('base/form/form-select', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    props: generateProps(),
-    data,
-    template,
-  }))
-  .add('disabled', () => ({
-    components,
-    props: generateProps({ disabled: true }),
-    data,
-    template,
-  }))
-  .add('valid state', () => ({
-    components,
-    props: generateProps({ state: true }),
-    data,
-    template,
-  }))
-  .add('invalid state', () => ({
-    components,
-    props: generateProps({ state: false }),
-    data,
-    template,
-  }))
-  .add('with truncation', () => ({
-    components,
-    props: generateProps({
-      options: [
-        {
-          value: 1,
-          text: 'A form select option with a very looooooooong label',
-        },
-      ],
-    }),
-    data() {
-      return {
-        selected: 1,
-      };
+    default: {
+      description: 'Slot to place explicit option tags.',
+      table: {
+        category: 'slots',
+      },
     },
-    template: `
-    <div style="max-width: 300px;">
-      ${template}
-    </div>
-    `,
-  }));
+  },
+};

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();
@@ -158,7 +174,9 @@ 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">
@@ -170,49 +188,52 @@ 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>
-    <!-- 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>
+    <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. -->
-    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-    <slot slot="modal-footer" name="modal-footer">
-      <!-- 
+    <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>
-      <!-- 
+        <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>
-      <!-- 
+        <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>
+        <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/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__;