@gitlab/ui 49.4.1 → 49.5.1

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [49.5.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v49.5.0...v49.5.1) (2022-11-08)
+
+
+### Bug Fixes
+
+* **GlDropdown:** Dropdown arrow position when in block mode ([7a34f2d](https://gitlab.com/gitlab-org/gitlab-ui/commit/7a34f2dfea96388dbd281f2b372dc14299cabadd))
+
+# [49.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v49.4.1...v49.5.0) (2022-11-07)
+
+
+### Features
+
+* **css:** updating neutral gray colors to have a tint based on branding ([241b9d1](https://gitlab.com/gitlab-org/gitlab-ui/commit/241b9d16e41dc1b506ed3eb158272d949c8acd65))
+* **datepicker:** add support for different datepicker sizes ([a502867](https://gitlab.com/gitlab-org/gitlab-ui/commit/a502867438144303d20c9fe0ad9c0b635f37bba2))
+
 ## [49.4.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v49.4.0...v49.4.1) (2022-11-04)
 
 

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

@@ -1,6 +1,6 @@
 import _isString from 'lodash/isString';
 import Pikaday from 'pikaday';
-import { defaultDateFormat } from '../../../utils/constants';
+import { defaultDateFormat, datepickerSizeOptionsMap } from '../../../utils/constants';
 import { areDatesEqual } from '../../../utils/datetime_utility';
 import GlButton from '../button/button';
 import GlFormInput from '../form/form_input/form_input';
@@ -170,6 +170,12 @@ var script = {
       type: String,
       required: false,
       default: null
+    },
+    size: {
+      type: String,
+      required: false,
+      default: 'medium',
+      validator: value => Object.keys(datepickerSizeOptionsMap).includes(value)
     }
   },
   data() {
@@ -201,6 +207,12 @@ var script = {
         return 'off';
       }
       return null;
+    },
+    datepickerClasses() {
+      return ['gl-datepicker', 'd-inline-block', 'gl-w-full', `gl-form-input-${this.datepickerSize}`];
+    },
+    datepickerSize() {
+      return datepickerSizeOptionsMap[this.size];
     }
   },
   watch: {
@@ -330,7 +342,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-datepicker d-inline-block"},[(_vm.showDefaultField)?_c('div',{staticClass:"gl-relative"},[_vm._t("default",function(){return [_c('gl-form-input',{staticClass:"gl-datepicker-input",class:_vm.renderClearButton ? 'gl-pr-9!' : 'gl-pr-7!',attrs:{"id":_vm.inputId,"name":_vm.inputName,"data-testid":"gl-datepicker-input","value":_vm.formattedDate,"placeholder":_vm.placeholder,"autocomplete":_vm.inputAutocomplete,"disabled":_vm.disabled,"aria-label":_vm.inputLabel},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onKeydown.apply(null, arguments)}},model:{value:(_vm.textInput),callback:function ($$v) {_vm.textInput=$$v;},expression:"textInput"}})]},{"formattedDate":_vm.formattedDate}),_vm._v(" "),_c('div',{staticClass:"gl-datepicker-actions"},[(_vm.renderClearButton)?_c('gl-button',{staticClass:"gl-pointer-events-auto",attrs:{"data-testid":"clear-button","aria-label":"Clear date","category":"tertiary","size":"small","icon":"clear"},on:{"click":_vm.cleared}}):_vm._e(),_vm._v(" "),(_vm.triggerOnFocus || _vm.disabled)?_c('span',{staticClass:"gl-px-2",class:_vm.disabled ? 'gl-text-gray-400' : 'gl-text-gray-500',attrs:{"data-testid":"datepicker-calendar-icon"}},[_c('gl-icon',{staticClass:"gl-display-block",attrs:{"name":"calendar","size":16}})],1):_c('gl-button',{ref:"calendarTriggerBtn",staticClass:"gl-pointer-events-auto",attrs:{"aria-label":"Open datepicker","category":"tertiary","size":"small","icon":"calendar"}})],1)],2):_vm._t("default",null,{"formattedDate":_vm.formattedDate})],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.datepickerClasses},[(_vm.showDefaultField)?_c('div',{staticClass:"gl-relative"},[_vm._t("default",function(){return [_c('gl-form-input',{staticClass:"gl-w-full",class:_vm.renderClearButton ? 'gl-pr-9!' : 'gl-pr-7!',attrs:{"id":_vm.inputId,"name":_vm.inputName,"data-testid":"gl-datepicker-input","value":_vm.formattedDate,"placeholder":_vm.placeholder,"autocomplete":_vm.inputAutocomplete,"disabled":_vm.disabled,"aria-label":_vm.inputLabel},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onKeydown.apply(null, arguments)}},model:{value:(_vm.textInput),callback:function ($$v) {_vm.textInput=$$v;},expression:"textInput"}})]},{"formattedDate":_vm.formattedDate}),_vm._v(" "),_c('div',{staticClass:"gl-datepicker-actions"},[(_vm.renderClearButton)?_c('gl-button',{staticClass:"gl-pointer-events-auto",attrs:{"data-testid":"clear-button","aria-label":"Clear date","category":"tertiary","size":"small","icon":"clear"},on:{"click":_vm.cleared}}):_vm._e(),_vm._v(" "),(_vm.triggerOnFocus || _vm.disabled)?_c('span',{staticClass:"gl-px-2",class:_vm.disabled ? 'gl-text-gray-400' : 'gl-text-gray-500',attrs:{"data-testid":"datepicker-calendar-icon"}},[_c('gl-icon',{staticClass:"gl-display-block",attrs:{"name":"calendar","size":16}})],1):_c('gl-button',{ref:"calendarTriggerBtn",staticClass:"gl-pointer-events-auto",attrs:{"aria-label":"Open datepicker","category":"tertiary","size":"small","icon":"calendar"}})],1)],2):_vm._t("default",null,{"formattedDate":_vm.formattedDate})],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/discrete_scatter/discrete_scatter.js

@@ -8,7 +8,7 @@ import Chart from '../chart/chart';
 import ChartTooltip from '../tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-const gray200 = '#bfbfbf';
+const gray200 = '#bfbfc3';
 
 var script = {
   components: {

package/dist/components/charts/heatmap/heatmap.js

@@ -12,7 +12,7 @@ import ChartTooltip from '../tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const white = '#fff';
-const gray100 = '#dbdbdb';
+const gray100 = '#dcdcde';
 
 //
 const defaultOptions = {

package/dist/components/charts/legend/legend.js

@@ -6,7 +6,7 @@ import GlTruncate from '../../utilities/truncate/truncate';
 import GlChartSeriesLabel from '../series_label/series_label';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-const gray200 = '#bfbfbf';
+const gray200 = '#bfbfc3';
 
 //
 var script = {

package/dist/components/charts/line/line.js

@@ -11,7 +11,7 @@ import ChartLegend from '../legend/legend';
 import ChartTooltip from '../tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-const gray200 = '#bfbfbf';
+const gray200 = '#bfbfc3';
 
 //
 var script = {