@gitlab/ui 92.2.0 → 92.3.0

package/src/components/base/toggle/toggle.scss

@@ -55,7 +55,7 @@ $toggle-height: 2.5 * $grid-size;
 }
 
 .gl-help-label {
-  @include gl-mt-3;
+  @apply gl-mt-3;
   @include gl-text-gray-500;
   @include gl-font-weight-normal;
 }
@@ -66,13 +66,13 @@ $toggle-height: 2.5 * $grid-size;
 
   .gl-toggle-label {
     @include gl-white-space-nowrap;
-    @include gl-mb-0;
-    @include gl-mr-3;
+    @apply gl-mb-0;
+    @apply gl-mr-3;
   }
 
   .gl-help-label {
-    @include gl-mt-0;
-    @include gl-ml-3;
+    @apply gl-mt-0;
+    @apply gl-ml-3;
   }
 }
 
@@ -129,7 +129,7 @@ $toggle-height: 2.5 * $grid-size;
     top: $gl-spacing-scale-1;
     @include gl-transition-medium;
     @include gl-justify-content-center;
-    @include gl-p-1;
+    @apply gl-p-1;
 
     > svg {
       @include gl-w-4;

package/src/components/base/token/token.scss

@@ -2,14 +2,14 @@
   @include gl-text-gray-900;
   @include gl-bg-gray-100;
   @include gl-rounded-small;
-  @include gl-pl-3;
+  @apply gl-pl-3;
   @include gl-display-inline-flex;
   @include gl-flex-direction-column;
   @include gl-justify-content-center;
 
   &.gl-token-view-only {
-    @include gl-py-2;
-    @include gl-pr-3;
+    @apply gl-py-2;
+    @apply gl-pr-3;
   }
 }
 
@@ -33,12 +33,12 @@
 
   > .gl-avatar:first-child,
   > .gl-spinner-container:first-child {
-    @include gl-mr-2;
+    @apply gl-mr-2;
   }
 }
 
 .gl-token-close {
-  @include gl-ml-2;
+  @apply gl-ml-2;
   @include gl-reset-color;
   @include gl-cursor-pointer;
   opacity: 0.8;

package/src/components/base/tooltip/tooltip.scss

@@ -1,13 +1,13 @@
 .gl-tooltip {
   @include gl-font-sm;
-  @include gl-p-2;
+  @apply gl-p-2;
 
   .tooltip-inner {
     @apply gl-rounded-base;
     @include gl-line-height-normal;
     @include gl-font-weight-normal;
-    @include gl-py-3;
-    @include gl-px-4;
+    @apply gl-py-3;
+    @apply gl-px-4;
     background: var(--gl-feedback-strong-background-color);
     color: var(--gl-feedback-strong-text-color);
   }

package/src/components/charts/legend/legend.scss

@@ -37,7 +37,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
     @include gl-flex-shrink-0;
     @include gl-justify-content-space-between;
     @include gl-align-items-center;
-    @include gl-pr-5;
+    @apply gl-pr-5;
 
     &:hover {
       @include gl-cursor-pointer;
@@ -45,7 +45,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
     }
 
     .gl-legend-inline-series-label {
-      @include gl-mr-3;
+      @apply gl-mr-3;
     }
   }
 }
