@gitlab/ui 66.12.0 → 66.13.1

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [66.13.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.13.0...v66.13.1) (2023-09-25)
+
+
+### Bug Fixes
+
+* **css:** update gl-overflow-break-word mixin ([5280a70](https://gitlab.com/gitlab-org/gitlab-ui/commit/5280a70c13a9cd00887d9844b705d64a5675eadc))
+* **GlBroadcastMessage:** Fix broadcast message word break issue ([83363ff](https://gitlab.com/gitlab-org/gitlab-ui/commit/83363ff8a8d7e2ede363dcd137d231611a4722f0))
+
+# [66.13.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.12.0...v66.13.0) (2023-09-21)
+
+
+### Features
+
+* **GlFormInut, GlFormSelect, GlDatepicker:** Add prop width, deprecate prop size ([6de322c](https://gitlab.com/gitlab-org/gitlab-ui/commit/6de322c20f7fb2f2f7922392da513167f3bd2530))
+
 # [66.12.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.11.0...v66.12.0) (2023-09-21)
 
 

package/dist/components/base/broadcast_message/broadcast_message.js

@@ -77,7 +77,7 @@ var 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',{staticClass:"gl-broadcast-message",class:(_vm.theme + " " + _vm.type)},[_c('div',{staticClass:"gl-broadcast-message-content"},[_c('div',{staticClass:"gl-broadcast-message-icon gl-line-height-normal"},[_c('gl-icon',{attrs:{"name":_vm.iconName}})],1),_vm._v(" "),_c('div',{staticClass:"gl-my-n1"},[_c('h2',{staticClass:"gl-sr-only"},[_vm._v("Admin message")]),_vm._v(" "),_vm._t("default")],2)]),_vm._v(" "),(_vm.showDismissButton)?_c('close-button',{ref:"dismiss",staticClass:"gl-close-btn-color-inherit gl-broadcast-message-dismiss",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.onDismiss}}):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-broadcast-message",class:(_vm.theme + " " + _vm.type)},[_c('div',{staticClass:"gl-broadcast-message-content"},[_c('div',{staticClass:"gl-broadcast-message-icon"},[_c('gl-icon',{attrs:{"name":_vm.iconName}})],1),_vm._v(" "),_c('div',{staticClass:"gl-broadcast-message-text"},[_c('h2',{staticClass:"gl-sr-only"},[_vm._v("Admin message")]),_vm._v(" "),_vm._t("default")],2)]),_vm._v(" "),(_vm.showDismissButton)?_c('close-button',{ref:"dismiss",staticClass:"gl-close-btn-color-inherit gl-broadcast-message-dismiss",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.onDismiss}}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/datepicker/datepicker.js

@@ -1,6 +1,6 @@
 import isString from 'lodash/isString';
 import Pikaday from 'pikaday';
-import { defaultDateFormat, datepickerSizeOptionsMap } from '../../../utils/constants';
+import { defaultDateFormat, datepickerWidthOptionsMap, datepickerSizeOptionsMap } from '../../../utils/constants';
 import { areDatesEqual } from '../../../utils/datetime_utility';
 import GlButton from '../button/button';
 import GlFormInput from '../form/form_input/form_input';
@@ -173,10 +173,27 @@ var script = {
       required: false,
       default: null
     },
+    /**
+     * Maximum width of the Datepicker
+     */
+    width: {
+      type: String,
+      required: false,
+      default: null,
+      validator: value => Object.keys(datepickerWidthOptionsMap).includes(value)
+    },
+    /**
+     * ⚠️ DEPRECATED:
+     *
+     * Will be replaced by the
+     * property width
+     *
+     * Maximum width of the Datepicker
+     */
     size: {
       type: String,
       required: false,
-      default: 'medium',
+      default: null,
       validator: value => Object.keys(datepickerSizeOptionsMap).includes(value)
     }
   },
@@ -211,10 +228,16 @@ var script = {
       return null;
     },
     datepickerClasses() {
-      return ['gl-datepicker', 'd-inline-block', 'gl-w-full', `gl-form-input-${this.datepickerSize}`];
-    },
-    datepickerSize() {
-      return datepickerSizeOptionsMap[this.size];
+      return ['gl-datepicker', 'd-inline-block', 'gl-w-full', `gl-form-input-${this.computedWidth}`];
+    },
+    computedWidth() {
+      if (this.width) {
+        return this.width;
+        // eslint-disable-next-line no-else-return
+      } else if (this.size) {
+        return datepickerSizeOptionsMap[this.size];
+      }
+      return 'md';
     }
   },
   watch: {

package/dist/components/base/form/form_input/form_input.js

@@ -19,6 +19,23 @@ var script = {
     /**
      * Maximum width of the input
      */
+    width: {
+      type: [String, Object],
+      required: false,
+      default: null,
+      validator: value => {
+        const widths = isObject(value) ? Object.values(value) : [value];
+        return widths.every(width => Object.values(formInputSizes).includes(width));
+      }
+    },
+    /**
+     * ⚠️ DEPRECATED:
+     *
+     * Will be replaced by the
+     * property width
+     *
+     * Maximum width of the input
+     */
     size: {
       type: [String, Object],
       required: false,
@@ -30,21 +47,24 @@ var script = {
     }
   },
   computed: {
+    computedWidth() {
+      return this.width ? this.width : this.size;
+    },
     cssClasses() {
-      if (this.size === null) {
+      if (this.computedWidth === null) {
         return [];
       }
-      if (isObject(this.size)) {
+      if (isObject(this.computedWidth)) {
         const {
           default: defaultSize,
           ...nonDefaultSizes
-        } = this.size;
+        } = this.computedWidth;
         return [...(defaultSize ? [`gl-form-input-${defaultSize}`] : []), ...Object.entries(nonDefaultSizes).map(_ref => {
           let [breakpoint, size] = _ref;
           return `gl-${breakpoint}-form-input-${size}`;
         })];
       }
-      return [`gl-form-input-${this.size}`];
+      return [`gl-form-input-${this.computedWidth}`];
     },
     listeners() {
       var _this = this;

package/dist/components/base/form/form_select/form_select.js

@@ -13,6 +13,23 @@ var script = {
     /**
      * Maximum width of the Select
      */
+    width: {
+      type: [String, Object],
+      required: false,
+      default: null,
+      validator: value => {
+        const widths = isObject(value) ? Object.values(value) : [value];
+        return widths.every(width => Object.values(formInputSizes).includes(width));
+      }
+    },
+    /**
+     * ⚠️ DEPRECATED:
+     *
+     * Will be replaced by the
+     * property width
+     *
+     * Maximum width of the Select
+     */
     size: {
       type: [String, Object],
       required: false,
@@ -24,21 +41,24 @@ var script = {
     }
   },
   computed: {
+    computedWidth() {
+      return this.width ? this.width : this.size;
+    },
     cssClasses() {
-      if (this.size === null) {
+      if (this.computedWidth === null) {
         return [];
       }
-      if (isObject(this.size)) {
+      if (isObject(this.computedWidth)) {
         const {
           default: defaultSize,
           ...nonDefaultSizes
-        } = this.size;
+        } = this.computedWidth;
         return [...(defaultSize ? [`gl-form-select-${defaultSize}`] : []), ...Object.entries(nonDefaultSizes).map(_ref => {
           let [breakpoint, size] = _ref;
           return `gl-${breakpoint}-form-select-${size}`;
         })];
       }
-      return [`gl-form-select-${this.size}`];
+      return [`gl-form-select-${this.computedWidth}`];
     }
   }
 };