@gitlab/ui 105.1.1 → 105.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/components/base/datepicker/datepicker.js +2 -2
  3. package/dist/components/base/paginated_list/paginated_list.js +1 -1
  4. package/dist/components/regions/dashboard_skeleton/dashboard_skeleton.js +2 -2
  5. package/dist/components/utilities/friendly_wrap/friendly_wrap.js +1 -1
  6. package/dist/index.css +1 -1
  7. package/dist/index.css.map +1 -1
  8. package/dist/tailwind.css +1 -1
  9. package/dist/tailwind.css.map +1 -1
  10. package/dist/tokens/build/js/tokens.dark.js +33 -1
  11. package/dist/tokens/build/js/tokens.js +33 -1
  12. package/dist/tokens/css/tokens.css +32 -0
  13. package/dist/tokens/css/tokens.dark.css +32 -0
  14. package/dist/tokens/js/tokens.dark.js +32 -0
  15. package/dist/tokens/js/tokens.js +32 -0
  16. package/dist/tokens/json/tokens.dark.json +887 -0
  17. package/dist/tokens/json/tokens.json +887 -0
  18. package/dist/tokens/scss/_tokens.dark.scss +32 -0
  19. package/dist/tokens/scss/_tokens.scss +32 -0
  20. package/dist/tokens/scss/_tokens_custom_properties.scss +32 -0
  21. package/dist/tokens/tokens_table.js +1 -1
  22. package/dist/vendor/bootstrap-vue/src/components/dropdown/dropdown.js +1 -1
  23. package/dist/vendor/bootstrap-vue/src/components/form/form-invalid-feedback.js +1 -1
  24. package/dist/vendor/bootstrap-vue/src/components/form/form-valid-feedback.js +1 -1
  25. package/dist/vendor/bootstrap-vue/src/components/form-group/form-group.js +4 -4
  26. package/dist/vendor/bootstrap-vue/src/components/modal/helpers/modal-manager.js +1 -1
  27. package/dist/vendor/bootstrap-vue/src/components/table/helpers/mixin-sorting.js +2 -2
  28. package/dist/vendor/bootstrap-vue/src/components/table/helpers/mixin-table-renderer.js +1 -1
  29. package/dist/vendor/bootstrap-vue/src/components/table/helpers/mixin-thead.js +1 -1
  30. package/package.json +2 -1
  31. package/src/components/base/datepicker/datepicker.vue +2 -2
  32. package/src/components/base/paginated_list/paginated_list.vue +1 -1
  33. package/src/components/regions/dashboard_skeleton/dashboard_skeleton.vue +12 -10
  34. package/src/components/utilities/friendly_wrap/friendly_wrap.vue +1 -1
  35. package/src/tokens/build/css/tokens.css +32 -0
  36. package/src/tokens/build/css/tokens.dark.css +32 -0
  37. package/src/tokens/build/js/tokens.dark.js +32 -0
  38. package/src/tokens/build/js/tokens.js +32 -0
  39. package/src/tokens/build/json/tokens.dark.json +887 -0
  40. package/src/tokens/build/json/tokens.json +887 -0
  41. package/src/tokens/build/scss/_tokens.dark.scss +32 -0
  42. package/src/tokens/build/scss/_tokens.scss +32 -0
  43. package/src/tokens/build/scss/_tokens_custom_properties.scss +32 -0
  44. package/src/tokens/contextual/illustration.tokens.json +366 -0
  45. package/src/tokens/tokens_table.vue +1 -1
  46. package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown.js +1 -1
  47. package/src/vendor/bootstrap-vue/src/components/form/form-invalid-feedback.js +1 -1
  48. package/src/vendor/bootstrap-vue/src/components/form/form-invalid-feedback.spec.js +10 -10
  49. package/src/vendor/bootstrap-vue/src/components/form/form-valid-feedback.js +1 -1
  50. package/src/vendor/bootstrap-vue/src/components/form/form-valid-feedback.spec.js +10 -10
  51. package/src/vendor/bootstrap-vue/src/components/form-group/form-group.js +4 -4
  52. package/src/vendor/bootstrap-vue/src/components/form-group/form-group.spec.js +3 -3
  53. package/src/vendor/bootstrap-vue/src/components/modal/helpers/modal-manager.js +1 -1
  54. package/src/vendor/bootstrap-vue/src/components/table/helpers/mixin-sorting.js +2 -2
  55. package/src/vendor/bootstrap-vue/src/components/table/helpers/mixin-table-renderer.js +1 -1
  56. package/src/vendor/bootstrap-vue/src/components/table/helpers/mixin-thead.js +1 -1
  57. package/src/vendor/bootstrap-vue/src/components/table/table-lite.spec.js +2 -2
  58. package/src/vendor/bootstrap-vue/src/components/table/table-simple.spec.js +2 -2
  59. package/src/vendor/bootstrap-vue/src/components/table/table.spec.js +2 -2
@@ -18,10 +18,10 @@ describe('form-valid-feedback', () => {
18
18
  wrapper.destroy()
19
19
  })
20
20
 
