feat(GlModal): Remove variant options

BREAKING CHANGE: Remove util constants variantOptionsWithNoDefault,
and possibility to apply header, body, and footer variants.

BootstrapVue's Modal supported multiple variants:

* headerBgVariant
* headerBorderVariant
* headerTextVariant
* headerCloseVariant
* bodyBgVariant
* bodyTextVariant
* footerBgVariant
* footerBorderVariant
* footerTextVariant

These attributes were passed through the GitLab UI Component to the
BootstrapVue's original component. These variants have never been used
and are now deleted. Alongside with the exported constant in the utils
folder.

src/components/base/modal/modal.stories.js

 import { userEvent, within, waitFor, expect } from '@storybook/test';
 import { GlModalDirective } from '../../../directives/modal';
 import GlButton from '../button/button.vue';
-import { variantOptionsWithNoDefault } from '../../../utils/constants';
 import GlModal from './modal.vue';
 import readme from './modal.md';
 
@@ -25,14 +24,6 @@ const generateTemplate = ({ props = {}, slots = {} } = {}) => {
         Open modal
       </gl-button>
       <gl-modal
-        :header-bg-variant="headerBgVariant"
-        :header-border-variant="headerBorderVariant"
-        :header-text-variant="headerTextVariant"
-        :body-bg-variant="bodyBgVariant"
-        :body-text-variant="bodyTextVariant"
-        :footer-bg-variant="footerBgVariant"
-        :footer-border-variant="footerBorderVariant"
-        :footer-text-variant="footerTextVariant"
         ${extraProps}
         :action-primary="{text: 'Okay'}"
         :action-secondary="{text: 'Discard Changes'}"
@@ -63,19 +54,10 @@ const Template = (args, { argTypes, viewMode }) => ({
 });
 
 const generateProps = ({
-  variant = variantOptionsWithNoDefault.default,
   contentPagraphs = 1,
   scrollable = false,
   noFocusOnShow = false,
 } = {}) => ({
-  headerBgVariant: variant,
-  headerBorderVariant: variant,
-  headerTextVariant: variant,
-  bodyBgVariant: variant,
-  bodyTextVariant: variant,
-  footerBgVariant: variant,
-  footerBorderVariant: variant,
-  footerTextVariant: variant,
   contentParagraphs: contentPagraphs,
   scrollable,
   noFocusOnShow,
@@ -160,38 +142,4 @@ export default {
       },
     },
   },
-  argTypes: {
-    headerBgVariant: {
-      options: variantOptionsWithNoDefault,
-      control: 'select',
-    },
-    headerBorderVariant: {
-      options: variantOptionsWithNoDefault,
-      control: 'select',
-    },
-    headerTextVariant: {
-      options: variantOptionsWithNoDefault,
-      control: 'select',
-    },
-    bodyBgVariant: {
-      options: variantOptionsWithNoDefault,
-      control: 'select',
-    },
-    bodyTextVariant: {
-      options: variantOptionsWithNoDefault,
-      control: 'select',
-    },
-    footerBgVariant: {
-      options: variantOptionsWithNoDefault,
-      control: 'select',
-    },
-    footerBorderVariant: {
-      options: variantOptionsWithNoDefault,
-      control: 'select',
-    },
-    footerTextVariant: {
-      options: variantOptionsWithNoDefault,
-      control: 'select',
-    },
-  },
 };

src/utils/constants.js

 import { POSITION } from '../components/utilities/truncate/constants';
 
-function appendDefaultOption(options) {
-  return { ...options, default: '' };
-}
-
 export const COMMA = ',';
 
 export const CONTRAST_LEVELS = [
@@ -290,8 +286,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';
 

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

+# 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.
\ No newline at end of file

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.
 

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

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'
           },

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",