@gitlab/ui 56.2.0 → 56.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "56.2.0",
+  "version": "56.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -61,8 +61,8 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.2",
-    "bootstrap-vue": "2.20.1",
-    "dompurify": "^2.4.4",
+    "bootstrap-vue": "2.23.1",
+    "dompurify": "^2.4.5",
     "echarts": "^5.3.2",
     "iframe-resizer": "^4.3.2",
     "lodash": "^4.17.20",
@@ -85,10 +85,10 @@
     "@arkweid/lefthook": "0.7.7",
     "@babel/core": "^7.21.0",
     "@babel/preset-env": "^7.20.2",
-    "@gitlab/eslint-plugin": "18.1.0",
+    "@gitlab/eslint-plugin": "18.2.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.21.0",
+    "@gitlab/svgs": "3.22.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -113,14 +113,14 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "babel-preset-vue": "^2.0.2",
-    "bootstrap": "4.5.3",
+    "bootstrap": "4.6.2",
     "bootstrap-vue-vue3": "npm:bootstrap-vue@2.23.1",
     "cypress": "^11.2.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.34.0",
+    "eslint": "8.35.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-storybook": "0.6.10",
+    "eslint-plugin-storybook": "0.6.11",
     "file-loader": "^4.2.0",
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
@@ -134,7 +134,7 @@
     "pikaday": "^1.8.0",
     "plop": "^2.5.4",
     "postcss": "8.4.14",
-    "postcss-loader": "^3.0.0",
+    "postcss-loader": "^7.0.2",
     "postcss-scss": "4.0.4",
     "prettier": "2.6.2",
     "puppeteer": "15.5.0",

package/scss_to_js/scss_variables.js

@@ -250,6 +250,7 @@ export const glTextColorSecondary = '#737278'
 export const glTextColorDisabled = '#89888d'
 export const glFontWeightLight = '300'
 export const glFontWeightNormal = '400'
+export const glFontWeightSemibold = '500'
 export const glFontWeightBold = '600'
 export const glFontWeights = '("normal": 400, "bold": 600)'
 export const glLineHeight16 = '1rem'
@@ -340,6 +341,7 @@ export const modalTitleLineHeight = '1.25rem'
 export const modalBackdropBg = '#000'
 export const modalBackdropOpacity = '0.64'
 export const bodyColor = '#333238'
+export const enableValidationIcons = 'false'
 export const secondary = '#ececef'
 export const success = '#108548'
 export const info = '#1f75cb'

package/scss_to_js/scss_variables.json

@@ -1287,6 +1287,11 @@
       "value": "400",
       "compiledValue": "400"
     },
+    {
+      "name": "$gl-font-weight-semibold",
+      "value": "500",
+      "compiledValue": "500"
+    },
     {
       "name": "$gl-font-weight-bold",
       "value": "600",
@@ -1810,6 +1815,11 @@
       "value": "$gl-text-color",
       "compiledValue": "#333238"
     },
+    {
+      "name": "$enable-validation-icons",
+      "value": "false",
+      "compiledValue": "false"
+    },
     {
       "name": "$secondary",
       "value": "$gray-50",

package/src/components/base/form/form_checkbox/form_checkbox_group.vue

@@ -1,6 +1,6 @@
 <script>
 import { BFormCheckboxGroup } from 'bootstrap-vue';
-import formOptionsMixin from 'bootstrap-vue/src/mixins/form-options';
+import { formOptionsMixin } from 'bootstrap-vue/src/mixins/form-options';
 import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
 import GlFormCheckbox from './form_checkbox.vue';
 

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

@@ -31,17 +31,12 @@
 
   &.is-invalid {
     @include gl-inset-border-1-red-500;
-    background-image: none;
 
     &:focus {
       @include gl-focus($color: $red-500);
     }
   }
 
-  &.is-valid {
-    background-image: none;
-  }
-
   &::placeholder {
     @include gl-text-gray-400;
   }

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

@@ -1,6 +1,6 @@
 <script>
 import { BFormRadioGroup } from 'bootstrap-vue';
-import formOptionsMixin from 'bootstrap-vue/src/mixins/form-options';
+import { formOptionsMixin } from 'bootstrap-vue/src/mixins/form-options';
 import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
 import GlFormRadio from '../form_radio/form_radio.vue';
 

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

@@ -16,6 +16,7 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
   @include gl-line-height-normal;
   @include gl-py-3;
   @include gl-pl-4;
+  padding-right: $gl-spacing-scale-2 + $gl-spacing-scale-6;
   @include gl-h-auto;
   @include gl-inset-border-1-gray-400;
   @include gl-border-none;
@@ -36,12 +37,6 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
     @include gl-cursor-not-allowed;
   }
 