21
- it('default should not have class d-block', async () => {
21
+ it('default should not have class !gl-block', async () => {
22
22
  const wrapper = mount(BFormValidFeedback)
23
23
 
24
- expect(wrapper.classes()).not.toContain('d-block')
24
+ expect(wrapper.classes()).not.toContain('!gl-block')
25
25
 
26
26
  wrapper.destroy()
27
27
  })
@@ -70,7 +70,7 @@ describe('form-valid-feedback', () => {
70
70
  wrapper.destroy()
71
71
  })
72
72
 
73
- it('should contain class d-block when force-show is set', async () => {
73
+ it('should contain class !gl-block when force-show is set', async () => {
74
74
  const wrapper = mount(BFormValidFeedback, {
75
75
  context: {
76
76
  props: {
@@ -79,12 +79,12 @@ describe('form-valid-feedback', () => {
79
79
  }
80
80
  })
81
81
 
82
- expect(wrapper.classes()).toContain('d-block')
82
+ expect(wrapper.classes()).toContain('!gl-block')
83
83
 
84
84
  wrapper.destroy()
85
85
  })
86
86
 
87
- it('should contain class d-block when state is true', async () => {
87
+ it('should contain class !gl-block when state is true', async () => {
88
88
  const wrapper = mount(BFormValidFeedback, {
89
89
  context: {
90
90
  props: {
@@ -93,12 +93,12 @@ describe('form-valid-feedback', () => {
93
93
  }
94
94
  })
95
95
 
96
- expect(wrapper.classes()).toContain('d-block')
96
+ expect(wrapper.classes()).toContain('!gl-block')
97
97
 
98
98
  wrapper.destroy()
99
99
  })
100
100
 
101
- it('should not contain class d-block when state is false', async () => {
101
+ it('should not contain class !gl-block when state is false', async () => {
102
102
  const wrapper = mount(BFormValidFeedback, {
103
103
  context: {
104
104
  props: {
@@ -107,12 +107,12 @@ describe('form-valid-feedback', () => {
107
107
  }
108
108
  })
109
109
 
110
- expect(wrapper.classes()).not.toContain('d-block')
110
+ expect(wrapper.classes()).not.toContain('!gl-block')
111
111
 
112
112
  wrapper.destroy()
113
113
  })
114
114
 
115
- it('should contain class d-block when force-show is true and state is false', async () => {
115
+ it('should contain class !gl-block when force-show is true and state is false', async () => {
116
116
  const wrapper = mount(BFormValidFeedback, {
117
117
  context: {
118
118
  props: {
@@ -122,7 +122,7 @@ describe('form-valid-feedback', () => {
122
122
  }
123
123
  })
124
124
 
125
- expect(wrapper.classes()).toContain('d-block')
125
+ expect(wrapper.classes()).toContain('!gl-block')
126
126
 
127
127
  wrapper.destroy()
128
128
  })
@@ -250,7 +250,7 @@ export const BFormGroup = {
250
250
  $label = h(
251
251
  labelTag,
252
252
  {
253
- class: 'sr-only',
253
+ class: 'gl-sr-only',
254
254
  attrs: { id: labelId, for: labelFor || null }
255
255
  },
256
256
  [labelContent]
@@ -281,10 +281,10 @@ export const BFormGroup = {
281
281
  // See: https://github.com/twbs/bootstrap/issues/27805
282
282
  isHorizontal || isFieldset ? 'col-form-label' : '',
283
283
  // Emulate label padding top of `0` on legend when not horizontal
284
- !isHorizontal && isFieldset ? 'pt-0' : '',
285
- // If not horizontal and not a legend, we add 'd-block' class to label
284
+ !isHorizontal && isFieldset ? '!gl-pt-0' : '',
285
+ // If not horizontal and not a legend, we add '!gl-block' class to label
286
286
  // so that label-align works
287
- !isHorizontal && !isFieldset ? 'd-block' : '',
287
+ !isHorizontal && !isFieldset ? '!gl-block' : '',
288
288
  labelSize ? `col-form-label-${labelSize}` : '',
289
289
  this.labelAlignClasses,
290
290
  this.labelClass
@@ -163,7 +163,7 @@ describe('form-group', () => {
163
163
 
164
164
  const $label = wrapper.find('label')
165
165
  expect($label.exists()).toBe(true)
166
- expect($label.classes()).toContain('d-block')
166
+ expect($label.classes()).toContain('!gl-block')
167
167
  expect($label.text()).toEqual('test')
168
168
  expect($label.attributes('id')).toEqual(`${formGroupId}__BV_label_`)
169
169
  expect($label.attributes('for')).toEqual('input-id')
@@ -424,7 +424,7 @@ describe('form-group', () => {
424
424
  wrapper.destroy()
425
425
  })
426
426
 
427
- it('Label sr-only works', async () => {
427
+ it('Label gl-sr-only works', async () => {
428
428
  const wrapper = mount(BFormGroup, {
429
429
  propsData: {
430
430
  id: 'group-id',
@@ -442,7 +442,7 @@ describe('form-group', () => {
442
442
 
443
443
  const $label = wrapper.find('label')
444
444
  expect($label.exists()).toBe(true)
445
- expect($label.classes()).toContain('sr-only')
445
+ expect($label.classes()).toContain('gl-sr-only')
446
446
  expect($label.text()).toEqual('test')
447
447
  })
448
448
 
@@ -100,7 +100,7 @@ const ModalManager = /*#__PURE__*/ extend({
100
100
  // Create a temporary `div.modal-backdrop` to get computed z-index
101
101
  const div = document.createElement('div')
102
102
  addClass(div, 'modal-backdrop')
103
- addClass(div, 'd-none')
103
+ addClass(div, 'gl-hidden')
104
104
  setStyle(div, 'display', 'none')
105
105
  document.body.appendChild(div)
106
106
  this.baseZIndex = toInteger(getCS(div).zIndex, DEFAULT_ZINDEX)
@@ -261,7 +261,7 @@ export const sortingMixin = extend({
261
261
  'aria-sort': ariaSort
262
262
  }
263
263
  },
264
- // A label to be placed in an `.sr-only` element in the header cell
264
+ // A label to be placed in an `.gl-sr-only` element in the header cell
265
265
  sortTheadThLabel(key, field, isFoot) {
266
266
  // No label if not a sortable table
267
267
  if (!this.isSortable || (isFoot && this.noFooterSorting)) {
@@ -292,7 +292,7 @@ export const sortingMixin = extend({
292
292
  // Non sortable column
293
293
  labelSorting = localSortBy ? this.labelSortClear : ''
294
294
  }
295
- // Return the `.sr-only` sort label or `null` if no label
295
+ // Return the `.gl-sr-only` sort label or `null` if no label
296
296
  return trim(labelSorting) || null
297
297
  }
298
298
  }
@@ -101,7 +101,7 @@ export const tableRendererMixin = extend({
101
101
  'table-borderless': this.borderless,
102
102
  'table-sm': this.small,
103
103
  // The following are b-table custom styles
104
- border: this.outlined,
104
+ 'gl-border': this.outlined,
105
105
  'b-table-fixed': this.fixed,
106
106
  'b-table-caption-top': this.captionTop,
107
107
  'b-table-no-border-collapse': this.noBorderCollapse
@@ -117,7 +117,7 @@ export const theadMixin = extend({
117
117
  class: [
118
118
  {
119
119
  // We need to make the header cell relative when we have
120
- // a `.sr-only` sort label to work around overflow issues
120
+ // a `.gl-sr-only` sort label to work around overflow issues
121
121
  'gl-relative': sortLabel
122
122
  },
123
123
  this.fieldClasses(field),
@@ -137,7 +137,7 @@ describe('table-lite', () => {
137
137
  wrapper.destroy()
138
138
  })
139
139
 
140
- it('has class "border" when outlined=true', async () => {
140
+ it('has class "gl-border" when outlined=true', async () => {
141
141
  const wrapper = mount(BTableLite, {
142
142
  propsData: {
143
143
  items: items1,
@@ -148,7 +148,7 @@ describe('table-lite', () => {
148
148
 
149
149
  expect(wrapper).toBeDefined()
150
150
  expect(wrapper.element.tagName).toBe('TABLE')
151
- expect(wrapper.classes()).toContain('border')
151
+ expect(wrapper.classes()).toContain('gl-border')
152
152
  expect(wrapper.classes()).toContain('table')
153
153
  expect(wrapper.classes()).toContain('b-table')
154
154
  expect(wrapper.classes().length).toBe(3)
@@ -134,7 +134,7 @@ describe('table-simple', () => {
134
134
  wrapper.destroy()
135
135
  })
136
136
 
137
- it('has class "border" when outlined=true', async () => {
137
+ it('has class "gl-border" when outlined=true', async () => {
138
138
  const wrapper = mount(BTableSimple, {
139
139
  propsData: {
140
140
  outlined: true
@@ -143,7 +143,7 @@ describe('table-simple', () => {
143
143
 
144
144
  expect(wrapper).toBeDefined()
145
145
  expect(wrapper.element.tagName).toBe('TABLE')
146
- expect(wrapper.classes()).toContain('border')
146
+ expect(wrapper.classes()).toContain('gl-border')
147
147
  expect(wrapper.classes()).toContain('table')
148
148
  expect(wrapper.classes()).toContain('b-table')
149
149
  expect(wrapper.classes().length).toBe(3)
@@ -137,7 +137,7 @@ describe('table', () => {
137
137
  wrapper.destroy()
138
138
  })
139
139
 
140
- it('has class "border" when outlined=true', async () => {
140
+ it('has class "gl-border" when outlined=true', async () => {
141
141
  const wrapper = mount(BTable, {
142
142
  propsData: {
143
143
  items: items1,
@@ -148,7 +148,7 @@ describe('table', () => {
148
148
 
149
149
  expect(wrapper).toBeDefined()
150
150
  expect(wrapper.element.tagName).toBe('TABLE')
151
- expect(wrapper.classes()).toContain('border')
151
+ expect(wrapper.classes()).toContain('gl-border')
152
152
  expect(wrapper.classes()).toContain('table')
153
153
  expect(wrapper.classes()).toContain('b-table')
154
154
  expect(wrapper.classes().length).toBe(3)