@@ -68,7 +68,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
   .gl-legend-tabular-header-cell {
     @include gl-font-weight-bold;
     @include gl-line-height-24;
-    @include gl-px-3;
+    @apply gl-px-3;
   }
 
   .gl-legend-tabular-body {
@@ -87,7 +87,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
   .gl-legend-tabular-title-cell,
   .gl-legend-tabular-details-cell {
     @include gl-line-height-24;
-    @include gl-px-3;
+    @apply gl-px-3;
   }
 
   .gl-legend-tabular-title-cell {

package/src/components/charts/series_label/series_label.scss

@@ -7,7 +7,7 @@
 
 .gl-series-label-color {
   @include gl-flex-shrink-0;
-  @include gl-mr-3;
+  @apply gl-mr-3;
 
   svg {
     @include gl-display-block;

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.scss

@@ -19,7 +19,7 @@
   }
 
   p:last-of-type {
-    @include gl-mb-0;
+    @apply gl-mb-0;
   }
 
   copy-code,

package/src/components/experimental/duo/chat/duo_chat.scss

@@ -31,7 +31,7 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
 
   .duo-chat-drawer-header,
   .duo-chat-drawer-body > * {
-    @include gl-p-5;
+    @apply gl-p-5;
   }
 }
 
@@ -69,7 +69,7 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
 
 .duo-chat-drawer-footer {
   @apply gl-border-t-solid gl-border-t-gray-100 gl-border-t-1;
-  @include gl-p-5;
+  @apply gl-p-5;
 }
 
 .duo-chat-drawer-footer-sticky {
@@ -144,7 +144,7 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
     content: attr(data-value) ' ';
     @include gl-visibility-hidden;
     @include gl-white-space-pre-wrap;
-    @include gl-py-4;
+    @apply gl-py-4;
   }
 }
 
@@ -158,7 +158,7 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
 
   .gl-dropdown-item button.dropdown-item {
     @include gl-font-sm;
-    @include gl-px-3;
+    @apply gl-px-3;
     @include gl-bg-none;
 
     &:hover {

package/src/components/shared_components/charts/tooltip_default_format.scss

@@ -9,7 +9,7 @@
 
   &-label {
     @include gl-line-height-normal;
-    @include gl-mr-7;
+    @apply gl-mr-7;
   }
 
   &-value {

package/src/scss/bootstrap_vue.scss

@@ -9,34 +9,16 @@ $bv-enable-popover-variants: false;
 
 @import '../vendor/bootstrap-vue/src/utilities.scss';
 
-// Used by BFormSpinbutton, BFormDatepicker, BFormTimepicker, BTime, BCalendar
-@import '../vendor/bootstrap-vue/src/custom-controls.scss';
-
-// Comment out components we are not importing in gitlab-ui
-// Still listed for easy comparison
-// @import '../vendor/bootstrap-vue/src/components/avatar/index.scss';
-// @import '../vendor/bootstrap-vue/src/components/calendar/index.scss';
-@import '../vendor/bootstrap-vue/src/components/card/index.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-file/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/form-rating/index.scss';
-// @import '../vendor/bootstrap-vue/src/components/form-spinbutton/index.scss';
-@import '../vendor/bootstrap-vue/src/components/form-tags/index.scss';
 @import '../vendor/bootstrap-vue/src/components/input-group/index.scss';
-// @import '../vendor/bootstrap-vue/src/components/media/index.scss';
 @import '../vendor/bootstrap-vue/src/components/modal/index.scss';
 @import '../vendor/bootstrap-vue/src/components/nav/index.scss';
 @import '../vendor/bootstrap-vue/src/components/navbar/index.scss';
-// @import '../vendor/bootstrap-vue/src/components/pagination/index.scss';
-// @import '../vendor/bootstrap-vue/src/components/pagination-nav/index.scss';
 @import '../vendor/bootstrap-vue/src/components/popover/index.scss';
-// @import '../vendor/bootstrap-vue/src/components/skeleton/index.scss';
-// @import '../vendor/bootstrap-vue/src/components/sidebar/index.scss';
 @import '../vendor/bootstrap-vue/src/components/table/index.scss';
-// @import '../vendor/bootstrap-vue/src/components/time/index.scss';
 @import '../vendor/bootstrap-vue/src/components/toast/index.scss';
 @import '../vendor/bootstrap-vue/src/components/tooltip/index.scss';
 

package/src/scss/typescale/_index.scss

@@ -21,8 +21,8 @@
   .gl-h5,
   .gl-h6 {
     @include gl-font-weight-bold;
-    @include gl-mt-0;
-    @include gl-mb-0;
+    @apply gl-mt-0;
+    @apply gl-mb-0;
   }
 
   .h-display {
@@ -67,12 +67,12 @@
   .gl-paragraph {
     @include gl-font-base;
     @include gl-line-height-20;
-    @include gl-mt-0;
-    @include gl-mb-0;
+    @apply gl-mt-0;
+    @apply gl-mb-0;
 
     + p,
     + .gl-paragraph {
-      @include gl-mt-5;
+      @apply gl-mt-5;
     }
 
     &.lg {
@@ -94,10 +94,10 @@
 
   blockquote {
     @include gl-text-gray-700;
-    @include gl-py-3;
-    @include gl-pl-6;
-    @include gl-my-3;
-    @include gl-mx-0;
+    @apply gl-py-3;
+    @apply gl-pl-6;
+    @apply gl-my-3;
+    @apply gl-mx-0;
     @include gl-inset-border-l-4-gray-100;
   }
 }

package/src/vendor/bootstrap-vue/nuxt/index.js

@@ -72,14 +72,6 @@ module.exports = function nuxtBootstrapVue(moduleOptions = {}) {
       video: ['src', 'poster'],
       // Nuxt default is missing image
       image: 'xlink:href',
-      // Add BootstrapVue specific component asset items
-      'b-avatar': 'src',
-      'b-img': 'src',
-      'b-img-lazy': ['src', 'blank-src'],
-      'b-card': 'img-src',
-      'b-card-img': 'src',
-      'b-card-img-lazy': ['src', 'blank-src'],
-      'b-embed': 'src',
       // Ensure super supplied values/overrides are not lost
       ...this.options.build.loaders.vue.transformAssetUrls
     }

package/src/vendor/bootstrap-vue/src/_utilities.scss

@@ -10,13 +10,4 @@ $bv-utility-classes-defined: false !default;
   .bv-no-focus-ring:focus {
     outline: none;
   }
-
-  // Create `.bv-d-<bp>-down-none` helper classes
-  @each $breakpoint in map-keys($grid-breakpoints) {
-    @include media-breakpoint-down($breakpoint) {
-      .bv-d-#{$breakpoint}-down-none {
-        display: none !important;
-      }
-    }
-  }
 }

package/src/vendor/bootstrap-vue/src/_variables.scss

@@ -39,26 +39,6 @@ $b-custom-switch-indicator-size-sm: calc(
   #{$b-custom-control-indicator-size-sm} - #{$custom-control-indicator-border-width * 4}
 ) !default;
 
-// Custom file sizes
-$b-custom-file-font-size-lg: $input-font-size-lg !default;
-$b-custom-file-font-size-sm: $input-font-size-sm !default;
-$b-custom-file-line-height-lg: $input-line-height-lg !default;
-$b-custom-file-line-height-sm: $input-line-height-sm !default;
-$b-custom-file-height-lg: $input-height-lg !default;
-$b-custom-file-height-sm: $input-height-sm !default;
-$b-custom-file-border-radius-lg: $input-border-radius-lg !default;
-$b-custom-file-border-radius-sm: $input-border-radius-sm !default;
-$b-custom-file-padding-y-lg: $input-padding-y-lg !default;
-$b-custom-file-padding-y-sm: $input-padding-y-sm !default;
-$b-custom-file-padding-x-lg: $input-padding-x-lg !default;
-$b-custom-file-padding-x-sm: $input-padding-x-sm !default;
-$b-custom-file-height-inner-lg: calc(
-  #{$b-custom-file-line-height-lg * 1em} + #{$b-custom-file-padding-y-lg * 2}
-) !default;
-$b-custom-file-height-inner-sm: calc(
-  #{$b-custom-file-line-height-sm * 1em} + #{$b-custom-file-padding-y-sm * 2}
-) !default;
-
 // --- Icons ---
 
 $b-icon-vertical-offset: -0.15em;
@@ -73,15 +53,6 @@ $b-icon-animation-spin-pulse-duration: 1s !default;
 $b-icon-animation-spin-reverse-pulse-duration: $b-icon-animation-spin-pulse-duration !default;
 $b-icon-animation-throb-duration: 0.75s !default;
 
-// --- Sidebar ---
-
-$b-sidebar-width: 320px !default;
-$b-sidebar-transition-duration: 0.3s !default;
-$b-sidebar-zindex: calc(#{$zindex-fixed} + 5) !default;
-$b-sidebar-header-font-size: 1.5rem !default;
-$b-sidebar-header-padding-y: $navbar-padding-y !default;
-$b-sidebar-header-padding-x: $navbar-padding-x !default;
-
 // --- Tables ---
 
 // Table busy state
@@ -152,26 +123,3 @@ $bv-enable-popover-variants: true !default;
 $b-popover-bg-level: $alert-bg-level !default;
 $b-popover-border-level: $alert-border-level !default;
 $b-popover-color-level: $alert-color-level !default;
-
-// --- Avatar ---
-
-$b-avatar-size: 2.5rem !default;
-$b-avatar-size-sm: 1.5rem !default;
-$b-avatar-size-lg: 3.5rem !default;
-$b-avatar-font-size-scale: 0.4 !default;
-$b-avatar-badge-font-size-scale: $b-avatar-font-size-scale * 0.7 !default;
-
-// --- Skeleton ---
-
-$b-skeleton-background-color: rgba(0, 0, 0, 0.12) !default;
-$b-skeleton-loading-cursor: wait !default;
-$b-skeleton-animation-duration: 1.75s !default;
-$b-skeleton-text-spacing: map-get($spacers, 1) !default;
-$b-skeleton-btn-width: 75px !default;
-$b-skeleton-animate-wave-color: hsla(0, 0%, 100%, 0.4) !default;
-$b-skeleton-animate-wave-background: linear-gradient(
-  90deg,
-  transparent,
-  $b-skeleton-animate-wave-color,
-  transparent
-) !default;

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

@@ -18,6 +18,3 @@ export declare class BFormInvalidFeedback extends BvComponent {}
 
 // Component: b-form-valid-feedback
 export declare class BFormValidFeedback extends BvComponent {}
-
-// Component: b-form-datalist
-export declare class BFormDatalist extends BvComponent {}

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

@@ -1,5 +1,4 @@
 import { BForm } from './form'
-import { BFormDatalist } from './form-datalist'
 import { BFormText } from './form-text'
 import { BFormInvalidFeedback } from './form-invalid-feedback'
 import { BFormValidFeedback } from './form-valid-feedback'
@@ -9,8 +8,6 @@ import { pluginFactory } from '../../utils/plugins'
 const FormPlugin = /*#__PURE__*/ pluginFactory({
   components: {
     BForm,
-    BFormDatalist,
-    BDatalist: BFormDatalist,
     BFormText,
     BFormInvalidFeedback,
     BFormFeedback: BFormInvalidFeedback,
@@ -21,4 +18,4 @@ const FormPlugin = /*#__PURE__*/ pluginFactory({
 })
 
 // BFormRow is not exported here as a named export, as it is exported by Layout
-export { FormPlugin, BForm, BFormDatalist, BFormText, BFormInvalidFeedback, BFormValidFeedback }
+export { FormPlugin, BForm, BFormText, BFormInvalidFeedback, BFormValidFeedback }

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

@@ -106,18 +106,6 @@
             "description": "Content to place in the form valid feedback element"
           }
         ]
-      },
-      {
-        "component": "BFormDatalist",
-        "aliases": [
-          "BDatalist"
-        ],
-        "slots": [
-          {
-            "name": "default",
-            "description": "Content to place in the from datalist"
-          }
-        ]
       }
     ]
   }

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

@@ -4,52 +4,28 @@ import { BvPlugin } from '../'
 export declare const componentsPlugin: BvPlugin
 
 // Export all components as named exports
-export * from './alert'
-export * from './aspect'
-export * from './avatar'
 export * from './badge'
 export * from './breadcrumb'
 export * from './button'
 export * from './button-group'
-export * from './button-toolbar'
-export * from './calendar'
-export * from './card'
 export * from './collapse'
 export * from './dropdown'
-export * from './embed'
 export * from './form'
 export * from './form-checkbox'
-export * from './form-datepicker'
-export * from './form-file'
 export * from './form-group'
 export * from './form-input'
 export * from './form-radio'
-export * from './form-rating'
 export * from './form-select'
-export * from './form-spinbutton'
-export * from './form-tags'
 export * from './form-textarea'
-export * from './form-timepicker'
-export * from './image'
 export * from './input-group'
-export * from './jumbotron'
 export * from './layout'
 export * from './link'
-export * from './list-group'
-export * from './media'
 export * from './modal'
 export * from './nav'
 export * from './navbar'
-export * from './overlay'
-export * from './pagination'
-export * from './pagination-nav'
 export * from './popover'
 export * from './progress'
-export * from './sidebar'
-export * from './skeleton'
-export * from './spinner'
 export * from './table'
 export * from './tabs'
-export * from './time'
 export * from './toast'
 export * from './tooltip'

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

@@ -1,107 +1,59 @@
 import { pluginFactory } from '../utils/plugins'
 
 // Component group plugins
-import { AlertPlugin } from './alert'
-import { AspectPlugin } from './aspect'
-import { AvatarPlugin } from './avatar'
 import { BadgePlugin } from './badge'
 import { BreadcrumbPlugin } from './breadcrumb'
 import { ButtonPlugin } from './button'
 import { ButtonGroupPlugin } from './button-group'
-import { ButtonToolbarPlugin } from './button-toolbar'
-import { CalendarPlugin } from './calendar'
-import { CardPlugin } from './card'
 import { CollapsePlugin } from './collapse'
 import { DropdownPlugin } from './dropdown'
-import { EmbedPlugin } from './embed'
 import { FormPlugin } from './form'
 import { FormCheckboxPlugin } from './form-checkbox'
-import { FormDatepickerPlugin } from './form-datepicker'
-import { FormFilePlugin } from './form-file'
 import { FormGroupPlugin } from './form-group'
 import { FormInputPlugin } from './form-input'
 import { FormRadioPlugin } from './form-radio'
-import { FormRatingPlugin } from './form-rating'
 import { FormSelectPlugin } from './form-select'
-import { FormSpinbuttonPlugin } from './form-spinbutton'
-import { FormTagsPlugin } from './form-tags'
 import { FormTextareaPlugin } from './form-textarea'
-import { FormTimepickerPlugin } from './form-timepicker'
-import { ImagePlugin } from './image'
 import { InputGroupPlugin } from './input-group'
-import { JumbotronPlugin } from './jumbotron'
 import { LayoutPlugin } from './layout'
 import { LinkPlugin } from './link'
-import { ListGroupPlugin } from './list-group'
-import { MediaPlugin } from './media'
 import { ModalPlugin } from './modal'
 import { NavPlugin } from './nav'
 import { NavbarPlugin } from './navbar'
-import { OverlayPlugin } from './overlay'
-import { PaginationPlugin } from './pagination'
-import { PaginationNavPlugin } from './pagination-nav'
 import { PopoverPlugin } from './popover'
 import { ProgressPlugin } from './progress'
-import { SidebarPlugin } from './sidebar'
-import { SkeletonPlugin } from './skeleton'
-import { SpinnerPlugin } from './spinner'
 // Table plugin includes TableLitePlugin and TableSimplePlugin
 import { TablePlugin } from './table'
 import { TabsPlugin } from './tabs'
-import { TimePlugin } from './time'
 import { ToastPlugin } from './toast'
 import { TooltipPlugin } from './tooltip'
 
 // Main plugin to install all component group plugins
 export const componentsPlugin = /*#__PURE__*/ pluginFactory({
   plugins: {
-    AlertPlugin,
-    AspectPlugin,
-    AvatarPlugin,
     BadgePlugin,
     BreadcrumbPlugin,
     ButtonPlugin,
     ButtonGroupPlugin,
-    ButtonToolbarPlugin,
-    CalendarPlugin,
-    CardPlugin,
     CollapsePlugin,
     DropdownPlugin,
-    EmbedPlugin,
     FormPlugin,
     FormCheckboxPlugin,
-    FormDatepickerPlugin,
-    FormFilePlugin,
     FormGroupPlugin,
     FormInputPlugin,
     FormRadioPlugin,
-    FormRatingPlugin,
     FormSelectPlugin,
-    FormSpinbuttonPlugin,
-    FormTagsPlugin,
     FormTextareaPlugin,
-    FormTimepickerPlugin,
-    ImagePlugin,
     InputGroupPlugin,
-    JumbotronPlugin,
     LayoutPlugin,
     LinkPlugin,
-    ListGroupPlugin,
-    MediaPlugin,
     ModalPlugin,
     NavPlugin,
     NavbarPlugin,
-    OverlayPlugin,
-    PaginationPlugin,
-    PaginationNavPlugin,
     PopoverPlugin,
     ProgressPlugin,
-    SidebarPlugin,
-    SkeletonPlugin,
-    SpinnerPlugin,
     TablePlugin,
     TabsPlugin,
-    TimePlugin,
     ToastPlugin,
     TooltipPlugin
   }

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

@@ -1,27 +1,12 @@
-@import "avatar/index";
-@import "calendar/index";
-@import "card/index";
 @import "dropdown/index";
 @import "form-checkbox/index";
-@import "form-datepicker/index";
-@import "form-file/index";
 @import "form-input/index";
 @import "form-radio/index";
-@import "form-rating/index";
-@import "form-spinbutton/index";
-@import "form-tags/index";
-@import "form-timepicker/index";
 @import "input-group/index";
-@import "media/index";
 @import "modal/index";
 @import "nav/index";
 @import "navbar/index";
-@import "pagination-nav/index";
-@import "pagination/index";
 @import "popover/index";
-@import "sidebar/index";
-@import "skeleton/index";
 @import "table/index";
-@import "time/index";
 @import "toast/index";
 @import "tooltip/index";

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

@@ -7,12 +7,6 @@ import { BvPlugin, BvComponent } from '../../'
 // Plugin
 export declare const LayoutPlugin: BvPlugin
 
-// Component: b-container
-export declare class BContainer extends BvComponent {}
-
-// Component: b-row
-export declare class BRow extends BvComponent {}
-
 // Component: b-col
 export declare class BCol extends BvComponent {}
 

package/src/vendor/bootstrap-vue/src/components/layout/index.js

@@ -1,16 +1,12 @@
-import { BContainer } from './container'
-import { BRow } from './row'
 import { BCol } from './col'
 import { BFormRow } from './form-row'
 import { pluginFactory } from '../../utils/plugins'
 
 const LayoutPlugin = /*#__PURE__*/ pluginFactory({
   components: {
-    BContainer,
-    BRow,
     BCol,
     BFormRow
   }
 })
 
-export { LayoutPlugin, BContainer, BRow, BCol, BFormRow }
+export { LayoutPlugin, BCol, BFormRow }