@gitlab/ui 103.7.1 → 104.0.0

package/dist/utils/constants.js

@@ -79,8 +79,6 @@ const buttonCategoryOptions = {
 const buttonVariantOptions = {
   default: 'default',
   confirm: 'confirm',
-  info: 'info (deprecated)',
-  success: 'success (deprecated)',
   danger: 'danger',
   dashed: 'dashed',
   link: 'link',
@@ -101,7 +99,6 @@ const dropdownVariantOptions = {
   default: 'default',
   confirm: 'confirm',
   info: 'info (deprecated)',
-  success: 'success (deprecated)',
   danger: 'danger',
   link: 'link'
 };
@@ -228,7 +225,7 @@ const modalButtonDefaults = {
 };
 const tabsButtonDefaults = {
   actionPrimary: {
-    variant: 'success',
+    variant: 'confirm',
     category: 'primary'
   },
   actionSecondary: {

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

@@ -53,7 +53,7 @@ const emptyMixin = extend({
         });
         if (!$empty) {
           $empty = h('div', {
-            class: ['text-center', 'my-2'],
+            class: ['gl-text-center', 'gl-my-3'],
             domProps: isFiltered ? htmlOrText(emptyFilteredHtml, emptyFilteredText) : htmlOrText(emptyHtml, emptyText)
           });
         }

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

@@ -118,7 +118,7 @@ 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
-            'position-relative': sortLabel
+            'gl-relative': sortLabel
           }, this.fieldClasses(field), sortClass],
           props: {
             variant,
@@ -163,7 +163,7 @@ const theadMixin = extend({
           domProps: htmlOrText(labelHtml, label)
         });
         const $srLabel = sortLabel ? h('span', {
-          staticClass: 'sr-only'
+          staticClass: 'gl-sr-only'
         }, ` (${sortLabel})`) : null;
 
         // Return the header cell

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "103.7.1",
+  "version": "104.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/button/button.scss

@@ -241,8 +241,7 @@
     );
   }
 
-  &.btn-confirm,
-  &.btn-info {
+  &.btn-confirm {
     @include gl-button-theme(
       $color: var(--gl-button-confirm-primary-foreground-color-default),
       $background-color: var(--gl-button-confirm-primary-background-color-default),
@@ -259,8 +258,7 @@
     );
   }
 
-  &.btn-confirm-secondary,
-  &.btn-info-secondary {
+  &.btn-confirm-secondary {
     @include gl-button-theme(
       $color: var(--gl-button-confirm-secondary-foreground-color-default),
       $background-color: var(--gl-button-confirm-secondary-background-color-default),
@@ -277,8 +275,7 @@
     );
   }
 
-  &.btn-confirm-tertiary,
-  &.btn-info-tertiary {
+  &.btn-confirm-tertiary {
     @include gl-button-theme(
       $color: var(--gl-button-confirm-tertiary-foreground-color-default),
       $background-color: var(--gl-button-confirm-tertiary-background-color-default),
@@ -349,8 +346,6 @@
   &.btn-default-secondary,
   &.btn-dashed-secondary,
   &.btn-confirm-secondary,
-  &.btn-info-secondary,
-  &.btn-success-secondary,
   &.btn-danger-secondary,
   &.btn-reset-secondary,
   &.btn-reset-tertiary {
@@ -363,8 +358,6 @@
   &.btn-default,
   &.btn-dashed,
   &.btn-confirm,
-  &.btn-info,
-  &.btn-success,
   &.btn-danger {
     &-tertiary {
       @if not $feature-button-border {
@@ -400,105 +393,6 @@
     }
   }
 
-  &.btn-success {
-    color: var(--gl-color-neutral-0); // The text is white in light and dark mode
-    @apply gl-bg-green-500;
-    @if $feature-button-border {
-      border-color: $green-600;
-    } @else {
-      box-shadow: inset 0 0 0 1px var(--green-600, #{$green-600});
-    }
-
-    &:hover {
-      @if $feature-button-border {
-        border-color: $green-800;
-        background-color: $green-600;
-      } @else {
-        @include gl-button-hover-border($green-800);
-        background-color: $green-600;
-      }
-    }
-
-    &:focus {
-      @if $feature-button-border {
-        border-color: $green-800;
-        background-color: $green-600;
-      } @else {
-        @include gl-focus($color: $green-800);
-        @apply gl-bg-green-600;
-      }
-    }
-
-    &:active,
-    &.active {
-      @apply gl-bg-green-700;
-
-      @if $feature-button-border {
-        border-color: $green-900;
-      } @else {
-        @include gl-focus($color: $green-900);
-
-        &:focus {
-          @include gl-focus($color: $green-900);
-        }
-      }
-    }
-  }
-
-  &.btn-success-secondary {
-    @apply gl-bg-white;
-  }
-
-  &.btn-success-secondary,
-  &.btn-success-tertiary {
-    @apply gl-bg-transparent;
-    @apply gl-text-green-500;
-    @apply gl-font-normal;
-    @if $feature-button-border {
-      border-color: $green-500;
-    } @else {
-      box-shadow: inset 0 0 0 1px var(--green-500, #{$green-500});
-    }
-
-    &:hover {
-      @if $feature-button-border {
-        @apply gl-text-green-700;
-        border-color: $green-700;
-        background-color: $green-50;
-      } @else {
-        @apply gl-text-green-700;
-        @include gl-button-hover-border($green-700);
-        background-color: $green-50;
-      }
-    }
-
-    &:focus {
-      @apply gl-text-green-700;
-      @if $feature-button-border {
-        border-color: $green-700;
-        background-color: $green-50;
-      } @else {
-        @include gl-focus($color: $green-700);
-        @apply gl-bg-green-50;
-      }
-    }
-
-    &:active,
-    &.active {
-      @apply gl-text-green-900;
-      @apply gl-bg-green-100;
-      @if $feature-button-border {
-        border-color: $green-900;
-      } @else {
-        @include gl-focus($color: $green-900);
-
-        &:focus {
-          @include gl-focus($color: $green-900);
-        }
-      }
-    }
-  }
-
   &.btn-sm {
     @apply gl-px-3;
     @apply gl-leading-normal;

package/src/components/base/dropdown/dropdown.scss

@@ -97,8 +97,6 @@
     }
 
     &.btn-confirm,
-    &.btn-info,
-    &.btn-success,
     &.btn-danger {
       margin-left: 1px;
     }

package/src/utils/constants.js

@@ -101,8 +101,6 @@ export const buttonCategoryOptions = {
 export const buttonVariantOptions = {
   default: 'default',
   confirm: 'confirm',
-  info: 'info (deprecated)',
-  success: 'success (deprecated)',
   danger: 'danger',
   dashed: 'dashed',
   link: 'link',
@@ -125,7 +123,6 @@ export const dropdownVariantOptions = {
   default: 'default',
   confirm: 'confirm',
   info: 'info (deprecated)',
-  success: 'success (deprecated)',
   danger: 'danger',
   link: 'link',
 };
@@ -266,7 +263,7 @@ export const modalButtonDefaults = {
 
 export const tabsButtonDefaults = {
   actionPrimary: {
-    variant: 'success',
+    variant: 'confirm',
     category: 'primary',
   },
   actionSecondary: {

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

@@ -61,7 +61,7 @@ export const emptyMixin = extend({
 
         if (!$empty) {
           $empty = h('div', {
-            class: ['text-center', 'my-2'],
+            class: ['gl-text-center', 'gl-my-3'],
             domProps: isFiltered
               ? htmlOrText(emptyFilteredHtml, emptyFilteredText)
               : htmlOrText(emptyHtml, emptyText)

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

@@ -118,7 +118,7 @@ export const theadMixin = extend({
             {
               // We need to make the header cell relative when we have
               // a `.sr-only` sort label to work around overflow issues
-              'position-relative': sortLabel
+              'gl-relative': sortLabel
             },
             this.fieldClasses(field),
             sortClass
@@ -174,7 +174,9 @@ export const theadMixin = extend({
           this.normalizeSlot(slotNames, scope) ||
           h('div', { domProps: htmlOrText(labelHtml, label) })
 
-        const $srLabel = sortLabel ? h('span', { staticClass: 'sr-only' }, ` (${sortLabel})`) : null
+        const $srLabel = sortLabel
+          ? h('span', { staticClass: 'gl-sr-only' }, ` (${sortLabel})`)
+          : null
 
         // Return the header cell
         return h(BTh, data, [$content, $srLabel].filter(identity))

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

@@ -122,7 +122,7 @@ describe('table > sorting', () => {
     expect(
       $ths
         .at(0)
-        .find('.sr-only')
+        .find('.gl-sr-only')
         .text()
     ).toContain(wrapper.vm.labelSortDesc)
 
@@ -133,7 +133,7 @@ describe('table > sorting', () => {
     expect(
       $ths
         .at(1)
-        .find('.sr-only')
+        .find('.gl-sr-only')
         .text()
     ).toContain(wrapper.vm.labelSortAsc)
 
@@ -144,7 +144,7 @@ describe('table > sorting', () => {
     expect(
       $ths
         .at(2)
-        .find('.sr-only')
+        .find('.gl-sr-only')
         .text()
     ).toContain(wrapper.vm.labelSortClear)
 
@@ -172,7 +172,7 @@ describe('table > sorting', () => {
     expect(
       $ths
         .at(0)
-        .find('.sr-only')
+        .find('.gl-sr-only')
         .text()
     ).toContain(wrapper.vm.labelSortAsc)
 
@@ -182,7 +182,7 @@ describe('table > sorting', () => {
     expect(
       $ths
         .at(1)
-        .find('.sr-only')
+        .find('.gl-sr-only')
         .text()
     ).toContain(wrapper.vm.labelSortAsc)
 
@@ -192,7 +192,7 @@ describe('table > sorting', () => {
     expect(
       $ths
         .at(2)
-        .find('.sr-only')
+        .find('.gl-sr-only')
         .text()
     ).toContain(wrapper.vm.labelSortClear)
 
@@ -228,7 +228,7 @@ describe('table > sorting', () => {
     expect(
       $ths
         .at(0)
-        .find('.sr-only')
+        .find('.gl-sr-only')
         .text()
     ).toContain(wrapper.vm.labelSortAsc)
 
@@ -238,7 +238,7 @@ describe('table > sorting', () => {
     expect(
       $ths
         .at(1)
-        .find('.sr-only')
+        .find('.gl-sr-only')
         .text()
     ).toContain(wrapper.vm.labelSortAsc)
 
@@ -248,7 +248,7 @@ describe('table > sorting', () => {
     expect(
       $ths
         .at(2)
-        .find('.sr-only')
+        .find('.gl-sr-only')
         .exists()
     ).toBe(false)
 
@@ -439,7 +439,7 @@ describe('table > sorting', () => {
     expect(columnA[2]).toBe('2')
     // Should have aria-* labels
     expect(wrapper.findAll('tfoot > tr > th[aria-sort]').length).toBe(2)
-    expect(wrapper.findAll('tfoot > tr > th > .sr-only').length).toBe(2)
+    expect(wrapper.findAll('tfoot > tr > th > .gl-sr-only').length).toBe(2)
 
     // Sort by first column
     await wrapper
@@ -463,7 +463,7 @@ describe('table > sorting', () => {
     expect(columnA[2]).toBe('3')
     // Should have aria-* labels
     expect(wrapper.findAll('tfoot > tr > th[aria-sort]').length).toBe(2)
-    expect(wrapper.findAll('tfoot > tr > th > .sr-only').length).toBe(3)
+    expect(wrapper.findAll('tfoot > tr > th > .gl-sr-only').length).toBe(3)
 
     // Click first column header again to reverse sort
     await wrapper
@@ -486,7 +486,7 @@ describe('table > sorting', () => {
     expect(columnA[2]).toBe('1')
     // Should have aria-* labels
     expect(wrapper.findAll('tfoot > tr > th[aria-sort]').length).toBe(2)
-    expect(wrapper.findAll('tfoot > tr > th > .sr-only').length).toBe(3)
+    expect(wrapper.findAll('tfoot > tr > th > .gl-sr-only').length).toBe(3)
 
     // Click second column header to sort by it (by using keydown.enter)
     await wrapper
@@ -529,7 +529,7 @@ describe('table > sorting', () => {
     expect(columnA[2]).toBe('2')
     // Should have aria-* labels
     expect(wrapper.findAll('tfoot > tr > th[aria-sort]').length).toBe(2)
-    expect(wrapper.findAll('tfoot > tr > th > .sr-only').length).toBe(2)
+    expect(wrapper.findAll('tfoot > tr > th > .gl-sr-only').length).toBe(2)
 
     wrapper.destroy()
   })
@@ -567,7 +567,7 @@ describe('table > sorting', () => {
     expect(columnA[2]).toBe('2')
     // Shouldn't have aria-* labels
     expect(wrapper.findAll('tfoot > tr > th[aria-sort]').length).toBe(0)
-    expect(wrapper.findAll('tfoot > tr > th > .sr-only').length).toBe(0)
+    expect(wrapper.findAll('tfoot > tr > th > .gl-sr-only').length).toBe(0)
 
     // Click first column
     await wrapper
@@ -589,7 +589,7 @@ describe('table > sorting', () => {
     expect(columnA[2]).toBe('2')
     // Shouldn't have aria-* labels
     expect(wrapper.findAll('tfoot > tr > th[aria-sort]').length).toBe(0)
-    expect(wrapper.findAll('tfoot > tr > th > .sr-only').length).toBe(0)
+    expect(wrapper.findAll('tfoot > tr > th > .gl-sr-only').length).toBe(0)
 
     // Click third column header
     await wrapper
@@ -611,7 +611,7 @@ describe('table > sorting', () => {
     expect(columnA[2]).toBe('2')
     // Shouldn't have aria-* labels
     expect(wrapper.findAll('tfoot > tr > th[aria-sort]').length).toBe(0)
-    expect(wrapper.findAll('tfoot > tr > th > .sr-only').length).toBe(0)
+    expect(wrapper.findAll('tfoot > tr > th > .gl-sr-only').length).toBe(0)
 
     wrapper.destroy()
   })
@@ -653,7 +653,7 @@ describe('table > sorting', () => {
     expect(
       $ths
         .at(0)
-        .find('.sr-only')
+        .find('.gl-sr-only')
         .text()
     ).toContain(wrapper.vm.labelSortDesc)
 
@@ -663,7 +663,7 @@ describe('table > sorting', () => {
     expect(
       $ths
         .at(1)
-        .find('.sr-only')
+        .find('.gl-sr-only')
         .text()
     ).toContain(wrapper.vm.labelSortDesc)
 
@@ -673,7 +673,7 @@ describe('table > sorting', () => {
     expect(
       $ths
         .at(2)
-        .find('.sr-only')
+        .find('.gl-sr-only')
         .exists()
     ).toBe(false)
 
@@ -704,7 +704,7 @@ describe('table > sorting', () => {
     expect(
       $ths
         .at(0)
-        .find('.sr-only')
+        .find('.gl-sr-only')
         .text()
     ).toContain(wrapper.vm.labelSortAsc)
 
@@ -714,7 +714,7 @@ describe('table > sorting', () => {
     expect(
       $ths
         .at(1)
-        .find('.sr-only')
+        .find('.gl-sr-only')
         .text()
     ).toContain(wrapper.vm.labelSortDesc)
 
@@ -724,7 +724,7 @@ describe('table > sorting', () => {
     expect(
       $ths
         .at(2)
-        .find('.sr-only')
+        .find('.gl-sr-only')
         .text()
     ).toContain(wrapper.vm.labelSortClear)