@gitlab/ui 105.1.1 → 105.3.0

package/src/vendor/bootstrap-vue/src/components/form/form-valid-feedback.spec.js

@@ -18,10 +18,10 @@ describe('form-valid-feedback', () => {
     wrapper.destroy()
   })
 
-  it('default should not have class d-block', async () => {
+  it('default should not have class !gl-block', async () => {
     const wrapper = mount(BFormValidFeedback)
 
-    expect(wrapper.classes()).not.toContain('d-block')
+    expect(wrapper.classes()).not.toContain('!gl-block')
 
     wrapper.destroy()
   })
@@ -70,7 +70,7 @@ describe('form-valid-feedback', () => {
     wrapper.destroy()
   })
 
-  it('should contain class d-block when force-show is set', async () => {
+  it('should contain class !gl-block when force-show is set', async () => {
     const wrapper = mount(BFormValidFeedback, {
       context: {
         props: {
@@ -79,12 +79,12 @@ describe('form-valid-feedback', () => {
       }
     })
 
-    expect(wrapper.classes()).toContain('d-block')
+    expect(wrapper.classes()).toContain('!gl-block')
 
     wrapper.destroy()
   })
 
-  it('should contain class d-block when state is true', async () => {
+  it('should contain class !gl-block when state is true', async () => {
     const wrapper = mount(BFormValidFeedback, {
       context: {
         props: {
@@ -93,12 +93,12 @@ describe('form-valid-feedback', () => {
       }
     })
 
-    expect(wrapper.classes()).toContain('d-block')
+    expect(wrapper.classes()).toContain('!gl-block')
 
     wrapper.destroy()
   })
 
-  it('should not contain class d-block when state is false', async () => {
+  it('should not contain class !gl-block when state is false', async () => {
     const wrapper = mount(BFormValidFeedback, {
       context: {
         props: {
@@ -107,12 +107,12 @@ describe('form-valid-feedback', () => {
       }
     })
 
-    expect(wrapper.classes()).not.toContain('d-block')
+    expect(wrapper.classes()).not.toContain('!gl-block')
 
     wrapper.destroy()
   })
 
-  it('should contain class d-block when force-show is true and state is false', async () => {
+  it('should contain class !gl-block when force-show is true and state is false', async () => {
     const wrapper = mount(BFormValidFeedback, {
       context: {
         props: {
@@ -122,7 +122,7 @@ describe('form-valid-feedback', () => {
       }
     })
 
-    expect(wrapper.classes()).toContain('d-block')
+    expect(wrapper.classes()).toContain('!gl-block')
 
     wrapper.destroy()
   })

package/src/vendor/bootstrap-vue/src/components/form-group/form-group.js

@@ -250,7 +250,7 @@ export const BFormGroup = {
           $label = h(
             labelTag,
             {
-              class: 'sr-only',
+              class: 'gl-sr-only',
               attrs: { id: labelId, for: labelFor || null }
             },
             [labelContent]
@@ -281,10 +281,10 @@ export const BFormGroup = {
               // See: https://github.com/twbs/bootstrap/issues/27805
               isHorizontal || isFieldset ? 'col-form-label' : '',
               // Emulate label padding top of `0` on legend when not horizontal
-              !isHorizontal && isFieldset ? 'pt-0' : '',
-              // If not horizontal and not a legend, we add 'd-block' class to label
+              !isHorizontal && isFieldset ? '!gl-pt-0' : '',
+              // If not horizontal and not a legend, we add '!gl-block' class to label
               // so that label-align works
-              !isHorizontal && !isFieldset ? 'd-block' : '',
+              !isHorizontal && !isFieldset ? '!gl-block' : '',
               labelSize ? `col-form-label-${labelSize}` : '',
               this.labelAlignClasses,
               this.labelClass

package/src/vendor/bootstrap-vue/src/components/form-group/form-group.spec.js

@@ -163,7 +163,7 @@ describe('form-group', () => {
 
     const $label = wrapper.find('label')
     expect($label.exists()).toBe(true)
-    expect($label.classes()).toContain('d-block')
+    expect($label.classes()).toContain('!gl-block')
     expect($label.text()).toEqual('test')
     expect($label.attributes('id')).toEqual(`${formGroupId}__BV_label_`)
     expect($label.attributes('for')).toEqual('input-id')
@@ -424,7 +424,7 @@ describe('form-group', () => {
     wrapper.destroy()
   })
 
-  it('Label sr-only works', async () => {
+  it('Label gl-sr-only works', async () => {
     const wrapper = mount(BFormGroup, {
       propsData: {
         id: 'group-id',
@@ -442,7 +442,7 @@ describe('form-group', () => {
 
     const $label = wrapper.find('label')
     expect($label.exists()).toBe(true)
-    expect($label.classes()).toContain('sr-only')
+    expect($label.classes()).toContain('gl-sr-only')
     expect($label.text()).toEqual('test')
   })
 

package/src/vendor/bootstrap-vue/src/components/modal/helpers/modal-manager.js

@@ -100,7 +100,7 @@ const ModalManager = /*#__PURE__*/ extend({
         // Create a temporary `div.modal-backdrop` to get computed z-index
         const div = document.createElement('div')
         addClass(div, 'modal-backdrop')
-        addClass(div, 'd-none')
+        addClass(div, 'gl-hidden')
         setStyle(div, 'display', 'none')
         document.body.appendChild(div)
         this.baseZIndex = toInteger(getCS(div).zIndex, DEFAULT_ZINDEX)

package/src/vendor/bootstrap-vue/src/components/table/helpers/mixin-sorting.js

@@ -261,7 +261,7 @@ export const sortingMixin = extend({
         'aria-sort': ariaSort
       }
     },
-    // A label to be placed in an `.sr-only` element in the header cell
+    // A label to be placed in an `.gl-sr-only` element in the header cell
     sortTheadThLabel(key, field, isFoot) {
       // No label if not a sortable table
       if (!this.isSortable || (isFoot && this.noFooterSorting)) {
@@ -292,7 +292,7 @@ export const sortingMixin = extend({
         // Non sortable column
         labelSorting = localSortBy ? this.labelSortClear : ''
       }
-      // Return the `.sr-only` sort label or `null` if no label
+      // Return the `.gl-sr-only` sort label or `null` if no label
       return trim(labelSorting) || null
     }
   }

package/src/vendor/bootstrap-vue/src/components/table/helpers/mixin-table-renderer.js

@@ -101,7 +101,7 @@ export const tableRendererMixin = extend({
           'table-borderless': this.borderless,
           'table-sm': this.small,
           // The following are b-table custom styles
-          border: this.outlined,
+          'gl-border': this.outlined,
           'b-table-fixed': this.fixed,
           'b-table-caption-top': this.captionTop,
           'b-table-no-border-collapse': this.noBorderCollapse

package/src/vendor/bootstrap-vue/src/components/table/helpers/mixin-thead.js

@@ -117,7 +117,7 @@ export const theadMixin = extend({
           class: [
             {
               // We need to make the header cell relative when we have
-              // a `.sr-only` sort label to work around overflow issues
+              // a `.gl-sr-only` sort label to work around overflow issues
               'gl-relative': sortLabel
             },
             this.fieldClasses(field),

package/src/vendor/bootstrap-vue/src/components/table/table-lite.spec.js

@@ -137,7 +137,7 @@ describe('table-lite', () => {
     wrapper.destroy()
   })
 
-  it('has class "border" when outlined=true', async () => {
+  it('has class "gl-border" when outlined=true', async () => {
     const wrapper = mount(BTableLite, {
       propsData: {
         items: items1,
@@ -148,7 +148,7 @@ describe('table-lite', () => {
 
     expect(wrapper).toBeDefined()
     expect(wrapper.element.tagName).toBe('TABLE')
-    expect(wrapper.classes()).toContain('border')
+    expect(wrapper.classes()).toContain('gl-border')
     expect(wrapper.classes()).toContain('table')
     expect(wrapper.classes()).toContain('b-table')
     expect(wrapper.classes().length).toBe(3)

package/src/vendor/bootstrap-vue/src/components/table/table-simple.spec.js

@@ -134,7 +134,7 @@ describe('table-simple', () => {
     wrapper.destroy()
   })
 
-  it('has class "border" when outlined=true', async () => {
+  it('has class "gl-border" when outlined=true', async () => {
     const wrapper = mount(BTableSimple, {
       propsData: {
         outlined: true
@@ -143,7 +143,7 @@ describe('table-simple', () => {
 
     expect(wrapper).toBeDefined()
     expect(wrapper.element.tagName).toBe('TABLE')
-    expect(wrapper.classes()).toContain('border')
+    expect(wrapper.classes()).toContain('gl-border')
     expect(wrapper.classes()).toContain('table')
     expect(wrapper.classes()).toContain('b-table')
     expect(wrapper.classes().length).toBe(3)

package/src/vendor/bootstrap-vue/src/components/table/table.spec.js

@@ -137,7 +137,7 @@ describe('table', () => {
     wrapper.destroy()
   })
 
-  it('has class "border" when outlined=true', async () => {
+  it('has class "gl-border" when outlined=true', async () => {
     const wrapper = mount(BTable, {
       propsData: {
         items: items1,
@@ -148,7 +148,7 @@ describe('table', () => {
 
     expect(wrapper).toBeDefined()
     expect(wrapper.element.tagName).toBe('TABLE')
-    expect(wrapper.classes()).toContain('border')
+    expect(wrapper.classes()).toContain('gl-border')
     expect(wrapper.classes()).toContain('table')
     expect(wrapper.classes()).toContain('b-table')
     expect(wrapper.classes().length).toBe(3)

package/tailwind.defaults.js

@@ -229,6 +229,14 @@ function addCustomDefinitions({ addComponents, addUtilities }) {
       'margin-bottom': '1.5rem',
       color: 'var(--gl-text-color-heading)',
     },
+    /**
+     * gl-heading-scale classes define default properties for heading typography
+     * based on font-size scale value and default or fixed sizing.
+     *
+     * Note: overrides Bootstrap margin-top, other margin is determined by
+     * individual context. Larger headings have reduced letter spacing.
+     * Display heading (800) has different line height.
+     */
     '.heading-scale-100': {
       'font-weight': '600',
       'margin-top': '0',