@gitlab/ui 49.4.0 → 49.5.0

package/dist/utils/charts/theme.js

@@ -3,14 +3,14 @@ import { hexToRgba } from '../utils';
 
 const whiteNormal = '#f0f0f0';
 const red500 = '#dd2b0e';
-const gray50 = '#f0f0f0';
-const gray100 = '#dbdbdb';
-const gray200 = '#bfbfbf';
-const gray300 = '#999';
-const gray500 = '#666';
-const gray600 = '#5e5e5e';
-const gray700 = '#525252';
-const gray900 = '#303030';
+const gray50 = '#ececef';
+const gray100 = '#dcdcde';
+const gray200 = '#bfbfc3';
+const gray300 = '#a4a3a8';
+const gray500 = '#737278';
+const gray600 = '#626168';
+const gray700 = '#535158';
+const gray900 = '#333238';
 const dataVizGreen500 = '#619025';
 const dataVizGreen600 = '#4e7f0e';
 const dataVizGreen700 = '#366800';

package/dist/utils/constants.js

@@ -112,6 +112,10 @@ const buttonSizeOptionsMap = {
   small: 'sm',
   medium: 'md'
 };
+const datepickerSizeOptionsMap = {
+  small: 'sm',
+  medium: 'md'
+};
 
 // size options all have corresponding styles (e.g. .s12 defined in icon.scss)
 const iconSizeOptions = glIconSizes.split(' ').map(Number);
