@gitlab/ui 94.10.0 → 95.1.0

package/src/tokens/build/json/tokens.dark.json

@@ -14793,6 +14793,116 @@
       }
     }
   },
+  "progress-bar": {
+    "indicator": {
+      "color": {
+        "default": {
+          "value": "#428fdc",
+          "$type": "color",
+          "comment": "Used for the indicator color for the primary progress-bar variant.",
+          "filePath": "src/tokens/contextual/progress-bar.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{status.info.icon.color}",
+            "$type": "color",
+            "comment": "Used for the indicator color for the primary progress-bar variant."
+          },
+          "name": "PROGRESS_BAR_INDICATOR_COLOR_DEFAULT",
+          "attributes": {},
+          "path": [
+            "progress-bar",
+            "indicator",
+            "color",
+            "default"
+          ]
+        },
+        "success": {
+          "value": "#2da160",
+          "$type": "color",
+          "comment": "Used for the indicator color for the success progress-bar variant.",
+          "filePath": "src/tokens/contextual/progress-bar.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{status.success.icon.color}",
+            "$type": "color",
+            "comment": "Used for the indicator color for the success progress-bar variant."
+          },
+          "name": "PROGRESS_BAR_INDICATOR_COLOR_SUCCESS",
+          "attributes": {},
+          "path": [
+            "progress-bar",
+            "indicator",
+            "color",
+            "success"
+          ]
+        },
+        "warning": {
+          "value": "#c17d10",
+          "$type": "color",
+          "comment": "Used for the indicator color for the warning progress-bar variant.",
+          "filePath": "src/tokens/contextual/progress-bar.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{status.warning.icon.color}",
+            "$type": "color",
+            "comment": "Used for the indicator color for the warning progress-bar variant."
+          },
+          "name": "PROGRESS_BAR_INDICATOR_COLOR_WARNING",
+          "attributes": {},
+          "path": [
+            "progress-bar",
+            "indicator",
+            "color",
+            "warning"
+          ]
+        },
+        "danger": {
+          "value": "#ec5941",
+          "$type": "color",
+          "comment": "Used for the indicator color for the danger progress-bar variant.",
+          "filePath": "src/tokens/contextual/progress-bar.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{status.danger.icon.color}",
+            "$type": "color",
+            "comment": "Used for the indicator color for the danger progress-bar variant."
+          },
+          "name": "PROGRESS_BAR_INDICATOR_COLOR_DANGER",
+          "attributes": {},
+          "path": [
+            "progress-bar",
+            "indicator",
+            "color",
+            "danger"
+          ]
+        }
+      }
+    },
+    "track": {
+      "color": {
+        "value": "#4c4b51",
+        "$type": "color",
+        "comment": "Used for the track color for all progress-bar variants.",
+        "filePath": "src/tokens/contextual/progress-bar.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.200}",
+            "dark": "{color.neutral.700}"
+          },
+          "$type": "color",
+          "comment": "Used for the track color for all progress-bar variants."
+        },
+        "name": "PROGRESS_BAR_TRACK_COLOR",
+        "attributes": {},
+        "path": [
+          "progress-bar",
+          "track",
+          "color"
+        ]
+      }
+    }
+  },
   "skeleton-loader": {
     "background": {
       "color": {

package/src/tokens/build/json/tokens.json

@@ -14793,6 +14793,116 @@
       }
     }
   },