-  &.is-valid,
-  &.is-invalid {
-    padding-right: $gl-spacing-scale-2 + $gl-spacing-scale-6;
-    background-image: url($gl-icon-select-chevron-down);
-  }
-
   &.is-invalid:not(:disabled) {
     @include gl-inset-border-1-red-400;
 

package/src/components/base/popover/popover.vue

@@ -45,6 +45,11 @@ export default {
       required: false,
       default: popoverPlacements.top,
     },
+    boundaryPadding: {
+      type: [Number, String],
+      required: false,
+      default: 5,
+    },
   },
   computed: {
     customClass() {
@@ -74,6 +79,7 @@ export default {
     :triggers="triggers"
     :title="title"
     :placement="placement"
+    :boundary-padding="boundaryPadding"
     v-bind="$attrs"
     v-on="$listeners"
   >

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

@@ -1,4 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
+import { BTable } from 'bootstrap-vue';
 import { logWarning } from '../../../utils/utils';
 import { waitForAnimationFrame } from '../../../utils/test_utils';
 import { glTableLiteWarning } from './constants';
@@ -10,18 +11,22 @@ jest.mock('../../../utils/utils', () => ({
 }));
 
 describe('GlTable', () => {
+  let wrapper;
+
   const slotsTemplate = {
     empty: `
       <p>Placeholder empty text</p>`,
   };
 
   const factory = ({ props = {}, scopedSlots = {} } = {}) => {
-    shallowMount(Table, {
+    wrapper = shallowMount(Table, {
       scopedSlots,
       propsData: props,
     });
   };
 
+  const findBTable = () => wrapper.findComponent(BTable);
+
   afterEach(() => {
     logWarning.mockClear();
   });
@@ -46,4 +51,10 @@ describe('GlTable', () => {
 
     expect(logWarning).not.toHaveBeenCalled();
   });
+
+  it('adds gl-table class to tableClass prop', () => {
+    factory({ props: { tableClass: 'test-class' } });
+
+    expect(findBTable().props().tableClass).toEqual(['gl-table', 'test-class']);
+  });
 });

package/src/components/base/table/table.vue

@@ -11,11 +11,21 @@ const shouldUseFullTable = ({ $attrs, $scopedSlots }) => {
   );
 };
 
+const { tableClass } = BTable.options.props;
+
 export default {
   components: {
     BTable,
   },
   inheritAttrs: false,
+  props: {
+    tableClass,
+  },
+  computed: {
+    localTableClass() {
+      return ['gl-table', this.tableClass];
+    },
+  },
   mounted() {
     // logWarning will call isDev before logging any message
     // this additional call to isDev is being made to exit the condition early when run in production
@@ -27,7 +37,7 @@ export default {
 </script>
 
 <template>
-  <b-table class="gl-table" v-bind="$attrs" v-on="$listeners">
+  <b-table :table-class="localTableClass" v-bind="$attrs" v-on="$listeners">
     <template v-for="slot in Object.keys($scopedSlots)" #[slot]="scope">
       <slot :name="slot" v-bind="scope"></slot>
     </template>

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

@@ -0,0 +1,21 @@
+import { shallowMount } from '@vue/test-utils';
+import { BTableLite } from 'bootstrap-vue';
+import GlTableLite from './table_lite.vue';
+
+describe('GlTableLite', () => {
+  let wrapper;
+
+  const factory = (propsData) => {
+    wrapper = shallowMount(GlTableLite, {
+      propsData,
+    });
+  };
+
+  const findBTableLite = () => wrapper.findComponent(BTableLite);
+
+  it('adds gl-table class to tableClass prop', () => {
+    factory({ tableClass: 'test-class' });
+
+    expect(findBTableLite().props().tableClass).toEqual(['gl-table', 'test-class']);
+  });
+});

package/src/components/base/table_lite/table_lite.vue

@@ -1,16 +1,24 @@
 <script>
 import { BTableLite } from 'bootstrap-vue';
 
+const { tableClass } = BTableLite.options.props;
+
 export default {
   components: {
     BTableLite,
   },
   inheritAttrs: false,
+  props: { tableClass },
+  computed: {
+    localTableClass() {
+      return ['gl-table', this.tableClass];
+    },
+  },
 };
 </script>
 
 <template>
-  <b-table-lite class="gl-table" v-bind="$attrs" v-on="$listeners">
+  <b-table-lite :table-class="localTableClass" v-bind="$attrs" v-on="$listeners">
     <template v-for="slot in Object.keys($scopedSlots)" #[slot]="scope">
       <!-- @slot See https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-lite-slots for available slots. -->
       <slot :name="slot" v-bind="scope"></slot>

package/src/scss/utilities.scss

@@ -1085,6 +1085,14 @@
   border-color: $white !important;
 }
 
+.gl-border-transparent {
+  border-color: transparent;
+}
+
+.gl-border-transparent\! {
+  border-color: transparent !important;
+}
+
 .gl-border-t-transparent {
   border-top-color: transparent;
 }
@@ -1093,6 +1101,30 @@
   border-top-color: transparent !important;
 }
 
+.gl-border-r-transparent {
+  border-right-color: transparent;
+}
+
+.gl-border-r-transparent\! {
+  border-right-color: transparent !important;
+}
+
+.gl-border-b-transparent {
+  border-bottom-color: transparent;
+}
+
+.gl-border-b-transparent\! {
+  border-bottom-color: transparent !important;
+}
+
+.gl-border-l-transparent {
+  border-left-color: transparent;
+}
+
+.gl-border-l-transparent\! {
+  border-left-color: transparent !important;
+}
+
 .gl-border-gray-50 {
   border-color: $gray-50;
 }
@@ -1301,6 +1333,14 @@
   border-bottom-color: $gray-10 !important;
 }
 
+.gl-border-b-gray-50 {
+  border-bottom-color: $gray-50;
+}
+
+.gl-border-b-gray-50\! {
+  border-bottom-color: $gray-50 !important;
+}
+
 .gl-border-b-gray-100 {
   border-bottom-color: $gray-100;
 }
@@ -3544,6 +3584,14 @@
   flex-basis: 50% !important;
 }
 
+.gl-flex-basis-full {
+  flex-basis: 100%;
+}
+
+.gl-flex-basis-full\! {
+  flex-basis: 100% !important;
+}
+
 .gl-justify-content-center {
   justify-content: center;
 }
@@ -8019,6 +8067,14 @@
   font-weight: $gl-font-weight-normal !important;
 }
 
+.gl-font-weight-semibold {
+  font-weight: $gl-font-weight-semibold;
+}
+
+.gl-font-weight-semibold\! {
+  font-weight: $gl-font-weight-semibold !important;
+}
+
 .gl-font-weight-bold {
   font-weight: $gl-font-weight-bold;
 }

package/src/scss/utility-mixins/border.scss

@@ -99,10 +99,26 @@
   border-color: $white;
 }
 
+@mixin gl-border-transparent {
+  border-color: transparent;
+}
+
 @mixin gl-border-t-transparent {
   border-top-color: transparent;
 }
 
+@mixin gl-border-r-transparent {
+  border-right-color: transparent;
+}
+
+@mixin gl-border-b-transparent {
+  border-bottom-color: transparent;
+}
+
+@mixin gl-border-l-transparent {
+  border-left-color: transparent;
+}
+
 @mixin gl-border-gray-50 {
   border-color: $gray-50;
 }
@@ -191,6 +207,10 @@
   border-bottom-color: $gray-10;
 }
 
