@gitlab/ui 94.10.0 → 95.0.0

package/src/utils/constants.js

@@ -1,9 +1,5 @@
 import { POSITION } from '../components/utilities/truncate/constants';
 
-function appendDefaultOption(options) {
-  return { ...options, default: '' };
-}
-
 export const COMMA = ',';
 
 export const CONTRAST_LEVELS = [
@@ -33,15 +29,11 @@ export const HEX_REGEX = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
 
 export const LEFT_MOUSE_BUTTON = 0;
 
-export const variantOptions = {
+export const progressBarVariantOptions = {
   primary: 'primary',
-  secondary: 'secondary',
   success: 'success',
   warning: 'warning',
   danger: 'danger',
-  info: 'info',
-  light: 'light',
-  dark: 'dark',
 };
 
 export const badgeSizeOptions = {
@@ -290,8 +282,6 @@ export const tokenVariants = ['default', 'search-type', 'search-value'];
 
 export const resizeDebounceTime = 200;
 
-export const variantOptionsWithNoDefault = appendDefaultOption(variantOptions);
-
 // Datetime constants
 export const defaultDateFormat = 'YYYY-MM-DD';
 

package/src/vendor/bootstrap-vue/src/components/modal/MODIFICATIONS.md

@@ -0,0 +1,27 @@
+# Modifications to Vendored Code
+
+**Library**: BootstrapVue  
+**Version**: 2.23.1
+
+This file documents modifications made to the original BootstrapVue component files.
+
+## Removed unnecessary properties 
+
+The following properties have been removed as they are no longer supported in our implementation:
+
+- `headerBgVariant`
+- `headerBorderVariant`
+- `headerTextVariant`
+- `headerCloseVariant`
+- `bodyBgVariant`
+- `bodyTextVariant`
+- `footerBgVariant`
+- `footerBorderVariant`
+- `footerTextVariant`
+
+These properties were removed to streamline the component for our use case, as they are no longer necessary in our project.
+The following files have been modified from the original:
+
+- `modal.js`: Removed unnecessary properties.
+- `package.json`: Removed unnecessary properties.
+- `README.md`: Removed unnecessary properties.

package/src/vendor/bootstrap-vue/src/components/modal/README.md

@@ -469,125 +469,9 @@ Vertically center your modal in the viewport by setting the `centered` prop.
 
 Feel free to mix vertically `centered` with `scrollable`.
 
-### Variants
+### Pass CSS classes
 
-Control the header, footer, and body background and text variants by setting the
-`header-bg-variant`, `header-text-variant`, `body-bg-variant`, `body-text-variant`,
-`footer-bg-variant`, and `footer-text-variant` props. Use any of the standard Bootstrap variants
-such as `danger`, `warning`, `info`, `success`, `dark`, `light`, etc.
-
-The variants for the bottom border of the header and top border of the footer can be controlled by
-the `header-border-variant` and `footer-border-variant` props respectively.
-
-```html
-<template>
-  <div>
-    <b-button @click="show=true" variant="primary">Show Modal</b-button>
-
-    <b-modal
-      v-model="show"
-      title="Modal Variants"
-      :header-bg-variant="headerBgVariant"
-      :header-text-variant="headerTextVariant"
-      :body-bg-variant="bodyBgVariant"
-      :body-text-variant="bodyTextVariant"
-      :footer-bg-variant="footerBgVariant"
-      :footer-text-variant="footerTextVariant"
-    >
-      <b-container fluid>
-        <b-row class="mb-1 text-center">
-          <b-col cols="3"></b-col>
-          <b-col>Background</b-col>
-          <b-col>Text</b-col>
-        </b-row>
-
-        <b-row class="mb-1">
-          <b-col cols="3">Header</b-col>
-          <b-col>
-            <b-form-select
-              v-model="headerBgVariant"
-              :options="variants"
-            ></b-form-select>
-          </b-col>
-          <b-col>
-            <b-form-select
-              v-model="headerTextVariant"
-              :options="variants"
-            ></b-form-select>
-          </b-col>
-        </b-row>
-
-        <b-row class="mb-1">
-          <b-col cols="3">Body</b-col>
-          <b-col>
-            <b-form-select
-              v-model="bodyBgVariant"
-              :options="variants"
-            ></b-form-select>
-          </b-col>
-          <b-col>
-            <b-form-select
-              v-model="bodyTextVariant"
-              :options="variants"
-            ></b-form-select>
-          </b-col>
-        </b-row>
-
-        <b-row>
-          <b-col cols="3">Footer</b-col>
-          <b-col>
-            <b-form-select
-              v-model="footerBgVariant"
-              :options="variants"
-            ></b-form-select>
-          </b-col>
-          <b-col>
-            <b-form-select
-              v-model="footerTextVariant"
-              :options="variants"
-            ></b-form-select>
-          </b-col>
-        </b-row>
-      </b-container>
-
-      <template #modal-footer>
-        <div class="w-100">
-          <p class="float-left">Modal Footer Content</p>
-          <b-button
-            variant="primary"
-            size="sm"
-            class="float-right"
-            @click="show=false"
-          >
-            Close
-          </b-button>
-        </div>
-      </template>
-    </b-modal>
-  </div>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        show: false,
-        variants: ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'light', 'dark'],
-        headerBgVariant: 'dark',
-        headerTextVariant: 'light',
-        bodyBgVariant: 'light',
-        bodyTextVariant: 'dark',
-        footerBgVariant: 'warning',
-        footerTextVariant: 'dark'
-      }
-    }
-  }
-</script>
-
-<!-- b-modal-variants.vue -->
-```
-
-You can also apply arbitrary classes to the modal dialog container, content (modal window itself),
+You can apply arbitrary classes to the modal dialog container, content (modal window itself),
 header, body and footer via the `modal-class`, `content-class`, `header-class`, `body-class` and
 `footer-class` props, respectively. The props accept either a string or array of strings.
 

package/src/vendor/bootstrap-vue/src/components/modal/index.d.ts

@@ -28,18 +28,8 @@ export interface BvMsgBoxOptions {
   noFade?: boolean
   noCloseOnBackdrop?: boolean
   noCloseOnEsc?: boolean
-  headerBgVariant?: string
-  headerBorderVariant?: string
-  headerTextVariant?: string
-  headerCloseVariant?: string
   headerClass?: string | string[] | Array<any>
-  bodyBgVariant?: string
-  bodyBorderVariant?: string
-  bodyTextVariant?: string
   bodyClass?: string | string[] | Array<any>
-  footerBgVariant?: string
-  footerBorderVariant?: string
-  footerTextVariant?: string
   footerClass?: string | string[] | Array<any>
   headerCloseLabel?: string
   buttonSize?: string

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

@@ -113,9 +113,7 @@ export const props = makePropsConfigurable(
         return isUndefinedOrNull(value) || arrayIncludes(BUTTONS, value)
       }
     ),
-    bodyBgVariant: makeProp(PROP_TYPE_STRING),
     bodyClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
-    bodyTextVariant: makeProp(PROP_TYPE_STRING),
     busy: makeProp(PROP_TYPE_BOOLEAN, false),
     buttonSize: makeProp(PROP_TYPE_STRING),
     cancelDisabled: makeProp(PROP_TYPE_BOOLEAN, false),
@@ -125,19 +123,12 @@ export const props = makePropsConfigurable(
     centered: makeProp(PROP_TYPE_BOOLEAN, false),
     contentClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
     dialogClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
-    footerBgVariant: makeProp(PROP_TYPE_STRING),
-    footerBorderVariant: makeProp(PROP_TYPE_STRING),
     footerClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
     footerTag: makeProp(PROP_TYPE_STRING, 'footer'),
-    footerTextVariant: makeProp(PROP_TYPE_STRING),
-    headerBgVariant: makeProp(PROP_TYPE_STRING),
-    headerBorderVariant: makeProp(PROP_TYPE_STRING),
     headerClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
     headerCloseContent: makeProp(PROP_TYPE_STRING, '×'),
     headerCloseLabel: makeProp(PROP_TYPE_STRING, 'Close'),
-    headerCloseVariant: makeProp(PROP_TYPE_STRING),
     headerTag: makeProp(PROP_TYPE_STRING, 'header'),
-    headerTextVariant: makeProp(PROP_TYPE_STRING),
     // TODO: Rename to `noBackdrop` and deprecate `hideBackdrop`
     hideBackdrop: makeProp(PROP_TYPE_BOOLEAN, false),
     // TODO: Rename to `noFooter` and deprecate `hideFooter`
@@ -260,38 +251,9 @@ export const BModal = /*#__PURE__*/ extend({
         this.dialogClass
       ]
     },
-    headerClasses() {
-      return [
-        {
-          [`bg-${this.headerBgVariant}`]: this.headerBgVariant,
-          [`text-${this.headerTextVariant}`]: this.headerTextVariant,
-          [`border-${this.headerBorderVariant}`]: this.headerBorderVariant
-        },
-        this.headerClass
-      ]
-    },
     titleClasses() {
       return [{ 'sr-only': this.titleSrOnly }, this.titleClass]
     },
-    bodyClasses() {
-      return [
-        {
-          [`bg-${this.bodyBgVariant}`]: this.bodyBgVariant,
-          [`text-${this.bodyTextVariant}`]: this.bodyTextVariant
-        },
-        this.bodyClass
-      ]
-    },
-    footerClasses() {
-      return [
-        {
-          [`bg-${this.footerBgVariant}`]: this.footerBgVariant,
-          [`text-${this.footerTextVariant}`]: this.footerTextVariant,
-          [`border-${this.footerBorderVariant}`]: this.footerBorderVariant
-        },
-        this.footerClass
-      ]
-    },
     modalOuterStyle() {
       // Styles needed for proper stacking of modals
       return {
@@ -783,8 +745,7 @@ export const BModal = /*#__PURE__*/ extend({
                 props: {
                   content: this.headerCloseContent,
                   disabled: this.isTransitioning,
-                  ariaLabel: this.headerCloseLabel,
-                  textVariant: this.headerCloseVariant || this.headerTextVariant
+                  ariaLabel: this.headerCloseLabel
                 },
                 on: { click: this.onClose },
                 ref: 'close-button'
@@ -817,7 +778,7 @@ export const BModal = /*#__PURE__*/ extend({
           this.headerTag,
           {
             staticClass: 'modal-header',
-            class: this.headerClasses,
+            class: this.headerClass,
             attrs: { id: this.modalHeaderId },
             ref: 'header'
           },
@@ -830,7 +791,7 @@ export const BModal = /*#__PURE__*/ extend({
         'div',
         {
           staticClass: 'modal-body',
-          class: this.bodyClasses,
+          class: this.bodyClass,
           attrs: { id: this.modalBodyId },
           ref: 'body'
         },
@@ -891,7 +852,7 @@ export const BModal = /*#__PURE__*/ extend({
           this.footerTag,
           {
             staticClass: 'modal-footer',
-            class: this.footerClasses,
+            class: this.footerClass,
             attrs: { id: this.modalFooterId },
             ref: 'footer'
           },

package/src/vendor/bootstrap-vue/src/components/modal/package.json

@@ -36,18 +36,10 @@
             "version": "2.0.0",
             "description": "Specify which built-in button to focus once the modal opens: 'ok', 'cancel', or 'close'"
           },
-          {
-            "prop": "bodyBgVariant",
-            "description": "Applies one of the Bootstrap theme color variants to the body background"
-          },
           {
             "prop": "bodyClass",
             "description": "CSS class (or classes) to apply to the '.modal-body' wrapper element"
           },
-          {
-            "prop": "bodyTextVariant",
-            "description": "Applies one of the Bootstrap theme color variants to the body text"
-          },
           {
             "prop": "busy",
             "description": "Places the built in default footer OK and Cancel buttons in the disabled state"
@@ -85,35 +77,15 @@
             "prop": "dialogClass",
             "description": "CSS class (or classes) to apply to the '.modal-dialog' wrapper element"
           },
-          {
-            "prop": "footerBgVariant",
-            "description": "Applies one of the Bootstrap theme color variants to the footer background"
-          },
-          {
-            "prop": "footerBorderVariant",
-            "description": "Applies one of the Bootstrap theme color variants to the footer border"
-          },
           {
             "prop": "footerClass",
             "description": "CSS class (or classes) to apply to the '.modal-footer' wrapper element"
           },
-          {
-            "prop": "footerTextVariant",
-            "description": "Applies one of the Bootstrap theme color variants to the footer text"
-          },
           {
             "prop": "footerTag",
             "version": "2.22.0",
             "description": "Specify the HTML tag to render instead of the default tag for the footer"
           },
-          {
-            "prop": "headerBgVariant",
-            "description": "Applies one of the Bootstrap theme color variants to the header background"
-          },
-          {
-            "prop": "headerBorderVariant",
-            "description": "Applies one of the Bootstrap theme color variants to the header border"
-          },
           {
             "prop": "headerClass",
             "description": "CSS class (or classes) to apply to the '.modal-header' wrapper element"
@@ -127,14 +99,6 @@
             "prop": "headerCloseLabel",
             "description": "Value of the 'aria-label' on the header close button"
           },
-          {
-            "prop": "headerCloseVariant",
-            "description": "Text theme color variant to apply to the header close button"
-          },
-          {
-            "prop": "headerTextVariant",
-            "description": "Applies one of the Bootstrap theme color variants to the header text"
-          },
           {
             "prop": "headerTag",
             "version": "2.22.0",

package/src/vendor/bootstrap-vue/src/components/progress/MODIFICATIONS.md

@@ -0,0 +1,23 @@
+# Modifications to Vendored Code
+
+**Library**: BootstrapVue  
+**Version**: 2.23.1
+
+This file documents modifications made to the original BootstrapVue component files.
+
+## Removed variants
+
+The following files have been modified from the original:
+
+- `README.md`: Removed variants.
+
+The following variants of the property `variant` have been removed as they are no longer supported
+in our implementation:
+
+- `secondary`
+- `info`
+- `light`
+- `dark`
+
+It was not necessary to adapt `.js` files for this change, as the propery `variant` accepts any
+string. It would still be technically possible to pass down one of the removed variants.

package/src/vendor/bootstrap-vue/src/components/progress/README.md

@@ -222,12 +222,9 @@ Use background variants to change the appearance of individual progress bars. Th
       return {
         bars: [
           { variant: 'success', value: 75 },
-          { variant: 'info', value: 75 },
           { variant: 'warning', value: 75 },
           { variant: 'danger', value: 75 },
           { variant: 'primary', value: 75 },
-          { variant: 'secondary', value: 75 },
-          { variant: 'dark', value: 75 }
         ],
         timer: null
       }
@@ -255,13 +252,8 @@ Set `striped` to apply a stripe via CSS gradient over the progress bar's backgro
 <template>
   <div>
     <b-progress :value="25" variant="success" :striped="striped"></b-progress>
-    <b-progress :value="50" variant="info" :striped="striped" class="mt-2"></b-progress>
     <b-progress :value="75" variant="warning" :striped="striped" class="mt-2"></b-progress>
     <b-progress :value="100" variant="danger" :striped="striped" class="mt-2"></b-progress>
-
-    <b-button variant="secondary" @click="striped = !striped" class="mt-3">
-      {{ striped ? 'Remove' : 'Add' }} Striped
-    </b-button>
   </div>
 </template>
 
@@ -286,13 +278,8 @@ The striped gradient can also be animated by setting the `animated`prop.
 <template>
   <div>
     <b-progress :value="25" variant="success" striped :animated="animate"></b-progress>
-    <b-progress :value="50" variant="info" striped :animated="animate" class="mt-2"></b-progress>
     <b-progress :value="75" variant="warning" striped :animated="animate" class="mt-2"></b-progress>
     <b-progress :value="100" variant="danger" :animated="animate" class="mt-3"></b-progress>
-
-    <b-button variant="secondary" @click="animate = !animate" class="mt-3">
-      {{ animate ? 'Stop' : 'Start' }} Animation
-    </b-button>
   </div>
 </template>
 
@@ -328,25 +315,25 @@ horizontally stacked set of progress bars.
     <b-progress :max="max" class="mb-3">
       <b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
       <b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
-      <b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
+      <b-progress-bar variant="danger" :value="values[2]"></b-progress-bar>
     </b-progress>
 
     <b-progress show-progress :max="max" class="mb-3">
       <b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
       <b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
-      <b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
+      <b-progress-bar variant="danger" :value="values[2]"></b-progress-bar>
     </b-progress>
 
     <b-progress show-value striped :max="max" class="mb-3">
       <b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
       <b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
-      <b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
+      <b-progress-bar variant="danger" :value="values[2]"></b-progress-bar>
     </b-progress>
 
     <b-progress :max="max">
       <b-progress-bar variant="primary" :value="values[0]" show-progress></b-progress-bar>
       <b-progress-bar variant="success" :value="values[1]" animated show-progress></b-progress-bar>
-      <b-progress-bar variant="info" :value="values[2]" striped show-progress></b-progress-bar>
+      <b-progress-bar variant="danger" :value="values[2]" striped show-progress></b-progress-bar>
     </b-progress>
   </div>
 </template>