@gitlab/ui 96.3.0 → 97.1.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.
- package/CHANGELOG.md +32 -0
- package/dist/components/base/alert/alert.js +1 -1
- package/dist/components/base/avatar/avatar.js +4 -4
- package/dist/components/base/datepicker/datepicker.js +1 -1
- package/dist/components/base/drawer/drawer.js +1 -1
- package/dist/components/base/form/form_input/form_input.js +3 -3
- package/dist/components/base/form/form_select/form_select.js +3 -3
- package/dist/components/base/progress_bar/progress_bar.js +47 -5
- package/dist/components/base/toast/toast.js +1 -1
- package/dist/components/base/toggle/toggle.js +1 -1
- package/dist/components/base/token/token.js +1 -1
- package/dist/components/base/token_selector/token_selector.js +17 -7
- package/dist/index.css +2 -2
- package/dist/index.css.map +1 -1
- package/dist/tailwind.css +1 -1
- package/dist/tailwind.css.map +1 -1
- package/dist/tokens/build/js/tokens.dark.js +2 -1
- package/dist/tokens/build/js/tokens.js +2 -1
- package/dist/tokens/css/tokens.css +1 -0
- package/dist/tokens/css/tokens.dark.css +1 -0
- package/dist/tokens/js/tokens.dark.js +1 -0
- package/dist/tokens/js/tokens.js +1 -0
- package/dist/tokens/json/tokens.dark.json +35 -0
- package/dist/tokens/json/tokens.json +35 -0
- package/dist/tokens/scss/_tokens.dark.scss +1 -0
- package/dist/tokens/scss/_tokens.scss +1 -0
- package/dist/tokens/scss/_tokens_custom_properties.scss +1 -0
- package/dist/utils/number_utils.js +9 -1
- package/dist/vendor/bootstrap-vue/src/constants/components.js +1 -3
- package/dist/vendor/bootstrap-vue/src/index.js +0 -2
- package/package.json +7 -7
- package/src/components/base/alert/alert.vue +1 -1
- package/src/components/base/avatar/avatar.vue +4 -4
- package/src/components/base/datepicker/datepicker.vue +1 -1
- package/src/components/base/drawer/drawer.vue +1 -1
- package/src/components/base/form/form_input/form_input.scss +1 -2
- package/src/components/base/form/form_input/form_input.vue +3 -3
- package/src/components/base/form/form_select/form_select.vue +3 -3
- package/src/components/base/modal/modal.scss +1 -2
- package/src/components/base/progress_bar/progress_bar.md +25 -0
- package/src/components/base/progress_bar/progress_bar.scss +11 -0
- package/src/components/base/progress_bar/progress_bar.vue +54 -5
- package/src/components/base/toast/toast.js +1 -1
- package/src/components/base/toggle/toggle.scss +28 -7
- package/src/components/base/toggle/toggle.vue +1 -0
- package/src/components/base/token/token.vue +1 -1
- package/src/components/base/token_selector/token_selector.scss +8 -3
- package/src/components/base/token_selector/token_selector.vue +17 -9
- package/src/tokens/build/css/tokens.css +1 -0
- package/src/tokens/build/css/tokens.dark.css +1 -0
- package/src/tokens/build/js/tokens.dark.js +1 -0
- package/src/tokens/build/js/tokens.js +1 -0
- package/src/tokens/build/json/tokens.dark.json +35 -0
- package/src/tokens/build/json/tokens.json +35 -0
- package/src/tokens/build/scss/_tokens.dark.scss +1 -0
- package/src/tokens/build/scss/_tokens.scss +1 -0
- package/src/tokens/build/scss/_tokens_custom_properties.scss +1 -0
- package/src/tokens/contextual/token-selector.tokens.json +20 -0
- package/src/utils/number_utils.js +7 -0
- package/src/vendor/bootstrap-vue/package.json +3 -42
- package/src/vendor/bootstrap-vue/src/components/badge/README.md +2 -2
- package/src/vendor/bootstrap-vue/src/components/breadcrumb/README.md +2 -2
- package/src/vendor/bootstrap-vue/src/components/button/README.md +7 -9
- package/src/vendor/bootstrap-vue/src/components/button-group/README.md +0 -5
- package/src/vendor/bootstrap-vue/src/components/collapse/README.md +2 -2
- package/src/vendor/bootstrap-vue/src/components/dropdown/README.md +5 -5
- package/src/vendor/bootstrap-vue/src/components/form/README.md +21 -26
- package/src/vendor/bootstrap-vue/src/components/form-checkbox/README.md +6 -6
- package/src/vendor/bootstrap-vue/src/components/form-group/README.md +6 -4
- package/src/vendor/bootstrap-vue/src/components/form-input/README.md +4 -4
- package/src/vendor/bootstrap-vue/src/components/form-radio/README.md +1 -1
- package/src/vendor/bootstrap-vue/src/components/index.d.ts +0 -1
- package/src/vendor/bootstrap-vue/src/components/input-group/README.md +4 -9
- package/src/vendor/bootstrap-vue/src/components/layout/README.md +3 -3
- package/src/vendor/bootstrap-vue/src/components/link/README.md +1 -1
- package/src/vendor/bootstrap-vue/src/components/modal/README.md +2 -2
- package/src/vendor/bootstrap-vue/src/components/nav/README.md +13 -14
- package/src/vendor/bootstrap-vue/src/components/navbar/README.md +5 -6
- package/src/vendor/bootstrap-vue/src/components/popover/README.md +4 -4
- package/src/vendor/bootstrap-vue/src/components/table/README.md +5 -5
- package/src/vendor/bootstrap-vue/src/components/tabs/README.md +2 -2
- package/src/vendor/bootstrap-vue/src/components/toast/README.md +5 -5
- package/src/vendor/bootstrap-vue/src/components/tooltip/README.md +4 -4
- package/src/vendor/bootstrap-vue/src/constants/components.js +0 -2
- package/src/vendor/bootstrap-vue/src/directives/toggle/README.md +5 -6
- package/src/vendor/bootstrap-vue/src/directives/tooltip/README.md +2 -2
- package/src/vendor/bootstrap-vue/src/index.js +0 -4
- package/dist/vendor/bootstrap-vue/src/components/progress/index.js +0 -2
- package/dist/vendor/bootstrap-vue/src/components/progress/progress-bar.js +0 -128
- package/dist/vendor/bootstrap-vue/src/components/progress/progress.js +0 -56
- package/src/vendor/bootstrap-vue/nuxt/index.js +0 -164
- package/src/vendor/bootstrap-vue/nuxt/plugin.template.js +0 -29
- package/src/vendor/bootstrap-vue/src/components/progress/MODIFICATIONS.md +0 -23
- package/src/vendor/bootstrap-vue/src/components/progress/README.md +0 -363
- package/src/vendor/bootstrap-vue/src/components/progress/index.d.ts +0 -10
- package/src/vendor/bootstrap-vue/src/components/progress/index.js +0 -4
- package/src/vendor/bootstrap-vue/src/components/progress/package.json +0 -109
- package/src/vendor/bootstrap-vue/src/components/progress/progress-bar.js +0 -133
- package/src/vendor/bootstrap-vue/src/components/progress/progress-bar.spec.js +0 -270
- package/src/vendor/bootstrap-vue/src/components/progress/progress.js +0 -57
- package/src/vendor/bootstrap-vue/src/components/progress/progress.spec.js +0 -71
|
@@ -15349,6 +15349,41 @@
|
|
|
15349
15349
|
}
|
|
15350
15350
|
}
|
|
15351
15351
|
},
|
|
15352
|
+
"token-selector": {
|
|
15353
|
+
"token-container": {
|
|
15354
|
+
"token": {
|
|
15355
|
+
"background": {
|
|
15356
|
+
"color": {
|
|
15357
|
+
"focus": {
|
|
15358
|
+
"value": "#a4a3a8",
|
|
15359
|
+
"$type": "color",
|
|
15360
|
+
"comment": "Used for the background color of a token in a token-selector when it's token-container is in the focus state.",
|
|
15361
|
+
"filePath": "src/tokens/contextual/token-selector.tokens.json",
|
|
15362
|
+
"isSource": true,
|
|
15363
|
+
"original": {
|
|
15364
|
+
"value": {
|
|
15365
|
+
"default": "{color.neutral.300}",
|
|
15366
|
+
"dark": "{color.neutral.600}"
|
|
15367
|
+
},
|
|
15368
|
+
"$type": "color",
|
|
15369
|
+
"comment": "Used for the background color of a token in a token-selector when it's token-container is in the focus state."
|
|
15370
|
+
},
|
|
15371
|
+
"name": "TOKEN_SELECTOR_TOKEN_CONTAINER_TOKEN_BACKGROUND_COLOR_FOCUS",
|
|
15372
|
+
"attributes": {},
|
|
15373
|
+
"path": [
|
|
15374
|
+
"token-selector",
|
|
15375
|
+
"token-container",
|
|
15376
|
+
"token",
|
|
15377
|
+
"background",
|
|
15378
|
+
"color",
|
|
15379
|
+
"focus"
|
|
15380
|
+
]
|
|
15381
|
+
}
|
|
15382
|
+
}
|
|
15383
|
+
}
|
|
15384
|
+
}
|
|
15385
|
+
}
|
|
15386
|
+
},
|
|
15352
15387
|
"token": {
|
|
15353
15388
|
"foreground": {
|
|
15354
15389
|
"color": {
|
|
@@ -496,6 +496,7 @@ $gl-control-background-color-concatenation: $gl-color-alpha-light-4; // Used for
|
|
|
496
496
|
$gl-control-background-color-disabled: $gl-color-alpha-light-4; // Used for disabled form control (checkbox, input, radio button, textarea) background.
|
|
497
497
|
$gl-control-background-color-default: $gl-color-alpha-dark-40; // Used for form control (input, radio button, checkbox, textarea) default background.
|
|
498
498
|
$gl-token-background-color: $gl-color-neutral-800; // Used for the token background color.
|
|
499
|
+
$gl-token-selector-token-container-token-background-color-focus: $gl-color-neutral-600; // Used for the background color of a token in a token-selector when it's token-container is in the focus state.
|
|
499
500
|
$gl-tab-selected-indicator-color-default: $gl-color-blue-400; // Used for the selected indicator of a tab.
|
|
500
501
|
$gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated segment of a loading spinner on a dark background.
|
|
501
502
|
$gl-spinner-segment-color-default: $gl-color-neutral-200; // Used for the animated segment of a loading spinner.
|
|
@@ -496,6 +496,7 @@ $gl-control-background-color-concatenation: $gl-color-neutral-10; // Used for th
|
|
|
496
496
|
$gl-control-background-color-disabled: $gl-color-neutral-10; // Used for disabled form control (checkbox, input, radio button, textarea) background.
|
|
497
497
|
$gl-control-background-color-default: $gl-color-neutral-0; // Used for form control (input, radio button, checkbox, textarea) default background.
|
|
498
498
|
$gl-token-background-color: $gl-color-neutral-100; // Used for the token background color.
|
|
499
|
+
$gl-token-selector-token-container-token-background-color-focus: $gl-color-neutral-300; // Used for the background color of a token in a token-selector when it's token-container is in the focus state.
|
|
499
500
|
$gl-tab-selected-indicator-color-default: $gl-color-blue-500; // Used for the selected indicator of a tab.
|
|
500
501
|
$gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated segment of a loading spinner on a dark background.
|
|
501
502
|
$gl-spinner-segment-color-default: $gl-color-neutral-700; // Used for the animated segment of a loading spinner.
|
|
@@ -691,6 +691,7 @@ $gl-toggle-switch-icon-color-checked-hover: var(--gl-toggle-switch-icon-color-ch
|
|
|
691
691
|
$gl-toggle-switch-icon-color-checked-focus: var(--gl-toggle-switch-icon-color-checked-focus);
|
|
692
692
|
$gl-toggle-switch-icon-color-checked-active: var(--gl-toggle-switch-icon-color-checked-active);
|
|
693
693
|
$gl-toggle-switch-icon-color-disabled: var(--gl-toggle-switch-icon-color-disabled);
|
|
694
|
+
$gl-token-selector-token-container-token-background-color-focus: var(--gl-token-selector-token-container-token-background-color-focus);
|
|
694
695
|
$gl-token-foreground-color: var(--gl-token-foreground-color);
|
|
695
696
|
$gl-token-background-color: var(--gl-token-background-color);
|
|
696
697
|
$gl-control-background-color-default: var(--gl-control-background-color-default);
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
{
|
|
2
|
+
"token-selector": {
|
|
3
|
+
"token-container": {
|
|
4
|
+
"token": {
|
|
5
|
+
"background": {
|
|
6
|
+
"color": {
|
|
7
|
+
"focus": {
|
|
8
|
+
"$value": {
|
|
9
|
+
"default": "{color.neutral.300}",
|
|
10
|
+
"dark": "{color.neutral.600}"
|
|
11
|
+
},
|
|
12
|
+
"$type": "color",
|
|
13
|
+
"$description": "Used for the background color of a token in a token-selector when it's token-container is in the focus state."
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
@@ -118,3 +118,10 @@ export const formatNumberToLocale = (value, options = {}, locales = undefined) =
|
|
|
118
118
|
|
|
119
119
|
return new Intl.NumberFormat(locales, options).format(value);
|
|
120
120
|
};
|
|
121
|
+
|
|
122
|
+
// Converts a value (string, number, etc.) to a number
|
|
123
|
+
// Taken from bootstrap-vue
|
|
124
|
+
export const toFloat = (value, defaultValue = NaN) => {
|
|
125
|
+
const float = parseFloat(value);
|
|
126
|
+
return Number.isNaN(float) ? defaultValue : float;
|
|
127
|
+
};
|
|
@@ -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:
|
|
72
|
-
"
|
|
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
|
|
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
|
|
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>`](
|
|
256
|
-
[`<b-form-checkbox-group>`](
|
|
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
|
|
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
|
-
- [
|
|
276
|
-
- [
|
|
277
|
-
- [
|
|
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
|
|
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
|
-
[`<
|
|
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>`](
|
|
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
|
|
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
|
-
- [
|
|
190
|
-
- [
|
|
191
|
-
- [
|
|
192
|
-
- [
|
|
193
|
-
- [
|
|
194
|
-
- [
|
|
195
|
-
- [
|
|
196
|
-
- [
|
|
197
|
-
|
|
198
|
-
- [
|
|
199
|
-
- [
|
|
200
|
-
|
|
201
|
-
|
|
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
|
-
[`<
|
|
257
|
-
[`<
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
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
|
-
- [
|
|
334
|
-
- [
|
|
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
|
-
[`<
|
|
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 [`<
|
|
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 [`<
|
|
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
|
|
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>`](
|
|
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>`](
|
|
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>`](
|
|
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 [`<
|
|
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>`](
|
|
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 [`<
|
|
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
|
|
@@ -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
|
-
- [
|
|
121
|
-
- [
|
|
122
|
-
- [
|
|
123
|
-
- [
|
|
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](
|
|
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](
|
|
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
|
|
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
|
|
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 [`<
|
|
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 [`<
|
|
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 [`<
|
|
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](
|
|
457
|
-
the [WAI ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel).
|
|
458
|
-
[`<
|
|
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
|
-
- [
|
|
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
|
|
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 -->
|