@gitlab/ui 127.1.0 → 128.0.0

package/src/components/base/toast/toast.scss

@@ -7,13 +7,20 @@
     .b-toaster-slot {
       @apply gl-w-auto;
       @apply gl-flex;
+      @apply gl-flex-col;
+      @apply gl-gap-4;
       bottom: $gl-spacing-scale-6;
       left: $gl-spacing-scale-6;
       right: auto;
-      flex-direction: column-reverse;
-      gap: $gl-spacing-scale-4;
       view-transition-name: gl-toast;
 
+      // Fallback for Firefox
+      // Fixes a bug where the view transition
+      // doesn’t work properly
+      @supports (-moz-appearance:none) {
+        view-transition-name: unset;
+      }
+
       @include media-breakpoint-down(xs) {
         @apply gl-w-full;
         left: 0;
@@ -22,6 +29,15 @@
     }
   }
 
+  .b-toast {
+    // Fallback for Firefox
+    // Fixes a bug where the view transition
+    // doesn’t work properly
+    @supports (-moz-appearance:none) {
+      transition: all $gl-transition-duration-medium $gl-easing-out-cubic;
+    }
+  }
+
   .gl-toast {
     @apply gl-text-base;
     @apply gl-py-5;

package/src/scss/bootstrap_vue.scss

@@ -7,7 +7,6 @@ $bv-enable-popover-variants: false;
 @import '../vendor/bootstrap-vue/src/utilities.scss';
 
 @import '../vendor/bootstrap-vue/src/components/dropdown/index.scss';
-@import '../vendor/bootstrap-vue/src/components/form-checkbox/index.scss';
 @import '../vendor/bootstrap-vue/src/components/form-input/index.scss';
 @import '../vendor/bootstrap-vue/src/components/form-radio/index.scss';
 @import '../vendor/bootstrap-vue/src/components/modal/index.scss';

package/src/vendor/bootstrap-vue/src/constants/components.js

@@ -11,8 +11,6 @@ export const NAME_DROPDOWN_ITEM = 'BDropdownItem'
 export const NAME_DROPDOWN_ITEM_BUTTON = 'BDropdownItemButton'
 export const NAME_DROPDOWN_TEXT = 'BDropdownText'
 export const NAME_FORM = 'BForm'
-export const NAME_FORM_CHECKBOX = 'BFormCheckbox'
-export const NAME_FORM_CHECKBOX_GROUP = 'BFormCheckboxGroup'
 export const NAME_FORM_GROUP = 'BFormGroup'
 export const NAME_FORM_INVALID_FEEDBACK = 'BFormInvalidFeedback'
 export const NAME_FORM_RADIO = 'BFormRadio'

package/src/vendor/bootstrap-vue/src/mixins/form-radio-check-group.js

@@ -6,7 +6,6 @@ import { looseEqual } from '../utils/loose-equal'
 import { makeModelMixin } from '../utils/model'
 import { omit, pick, sortKeys } from '../utils/object'
 import { makeProp, makePropsConfigurable } from '../utils/props'
-import { BFormCheckbox } from '../components/form-checkbox/form-checkbox'
 import { BFormRadio } from '../components/form-radio/form-radio'
 import { formControlMixin, props as formControlProps } from './form-control'
 import { formCustomMixin, props as formCustomProps } from './form-custom'
@@ -99,7 +98,7 @@ export const formRadioCheckGroupMixin = extend({
   render(h) {
     const { isRadioGroup } = this
     const attrs = pick(this.$attrs, PASS_DOWN_ATTRS)
-    const optionComponent = isRadioGroup ? BFormRadio : BFormCheckbox
+    const optionComponent = BFormRadio
 
     const $inputs = this.formOptions.map((option, index) => {
       const key = `BV_option_${index}`

package/src/vendor/bootstrap-vue/src/components/form-checkbox/_form-checkbox-group.scss

@@ -1 +0,0 @@
-@import "../../utilities";

package/src/vendor/bootstrap-vue/src/components/form-checkbox/_form-checkbox.scss

@@ -1,125 +0,0 @@
-// Adds control sizing to Bootstrap custom checkbox/switch inputs
-
-.custom-checkbox.b-custom-control-lg,
-.input-group-lg .custom-checkbox {
-  font-size: $font-size-lg;
-  line-height: $line-height-lg;
-  padding-left: $b-custom-control-gutter-lg + $b-custom-control-indicator-size-lg;
-
-  .custom-control-label::before {
-    top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) * 0.5;
-    left: -($b-custom-control-gutter-lg + $b-custom-control-indicator-size-lg);
-    width: $b-custom-control-indicator-size-lg;
-    height: $b-custom-control-indicator-size-lg;
-    @include border-radius($b-custom-checkbox-indicator-border-radius-lg);
-  }
-
-  .custom-control-label::after {
-    top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) * 0.5;
-    left: -($b-custom-control-gutter-lg + $b-custom-control-indicator-size-lg);
-    width: $b-custom-control-indicator-size-lg;
-    height: $b-custom-control-indicator-size-lg;
-    background-size: $b-custom-control-indicator-bg-size-lg;
-  }
-}
-
-.custom-checkbox.b-custom-control-sm,
-.input-group-sm .custom-checkbox {
-  font-size: $font-size-sm;
-  line-height: $line-height-sm;
-  padding-left: $b-custom-control-gutter-sm + $b-custom-control-indicator-size-sm;
-
-  .custom-control-label::before {
-    top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) * 0.5;
-    left: -($b-custom-control-gutter-sm + $b-custom-control-indicator-size-sm);
-    width: $b-custom-control-indicator-size-sm;
-    height: $b-custom-control-indicator-size-sm;
-    @include border-radius($b-custom-checkbox-indicator-border-radius-sm);
-  }
-
-  .custom-control-label::after {
-    top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) * 0.5;
-    left: -($b-custom-control-gutter-sm + $b-custom-control-indicator-size-sm);
-    width: $b-custom-control-indicator-size-sm;
-    height: $b-custom-control-indicator-size-sm;
-    background-size: $b-custom-control-indicator-bg-size-sm;
-  }
-}
-
-.custom-switch.b-custom-control-lg,
-.input-group-lg .custom-switch {
-  padding-left: $b-custom-switch-width-lg + $b-custom-control-gutter-lg;
-
-  .custom-control-label {
-    font-size: $font-size-lg;
-    line-height: $line-height-lg;
-
-    &::before {
-      top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) * 0.5;
-      height: $b-custom-control-indicator-size-lg;
-      left: -($b-custom-switch-width-lg + $b-custom-control-gutter-lg);
-      width: $b-custom-switch-width-lg;
-      border-radius: $b-custom-switch-indicator-border-radius-lg;
-    }
-
-    &::after {
-      top: calc(
-        #{(($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) * 0.5)} + #{$custom-control-indicator-border-width *
-          2}
-      );
-      left: calc(
-        #{- ($b-custom-switch-width-lg + $b-custom-control-gutter-lg)} + #{$custom-control-indicator-border-width *
-          2}
-      );
-      width: $b-custom-switch-indicator-size-lg;
-      height: $b-custom-switch-indicator-size-lg;
-      border-radius: $b-custom-switch-indicator-border-radius-lg;
-      background-size: $b-custom-control-indicator-bg-size-lg;
-    }
-  }
-
-  .custom-control-input:checked ~ .custom-control-label {
-    &::after {
-      transform: translateX($b-custom-switch-width-lg - $b-custom-control-indicator-size-lg);
-    }
-  }
-}
-
-.custom-switch.b-custom-control-sm,
-.input-group-sm .custom-switch {
-  padding-left: $b-custom-switch-width-sm + $b-custom-control-gutter-sm;
-
-  .custom-control-label {
-    font-size: $font-size-sm;
-    line-height: $line-height-sm;
-
-    &::before {
-      top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) * 0.5;
-      left: -($b-custom-switch-width-sm + $b-custom-control-gutter-sm);
-      width: $b-custom-switch-width-sm;
-      height: $b-custom-control-indicator-size-sm;
-      border-radius: $b-custom-switch-indicator-border-radius-sm;
-    }
-
-    &::after {
-      top: calc(
-        #{(($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) * 0.5)} + #{$custom-control-indicator-border-width *
-          2}
-      );
-      left: calc(
-        #{- ($b-custom-switch-width-sm + $b-custom-control-gutter-sm)} + #{$custom-control-indicator-border-width *
-          2}
-      );
-      width: $b-custom-switch-indicator-size-sm;
-      height: $b-custom-switch-indicator-size-sm;
-      border-radius: $b-custom-switch-indicator-border-radius-sm;
-      background-size: $b-custom-control-indicator-bg-size-sm;
-    }
-  }
-
-  .custom-control-input:checked ~ .custom-control-label {
-    &::after {
-      transform: translateX($b-custom-switch-width-sm - $b-custom-control-indicator-size-sm);
-    }
-  }
-}

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