+@mixin gl-border-b-gray-50 {
+  border-bottom-color: $gray-50;
+}
+
 @mixin gl-border-b-gray-100 {
   border-bottom-color: $gray-100;
 }

package/src/scss/utility-mixins/flex.scss

@@ -253,6 +253,10 @@
   flex-basis: 50%;
 }
 
+@mixin gl-flex-basis-full {
+  flex-basis: 100%;
+}
+
 @mixin gl-justify-content-center {
   justify-content: center;
 }

package/src/scss/utility-mixins/typography.scss

@@ -121,6 +121,10 @@
   font-weight: $gl-font-weight-normal;
 }
 
+@mixin gl-font-weight-semibold {
+  font-weight: $gl-font-weight-semibold;
+}
+
 @mixin gl-font-weight-bold {
   font-weight: $gl-font-weight-bold;
 }

package/src/scss/variables.scss

@@ -319,6 +319,7 @@ $gl-text-color-disabled: $gray-400 !default;
 
 $gl-font-weight-light: 300;
 $gl-font-weight-normal: 400;
+$gl-font-weight-semibold: 500;
 $gl-font-weight-bold: 600;
 
 $gl-font-weights: (
@@ -483,6 +484,7 @@ $modal-backdrop-opacity: 0.64;
 // these should ideally be moved further up in the file to the compoent-relevant sections
 // but they can wait here for now
 $body-color: $gl-text-color !default;
+$enable-validation-icons: false;
 
 $secondary: $gray-50;
 $success: $green-500;