+  "progress-bar": {
+    "indicator": {
+      "color": {
+        "default": {
+          "value": "#1f75cb",
+          "$type": "color",
+          "comment": "Used for the indicator color for the primary progress-bar variant.",
+          "filePath": "src/tokens/contextual/progress-bar.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{status.info.icon.color}",
+            "$type": "color",
+            "comment": "Used for the indicator color for the primary progress-bar variant."
+          },
+          "name": "PROGRESS_BAR_INDICATOR_COLOR_DEFAULT",
+          "attributes": {},
+          "path": [
+            "progress-bar",
+            "indicator",
+            "color",
+            "default"
+          ]
+        },
+        "success": {
+          "value": "#108548",
+          "$type": "color",
+          "comment": "Used for the indicator color for the success progress-bar variant.",
+          "filePath": "src/tokens/contextual/progress-bar.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{status.success.icon.color}",
+            "$type": "color",
+            "comment": "Used for the indicator color for the success progress-bar variant."
+          },
+          "name": "PROGRESS_BAR_INDICATOR_COLOR_SUCCESS",
+          "attributes": {},
+          "path": [
+            "progress-bar",
+            "indicator",
+            "color",
+            "success"
+          ]
+        },
+        "warning": {
+          "value": "#ab6100",
+          "$type": "color",
+          "comment": "Used for the indicator color for the warning progress-bar variant.",
+          "filePath": "src/tokens/contextual/progress-bar.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{status.warning.icon.color}",
+            "$type": "color",
+            "comment": "Used for the indicator color for the warning progress-bar variant."
+          },
+          "name": "PROGRESS_BAR_INDICATOR_COLOR_WARNING",
+          "attributes": {},
+          "path": [
+            "progress-bar",
+            "indicator",
+            "color",
+            "warning"
+          ]
+        },
+        "danger": {
+          "value": "#dd2b0e",
+          "$type": "color",
+          "comment": "Used for the indicator color for the danger progress-bar variant.",
+          "filePath": "src/tokens/contextual/progress-bar.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{status.danger.icon.color}",
+            "$type": "color",
+            "comment": "Used for the indicator color for the danger progress-bar variant."
+          },
+          "name": "PROGRESS_BAR_INDICATOR_COLOR_DANGER",
+          "attributes": {},
+          "path": [
+            "progress-bar",
+            "indicator",
+            "color",
+            "danger"
+          ]
+        }
+      }
+    },
+    "track": {
+      "color": {
+        "value": "#bfbfc3",
+        "$type": "color",
+        "comment": "Used for the track color for all progress-bar variants.",
+        "filePath": "src/tokens/contextual/progress-bar.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.200}",
+            "dark": "{color.neutral.700}"
+          },
+          "$type": "color",
+          "comment": "Used for the track color for all progress-bar variants."
+        },
+        "name": "PROGRESS_BAR_TRACK_COLOR",
+        "attributes": {},
+        "path": [
+          "progress-bar",
+          "track",
+          "color"
+        ]
+      }
+    }
+  },
   "skeleton-loader": {
     "background": {
       "color": {

package/src/tokens/build/scss/_tokens.dark.scss

@@ -503,6 +503,7 @@ $gl-spinner-track-color-light: $gl-color-neutral-800; // Used for the static tra
 $gl-spinner-track-color-default: $gl-color-neutral-800; // Used for the static track (background) of a loading spinner.
 $gl-skeleton-loader-shimmer-color: $gl-color-neutral-700; // Used for the animated shimmer effect in a skeleton loader.
 $gl-skeleton-loader-background-color: $gl-color-neutral-800; // Used for the skeleton loader background color.
+$gl-progress-bar-track-color: $gl-color-neutral-700; // Used for the track color for all progress-bar variants.
 $gl-link-mention-background-color-current: $gl-color-orange-800; // Used for the mention link background when referencing the current user.
 $gl-link-mention-background-color-default: $gl-color-blue-800; // Used for the mention link default background.
 $gl-link-mention-text-color-current: $gl-color-orange-100; // Used for the mention link text color when referencing the current user.
@@ -779,6 +780,10 @@ $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text
 $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
+$gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
+$gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
+$gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
+$gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.
 $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
 $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
 $gl-dropdown-option-indicator-color-selected-focus: $gl-color-neutral-0; // Used for the dropdown selected option indicator in the focus state.

package/src/tokens/build/scss/_tokens.scss

@@ -503,6 +503,7 @@ $gl-spinner-track-color-light: $gl-color-neutral-800; // Used for the static tra
 $gl-spinner-track-color-default: $gl-color-neutral-100; // Used for the static track (background) of a loading spinner.
 $gl-skeleton-loader-shimmer-color: $gl-color-neutral-50; // Used for the animated shimmer effect in a skeleton loader.
 $gl-skeleton-loader-background-color: $gl-color-neutral-100; // Used for the skeleton loader background color.
+$gl-progress-bar-track-color: $gl-color-neutral-200; // Used for the track color for all progress-bar variants.
 $gl-link-mention-background-color-current: $gl-color-orange-100; // Used for the mention link background when referencing the current user.
 $gl-link-mention-background-color-default: $gl-color-blue-100; // Used for the mention link default background.
 $gl-link-mention-text-color-current: $gl-color-orange-800; // Used for the mention link text color when referencing the current user.
@@ -779,6 +780,10 @@ $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text
 $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
+$gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
+$gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
+$gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
+$gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.
 $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
 $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
 $gl-dropdown-option-indicator-color-selected-focus: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the focus state.

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -668,6 +668,11 @@ $gl-link-mention-text-color-default: var(--gl-link-mention-text-color-default);
 $gl-link-mention-text-color-current: var(--gl-link-mention-text-color-current);
 $gl-link-mention-background-color-default: var(--gl-link-mention-background-color-default);
 $gl-link-mention-background-color-current: var(--gl-link-mention-background-color-current);
+$gl-progress-bar-indicator-color-default: var(--gl-progress-bar-indicator-color-default);
+$gl-progress-bar-indicator-color-success: var(--gl-progress-bar-indicator-color-success);
+$gl-progress-bar-indicator-color-warning: var(--gl-progress-bar-indicator-color-warning);
+$gl-progress-bar-indicator-color-danger: var(--gl-progress-bar-indicator-color-danger);
+$gl-progress-bar-track-color: var(--gl-progress-bar-track-color);
 $gl-skeleton-loader-background-color: var(--gl-skeleton-loader-background-color);
 $gl-skeleton-loader-shimmer-color: var(--gl-skeleton-loader-shimmer-color);
 $gl-spinner-track-color-default: var(--gl-spinner-track-color-default);

package/src/tokens/contextual/progress-bar.tokens.json

@@ -0,0 +1,38 @@
+{
+  "progress-bar": {
+    "indicator": {
+      "color": {
+        "default": {
+          "$value": "{status.info.icon.color}",
+          "$type": "color",
+          "$description": "Used for the indicator color for the primary progress-bar variant."
+        },
+        "success": {
+          "$value": "{status.success.icon.color}",
+          "$type": "color",
+          "$description": "Used for the indicator color for the success progress-bar variant."
+        },
+        "warning": {
+          "$value": "{status.warning.icon.color}",
+          "$type": "color",
+          "$description": "Used for the indicator color for the warning progress-bar variant."
+        },
+        "danger": {
+          "$value": "{status.danger.icon.color}",
+          "$type": "color",
+          "$description": "Used for the indicator color for the danger progress-bar variant."
+        }
+      }
+    },
+    "track": {
+      "color": {
+        "$value": {
+          "default": "{color.neutral.200}",
+          "dark": "{color.neutral.700}"
+        },
+        "$type": "color",
+        "$description": "Used for the track color for all progress-bar variants."
+      }
+    }
+  }
+}

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