@gitlab/ui 49.5.0 → 49.6.0

package/dist/utils/constants.js

@@ -105,10 +105,6 @@ const dropdownVariantOptions = {
   link: 'link'
 };
 const buttonSizeOptions = {
-  small: 'small',
-  medium: 'medium'
-};
-const buttonSizeOptionsMap = {
   small: 'sm',
   medium: 'md'
 };
@@ -256,4 +252,4 @@ const loadingIconSizes = {
   'xl (64x64)': 'xl'
 };
 
-export { COMMA, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonSizeOptionsMap, buttonVariantOptions, colorThemes, columnOptions, datepickerSizeOptionsMap, defaultDateFormat, drawerVariants, dropdownVariantOptions, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };
+export { COMMA, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerSizeOptionsMap, defaultDateFormat, drawerVariants, dropdownVariantOptions, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "49.5.0",
+  "version": "49.6.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -82,7 +82,7 @@
     "@babel/preset-env": "^7.19.4",
     "@gitlab/eslint-plugin": "18.1.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.5.0",
+    "@gitlab/svgs": "3.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/src/components/base/button/button.vue

@@ -5,7 +5,6 @@ import {
   buttonCategoryOptions,
   buttonVariantOptions,
   buttonSizeOptions,
-  buttonSizeOptionsMap,
 } from '../../../utils/constants';
 import { logWarning } from '../../../utils/utils';
 import { SafeLinkMixin } from '../../mixins/safe_link_mixin';
@@ -35,7 +34,7 @@ export default {
     size: {
       type: String,
       required: false,
-      default: buttonSizeOptions.medium,
+      default: 'medium',
       validator: (value) => Object.keys(buttonSizeOptions).includes(value),
     },
     selected: {
@@ -108,7 +107,7 @@ export default {
       return classes;
     },
     buttonSize() {
-      return buttonSizeOptionsMap[this.size];
+      return buttonSizeOptions[this.size];
     },
   },
   mounted() {

package/src/components/base/dropdown/dropdown.md

@@ -1,6 +1,17 @@
 The dropdown component offers a user multiple items or actions to choose from which are initially
 collapsed behind a button.
 
+> **NOTE**: This component will eventually be deprecated in favor of components
+> more suited to the various use cases for dropdowns. Consider using a more
+> appropriate component instead:
+>
+> - For single or multiselect options, use `GlListbox`.
+> - For other use cases (e.g., displaying a list of actions like "Edit user",
+>   "Delete user"), continue to use `GlDropdown` for now.
+>
+> See [this epic](https://gitlab.com/groups/gitlab-org/-/epics/1059) for the
+> most up-to-date information about what to use and when.
+
 ### Icon-only dropdown
 
 Icon-only dropdowns must have an accessible name.

package/src/components/base/dropdown/dropdown.scss

@@ -72,7 +72,8 @@
       @include gl-display-none;
     }
 
-    &.gl-button {
+    &.gl-button,
+    &.gl-button.btn-block {
       @include gl-pr-3;
 
       &.btn-sm {
@@ -162,6 +163,7 @@
     }
 
     .gl-button .dropdown-chevron,
+    .gl-button.btn-block .dropdown-chevron,
     .dropdown-chevron {
       @include gl-ml-2;
       @include gl-mr-0;

package/src/components/base/dropdown/dropdown.vue

@@ -123,7 +123,7 @@ export default {
     size: {
       type: String,
       required: false,
-      default: buttonSizeOptions.medium,
+      default: 'medium',
       validator: (value) => Object.keys(buttonSizeOptions).includes(value),
     },
     icon: {

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

@@ -0,0 +1,26 @@
+`GlFormDate` allows users to choose and input a date using a keyboard by by using
+browser implemented calendar controls, where available.
+
+`GlFormDate` extends `<input type="date">` with an `<output>` for audible announcement
+of selected date, in full format, by screen-readers.
+
+## Usage
+
+On `change` the value is emitted in `YYYY-MM-DD` format.
+
+## Accessibility
+
+`GlFormDate` is a form `<input>` and should have an accessible name using a `<label>`.
+
+`GlFormGroup` can be used to label `GlFormDate`.
+
+```html
+<gl-form-group
+  label="Enter date"
+  label-for="input-id"
+>
+  <gl-form-date
+    id="input-id"
+  />
+</gl-form-group>
+```

package/src/components/base/form/form_date/form_date.scss

@@ -0,0 +1,7 @@
+.gl-form-date {
+  input::-webkit-datetime-edit {
+    line-height: 1;
+    padding: 0;
+    margin-bottom: -2px;
+  }
+}

package/src/components/base/form/form_date/form_date.spec.js

@@ -0,0 +1,85 @@
+import { mount, shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import GlFormDate from './form_date.vue';
+
+describe('GlFormDate', () => {
+  let wrapper;
+
+  const createComponent = (propsData = {}, mountFn = shallowMount) => {
+    wrapper = mountFn(GlFormDate, { propsData });
+  };
+
+  const findInput = () => wrapper.findComponent({ ref: 'input' });
+  const findInvalidFeedback = () => wrapper.findComponent({ ref: 'invalidFeedback' });
+  const findOutput = () => wrapper.findComponent({ ref: 'output' });
+
+  describe('props', () => {
+    it.each`
+      propName   | value           | attribute  | expectedValue
+      ${'id'}    | ${'idForInput'} | ${'id'}    | ${'idForInput'}
+      ${'min'}   | ${'2020-01-01'} | ${'min'}   | ${'2020-01-01'}
+      ${'max'}   | ${'2020-01-31'} | ${'max'}   | ${'2020-01-31'}
+      ${'value'} | ${'2020-01-19'} | ${'value'} | ${'2020-01-19'}
+    `(
+      'when `$propName` prop is passed sets input `$attribute` to `$expectedValue`',
+      ({ propName, value, attribute, expectedValue }) => {
+        createComponent({ [propName]: value });
+
+        expect(findInput().attributes(attribute)).toBe(expectedValue);
+      }
+    );
+
+    it('when `id` prop is not passed sets a unique input `id` attribute', async () => {
+      createComponent({ value: '2019-01-01' }, mount);
+      await nextTick();
+      await nextTick();
+      expect(findInput().attributes('id')).not.toBe('');
+      expect(findOutput().attributes('for')).not.toBe('');
+      expect(findInput().attributes('id')).toMatch(findOutput().attributes('for'));
+    });
+
+    it.each`
+      propName   | attribute  | expectedValue
+      ${'min'}   | ${'min'}   | ${undefined}
+      ${'max'}   | ${'max'}   | ${undefined}
+      ${'value'} | ${'value'} | ${undefined}
+    `(
+      'when `$propName` prop is not passed sets input `$attribute` attribute to `$expectedValue`',
+      ({ attribute, expectedValue }) => {
+        createComponent();
+
+        expect(findInput().attributes(attribute)).toBe(expectedValue);
+      }
+    );
+  });
+
+  describe('validation', () => {
+    it('when `value` is less than `min` adds `aria-invalid="true"` attribute and invalid-feedback`', () => {
+      createComponent(
+        {
+          min: '2020-01-01',
+          value: '2019-01-01',
+        },
+        mount
+      );
+
+      expect(findInput().attributes('aria-describedby')).toMatch('form-date-invalid-feedback-');
+      expect(findInput().attributes('aria-invalid')).toBe('true');
+      expect(findInvalidFeedback().text()).toBe('Must be after minimum date');
+    });
+
+    it('when `value` is greater than `max` adds `aria-invalid="true"` attribute and invalid-feedback`', () => {
+      createComponent(
+        {
+          max: '2020-01-01',
+          value: '2021-01-01',
+        },
+        mount
+      );
+
+      expect(findInput().attributes('aria-describedby')).toMatch('form-date-invalid-feedback-');
+      expect(findInput().attributes('aria-invalid')).toBe('true');
+      expect(findInvalidFeedback().text()).toBe('Must be before maximum date');
+    });
+  });
+});

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

@@ -0,0 +1,100 @@
+import readme from './form_date.md';
+import GlFormDate from './form_date.vue';
+
+const defaultValue = (prop) => GlFormDate.props[prop].default;
+
+const template = `
+  <gl-form-date
+    v-model="localValue"
+    :disabled="disabled"
+    :min="min"
+    :max="max"
+    :min-invalid-feedback="minInvalidFeedback"
+    :max-invalid-feedback="maxInvalidFeedback"
+    :readonly="readonly"
+    :value="value"
+  />`;
+
+const generateProps = ({
+  disabled = false,
+  min = '',
+  max = '',
+  minInvalidFeedback = defaultValue('minInvalidFeedback'),
+  maxInvalidFeedback = defaultValue('maxInvalidFeedback'),
+  readonly = false,
+  value = '',
+} = {}) => ({
+  disabled,
+  min,
+  max,
+  minInvalidFeedback,
+  maxInvalidFeedback,
+  readonly,
+  value,
+});
+
+const Template = (args) => ({
+  components: { GlFormDate },
+  props: Object.keys(args),
+  watch: {
+    value(newValue) {
+      this.localValue = newValue;
+    },
+  },
+  data() {
+    return {
+      localValue: this.value,
+    };
+  },
+  template,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export const Disabled = Template.bind({});
+Disabled.args = generateProps({ disabled: true });
+
+export const DisabledValue = Template.bind({});
+DisabledValue.args = generateProps({
+  disabled: true,
+  value: '2020-01-19',
+});
+
+export const MinMaxDates = Template.bind({});
+MinMaxDates.args = generateProps({
+  min: '2020-01-01',
+  max: '2020-01-31',
+  minInvalidFeedback: 'Must be after 2020-01-01',
+  maxInvalidFeedback: 'Must be before 2020-01-31',
+});
+
+export const Readonly = Template.bind({});
+Readonly.args = generateProps({
+  readonly: true,
+  value: '2020-01-19',
+});
+
+export const Value = Template.bind({});
+Value.args = generateProps({ value: '2020-01-15' });
+
+export const InvalidDate = Template.bind({});
+InvalidDate.args = generateProps({
+  min: '2020-01-01',
+  max: '2020-01-31',
+  minInvalidFeedback: 'Must be after 2020-01-01',
+  maxInvalidFeedback: 'Must be before 2020-01-31',
+  value: '2020-02-02',
+});
+
+export default {
+  title: 'base/form/form-date',
+  component: GlFormDate,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

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

@@ -0,0 +1,135 @@
+<script>
+import { uniqueId } from 'lodash';
+import GlFormInput from '../form_input/form_input.vue';
+
+export default {
+  name: 'GlFormDate',
+  components: {
+    GlFormInput,
+  },
+  inheritAttrs: false,
+  model: {
+    event: 'change',
+    prop: 'value',
+  },
+  props: {
+    id: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    min: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    max: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    minInvalidFeedback: {
+      type: String,
+      required: false,
+      default: 'Must be after minimum date',
+    },
+    maxInvalidFeedback: {
+      type: String,
+      required: false,
+      default: 'Must be before maximum date',
+    },
+    value: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      currentValue: this.value,
+      inputId: this.id || uniqueId('form-date-'),
+      invalidFeedbackId: uniqueId('form-date-invalid-feedback-'),
+      outputId: uniqueId('form-date-output-'),
+      valueAsDate: null,
+    };
+  },
+  computed: {
+    ariaDescribedBy() {
+      return [this.valueAsDate && this.outputId, this.isInvalid && this.invalidFeedbackId].join(
+        ' '
+      );
+    },
+    isLessThanMin() {
+      return this.currentValue && this.min && this.currentValue < this.min;
+    },
+    isGreaterThanMax() {
+      return this.currentValue && this.max && this.currentValue > this.max;
+    },
+    isInvalid() {
+      return this.isLessThanMin || this.isGreaterThanMax;
+    },
+    outputValue() {
+      if (!this.valueAsDate) return null;
+      return new Intl.DateTimeFormat(undefined, { dateStyle: 'full' }).format(this.valueAsDate);
+    },
+    state() {
+      return !this.isInvalid;
+    },
+  },
+  watch: {
+    value: {
+      handler(newValue) {
+        this.currentValue = newValue;
+        this.updateValueAsDate();
+      },
+    },
+  },
+  async mounted() {
+    await this.$nextTick();
+    this.updateValueAsDate();
+  },
+  methods: {
+    updateValueAsDate() {
+      this.valueAsDate = this.$refs.input.$el.valueAsDate;
+    },
+    onChange($event) {
+      /**
+       * Emitted when date is changed.
+       *
+       * @event change
+       */
+      this.updateValueAsDate();
+      this.$emit('change', $event);
+    },
+  },
+};
+</script>
+<template>
+  <div class="gl-form-date">
+    <gl-form-input
+      :id="inputId"
+      ref="input"
+      v-model="currentValue"
+      v-bind="$attrs"
+      :aria-describedby="ariaDescribedBy"
+      :min="min"
+      :max="max"
+      pattern="\d{4}-\d{2}-\d{2}"
+      placeholder="yyyy-mm-dd"
+      :state="state"
+      type="date"
+      @change="onChange"
+    />
+    <output v-if="outputValue" :id="outputId" ref="output" :for="inputId" class="gl-sr-only">
+      {{ outputValue }}
+    </output>
+    <div v-if="isInvalid" :id="invalidFeedbackId" ref="invalidFeedback" class="invalid-feedback">
+      <template v-if="isLessThanMin">
+        {{ minInvalidFeedback }}
+      </template>
+      <template v-if="isGreaterThanMax">
+        {{ maxInvalidFeedback }}
+      </template>
+    </div>
+  </div>
+</template>

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue

@@ -43,7 +43,7 @@ export default {
     size: {
       type: String,
       required: false,
-      default: buttonSizeOptions.medium,
+      default: 'medium',
       validator: (value) => Object.keys(buttonSizeOptions).includes(value),
     },
     icon: {

package/src/components/base/new_dropdowns/listbox/listbox.stories.js

@@ -365,7 +365,7 @@ export default {
     size: {
       control: {
         type: 'select',
-        options: buttonSizeOptions,
+        options: Object.keys(buttonSizeOptions),
       },
     },
   },

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -118,7 +118,7 @@ export default {
     size: {
       type: String,
       required: false,
-      default: buttonSizeOptions.medium,
+      default: 'medium',
       validator: (value) => Object.keys(buttonSizeOptions).includes(value),
     },
     /**

package/src/components/mixins/button_mixin.js

@@ -1,9 +1,9 @@
-import { buttonSizeOptionsMap } from '../../utils/constants';
+import { buttonSizeOptions } from '../../utils/constants';
 
 export const ButtonMixin = {
   computed: {
     buttonSize() {
-      return buttonSizeOptionsMap[this.size];
+      return buttonSizeOptions[this.size];
     },
   },
 };

package/src/scss/components.scss

@@ -34,6 +34,7 @@
 @import '../components/base/filtered_search/filtered_search_term';
 @import '../components/base/filtered_search/filtered_search_token';
 @import '../components/base/filtered_search/filtered_search_token_segment';
+@import '../components/base/form/form_date/form_date';
 @import '../components/base/form/form_input/form_input';
 @import '../components/base/form/form_checkbox/form_checkbox';
 @import '../components/base/form/form_group/form_group';

package/src/utils/constants.js

@@ -123,11 +123,6 @@ export const dropdownVariantOptions = {
 };
 
 export const buttonSizeOptions = {
-  small: 'small',
-  medium: 'medium',
-};
-
-export const buttonSizeOptionsMap = {
   small: 'sm',
   medium: 'md',
 };