@@ -1,42 +0,0 @@
-import { extend } from '../../vue'
-import { NAME_FORM_CHECKBOX_GROUP } from '../../constants/components'
-import { PROP_TYPE_ARRAY, PROP_TYPE_BOOLEAN } from '../../constants/props'
-import { sortKeys } from '../../utils/object'
-import { makeProp, makePropsConfigurable } from '../../utils/props'
-import {
-  MODEL_PROP_NAME,
-  formRadioCheckGroupMixin,
-  props as formRadioCheckGroupProps
-} from '../../mixins/form-radio-check-group'
-
-// --- Props ---
-
-export const props = makePropsConfigurable(
-  sortKeys({
-    ...formRadioCheckGroupProps,
-    [MODEL_PROP_NAME]: makeProp(PROP_TYPE_ARRAY, []),
-    // Custom switch styling
-    switches: makeProp(PROP_TYPE_BOOLEAN, false)
-  }),
-  NAME_FORM_CHECKBOX_GROUP
-)
-
-// --- Main component ---
-
-// @vue/component
-export const BFormCheckboxGroup = /*#__PURE__*/ extend({
-  name: NAME_FORM_CHECKBOX_GROUP,
-  // Includes render function
-  mixins: [formRadioCheckGroupMixin],
-  provide() {
-    return {
-      getBvCheckGroup: () => this
-    }
-  },
-  props,
-  computed: {
-    isRadioGroup() {
-      return false
-    }
-  }
-})

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