@@ -252,4 +256,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, 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, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "49.4.0",
+  "version": "49.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -22,6 +22,7 @@
   "scripts": {
     "build": "NODE_ENV=production rollup -c",
     "prebuild": "run-s build-scss-variables generate-utilities",
+    "prepare": "run-s build-scss-variables generate-utilities",
     "generate-utilities": "make src/scss/utilities.scss",
     "build-scss-variables": "make scss_to_js/scss_variables.js",
     "clean": "rm -r dist storybook scss_to_js/scss_variables.* src/scss/utilities.scss",
@@ -107,7 +108,7 @@
     "eslint": "8.26.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-storybook": "0.6.6",
+    "eslint-plugin-storybook": "0.6.7",
     "file-loader": "^4.2.0",
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
@@ -115,7 +116,6 @@
     "jest": "^29.2.2",
     "jest-circus": "29.2.2",
     "jest-environment-jsdom": "29.2.2",
-    "jest-serializer-vue": "^2.0.2",
     "markdownlint-cli": "^0.29.0",
     "mockdate": "^2.0.5",
     "npm-run-all": "^4.1.5",

package/scss_to_js/scss_variables.js

@@ -90,18 +90,18 @@ export const purple700 = '#5943b6'
 export const purple800 = '#453894'
 export const purple900 = '#2f2a6b'
 export const purple950 = '#232150'
-export const gray10 = '#f5f5f5'
-export const gray50 = '#f0f0f0'
-export const gray100 = '#dbdbdb'
-export const gray200 = '#bfbfbf'
-export const gray300 = '#999'
-export const gray400 = '#868686'
-export const gray500 = '#666'
-export const gray600 = '#5e5e5e'
-export const gray700 = '#525252'
-export const gray800 = '#404040'
-export const gray900 = '#303030'
-export const gray950 = '#1f1f1f'
+export const gray10 = '#fbfafd'
+export const gray50 = '#ececef'
+export const gray100 = '#dcdcde'
+export const gray200 = '#bfbfc3'
+export const gray300 = '#a4a3a8'
+export const gray400 = '#89888d'
+export const gray500 = '#737278'
+export const gray600 = '#626168'
+export const gray700 = '#535158'
+export const gray800 = '#434248'
+export const gray900 = '#333238'
+export const gray950 = '#1f1e24'
 export const themeIndigo50 = '#f1f1ff'
 export const themeIndigo100 = '#dbdbf8'
 export const themeIndigo200 = '#c7c7f2'
@@ -232,8 +232,8 @@ export const tGrayA04 = 'rgba(0, 0, 0, 0.04)'
 export const tGrayA06 = 'rgba(0, 0, 0, 0.06)'
 export const tGrayA08 = 'rgba(0, 0, 0, 0.08)'
 export const tGrayA24 = 'rgba(0, 0, 0, 0.24)'
-export const glTextColor = '#303030'
-export const glTextColorSecondary = '#666'
+export const glTextColor = '#333238'
+export const glTextColorSecondary = '#737278'
 export const glFontWeightLight = '300'
 export const glFontWeightNormal = '400'
 export const glFontWeightBold = '600'
@@ -279,7 +279,7 @@ export const glFontSizeMonospaceSm = '0.6875rem'
 export const glMonospaceFont = ''
 export const glRegularFont = ''
 export const glFonts = '("monospace": ("Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace), "regular": (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))'
-export const borderColor = '#dbdbdb'
+export const borderColor = '#dcdcde'
 export const glBorderSize1 = '1px'
 export const glBorderSize2 = '2px'
 export const glBorderSize3 = '3px'
@@ -322,13 +322,13 @@ export const glBroadcastMessageTextMaxWidth = '58.375rem'
 export const glModalSmallWidth = '32rem'
 export const glModalMediumWidth = '48rem'
 export const glModalLargeWidth = '61.875rem'
-export const modalHeaderBorderColor = '#bfbfbf'
-export const modalFooterBorderColor = '#bfbfbf'
+export const modalHeaderBorderColor = '#bfbfc3'
+export const modalFooterBorderColor = '#bfbfc3'
 export const modalTitleLineHeight = '1.25rem'
 export const modalBackdropBg = '#000'
 export const modalBackdropOpacity = '0.64'
-export const bodyColor = '#303030'
-export const secondary = '#f0f0f0'
+export const bodyColor = '#333238'
+export const secondary = '#ececef'
 export const success = '#108548'
 export const info = '#1f75cb'
 export const warning = '#ab6100'
@@ -344,13 +344,13 @@ export const h5FontSize = '1.09375rem'
 export const h6FontSize = '0.875rem'
 export const spacer = '0.5rem'
 export const spacers = '(1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2rem, 6: 2.5rem, 7: 3rem, 8: 3.5rem, 9: 4rem)'
-export const tableAccentBg = '#f0f0f0'
-export const cardBorderColor = '#dbdbdb'
-export const cardCapBg = '#f5f5f5'
+export const tableAccentBg = '#ececef'
+export const cardBorderColor = '#dcdcde'
+export const cardCapBg = '#fbfafd'
 export const glFormInputSizes = '(xs: 5rem, sm: 10rem, md: 15rem, lg: 20rem, xl: 35rem)'
 export const popoverBg = '#fff'
 export const popoverArrowWidth = '0.5rem'
 export const popoverArrowHeight = '0.25rem'
 export const popoverArrowColor = '#fff'
-export const popoverArrowOuterColor = '#dbdbdb'
+export const popoverArrowOuterColor = '#dcdcde'
 export const tooltipOpacity = '1'

package/scss_to_js/scss_variables.json

@@ -489,63 +489,63 @@
     },
     {
       "name": "$gray-10",
-      "value": "#f5f5f5",
-      "compiledValue": "#f5f5f5"
+      "value": "#fbfafd",
+      "compiledValue": "#fbfafd"
     },
     {
       "name": "$gray-50",
-      "value": "#f0f0f0",
-      "compiledValue": "#f0f0f0"
+      "value": "#ececef",
+      "compiledValue": "#ececef"
     },
     {
       "name": "$gray-100",
-      "value": "#dbdbdb",
-      "compiledValue": "#dbdbdb"
+      "value": "#dcdcde",
+      "compiledValue": "#dcdcde"
     },
     {
       "name": "$gray-200",
-      "value": "#bfbfbf",
-      "compiledValue": "#bfbfbf"
+      "value": "#bfbfc3",
+      "compiledValue": "#bfbfc3"
     },
     {
       "name": "$gray-300",
-      "value": "#999",
-      "compiledValue": "#999"
+      "value": "#a4a3a8",
+      "compiledValue": "#a4a3a8"
     },
     {
       "name": "$gray-400",
-      "value": "#868686",
-      "compiledValue": "#868686"
+      "value": "#89888d",
+      "compiledValue": "#89888d"
     },
     {
       "name": "$gray-500",
-      "value": "#666",
-      "compiledValue": "#666"
+      "value": "#737278",
+      "compiledValue": "#737278"
     },
     {
       "name": "$gray-600",
-      "value": "#5e5e5e",
-      "compiledValue": "#5e5e5e"
+      "value": "#626168",
+      "compiledValue": "#626168"
     },
     {
       "name": "$gray-700",
-      "value": "#525252",
-      "compiledValue": "#525252"
+      "value": "#535158",
+      "compiledValue": "#535158"
     },
     {
       "name": "$gray-800",
-      "value": "#404040",
-      "compiledValue": "#404040"
+      "value": "#434248",
+      "compiledValue": "#434248"
     },
     {
       "name": "$gray-900",
-      "value": "#303030",
-      "compiledValue": "#303030"
+      "value": "#333238",
+      "compiledValue": "#333238"
     },
     {
       "name": "$gray-950",
-      "value": "#1f1f1f",
-      "compiledValue": "#1f1f1f"
+      "value": "#1f1e24",
+      "compiledValue": "#1f1e24"
     },
     {
       "name": "$theme-indigo-50",
@@ -1200,12 +1200,12 @@
     {
       "name": "$gl-text-color",
       "value": "$gray-900",
-      "compiledValue": "#303030"
+      "compiledValue": "#333238"
     },
     {
       "name": "$gl-text-color-secondary",
       "value": "$gray-500",
-      "compiledValue": "#666"
+      "compiledValue": "#737278"
     },
     {
       "name": "$gl-font-weight-light",
@@ -1459,7 +1459,7 @@
     {
       "name": "$border-color",
       "value": "$gray-100",
-      "compiledValue": "#dbdbdb"
+      "compiledValue": "#dcdcde"
     },
     {
       "name": "$gl-border-size-1",
@@ -1723,12 +1723,12 @@
     {
       "name": "$modal-header-border-color",
       "value": "$gray-200",
-      "compiledValue": "#bfbfbf"
+      "compiledValue": "#bfbfc3"
     },
     {
       "name": "$modal-footer-border-color",
       "value": "$gray-200",
-      "compiledValue": "#bfbfbf"
+      "compiledValue": "#bfbfc3"
     },
     {
       "name": "$modal-title-line-height",
@@ -1748,12 +1748,12 @@
     {
       "name": "$body-color",
       "value": "$gl-text-color",
-      "compiledValue": "#303030"
+      "compiledValue": "#333238"
     },
     {
       "name": "$secondary",
       "value": "$gray-50",
-      "compiledValue": "#f0f0f0"
+      "compiledValue": "#ececef"
     },
     {
       "name": "$success",
@@ -1880,17 +1880,17 @@
     {
       "name": "$table-accent-bg",
       "value": "$gray-50",
-      "compiledValue": "#f0f0f0"
+      "compiledValue": "#ececef"
     },
     {
       "name": "$card-border-color",
       "value": "$gray-100",
-      "compiledValue": "#dbdbdb"
+      "compiledValue": "#dcdcde"
     },
     {
       "name": "$card-cap-bg",
       "value": "$gray-10",
-      "compiledValue": "#f5f5f5"
+      "compiledValue": "#fbfafd"
     },
     {
       "name": "$gl-form-input-sizes",
@@ -1947,7 +1947,7 @@
     {
       "name": "$popover-arrow-outer-color",
       "value": "$gray-100",
-      "compiledValue": "#dbdbdb"
+      "compiledValue": "#dcdcde"
     },
     {
       "name": "$tooltip-opacity",

package/src/components/base/datepicker/datepicker.scss

@@ -20,13 +20,6 @@ $pd-week-color: $gray-500;
 
 @import 'pikaday/scss/pikaday';
 
-// Datepicker Max Width: 240px
-$gl-datepicker-width: $grid-size * 30;
-
-.gl-datepicker-input {
-  width: $gl-datepicker-width;
-}
-
 .gl-datepicker-actions {
   @include gl-font-sm;
   @include gl-absolute;

package/src/components/base/datepicker/datepicker.spec.js

@@ -413,4 +413,19 @@ describe('datepicker component', () => {
     expect(config.parse).not.toBeUndefined();
     expect(config.parse(dateString)).toEqual(parsedDate);
   });
+
+  it.each`
+    size         | expectedClass
+    ${undefined} | ${'gl-form-input-md'}
+    ${'small'}   | ${'gl-form-input-sm'}
+    ${'medium'}  | ${'gl-form-input-md'}
+  `('applies $expectedClass class when size is $size', ({ size, expectedClass }) => {
+    const wrapper = mountWithOptions({
+      propsData: {
+        size,
+      },
+    });
+
+    expect(wrapper.classes()).toContain(expectedClass);
+  });
 });

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

@@ -1,11 +1,11 @@
-import { GlDatepicker } from '../../../index';
+import { GlFormGroup, GlDatepicker } from '../../../index';
 import { disableControls } from '../../../utils/stories_utils';
 import { useFakeDate } from '../../../utils/use_fake_date';
 import { makeContainer } from '../../../utils/story_decorators/container';
 import readme from './datepicker.md';
 
 const defaults = {
-  components: { GlDatepicker },
+  components: { GlFormGroup, GlDatepicker },
   mixins: [useFakeDate()],
 };
 
@@ -63,6 +63,27 @@ export const WithClearButton = (_args, { argTypes }) => ({
 });
 WithClearButton.args = generateProps();
 
+export const DifferentSizes = (_args, { argTypes }) => ({
+  ...defaults,
+  props: Object.keys(argTypes),
+  data() {
+    return {
+      pickerValue: defaultDate,
+    };
+  },
+  template: `
+    <div class="gl-display-flex gl-flex-direction-column gl-gap-3">
+      <gl-form-group label="Size: sm">
+        <gl-datepicker showClearButton :max-date="maxDate" :min-date="minDate" v-model="pickerValue" size="small" />
+      </gl-form-group>
+      <gl-form-group label="Size: md (default)">
+        <gl-datepicker showClearButton :max-date="maxDate" :min-date="minDate" v-model="pickerValue" size="medium" />
+      </gl-form-group>
+    </div>
+  `,
+});
+DifferentSizes.args = generateProps();
+
 export default {
   title: 'base/datepicker',
   component: GlDatepicker,

package/src/components/base/datepicker/datepicker.vue

@@ -2,7 +2,7 @@
 <script>
 import { isString } from 'lodash';
 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.vue';
 import GlFormInput from '../form/form_input/form_input.vue';
@@ -171,6 +171,12 @@ export default {
       required: false,
       default: null,
     },
+    size: {
+      type: String,
+      required: false,
+      default: 'medium',
+      validator: (value) => Object.keys(datepickerSizeOptionsMap).includes(value),
+    },
   },
   data() {
     return {
@@ -204,6 +210,17 @@ export default {
 
       return null;
     },
+    datepickerClasses() {
+      return [
+        'gl-datepicker',
+        'd-inline-block',
+        'gl-w-full',
+        `gl-form-input-${this.datepickerSize}`,
+      ];
+    },
+    datepickerSize() {
+      return datepickerSizeOptionsMap[this.size];
+    },
   },
   watch: {
     value(val) {
@@ -338,7 +355,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-datepicker d-inline-block">
+  <div :class="datepickerClasses">
     <div v-if="showDefaultField" class="gl-relative">
       <!--
       @slot (optional) Input to display and bind the datepicker to. Defaults to `<gl-form-input />`
@@ -350,7 +367,7 @@ export default {
           v-model="textInput"
           :name="inputName"
           data-testid="gl-datepicker-input"
-          class="gl-datepicker-input"
+          class="gl-w-full"
           :class="renderClearButton ? 'gl-pr-9!' : 'gl-pr-7!'"
           :value="formattedDate"
           :placeholder="placeholder"

package/src/components/base/filtered_search/__snapshots__/filtered_search_term.spec.js.snap

@@ -1,13 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Filtered search term renders input with value in active mode 1`] = `
-<div data-testid="filtered-search-term" class="gl-h-auto gl-filtered-search-term">
-  <div active="true" cursor-position="end" value="test-value" class="gl-filtered-search-term-token">test-value</div>
+<div
+  class="gl-h-auto gl-filtered-search-term"
+  data-testid="filtered-search-term"
+>
+  <div
+    active="true"
+    class="gl-filtered-search-term-token"
+    cursor-position="end"
+    value="test-value"
+  >
+    test-value
+  </div>
 </div>
 `;
 
 exports[`Filtered search term renders value in inactive mode 1`] = `
-<div data-testid="filtered-search-term" class="gl-h-auto gl-filtered-search-term">
-  <div cursor-position="end" value="test-value" class="gl-filtered-search-term-token">test-value</div>
+<div
+  class="gl-h-auto gl-filtered-search-term"
+  data-testid="filtered-search-term"
+>
+  <div
+    class="gl-filtered-search-term-token"
+    cursor-position="end"
+    value="test-value"
+  >
+    test-value
+  </div>
 </div>
 `;

package/src/components/base/icon/__snapshots__/icon.spec.js.snap

@@ -1,7 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Icon component when created shows svg class "s8" and path "/path/to/icons.svg#check-circle" 1`] = `
-<svg data-testid="check-circle-icon" role="img" aria-hidden="true" class="gl-icon s8">
-  <use href="/path/to/icons.svg#check-circle"></use>
+<svg
+  aria-hidden="true"
+  class="gl-icon s8"
+  data-testid="check-circle-icon"
+  role="img"
+>
+  <use
+    href="/path/to/icons.svg#check-circle"
+  />
 </svg>
 `;