@gitlab/ui 96.2.0 → 97.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/dist/components/base/alert/alert.js +1 -1
  3. package/dist/components/base/avatar/avatar.js +4 -4
  4. package/dist/components/base/datepicker/datepicker.js +1 -1
  5. package/dist/components/base/drawer/drawer.js +1 -1
  6. package/dist/components/base/form/form_input/form_input.js +3 -3
  7. package/dist/components/base/form/form_select/form_select.js +3 -3
  8. package/dist/components/base/progress_bar/progress_bar.js +47 -5
  9. package/dist/components/base/search_box_by_click/search_box_by_click.js +1 -1
  10. package/dist/components/base/toast/toast.js +1 -1
  11. package/dist/components/base/token/token.js +1 -1
  12. package/dist/index.css +1 -1
  13. package/dist/index.css.map +1 -1
  14. package/dist/tailwind.css +1 -1
  15. package/dist/tailwind.css.map +1 -1
  16. package/dist/utils/number_utils.js +9 -1
  17. package/dist/vendor/bootstrap-vue/src/constants/components.js +1 -3
  18. package/dist/vendor/bootstrap-vue/src/index.js +0 -2
  19. package/package.json +7 -7
  20. package/src/components/base/alert/alert.vue +1 -1
  21. package/src/components/base/avatar/avatar.vue +4 -4
  22. package/src/components/base/datepicker/datepicker.vue +1 -1
  23. package/src/components/base/drawer/drawer.vue +1 -1
  24. package/src/components/base/form/form_input/form_input.vue +3 -3
  25. package/src/components/base/form/form_select/form_select.vue +3 -3
  26. package/src/components/base/modal/modal.scss +1 -2
  27. package/src/components/base/progress_bar/progress_bar.md +25 -0
  28. package/src/components/base/progress_bar/progress_bar.scss +11 -0
  29. package/src/components/base/progress_bar/progress_bar.vue +54 -5
  30. package/src/components/base/search_box_by_click/search_box_by_click.scss +15 -9
  31. package/src/components/base/search_box_by_click/search_box_by_click.vue +5 -3
  32. package/src/components/base/toast/toast.js +1 -1
  33. package/src/components/base/token/token.vue +1 -1
  34. package/src/utils/number_utils.js +7 -0
  35. package/src/vendor/bootstrap-vue/package.json +3 -42
  36. package/src/vendor/bootstrap-vue/src/components/badge/README.md +2 -2
  37. package/src/vendor/bootstrap-vue/src/components/breadcrumb/README.md +2 -2
  38. package/src/vendor/bootstrap-vue/src/components/button/README.md +7 -9
  39. package/src/vendor/bootstrap-vue/src/components/button-group/README.md +0 -5
  40. package/src/vendor/bootstrap-vue/src/components/collapse/README.md +2 -2
  41. package/src/vendor/bootstrap-vue/src/components/dropdown/README.md +5 -5
  42. package/src/vendor/bootstrap-vue/src/components/form/README.md +21 -26
  43. package/src/vendor/bootstrap-vue/src/components/form-checkbox/README.md +6 -6
  44. package/src/vendor/bootstrap-vue/src/components/form-group/README.md +6 -4
  45. package/src/vendor/bootstrap-vue/src/components/form-input/README.md +4 -4
  46. package/src/vendor/bootstrap-vue/src/components/form-radio/README.md +1 -1
  47. package/src/vendor/bootstrap-vue/src/components/index.d.ts +0 -1
  48. package/src/vendor/bootstrap-vue/src/components/input-group/README.md +4 -9
  49. package/src/vendor/bootstrap-vue/src/components/layout/README.md +3 -3
  50. package/src/vendor/bootstrap-vue/src/components/link/README.md +1 -1
  51. package/src/vendor/bootstrap-vue/src/components/modal/README.md +2 -2
  52. package/src/vendor/bootstrap-vue/src/components/nav/README.md +13 -14
  53. package/src/vendor/bootstrap-vue/src/components/navbar/README.md +5 -6
  54. package/src/vendor/bootstrap-vue/src/components/popover/README.md +4 -4
  55. package/src/vendor/bootstrap-vue/src/components/table/README.md +5 -5
  56. package/src/vendor/bootstrap-vue/src/components/tabs/README.md +2 -2
  57. package/src/vendor/bootstrap-vue/src/components/toast/README.md +5 -5
  58. package/src/vendor/bootstrap-vue/src/components/tooltip/README.md +4 -4
  59. package/src/vendor/bootstrap-vue/src/constants/components.js +0 -2
  60. package/src/vendor/bootstrap-vue/src/directives/toggle/README.md +5 -6
  61. package/src/vendor/bootstrap-vue/src/directives/tooltip/README.md +2 -2
  62. package/src/vendor/bootstrap-vue/src/index.js +0 -4
  63. package/dist/vendor/bootstrap-vue/src/components/progress/index.js +0 -2
  64. package/dist/vendor/bootstrap-vue/src/components/progress/progress-bar.js +0 -128
  65. package/dist/vendor/bootstrap-vue/src/components/progress/progress.js +0 -56
  66. package/src/vendor/bootstrap-vue/nuxt/index.js +0 -164
  67. package/src/vendor/bootstrap-vue/nuxt/plugin.template.js +0 -29
  68. package/src/vendor/bootstrap-vue/src/components/progress/MODIFICATIONS.md +0 -23
  69. package/src/vendor/bootstrap-vue/src/components/progress/README.md +0 -363
  70. package/src/vendor/bootstrap-vue/src/components/progress/index.d.ts +0 -10
  71. package/src/vendor/bootstrap-vue/src/components/progress/index.js +0 -4
  72. package/src/vendor/bootstrap-vue/src/components/progress/package.json +0 -109
  73. package/src/vendor/bootstrap-vue/src/components/progress/progress-bar.js +0 -133
  74. package/src/vendor/bootstrap-vue/src/components/progress/progress-bar.spec.js +0 -270
  75. package/src/vendor/bootstrap-vue/src/components/progress/progress.js +0 -57
  76. package/src/vendor/bootstrap-vue/src/components/progress/progress.spec.js +0 -71