@@ -1,132 +0,0 @@
-import { extend } from '../../vue'
-import { NAME_FORM_CHECKBOX } from '../../constants/components'
-import { EVENT_NAME_CHANGE, MODEL_EVENT_NAME_PREFIX } from '../../constants/events'
-import { PROP_TYPE_ANY, PROP_TYPE_BOOLEAN } from '../../constants/props'
-import { isArray } from '../../utils/inspect'
-import { looseEqual } from '../../utils/loose-equal'
-import { looseIndexOf } from '../../utils/loose-index-of'
-import { sortKeys } from '../../utils/object'
-import { makeProp, makePropsConfigurable } from '../../utils/props'
-import {
-  MODEL_EVENT_NAME,
-  formRadioCheckMixin,
-  props as formRadioCheckProps
-} from '../../mixins/form-radio-check'
-
-// --- Constants ---
-
-const MODEL_PROP_NAME_INDETERMINATE = 'indeterminate'
-const MODEL_EVENT_NAME_INDETERMINATE = MODEL_EVENT_NAME_PREFIX + MODEL_PROP_NAME_INDETERMINATE
-
-// --- Props ---
-
-export const props = makePropsConfigurable(
-  sortKeys({
-    ...formRadioCheckProps,
-    // Not applicable in multi-check mode
-    [MODEL_PROP_NAME_INDETERMINATE]: makeProp(PROP_TYPE_BOOLEAN, false),
-    // Custom switch styling
-    switch: makeProp(PROP_TYPE_BOOLEAN, false),
-    // Not applicable in multi-check mode
-    uncheckedValue: makeProp(PROP_TYPE_ANY, false),
-    value: makeProp(PROP_TYPE_ANY, true)
-  }),
-  NAME_FORM_CHECKBOX
-)
-
-// --- Main component ---
-
-// @vue/component
-export const BFormCheckbox = /*#__PURE__*/ extend({
-  name: NAME_FORM_CHECKBOX,
-  mixins: [formRadioCheckMixin],
-  inject: {
-    getBvGroup: {
-      from: 'getBvCheckGroup',
-      default: () => () => null
-    }
-  },
-  props,
-  computed: {
-    bvGroup() {
-      return this.getBvGroup()
-    },
-    isChecked() {
-      const { value, computedLocalChecked: checked } = this
-      return isArray(checked) ? looseIndexOf(checked, value) > -1 : looseEqual(checked, value)
-    },
-    isRadio() {
-      return false
-    }
-  },
-  watch: {
-    [MODEL_PROP_NAME_INDETERMINATE](newValue, oldValue) {
-      if (!looseEqual(newValue, oldValue)) {
-        this.setIndeterminate(newValue)
-      }
-    }
-  },
-  mounted() {
-    // Set initial indeterminate state
-    this.setIndeterminate(this[MODEL_PROP_NAME_INDETERMINATE])
-  },
-  methods: {
-    computedLocalCheckedWatcher(newValue, oldValue) {
-      if (!looseEqual(newValue, oldValue)) {
-        this.$emit(MODEL_EVENT_NAME, newValue)
-
-        const $input = this.$refs.input
-        if ($input) {
-          this.$emit(MODEL_EVENT_NAME_INDETERMINATE, $input.indeterminate)
-        }
-      }
-    },
-
-    handleChange({ target: { checked, indeterminate } }) {
-      const { value, uncheckedValue } = this
-
-      // Update `computedLocalChecked`
-      let localChecked = this.computedLocalChecked
-      if (isArray(localChecked)) {
-        const index = looseIndexOf(localChecked, value)
-        if (checked && index < 0) {
-          // Add value to array
-          localChecked = localChecked.concat(value)
-        } else if (!checked && index > -1) {
-          // Remove value from array
-          localChecked = localChecked.slice(0, index).concat(localChecked.slice(index + 1))
-        }
-      } else {
-        localChecked = checked ? value : uncheckedValue
-      }
-      this.computedLocalChecked = localChecked
-
-      // Fire events in a `$nextTick()` to ensure the `v-model` is updated
-      this.$nextTick(() => {
-        // Change is only emitted on user interaction
-        this.$emit(EVENT_NAME_CHANGE, localChecked)
-
-        // If this is a child of a group, we emit a change event on it as well
-        if (this.isGroup) {
-          this.bvGroup.$emit(EVENT_NAME_CHANGE, localChecked)
-        }
-
-        this.$emit(MODEL_EVENT_NAME_INDETERMINATE, indeterminate)
-      })
-    },
-
-    setIndeterminate(state) {
-      // Indeterminate only supported in single checkbox mode
-      if (isArray(this.computedLocalChecked)) {
-        state = false
-      }
-
-      const $input = this.$refs.input
-      if ($input) {
-        $input.indeterminate = state
-        // Emit update event to prop
-        this.$emit(MODEL_EVENT_NAME_INDETERMINATE, state)
-      }
-    }
-  }
-})

package/src/vendor/bootstrap-vue/src/components/form-checkbox/index.js

@@ -1,4 +0,0 @@
-import { BFormCheckbox } from './form-checkbox'
-import { BFormCheckboxGroup } from './form-checkbox-group'
-
-export { BFormCheckbox, BFormCheckboxGroup }

package/src/vendor/bootstrap-vue/src/components/form-checkbox/index.scss

@@ -1,2 +0,0 @@
-@import "form-checkbox";
-@import "form-checkbox-group";