@gitlab/ui 97.3.0 → 98.1.0

package/src/tokens/contextual/button.tokens.json

@@ -34,7 +34,7 @@
             "default": {
               "$value": {
                 "default": "{color.neutral.0}",
-                "dark": "{color.neutral.900}"
+                "dark": "rgba(137, 136, 141, 0.4)"
               },
               "$type": "color",
               "$description": "Used for the background of an default primary button in the default state."
@@ -42,7 +42,7 @@
             "hover": {
               "$value": {
                 "default": "{color.neutral.50}",
-                "dark": "{color.neutral.900}"
+                "dark": "rgba(137, 136, 141, 0.64)"
               },
               "$type": "color",
               "$description": "Used for the background of an default primary button in the hover state."
@@ -55,7 +55,7 @@
             "active": {
               "$value": {
                 "default": "{color.neutral.100}",
-                "dark": "{color.neutral.800}"
+                "dark": "rgba(137, 136, 141, 0.32)"
               },
               "$type": "color",
               "$description": "Used for the background of an default primary button in the active state."
@@ -67,7 +67,7 @@
             "default": {
               "$value": {
                 "default": "{color.neutral.200}",
-                "dark": "{color.neutral.700}"
+                "dark": "{color.alpha.0}"
               },
               "$type": "color",
               "$description": "Used for the border of an default primary button in the default state."
@@ -75,7 +75,7 @@
             "hover": {
               "$value": {
                 "default": "{color.neutral.400}",
-                "dark": "{color.neutral.500}"
+                "dark": "{color.alpha.0}"
               },
               "$type": "color",
               "$description": "Used for the border of an default primary button in the hover state."
@@ -88,7 +88,7 @@
             "active": {
               "$value": {
                 "default": "{color.neutral.600}",
-                "dark": "{color.neutral.300}"
+                "dark": "{color.alpha.0}"
               },
               "$type": "color",
               "$description": "Used for the border of an default primary button in the active state."
@@ -176,7 +176,10 @@
         "foreground": {
           "color": {
             "default": {
-              "$value": "{action.strong.confirm.foreground.color.default}",
+              "$value": {
+                "default": "{color.neutral.0}",
+                "dark": "{color.neutral.950}"
+              },
               "$type": "color",
               "$description": "Used for the foreground of a confirm (positive) primary button in the default state."
             },
@@ -226,7 +229,7 @@
             "default": {
               "$value": {
                 "default": "{color.blue.600}",
-                "dark": "{color.blue.300}"
+                "dark": "{color.alpha.0}"
               },
               "$type": "color",
               "$description": "Used for the border of a confirm (positive) primary button in the default state."
@@ -234,7 +237,7 @@
             "hover": {
               "$value": {
                 "default": "{color.blue.800}",
-                "dark": "{color.blue.100}"
+                "dark": "{color.alpha.0}"
               },
               "$type": "color",
               "$description": "Used for the border of a confirm (positive) primary button in the hover state."
@@ -247,7 +250,7 @@
             "active": {
               "$value": {
                 "default": "{color.blue.900}",
-                "dark": "{color.blue.50}"
+                "dark": "{color.alpha.0}"
               },
               "$type": "color",
               "$description": "Used for the border of a confirm (positive) primary button in the active state."
@@ -261,7 +264,7 @@
             "default": {
               "$value": {
                 "default": "{color.blue.500}",
-                "dark": "{color.blue.400}"
+                "dark": "{color.blue.100}"
               },
               "$type": "color",
               "$description": "Used for the foreground of a confirm (positive) button in the default state."
@@ -269,7 +272,7 @@
             "hover": {
               "$value": {
                 "default": "{color.blue.700}",
-                "dark": "{color.blue.200}"
+                "dark": "{color.blue.100}"
               },
               "$type": "color",
               "$description": "Used for the foreground of a confirm (positive) button in the hover state."
@@ -282,7 +285,7 @@
             "active": {
               "$value": {
                 "default": "{color.blue.900}",
-                "dark": "{color.blue.50}"
+                "dark": "{color.blue.100}"
               },
               "$type": "color",
               "$description": "Used for the foreground of a confirm (positive) button in the active state."
@@ -294,7 +297,7 @@
             "default": {
               "$value": {
                 "default": "{color.neutral.0}",
-                "dark": "{color.neutral.900}"
+                "dark": "rgba(66, 143, 220, 0.4)"
               },
               "$type": "color",
               "$description": "Used for the background of an outlined confirm (positive) button in the default state."
@@ -302,7 +305,7 @@
             "hover": {
               "$value": {
                 "default": "{color.blue.50}",
-                "dark": "{color.blue.900}"
+                "dark": "rgba(66, 143, 220, 0.64)"
               },
               "$type": "color",
               "$description": "Used for the background of an outlined confirm (positive) button in the hover state."
@@ -315,7 +318,7 @@
             "active": {
               "$value": {
                 "default": "{color.blue.100}",
-                "dark": "{color.blue.800}"
+                "dark": "rgba(66, 143, 220, 0.32)"
               },
               "$type": "color",
               "$description": "Used for the background of an outlined confirm (positive) button in the active state."
@@ -327,7 +330,7 @@
             "default": {
               "$value": {
                 "default": "{color.blue.500}",
-                "dark": "{color.blue.400}"
+                "dark": "{color.alpha.0}"
               },
               "$type": "color",
               "$description": "Used for the border of an outlined confirm (positive) button in the default state."
@@ -335,7 +338,7 @@
             "hover": {
               "$value": {
                 "default": "{color.blue.700}",
-                "dark": "{color.blue.200}"
+                "dark": "{color.alpha.0}"
               },
               "$type": "color",
               "$description": "Used for the border of an outlined confirm (positive) button in the hover state."
@@ -348,7 +351,7 @@
             "active": {
               "$value": {
                 "default": "{color.blue.900}",
-                "dark": "{color.blue.50}"
+                "dark": "{color.alpha.0}"
               },
               "$type": "color",
               "$description": "Used for the border of an outlined confirm (positive) button in the active state."
@@ -436,7 +439,10 @@
         "foreground": {
           "color": {
             "default": {
-              "$value": "{color.neutral.0}",
+              "$value": {
+                "default": "{color.neutral.0}",
+                "dark": "{color.neutral.950}"
+              },
               "$type": "color",
               "$description": "Used for the foreground of a danger (destructive) primary button in the default state."
             },
@@ -462,7 +468,7 @@
             "default": {
               "$value": {
                 "default": "{color.red.500}",
-                "dark": "{color.red.400}"
+                "dark": "{color.red.300}"
               },
               "$type": "color",
               "$description": "Used for the background of a danger (destructive) primary button in the default state."
@@ -470,7 +476,7 @@
             "hover": {
               "$value": {
                 "default": "{color.red.600}",
-                "dark": "{color.red.300}"
+                "dark": "{color.red.200}"
               },
               "$type": "color",
               "$description": "Used for the background of a danger (destructive) primary button in the hover state."
@@ -483,7 +489,7 @@
             "active": {
               "$value": {
                 "default": "{color.red.800}",
-                "dark": "{color.red.100}"
+                "dark": "{color.red.400}"
               },
               "$type": "color",
               "$description": "Used for the background of a danger (destructive) primary button in the active state."
@@ -495,7 +501,7 @@
             "default": {
               "$value": {
                 "default": "{color.red.600}",
-                "dark": "{color.red.300}"
+                "dark": "{color.alpha.0}"
               },
               "$type": "color",
               "$description": "Used for the border of a danger (destructive) primary button in the default state."
@@ -503,7 +509,7 @@
             "hover": {
               "$value": {
                 "default": "{color.red.800}",
-                "dark": "{color.red.100}"
+                "dark": "{color.alpha.0}"
               },
               "$type": "color",
               "$description": "Used for the border of a danger (destructive) primary button in the hover state."
@@ -516,7 +522,7 @@
             "active": {
               "$value": {
                 "default": "{color.red.900}",
-                "dark": "{color.red.50}"
+                "dark": "{color.alpha.0}"
               },
               "$type": "color",
               "$description": "Used for the border of a danger (destructive) primary button in the active state."
@@ -530,7 +536,7 @@
             "default": {
               "$value": {
                 "default": "{color.red.500}",
-                "dark": "{color.red.400}"
+                "dark": "{color.red.100}"
               },
               "$type": "color",
               "$description": "Used for the foreground of a danger (destructive) button in the default state."
@@ -538,7 +544,7 @@
             "hover": {
               "$value": {
                 "default": "{color.red.700}",
-                "dark": "{color.red.200}"
+                "dark": "{color.red.50}"
               },
               "$type": "color",
               "$description": "Used for the foreground of a danger (destructive) button in the hover state."
@@ -551,7 +557,7 @@
             "active": {
               "$value": {
                 "default": "{color.red.900}",
-                "dark": "{color.red.50}"
+                "dark": "{button.danger.secondary.foreground.color.focus}"
               },
               "$type": "color",
               "$description": "Used for the foreground of a danger (destructive) button in the active state."
@@ -563,7 +569,7 @@
             "default": {
               "$value": {
                 "default": "{color.neutral.0}",
-                "dark": "{color.neutral.900}"
+                "dark": "rgba(236, 89, 65, 0.40)"
               },
               "$type": "color",
               "$description": "Used for the background of an outlined danger (destructive) button in the default state."
@@ -571,7 +577,7 @@
             "hover": {
               "$value": {
                 "default": "{color.red.50}",
-                "dark": "{color.red.900}"
+                "dark": "rgba(236, 89, 65, 0.64)"
               },
               "$type": "color",
               "$description": "Used for the background of an outlined danger (destructive) button in the hover state."
@@ -584,7 +590,7 @@
             "active": {
               "$value": {
                 "default": "{color.red.100}",
-                "dark": "{color.red.800}"
+                "dark": "rgba(236, 89, 65, 0.32)"
               },
               "$type": "color",
               "$description": "Used for the background of an outlined danger (destructive) button in the active state."
@@ -596,7 +602,7 @@
             "default": {
               "$value": {
                 "default": "{color.red.500}",
-                "dark": "{color.red.400}"
+                "dark": "{color.alpha.0}"
               },
               "$type": "color",
               "$description": "Used for the border of an outlined danger (destructive) button in the default state."
@@ -604,7 +610,7 @@
             "hover": {
               "$value": {
                 "default": "{color.red.700}",
-                "dark": "{color.red.200}"
+                "dark": "{color.alpha.0}"
               },
               "$type": "color",
               "$description": "Used for the border of an outlined danger (destructive) button in the hover state."
@@ -617,7 +623,7 @@
             "active": {
               "$value": {
                 "default": "{color.red.900}",
-                "dark": "{color.red.50}"
+                "dark": "{color.alpha.0}"
               },
               "$type": "color",
               "$description": "Used for the border of an outlined danger (destructive) button in the active state."
@@ -853,7 +859,7 @@
         "color": {
           "$value": {
             "default": "{color.neutral.10}",
-            "dark": "{color.neutral.950}"
+            "dark": "rgba(137, 136, 141, 0.16)"
           },
           "$type": "color",
           "$description": "Used for the background of a disabled button."
@@ -863,7 +869,7 @@
         "color": {
           "$value": {
             "default": "{color.neutral.100}",
-            "dark": "{color.neutral.800}"
+            "dark": "{color.alpha.0}"
           },
           "$type": "color",
           "$description": "Used for the border of a disabled button."

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

@@ -59,10 +59,9 @@
     "audit": "improved-yarn-audit --ignore-dev-deps --min-severity moderate -e 1488",
     "lint": "eslint --ext .js,.md,.vue ./",
     "prettify": "prettier --write '**/*.{js,json,md,scss,ts,vue}'",
-    "test": "yarn run test:meta && yarn run test:lint && yarn run test:unit",
+    "test": "yarn run test:meta && yarn run test:lint",
     "test:lint": "yarn run lint",
-    "test:meta": "scripts/check-meta.sh",
-    "test:unit": "jest"
+    "test:meta": "scripts/check-meta.sh"
   },
   "dependencies": {
     "bootstrap": "^4.6.1",
@@ -71,15 +70,6 @@
     "vue-functional-data-merge": "^3.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.5",
-    "@babel/preset-env": "^7.14.2",
-    "@testing-library/jest-dom": "^5.12.0",
-    "@vue/compat": "^3.2.40",
-    "@vue/compiler-dom": "^3.2.40",
-    "@vue/test-utils": "^1.3.0",
-    "@vue/test-utils-vue3": "npm:@vue/test-utils@2.2.0",
-    "babel-jest": "^26.6.3",
-    "core-js": "^3.12.1",
     "eslint": "^7.26.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-standard": "^16.0.2",
@@ -92,14 +82,8 @@
     "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-vue": "^7.9.0",
     "improved-yarn-audit": "^3.0.0",
-    "jest": "^26.6.3",
     "lodash": "^4.17.21",
-    "prettier": "1.14.3",
-    "vue": "^2.6.12",
-    "vue-router": "^3.5.1",
-    "vue-server-renderer": "^2.6.12",
-    "vue-template-compiler": "^2.6.12",
-    "vue-test-utils-compat": "0.0.6"
+    "prettier": "1.14.3"
   },
   "keywords": [
     "Bootstrap",
@@ -138,7 +122,6 @@
     "List",
     "Modal",
     "Nav",
-    "Navbar",
     "Option",
     "Overlay",
     "Pagination",

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

@@ -0,0 +1,14 @@
+# Modifications to Vendored Code
+
+**Library**: BootstrapVue  
+**Version**: 2.23.1 **Link:** https://bootstrap-vue.org **Source:**
+https://github.com/bootstrap-vue/bootstrap-vue **Copyright:** (c) 2016-2024 BootstrapVue
+**License:** (c)
+[2016-2024 BootstrapVue](https://github.com/bootstrap-vue/bootstrap-vue/blob/master/LICENSE)
+
+This file documents modifications made to the original BootstrapVue component files.
+
+## Removed props
+
+The property `isNav` and code executed based on this property has been removed, as we removed the
+Navbar logic.

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

@@ -1,18 +1,16 @@
 import { extend } from '../../vue'
 import { NAME_COLLAPSE } from '../../constants/components'
 import { CLASS_NAME_SHOW } from '../../constants/classes'
-import { IS_BROWSER } from '../../constants/env'
 import {
   EVENT_NAME_HIDDEN,
   EVENT_NAME_HIDE,
   EVENT_NAME_SHOW,
-  EVENT_NAME_SHOWN,
-  EVENT_OPTIONS_NO_CAPTURE
+  EVENT_NAME_SHOWN
 } from '../../constants/events'
 import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
 import { SLOT_NAME_DEFAULT } from '../../constants/slots'
 import { addClass, hasClass, removeClass, closest, matches, getCS } from '../../utils/dom'
-import { getRootActionEventName, getRootEventName, eventOnOff } from '../../utils/events'
+import { getRootActionEventName, getRootEventName } from '../../utils/events'
 import { makeModelMixin } from '../../utils/model'
 import { sortKeys } from '../../utils/object'
 import { makeProp, makePropsConfigurable } from '../../utils/props'
@@ -46,7 +44,6 @@ export const props = makePropsConfigurable(
     // If `true` (and `visible` is `true` on mount), animate initially visible
     accordion: makeProp(PROP_TYPE_STRING),
     appear: makeProp(PROP_TYPE_BOOLEAN, false),
-    isNav: makeProp(PROP_TYPE_BOOLEAN, false),
     tag: makeProp(PROP_TYPE_STRING, 'div')
   }),
   NAME_COLLAPSE
@@ -70,7 +67,6 @@ export const BCollapse = /*#__PURE__*/ extend({
       const { transitioning } = this
 
       return {
-        'navbar-collapse': this.isNav,
         collapse: !transitioning,
         show: this.show && !transitioning
       }
@@ -105,11 +101,6 @@ export const BCollapse = /*#__PURE__*/ extend({
     this.listenOnRoot(ROOT_ACTION_EVENT_NAME_TOGGLE, this.handleToggleEvent)
     // Listen to other collapses for accordion events
     this.listenOnRoot(ROOT_EVENT_NAME_ACCORDION, this.handleAccordionEvent)
-    if (this.isNav) {
-      // Set up handlers
-      this.setWindowEvents(true)
-      this.handleResize()
-    }
     this.$nextTick(() => {
       this.emitState()
     })
@@ -126,31 +117,11 @@ export const BCollapse = /*#__PURE__*/ extend({
     // It is emitted regardless if the visible state changes
     this.emitSync()
   },
-  /* istanbul ignore next */
-  deactivated() {
-    if (this.isNav) {
-      this.setWindowEvents(false)
-    }
-  },
-  /* istanbul ignore next */
-  activated() {
-    if (this.isNav) {
-      this.setWindowEvents(true)
-    }
-    this.emitSync()
-  },
   beforeDestroy() {
     // Trigger state emit if needed
     this.show = false
-    if (this.isNav && IS_BROWSER) {
-      this.setWindowEvents(false)
-    }
   },
   methods: {
-    setWindowEvents(on) {
-      eventOnOff(on, window, 'resize', this.handleResize, EVENT_OPTIONS_NO_CAPTURE)
-      eventOnOff(on, window, 'orientationchange', this.handleResize, EVENT_OPTIONS_NO_CAPTURE)
-    },
     toggle() {
       this.show = !this.show
     },
@@ -206,9 +177,8 @@ export const BCollapse = /*#__PURE__*/ extend({
     },
     clickHandler(event) {
       const { target: el } = event
-      // If we are in a nav/navbar, close the collapse when non-disabled link clicked
       /* istanbul ignore next: can't test `getComputedStyle()` in JSDOM */
-      if (!this.isNav || !el || getCS(this.$el).display !== 'block') {
+      if (!el || getCS(this.$el).display !== 'block') {
         return
       }
       // Only close the collapse if it is not forced to be `display: block !important`
@@ -235,10 +205,6 @@ export const BCollapse = /*#__PURE__*/ extend({
       if ((isThis && !show) || (!isThis && show)) {
         this.toggle()
       }
-    },
-    handleResize() {
-      // Handler for orientation/resize to set collapsed state in nav/navbar
-      this.show = getCS(this.$el).display === 'block'
     }
   },
   render(h) {

package/src/vendor/bootstrap-vue/src/components/collapse/collapse.spec.js

@@ -46,32 +46,6 @@ describe('collapse', () => {
     expect(wrapper.attributes('id')).toBeDefined()
     expect(wrapper.attributes('id')).toEqual('test')
     expect(wrapper.classes()).toContain('collapse')
-    expect(wrapper.classes()).not.toContain('navbar-collapse')
-    expect(wrapper.classes()).not.toContain('show')
-    expect(wrapper.element.style.display).toEqual('none')
-    expect(wrapper.text()).toEqual('')
-
-    wrapper.destroy()
-  })
-
-  it('should have expected structure when prop is-nav is set', async () => {
-    const wrapper = mount(BCollapse, {
-      attachTo: document.body,
-      propsData: {
-        // 'id' is a required prop
-        id: 'test',
-        isNav: true
-      }
-    })
-    // const rootWrapper = createWrapper(wrapper.vm.$root)
-    expect(wrapper.vm).toBeDefined()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.attributes('id')).toBeDefined()
-    expect(wrapper.attributes('id')).toEqual('test')
-    expect(wrapper.classes()).toContain('collapse')
-    expect(wrapper.classes()).toContain('navbar-collapse')
     expect(wrapper.classes()).not.toContain('show')
     expect(wrapper.element.style.display).toEqual('none')
     expect(wrapper.text()).toEqual('')
@@ -369,112 +343,6 @@ describe('collapse', () => {
     wrapper.destroy()
   })
 
-  it('should close when clicking on contained nav-link prop is-nav is set', async () => {
-    const App = {
-      render(h) {
-        return h('div', [
-          // JSDOM supports `getComputedStyle()` when using stylesheets (non responsive)
-          // https://github.com/jsdom/jsdom/blob/master/Changelog.md#030
-          h('style', { attrs: { type: 'text/css' } }, '.collapse:not(.show) { display: none; }'),
-          h(
-            BCollapse,
-            {
-              props: {
-                id: 'test',
-                isNav: true,
-                visible: true
-              }
-            },
-            [h('a', { class: 'nav-link', attrs: { href: '#' } }, 'nav link')]
-          )
-        ])
-      }
-    }
-    const wrapper = mount(App, {
-      attachTo: document.body
-    })
-
-    expect(wrapper.vm).toBeDefined()
-    const $collapse = wrapper.findComponent(BCollapse)
-    expect($collapse.vm).toBeDefined()
-
-    expect(wrapper.find('style').exists()).toBe(true)
-
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-
-    expect($collapse.classes()).toContain('show')
-    expect($collapse.element.style.display).toEqual('')
-    expect($collapse.find('.nav-link').exists()).toBe(true)
-
-    // Click on link
-    await wrapper.find('.nav-link').trigger('click')
-    await waitRAF()
-    await waitRAF()
-    expect($collapse.classes()).not.toContain('show')
-    expect($collapse.element.style.display).toEqual('none')
-
-    wrapper.destroy()
-  })
-
-  it('should not close when clicking on nav-link prop is-nav is set & collapse is display block important', async () => {
-    const App = {
-      render(h) {
-        return h('div', [
-          // JSDOM supports `getComputedStyle()` when using stylesheets (non responsive)
-          // Although it appears to be picky about CSS definition ordering
-          // https://github.com/jsdom/jsdom/blob/master/Changelog.md#030
-          h(
-            'style',
-            { attrs: { type: 'text/css' } },
-            '.collapse:not(.show) { display: none; } .d-block { display: block !important; }'
-          ),
-          h(
-            BCollapse,
-            {
-              class: 'd-block',
-              props: {
-                id: 'test',
-                isNav: true,
-                visible: true
-              }
-            },
-            [h('a', { class: 'nav-link', attrs: { href: '#' } }, 'nav link')]
-          )
-        ])
-      }
-    }
-    const wrapper = mount(App, {
-      attachTo: document.body
-    })
-
-    expect(wrapper.vm).toBeDefined()
-    const $collapse = wrapper.findComponent(BCollapse)
-    expect($collapse.vm).toBeDefined()
-
-    expect(wrapper.find('style').exists()).toBe(true)
-
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-
-    expect($collapse.classes()).toContain('show')
-    expect($collapse.element.style.display).toEqual('')
-    expect($collapse.find('.nav-link').exists()).toBe(true)
-
-    // Click on link
-    await wrapper.find('.nav-link').trigger('click')
-    await waitRAF()
-    await waitRAF()
-    expect($collapse.classes()).toContain('show')
-    expect($collapse.element.style.display).toEqual('')
-
-    wrapper.destroy()
-  })
-
   it('should not respond to root toggle event that does not match ID', async () => {
     const wrapper = mount(BCollapse, {
       attachTo: document.body,

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

@@ -20,10 +20,6 @@
             "version": "2.2.0",
             "description": "When set, and prop 'visible' is true on mount, will animate on initial mount"
           },
-          {
-            "prop": "isNav",
-            "description": "When set, signifies that the collapse is part of a navbar, enabling certain features for navbar support"
-          },
           {
             "prop": "visible",
             "description": "When 'true', expands the collapse"

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

@@ -723,7 +723,7 @@ the dropdown menu, ensure they are wrapped with a plain `<li>`.
 ## See also
 
 - [`<b-nav-item-dropdown>`](?path=/docs/base-nav--docs#dropdown-support) for dropdown support inside
-  `<b-nav>` and `<n-navbar>`
+  `<b-nav>`
 - [Router Link Support](?path=/docs/base-link--docs#router-link-support) reference for information
   about router-link specific props available on `<b-dropdown-item>`