@@ -47,29 +47,22 @@
47
47
  "files": [
48
48
  "dist",
49
49
  "esm",
50
- "nuxt",
51
50
  "src"
52
51
  ],
53
52
  "sideEffects": [
54
53
  "**/*.css",
55
54
  "**/*.scss",
56
55
  "**/*.vue",
57
- "./docs",
58
56
  "./types"
59
57
  ],
60
58
  "scripts": {
61
59
  "audit": "improved-yarn-audit --ignore-dev-deps --min-severity moderate -e 1488",
62
- "build": "scripts/build.sh",
63
- "docs-build": "cross-env NODE_ENV=docs nuxt build -c docs/nuxt.config.js",
64
- "docs-dev": "cross-env NODE_ENV=docs nuxt dev -c docs/nuxt.config.js",
65
- "docs-gen": "cross-env NODE_ENV=docs nuxt generate -c docs/nuxt.config.js",
66
60
  "lint": "eslint --ext .js,.md,.vue ./",
67
- "prepare": "yarn run build",
68
61
  "prettify": "prettier --write '**/*.{js,json,md,scss,ts,vue}'",
69
- "test": "yarn run test:lint && yarn run test:unit",
62
+ "test": "yarn run test:meta && yarn run test:lint && yarn run test:unit",
70
63
  "test:lint": "yarn run lint",
71
- "test:unit": "jest",
72
- "watch": "rollup -c scripts/rollup.config.js --watch"
64
+ "test:meta": "scripts/check-meta.sh",
65
+ "test:unit": "jest"
73
66
  },
74
67
  "dependencies": {
75
68
  "bootstrap": "^4.6.1",
@@ -78,32 +71,15 @@
78
71
  "vue-functional-data-merge": "^3.1.0"
79
72
  },
80
73
  "devDependencies": {
81
- "@babel/cli": "^7.19.3",
82
74
  "@babel/core": "^7.16.5",
83
- "@babel/plugin-transform-modules-commonjs": "^7.14.0",
84
- "@babel/plugin-transform-runtime": "^7.16.5",
85
75
  "@babel/preset-env": "^7.14.2",
86
- "@babel/standalone": "^7.16.6",
87
- "@nuxt/content": "^1.14.0",
88
- "@nuxtjs/google-analytics": "^2.4.0",
89
- "@nuxtjs/pwa": "^3.3.5",
90
- "@nuxtjs/robots": "^2.5.0",
91
- "@nuxtjs/sitemap": "^2.4.0",
92
76
  "@testing-library/jest-dom": "^5.12.0",
93
77
  "@vue/compat": "^3.2.40",
94
78
  "@vue/compiler-dom": "^3.2.40",
95
79
  "@vue/test-utils": "^1.3.0",
96
80
  "@vue/test-utils-vue3": "npm:@vue/test-utils@2.2.0",
97
- "autoprefixer": "^10.4.0",
98
- "babel-core": "^7.0.0-bridge.0",
99
- "babel-eslint": "^10.1.0",
100
81
  "babel-jest": "^26.6.3",
101
- "babel-plugin-istanbul": "^6.0.0",
102
- "clean-css-cli": "^4.3.0",
103
- "codemirror": "^5.61.0",
104
- "codesandbox": "^2.2.3",
105
82
  "core-js": "^3.12.1",
106
- "cross-env": "^7.0.3",
107
83
  "eslint": "^7.26.0",
108
84
  "eslint-config-prettier": "^8.3.0",
109
85
  "eslint-config-standard": "^16.0.2",
@@ -115,25 +91,10 @@
115
91
  "eslint-plugin-prettier": "^3.4.1",
116
92
  "eslint-plugin-promise": "^5.1.0",
117
93
  "eslint-plugin-vue": "^7.9.0",
118
- "highlight.js": "^10.7.2",
119
- "html-loader": "^1.3.2",
120
94
  "improved-yarn-audit": "^3.0.0",
121
95
  "jest": "^26.6.3",
122
- "loader-utils": "^2.0.0",
123
96
  "lodash": "^4.17.21",
124
- "marked": "^2.0.3",
125
- "nuxt": "^2.15.8",
126
- "postcss": "^8.2.15",
127
- "postcss-cli": "^8.3.1",
128
97
  "prettier": "1.14.3",
129
- "require-context": "^1.1.0",
130
- "rollup": "^2.47.0",
131
- "rollup-plugin-babel": "^4.4.0",
132
- "rollup-plugin-commonjs": "^10.1.0",
133
- "rollup-plugin-node-resolve": "^5.2.0",
134
- "sass": "^1.45.0",
135
- "sass-loader": "^10.1.1",
136
- "terser": "^5.15.0",
137
98
  "vue": "^2.6.12",
138
99
  "vue-router": "^3.5.1",
139
100
  "vue-server-renderer": "^2.6.12",
@@ -120,7 +120,7 @@ Quickly provide actionable badges with hover and focus states by specifying eith
120
120
  <!-- b-badge-action.vue -->
121
121
  ```
122
122
 
123
- Refer to the [Router support](/docs/reference/router-links) reference page for router-link specific
124
- props.
123
+ Refer to the [Router support](?path=/docs/base-link--docs#router-link-support) reference page for
124
+ router-link specific props.
125
125
 
126
126
  <!-- Component reference added automatically from component package.json -->
@@ -62,8 +62,8 @@ const items = [
62
62
  ]
63
63
  ```
64
64
 
65
- Refer to the [Router support](/docs/reference/router-links) reference page for router-link specific
66
- props.
65
+ Refer to the [Router support](?path=/docs/base-link--docs#router-link-support) reference page for
66
+ router-link specific props.
67
67
 
68
68
  ## Manually placed items
69
69
 
@@ -252,13 +252,13 @@ modifier (available in Vue 2.3+) on the `pressed` property
252
252
  ```
253
253
 
254
254
  If using toggle button style for a radio or checkbox style interface, it is best to use the built-in
255
- `button` style support of [`<b-form-radio-group>`](/docs/components/form-radio) and
256
- [`<b-form-checkbox-group>`](/docs/components/form-checkbox).
255
+ `button` style support of [`<b-form-radio-group>`](?path=/docs/base-form-form-radio--docs) and
256
+ [`<b-form-checkbox-group>`](?path=/docs/base-form-form-checkbox--docs).
257
257
 
258
258
  ## Router link support
259
259
 
260
- Refer to the [`Router support`](/docs/reference/router-links) reference docs for the various
261
- supported `<router-link>` related props.
260
+ Refer to the [`Router support`](?path=/docs/base-link--docs#router-link-support) reference docs for
261
+ the various supported `<router-link>` related props.
262
262
 
263
263
  ## Accessibility
264
264
 
@@ -272,10 +272,8 @@ added, nor will the keyboard event listeners be enabled.
272
272
 
273
273
  ## See also
274
274
 
275
- - [`<b-button-group>`](/docs/components/button-group)
276
- - [`<b-button-toolbar>`](/docs/components/button-toolbar)
277
- - [`<b-link>`](/docs/components/link)
278
- - [Router Link Support](/docs/reference/router-links)
279
- - [Color Variants](/docs/reference/color-variants)
275
+ - [button-group](?path=/docs/base-button-group--docs)
276
+ - [link](?path=/docs/base-link--docs)
277
+ - [Router Link Support](?path=/docs/base-link--docs#router-link-support)
280
278
 
281
279
  <!-- Component reference added automatically from component package.json -->
@@ -104,9 +104,4 @@ that split dropdown menus are not supported when prop `vertical` is set.
104
104
  <!-- b-button-group-menu.vue -->
105
105
  ```
106
106
 
107
- ## See also
108
-
109
- Also check out the [`<b-button-toolbar>`](/docs/components/button-toolbar) component for generating
110
- toolbars containing button groups and input groups.
111
-
112
107
  <!-- Component reference added automatically from component package.json -->
@@ -311,8 +311,8 @@ apply those roles for you automatically, as it depends on your final document ma
311
311
 
312
312
  **Note:** The animation effect of this component is dependent on the `prefers-reduced-motion` media
313
313
  query. See the
314
- [reduced motion section of our accessibility documentation](/docs/reference/accessibility) for
315
- additional details.
314
+ [reduced motion section of our accessibility documentation](?path=/docs/base-tooltip--docs#accessibility)
315
+ for additional details.
316
316
 
317
317
  ## See also
318
318
 
@@ -508,8 +508,8 @@ the `tag` prop to any valid HTML5 tag on the `<b-dropdown-text>` sub-component.
508
508
 
509
509
  Dropdowns support basic forms. Put a `<b-dropdown-form>` within a dropdown menu and place form
510
510
  controls within the `<b-dropdown-form>`. The `<b-dropdown-form>` is based on the
511
- [`<b-form>`](/docs/components/form) component, and supports the same props and attributes as a
512
- regular form.
511
+ [`<gl-form>`](?path=/docs/base-form-form--docs) component, and supports the same props and
512
+ attributes as a regular form.
513
513
 
514
514
  ```html
515
515
  <template>
@@ -722,9 +722,9 @@ the dropdown menu, ensure they are wrapped with a plain `<li>`.
722
722
 
723
723
  ## See also
724
724
 
725
- - [`<b-nav-item-dropdown>`](/docs/components/nav#dropdown-support) for dropdown support inside
725
+ - [`<b-nav-item-dropdown>`](?path=/docs/base-nav--docs#dropdown-support) for dropdown support inside
726
726
  `<b-nav>` and `<n-navbar>`
727
- - [Router Link Support](/docs/reference/router-links) reference for information about router-link
728
- specific props available on `<b-dropdown-item>`
727
+ - [Router Link Support](?path=/docs/base-link--docs#router-link-support) reference for information
728
+ about router-link specific props available on `<b-dropdown-item>`
729
729
 
730
730
  <!-- Component reference added automatically from component package.json -->
@@ -186,23 +186,19 @@ technologies may resort to using the `placeholder` attribute, if present, but no
186
186
 
187
187
  See also:
188
188
 
189
- - [`<b-form-input>`](/docs/components/form-input) Textual and text-like inputs
190
- - [`<b-form-textarea>`](/docs/components/form-textarea) Text area inputs
191
- - [`<b-form-select>`](/docs/components/form-select) Select input
192
- - [`<b-form-radio>`](/docs/components/form-radio) Radio Inputs
193
- - [`<b-form-checkbox>`](/docs/components/form-checkbox) Checkbox Inputs
194
- - [`<b-form-file>`](/docs/components/form-file) File Input
195
- - [`<b-form-datepicker>`](/docs/components/form-datepicker) Date picker input
196
- - [`<b-form-spinbutton>`](/docs/components/form-spinbutton) Numerical range spinbutton input
197
- - [`<b-form-tags>`](/docs/components/form-tags) Customizable tag input
198
- - [`<b-form-timepicker>`](/docs/components/form-timepicker) Time picker custom form input
199
- - [`<b-form-rating>`](/docs/components/form-rating) Star rating custom form input and display
200
- - [`<b-button>`](/docs/components/button) Buttons
201
- - [`<b-form-group>`](/docs/components/form-group) Form Input wrapper to generate form-groups that
202
- support labels, help text and feedback
203
- - [`<b-input-group>`](/docs/components/input-group) Form Inputs with add-ons
204
- - [`<b-form-row>`](/docs/components/layout) Create grid rows and columns with tighter margins
205
- (available via the [Layout and grid components](/docs/components/layout))
189
+ - [form-input](?path=/docs/base-form-form-input--docs) Textual and text-like inputs
190
+ - [form-textarea](?path=/docs/base-form-form-textarea--docs) Text area inputs
191
+ - [form-select](?path=/docs/base-form-form-select--docs) Select input
192
+ - [form-radio](?path=/docs/base-form-form-radio--docs) Radio Inputs
193
+ - [form-checkbox](?path=/docs/base-form-form-checkbox--docs) Checkbox Inputs
194
+ - [form-date](?path=/docs/base-form-form-date--docs) Date input
195
+ - [button](?path=/docs/base-button--docs) Buttons
196
+ - [form-group](/?path=/docs/base-form-form-group--docs) Form Input wrapper to generate form-groups
197
+ that support labels, help text and feedback
198
+ - [form-input-group](/?path=/docs/base-form-form-input-group--docs) Form Inputs with add-ons
199
+ - [form-row](?path=/docs/base-form-form-group--docs#rows-b-row-and-b-form-row) Create grid rows and
200
+ columns with tighter margins (available via the
201
+ [Layout and grid components](?path=/docs/base-form-form-group--docs#layout-and-grid-system))
206
202
 
207
203
  ## Form helper components
208
204
 
@@ -253,12 +249,11 @@ class). Note that tooltip style feedback may, since its positioning is static, o
253
249
  labels, etc.
254
250
 
255
251
  **Note:** Some form controls, such as
256
- [`<b-form-radio>`](/docs/components/form-radio#contextual-states),
257
- [`<b-form-checkbox>`](/docs/components/form-checkbox#contextual-states), and
258
- [`<b-form-file>`](/docs/components/form-file) have wrapper elements which will prevent the feedback
259
- text from automatically showing (as the feedback component is not a direct sibling of the form
260
- control's input). Use the feedback component's `state` prop (bound to the state of the form control)
261
- or the `force-show` prop to display the feedback.
252
+ [`<gl-form-radio>`](?path=/docs/base-form-form-radio--docs#contextual-states) and
253
+ [`<gl-form-checkbox>`](?path=/docs/base-form-form-checkbox--docs#contextual-states) have wrapper
254
+ elements which will prevent the feedback text from automatically showing (as the feedback component
255
+ is not a direct sibling of the form control's input). Use the feedback component's `state` prop
256
+ (bound to the state of the form control) or the `force-show` prop to display the feedback.
262
257
 
263
258
  ```html
264
259
  <template>
@@ -330,9 +325,9 @@ export default {
330
325
 
331
326
  See also:
332
327
 
333
- - [`<b-form-input> datalist`](/docs/components/form-input#datalist-support) for datalist usage.
334
- - [`<b-form-select>` `options` prop](/docs/components/form-select#options-property) docs for details
335
- on the formats and helper props associated with `options`.
328
+ - [form-input datalist](?path=/docs/base-form-form-input--docs#datalist-support) for datalist usage.
329
+ - [form-select `options` prop](?path=/docs/base-form-form-select--docs#options-property) docs for
330
+ details on the formats and helper props associated with `options`.
336
331
 
337
332
  ## Validation
338
333
 
@@ -361,8 +361,8 @@ This will inform users of assistive technologies that the checkboxes are related
361
361
  browser keyboard navigation.
362
362
 
363
363
  Whenever using multiple checkboxes, it is recommended that the checkboxes be placed in a
364
- [`<b-form-group>`](/docs/components/form-group) component to associate a label with the entire group
365
- of checkboxes. See examples above.
364
+ [`<gl-form-group>`](?path=/docs/base-form-form-group--docs) component to associate a label with the
365
+ entire group of checkboxes. See examples above.
366
366
 
367
367
  ## Button style checkboxes
368
368
 
@@ -376,8 +376,8 @@ are in the _checked_ state.
376
376
  A single checkbox can be rendered with a button appearance by setting the prop `button` to `true`
377
377
 
378
378
  Change the button variant by setting the `button-variant` prop to one of the standard Bootstrap
379
- button variants (see [`<b-button>`](/docs/components/button) for supported variants). The default
380
- variant is `secondary`.
379
+ button variants (see [`<gl-button>`](?path=/docs/base-button--docs) for supported variants). The
380
+ default variant is `secondary`.
381
381
 
382
382
  ```html
383
383
  <template>
@@ -411,8 +411,8 @@ The `inline` prop has no effect on individual button-style checkboxes.
411
411
 
412
412
  Render groups of checkboxes with the look of a button-group by setting the prop `buttons` on
413
413
  `<b-form-checkbox-group>`. Change the button variant by setting the `button-variant` prop to one of
414
- the standard Bootstrap button variants (see [`<b-button>`](/docs/components/button) for supported
415
- variants). The default `button-variant` is `secondary`.
414
+ the standard Bootstrap button variants (see [`<gl-button>`](?path=/docs/base-button--docs) for
415
+ supported variants). The default `button-variant` is `secondary`.
416
416
 
417
417
  ```html
418
418
  <template>
@@ -84,7 +84,8 @@ occupy in the row via the `content-cols` and `content-cols-{breakpoint}` props.
84
84
  When using both, the `label-cols` and `content-cols` props, make sure that the total amount of
85
85
  columns doesn't exceed `12`.
86
86
 
87
- See the [Layout and Grid System](/docs/components/layout#how-it-works) docs for further information.
87
+ See the [Layout and Grid System](?path=/docs/base-form-form-group--docs#how-it-works) docs for
88
+ further information.
88
89
 
89
90
  | Prop | Description |
90
91
  | ----------------- | ------------------------------------------------------------------------------------- |
@@ -165,7 +166,7 @@ Alignment has no effect if the `label-sr-only` prop is set.
165
166
 
166
167
  Optional descriptive text which is always shown with the `.text-muted` class by setting the
167
168
  `description` prop or using the named slot `description`. The description text is rendered using the
168
- [`<b-form-text>`](/docs/components/form#helper-components) form sub-component.
169
+ [`<b-form-text>`](?path=/docs/base-form-form--docs#helper-components) form sub-component.
169
170
 
170
171
  ## Nested form groups
171
172
 
@@ -281,7 +282,8 @@ Show optional invalid state feedback text to provide textual state feedback (htm
281
282
  setting the prop `invalid-feedback` or using the named slot `invalid-feedback`.
282
283
 
283
284
  Invalid feedback is rendered using the
284
- [`<b-form-invalid-feedback>`](/docs/components/form#helper-components) form sub-component.
285
+ [`<b-form-invalid-feedback>`](?path=/docs/base-form-form--docs#helper-components) form
286
+ sub-component.
285
287
 
286
288
  ### Valid feedback
287
289
 
@@ -289,7 +291,7 @@ Show optional valid state feedback text to provide textual state feedback (html
289
291
  setting the prop `valid-feedback` or using the named slot `valid-feedback`.
290
292
 
291
293
  Valid feedback is rendered using the
292
- [`<b-form-valid-feedback>`](/docs/components/form#helper-components) form sub-component.
294
+ [`<b-form-valid-feedback>`](?path=/docs/base-form-form--docs#helper-components) form sub-component.
293
295
 
294
296
  ### Feedback style
295
297
 
@@ -304,8 +304,8 @@ invalid), `true` (for valid), or `null` (no validation state).
304
304
  <!-- b-form-input-states-feedback.vue -->
305
305
  ```
306
306
 
307
- > **Tip:** Use the [`<b-form-group>`](/docs/components/form-group) component to automatically
308
- > generate markup similar to above.
307
+ > **Tip:** Use the [`<gl-form-group>`](?path=/docs/base-form-form-group--docs) component to
308
+ > automatically generate markup similar to above.
309
309
 
310
310
  ### Conveying contextual state to assistive technologies and colorblind users
311
311
 
@@ -463,8 +463,8 @@ chosen, or new values to be entered.
463
463
  ```
464
464
 
465
465
  BootstrapVue provides the form helper component
466
- [`<b-form-datalist>`](/docs/components/form/#datalist-helper) for quickly creating a `<datalist>`
467
- from an array of options.
466
+ [`<b-form-datalist>`](?path=/docs/base-form-form--docs#datalist-helper) for quickly creating a
467
+ `<datalist>` from an array of options.
468
468
 
469
469
  **Notes:**
470
470
 
@@ -345,7 +345,7 @@ BootstrapVue includes custom SCSS/CSS that adds support for sizing the custom ra
345
345
 
346
346
  Render radios with the look of buttons by setting the prop `buttons` to `true` on
347
347
  `<b-form-radio-group>`. Set the button variant by setting the `button-variant` prop to one of the
348
- standard Bootstrap button variants (see [`<b-button>`](/docs/components/button) for supported
348
+ standard Bootstrap button variants (see [`<gl-button>`](?path=/docs/base-button--docs) for supported
349
349
  variants). The default `button-variant` is `secondary`.
350
350
 
351
351
  The `buttons` prop has precedence over `plain`, and `button-variant` has no effect if `buttons` is
@@ -24,7 +24,6 @@ export * from './modal'
24
24
  export * from './nav'
25
25
  export * from './navbar'
26
26
  export * from './popover'
27
- export * from './progress'
28
27
  export * from './table'
29
28
  export * from './tabs'
30
29
  export * from './toast'
@@ -117,15 +117,10 @@ when you want to use on of [BootstrapVue's icons](/docs/icons).
117
117
 
118
118
  The following are the form controls supported as the input-group's _main_ input element:
119
119
 
120
- - [`<b-form-input>`](/docs/components/form-input)
121
- - [`<b-form-textarea>`](/docs/components/form-textarea)
122
- - [`<b-form-select>`](/docs/components/form-select)
123
- - [`<b-form-file>`](/docs/components/form-file)
124
- - [`<b-form-rating>`](/docs/components/form-rating)
125
- - [`<b-form-tags>`](/docs/components/form-tags)
126
- - [`<b-form-spinbutton>`](/docs/components/form-spinbutton)
127
- - [`<b-form-datepicker>`](/docs/components/form-datepicker)
128
- - [`<b-form-timepicker>`](/docs/components/form-timepicker)
120
+ - [form-input](?path=/docs/base-form-form-input--docs)
121
+ - [form-textarea](?path=/docs/base-form-form-textarea--docs)
122
+ - [form-select](?path=/docs/base-form-form-select--docs)
123
+ - [form-date](?path=/docs/base-form-form-date--docs)
129
124
 
130
125
  **Notes:**
131
126
 
@@ -147,13 +147,13 @@ You can remove the margin from `<b-row>` and padding from `<b-col>` by setting t
147
147
  on `<b-row>`.
148
148
 
149
149
  Or, for compact margins (smaller gutters between columns), use the `<b-form-row>` component, which
150
- is typically used when laying out [forms](/docs/components/form).
150
+ is typically used when laying out [forms](?path=/docs/base-form-form--docs).
151
151
 
152
152
  ## Columns `<b-col>`
153
153
 
154
154
  `<b-col>` Must be placed inside a `<b-row>` component, or an element (such as a `<div>`) that has
155
- the class `row` applied to it, or - in the case of [forms](/docs/components/form) - inside a
156
- `<b-form-row>` component (to obtain columns with more compact margins).
155
+ the class `row` applied to it, or - in the case of [forms](?path=/docs/base-form-form--docs) -
156
+ inside a `<b-form-row>` component (to obtain columns with more compact margins).
157
157
 
158
158
  ## Grid options
159
159
 
@@ -19,7 +19,7 @@ By specifying a value in the `href` prop, a standard link (`<a>`) element will b
19
19
  generate a `<router-link>` instead, specify the route location via the `to` prop.
20
20
 
21
21
  Router links support various additional props. Refer to the
22
- [Router support](/docs/reference/router-links) reference section for details.
22
+ [Router support](?path=/docs/base-link--docs#router-link-support) reference section for details.
23
23
 
24
24
  If your app is running under [Nuxt.js](https://nuxtjs.org), the
25
25
  [`<nuxt-link>`](https://nuxtjs.org/api/components-nuxt-link) component will be used instead of
@@ -898,8 +898,8 @@ emitted.
898
898
 
899
899
  **Note:** The animation effect of this component is dependent on the `prefers-reduced-motion` media
900
900
  query. See the
901
- [reduced motion section of our accessibility documentation](/docs/reference/accessibility) for
902
- additional details.
901
+ [reduced motion section of our accessibility documentation](?path=/docs/base-tooltip--docs#accessibility)
902
+ for additional details.
903
903
 
904
904
  ### Modal ARIA attributes
905
905
 
@@ -277,18 +277,18 @@ Use the `<b-nav-form>` child component to place an _inline_ form into the nav:
277
277
  <!-- b-nav-form.vue -->
278
278
  ```
279
279
 
280
- Refer to the [`<b-form>` inline](/docs/components/form#inline-form) documentation for additional
281
- details on placing form controls.
280
+ Refer to the [`<gl-form>` inline](?path=/docs/base-form-form--docs#inline-formm) documentation for
281
+ additional details on placing form controls.
282
282
 
283
283
  ## Tabbed local content support
284
284
 
285
- See the [`<b-tabs>`](/docs/components/tabs) component for creating tabbable panes of local content
286
- (not suited for navigation).
285
+ See the [`<gl-tabs>`](?path=/docs/base-tabs--docs) component for creating tabbable panes of local
286
+ content (not suited for navigation).
287
287
 
288
288
  ## Card integration
289
289
 
290
- Use a `<b-nav>` in a [`<b-card>`](/docs/components/card) header, by enabling the `card-header` prop
291
- on `<b-nav>` and setting either the `pills` or `tabs` props:
290
+ Use a `<b-nav>` in a [`<gl-card>`](?path=/docs/base-card--docs) header, by enabling the
291
+ `card-header` prop on `<b-nav>` and setting either the `pills` or `tabs` props:
292
292
 
293
293
  **Tabs style:**
294
294
 
@@ -453,9 +453,10 @@ generated.
453
453
 
454
454
  Note that navigation bars, even if visually styled as tabs, should **not** be given
455
455
  `role="tablist"`, `role="tab"` or `role="tabpanel"` attributes. These are only appropriate for
456
- [tabbed interfaces](/docs/components/tabs) that do not change the URL or `$route`, as described in
457
- the [WAI ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel). See
458
- [`<b-tabs>`](/docs/components/tabs) for dynamic tabbed interfaces that are compliant with WAI ARIA.
456
+ [tabbed interfaces](?path=/docs/base-tabs--docs) that do not change the URL or `$route`, as
457
+ described in the [WAI ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel).
458
+ See [`<gl-tabs>`](?path=/docs/base-tabs--docs) for dynamic tabbed interfaces that are compliant with
459
+ WAI ARIA.
459
460
 
460
461
  Tabbed interfaces should avoid using dropdown menus, as this causes both usability and accessibility
461
462
  issues:
@@ -468,13 +469,11 @@ issues:
468
469
 
469
470
  ## See also
470
471
 
471
- - [`<b-tabs>`](/docs/components/tabs) to create tabbable panes of local content, even via dropdown
472
+ - [tabs](?path=/docs/base-tabs--docs) to create tabbable panes of local content, even via dropdown
472
473
  menus.
473
- - [`<b-navbar>`](/docs/components/navbar) a wrapper that positions branding, navigation, and other
474
- elements in a concise header.
475
474
  - [`<b-dropdown>`](/docs/components/dropdown) for sub-components that you can place inside
476
475
  `<b-nav-item-dropdown>`
477
- - [Router Link Support reference](/docs/reference/router-links) for information about router-link
478
- specific props available on `<b-nav-item>`
476
+ - [Router Link Support reference](?path=/docs/base-link--docs#router-link-support) for information
477
+ about router-link specific props available on `<b-nav-item>`
479
478
 
480
479
  <!-- Component reference added automatically from component package.json -->
@@ -279,7 +279,7 @@ like `<b-navbar-brand>`, they'll automatically be aligned to the far right. Reve
279
279
  will reverse the placement of the toggler.
280
280
 
281
281
  See the first example on this page for reference, and also refer to
282
- [`<b-collapse>`](/docs/components/collapse) for details on the collapse component.
282
+ [`<gl-collapse>`](?path=/docs/base-collapse--docs) for details on the collapse component.
283
283
 
284
284
  Internally, `<b-navbar-toggle>` uses the [`v-b-toggle` directive](/docs/directives/toggle).
285
285
 
@@ -322,12 +322,11 @@ Navbars are hidden by default when printing. Force them to be printed by setting
322
322
 
323
323
  ## See also
324
324
 
325
- - [`<b-collapse>` component](/docs/components/collapse)
325
+ - [collapse](?path=/docs/base-collapse--docs)
326
326
  - [`v-b-toggle` directive](/docs/directives/toggle)
327
- - [`<b-nav>` documentation](/docs/components/nav) for additional components and sub-component
328
- aliases
327
+ - [nav](?path=/docs/base-nav--docs) for additional components and sub-component aliases
329
328
 
330
- Refer to the [Router support](/docs/reference/router-links) reference page for router-link specific
331
- props.
329
+ Refer to the [Router support](?path=/docs/base-link--docs#router-link-support) reference page for
330
+ router-link specific props.
332
331
 
333
332
  <!-- Component reference added automatically from component package.json -->
@@ -61,7 +61,7 @@ Twelve options are available for positioning: `top`, `topleft`, `topright`, `rig
61
61
  `rightbottom`, `bottom`, `bottomleft`, `bottomright`, `left`, `lefttop`, and `leftbottom` aligned.
62
62
  Positioning is relative to the trigger element.
63
63
 
64
- <div class="bd-example bd-example-popover-static">
64
+ <section class="bd-example bd-example-popover-static">
65
65
  <div class="popover b-popover bs-popover-top bs-popover-top-docs">
66
66
  <div class="arrow" style="left: calc(50% - 8px)"></div>
67
67
  <h3 class="popover-header">Popover top</h3>
@@ -163,7 +163,7 @@ Positioning is relative to the trigger element.
163
163
  </div>
164
164
 
165
165
  <div class="clearfix"></div>
166
- </div>
166
+ </section>
167
167
 
168
168
  ## Triggers
169
169
 
@@ -887,8 +887,8 @@ interacting with it (keeping focus inside the popover until it is closed by the
887
887
 
888
888
  **Note:** The animation effect of this component is dependent on the `prefers-reduced-motion` media
889
889
  query. See the
890
- [reduced motion section of our accessibility documentation](/docs/reference/accessibility) for
891
- additional details.
890
+ [reduced motion section of our accessibility documentation](?path=/docs/base-tooltip--docs#accessibility)
891
+ for additional details.
892
892
 
893
893
  ### Making popovers work for keyboard and assistive technology users
894
894
 
@@ -2168,7 +2168,7 @@ Setting the prop `filter` to null or an empty string will clear local items filt
2168
2168
  ### Debouncing filter criteria changes
2169
2169
 
2170
2170
  <span class="badge badge-warning small">deprecated in v2.1.0</span> Use the `debounce` feature of
2171
- [`<b-form-input>`](/docs/components/form-input#debounce-support) instead.
2171
+ [form-input](?path=/docs/base-form-form-input--docst#debounce-support) instead.
2172
2172
 
2173
2173
  If you have a text input tied to the `filter` prop of `<b-table>`, the filtering process will occur
2174
2174
  for each character typed by the user. With large items datasets, this process can take a while and
@@ -2198,7 +2198,7 @@ at a time by setting the `per-page` prop to the maximum number of rows you would
2198
2198
  use the `current-page` prop to specify which page to display (starting from page `1`). If you set
2199
2199
  `current-page` to a value larger than the computed number of pages, then no rows will be shown.
2200
2200
 
2201
- You can use the [`<b-pagination>`](/docs/components/pagination) component in conjunction with
2201
+ You can use the [`<gl-pagination>`](?path=/docs/base-pagination--docs) component in conjunction with
2202
2202
  `<b-table>` for providing control over pagination.
2203
2203
 
2204
2204
  Setting `per-page` to `0` (default) will disable the local items pagination feature.
@@ -2415,9 +2415,9 @@ of records.
2415
2415
  respective `no-provider-*` prop set to `true`).
2416
2416
  - The `no-local-sorting` prop has no effect when `items` is a provider function.
2417
2417
  - When using provider filtering, you may find that setting the
2418
- [`debounce` prop on `<b-form-input>`](/docs/components/form-input#debounce-support) to a value
2419
- greater than `100` ms will help minimize the number of calls to your back end API as the user
2420
- types in the criteria.
2418
+ [`debounce` prop on `<gl-form-input>`](?path=/docs/base-form-form-input--docs#debounce-support) to
2419
+ a value greater than `100` ms will help minimize the number of calls to your back end API as the
2420
+ user types in the criteria.
2421
2421
 
2422
2422
  ### Force refreshing of table data
2423
2423
 
@@ -4,7 +4,7 @@
4
4
  > cards internally, and provides full keyboard navigation control of the tabs.
5
5
 
6
6
  For navigation based tabs (i.e. tabs that would change the URL), use the
7
- [`<b-nav>`](/docs/components/nav) component instead.
7
+ [nav](?path=/docs/base-nav--docs) component instead.
8
8
 
9
9
  ## Basic usage
10
10
 
@@ -91,7 +91,7 @@ When `<b-tabs>` is in `card` mode, each `<b-tab>` sub-component will automatical
91
91
  **Note:** Setting the `no-body` prop on `<b-tab>` will have no affect when `<b-tabs>` is not in
92
92
  `card` mode (as the `card-body` class is only set when in `card` mode).
93
93
 
94
- Refer to the [Cards documentation](/docs/components/card) for more details on card components.
94
+ Refer to the [Cards documentation](?path=/docs/base-card--docs) for more details on card components.
95
95
 
96
96
  ## Pills variant
97
97