@gitlab/ui 101.7.1 → 101.8.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 (32) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/components/base/icon/icon.js +10 -21
  3. package/dist/components/base/toast/toast.js +0 -1
  4. package/dist/index.css +1 -1
  5. package/dist/index.css.map +1 -1
  6. package/dist/tokens/build/js/tokens.dark.js +5 -5
  7. package/dist/tokens/css/tokens.css +1 -1
  8. package/dist/tokens/css/tokens.dark.css +2 -2
  9. package/dist/tokens/js/tokens.dark.js +5 -5
  10. package/dist/tokens/json/tokens.dark.json +7 -10
  11. package/dist/tokens/json/tokens.json +2 -5
  12. package/dist/tokens/scss/_tokens.dark.scss +2 -2
  13. package/dist/tokens/scss/_tokens.scss +1 -1
  14. package/dist/vendor/bootstrap-vue/src/components/toast/toast.js +0 -17
  15. package/package.json +1 -1
  16. package/src/components/base/icon/icon.vue +10 -19
  17. package/src/components/base/toast/toast.js +0 -1
  18. package/src/tokens/build/css/tokens.css +1 -1
  19. package/src/tokens/build/css/tokens.dark.css +2 -2
  20. package/src/tokens/build/js/tokens.dark.js +5 -5
  21. package/src/tokens/build/json/tokens.dark.json +7 -10
  22. package/src/tokens/build/json/tokens.json +2 -5
  23. package/src/tokens/build/scss/_tokens.dark.scss +2 -2
  24. package/src/tokens/build/scss/_tokens.scss +1 -1
  25. package/src/tokens/contextual/link.tokens.json +1 -4
  26. package/src/tokens/text.tokens.json +1 -1
  27. package/src/vendor/bootstrap-vue/src/components/toast/README.md +1 -2
  28. package/src/vendor/bootstrap-vue/src/components/toast/helpers/bv-toast.spec.js +0 -14
  29. package/src/vendor/bootstrap-vue/src/components/toast/index.d.ts +0 -1
  30. package/src/vendor/bootstrap-vue/src/components/toast/package.json +0 -4
  31. package/src/vendor/bootstrap-vue/src/components/toast/toast.js +1 -18
  32. package/src/vendor/bootstrap-vue/src/components/toast/toast.spec.js +0 -40
@@ -605,10 +605,10 @@ const GL_BUTTON_DASHED_BORDER_COLOR_DEFAULT = '#89888d';
605
605
  const GL_BUTTON_DASHED_BORDER_COLOR_HOVER = '#89888d';
606
606
  const GL_BUTTON_DASHED_BORDER_COLOR_FOCUS = '#89888d';
607
607
  const GL_BUTTON_DASHED_BORDER_COLOR_ACTIVE = '#a4a3a8';
608
- const GL_BUTTON_LINK_TEXT_COLOR_DEFAULT = '#63a6e9';
609
- const GL_BUTTON_LINK_TEXT_COLOR_HOVER = '#63a6e9';
610
- const GL_BUTTON_LINK_TEXT_COLOR_FOCUS = '#63a6e9';
611
- const GL_BUTTON_LINK_TEXT_COLOR_ACTIVE = '#63a6e9';
608
+ const GL_BUTTON_LINK_TEXT_COLOR_DEFAULT = '#9dc7f1';
609
+ const GL_BUTTON_LINK_TEXT_COLOR_HOVER = '#9dc7f1';
610
+ const GL_BUTTON_LINK_TEXT_COLOR_FOCUS = '#9dc7f1';
611
+ const GL_BUTTON_LINK_TEXT_COLOR_ACTIVE = '#9dc7f1';
612
612
  const GL_BUTTON_SELECTED_FOREGROUND_COLOR_DEFAULT = '#ececef';
613
613
  const GL_BUTTON_SELECTED_FOREGROUND_COLOR_HOVER = '#ececef';
614
614
  const GL_BUTTON_SELECTED_FOREGROUND_COLOR_FOCUS = '#ececef';
@@ -944,7 +944,7 @@ const GL_TEXT_COLOR_DEFAULT = '#ececef';
944
944
  const GL_TEXT_COLOR_SUBTLE = '#bfbfc3';
945
945
  const GL_TEXT_COLOR_STRONG = '#fff';
946
946
  const GL_TEXT_COLOR_HEADING = '#fff';
947
- const GL_TEXT_COLOR_LINK = '#63a6e9';
947
+ const GL_TEXT_COLOR_LINK = '#9dc7f1';
948
948
  const GL_TEXT_COLOR_WARNING = '#d99530';
949
949
  const GL_TEXT_COLOR_DANGER = '#f57f6c';
950
950
  const GL_TEXT_COLOR_SUCCESS = '#52b87a';
@@ -688,7 +688,6 @@
688
688
  --gl-label-scoped-button-background-color-hover: var(--gl-color-neutral-950); /* Used for the scoped label remove button background in the hover state. */
689
689
  --gl-label-scoped-button-icon-color-default: var(--gl-color-neutral-950); /* Used for the scoped label remove button icon in the default state. */
690
690
  --gl-label-scoped-button-icon-color-hover: var(--gl-color-neutral-0); /* Used for the scoped label remove button icon in the hover state. */
691
- --gl-link-mention-text-color-default: var(--gl-color-blue-700); /* Used for the mention link text color. */
692
691
  --gl-link-mention-text-color-current: var(--gl-color-orange-800); /* Used for the mention link text color when referencing the current user. */
693
692
  --gl-link-mention-background-color-default: var(--gl-color-blue-100); /* Used for the mention link default background. */
694
693
  --gl-link-mention-background-color-current: var(--gl-color-orange-100); /* Used for the mention link background when referencing the current user. */
@@ -882,6 +881,7 @@
882
881
  --gl-dropdown-option-indicator-color-selected-focus: var(--gl-control-background-color-selected-focus); /* Used for the dropdown selected option indicator in the focus state. */
883
882
  --gl-dropdown-option-background-color-unselected-focus: var(--gl-action-neutral-background-color-focus); /* Used for the background of an unselected dropdown option in the focus state. */
884
883
  --gl-dropdown-option-background-color-selected-focus: var(--gl-dropdown-option-background-color-selected-hover); /* Used for the background of a selected dropdown option in the focus state. */
884
+ --gl-link-mention-text-color-default: var(--gl-text-color-link); /* Used for the mention link text color. */
885
885
  --gl-progress-bar-indicator-color-default: var(--gl-status-info-icon-color); /* Used for the indicator color for the primary progress-bar variant. */
886
886
  --gl-progress-bar-indicator-color-success: var(--gl-status-success-icon-color); /* Used for the indicator color for the success progress-bar variant. */
887
887
  --gl-progress-bar-indicator-color-warning: var(--gl-status-warning-icon-color); /* Used for the indicator color for the warning progress-bar variant. */
@@ -688,7 +688,6 @@
688
688
  --gl-label-scoped-button-background-color-hover: var(--gl-color-neutral-0); /* Used for the scoped label remove button background in the hover state. */
689
689
  --gl-label-scoped-button-icon-color-default: var(--gl-color-neutral-0); /* Used for the scoped label remove button icon in the default state. */
690
690
  --gl-label-scoped-button-icon-color-hover: var(--gl-color-neutral-950); /* Used for the scoped label remove button icon in the hover state. */
691
- --gl-link-mention-text-color-default: var(--gl-color-blue-200); /* Used for the mention link text color. */
692
691
  --gl-link-mention-text-color-current: var(--gl-color-orange-100); /* Used for the mention link text color when referencing the current user. */
693
692
  --gl-link-mention-background-color-default: var(--gl-color-blue-800); /* Used for the mention link default background. */
694
693
  --gl-link-mention-background-color-current: var(--gl-color-orange-800); /* Used for the mention link background when referencing the current user. */
@@ -771,7 +770,7 @@
771
770
  --gl-text-color-subtle: var(--gl-color-neutral-200); /* Used for supplemental text that doesn't need to be as prominent as other text. */
772
771
  --gl-text-color-strong: var(--gl-color-neutral-0); /* Used for text with the highest contrast. */
773
772
  --gl-text-color-heading: var(--gl-color-neutral-0); /* Used for headings level 1-6. */
774
- --gl-text-color-link: var(--gl-color-blue-300); /* Used for default text links. */
773
+ --gl-text-color-link: var(--gl-color-blue-200); /* Used for default text links. */
775
774
  --gl-text-color-warning: var(--gl-color-orange-300); /* Used for text that requires caution or careful attention. */
776
775
  --gl-text-color-danger: var(--gl-color-red-300); /* Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
777
776
  --gl-text-color-success: var(--gl-color-green-300); /* Used for text indicating success, completion, approval, addition, or validity. */
@@ -882,6 +881,7 @@
882
881
  --gl-dropdown-option-indicator-color-selected-focus: var(--gl-color-neutral-0); /* Used for the dropdown selected option indicator in the focus state. */
883
882
  --gl-dropdown-option-background-color-unselected-focus: var(--gl-action-neutral-background-color-focus); /* Used for the background of an unselected dropdown option in the focus state. */
884
883
  --gl-dropdown-option-background-color-selected-focus: var(--gl-dropdown-option-background-color-selected-hover); /* Used for the background of a selected dropdown option in the focus state. */
884
+ --gl-link-mention-text-color-default: var(--gl-text-color-link); /* Used for the mention link text color. */
885
885
  --gl-progress-bar-indicator-color-default: var(--gl-status-info-icon-color); /* Used for the indicator color for the primary progress-bar variant. */
886
886
  --gl-progress-bar-indicator-color-success: var(--gl-status-success-icon-color); /* Used for the indicator color for the success progress-bar variant. */
887
887
  --gl-progress-bar-indicator-color-warning: var(--gl-status-warning-icon-color); /* Used for the indicator color for the warning progress-bar variant. */
@@ -605,10 +605,10 @@ export const GL_BUTTON_DASHED_BORDER_COLOR_DEFAULT = '#89888d';
605
605
  export const GL_BUTTON_DASHED_BORDER_COLOR_HOVER = '#89888d';
606
606
  export const GL_BUTTON_DASHED_BORDER_COLOR_FOCUS = '#89888d';
607
607
  export const GL_BUTTON_DASHED_BORDER_COLOR_ACTIVE = '#a4a3a8';
608
- export const GL_BUTTON_LINK_TEXT_COLOR_DEFAULT = '#63a6e9';
609
- export const GL_BUTTON_LINK_TEXT_COLOR_HOVER = '#63a6e9';
610
- export const GL_BUTTON_LINK_TEXT_COLOR_FOCUS = '#63a6e9';
611
- export const GL_BUTTON_LINK_TEXT_COLOR_ACTIVE = '#63a6e9';
608
+ export const GL_BUTTON_LINK_TEXT_COLOR_DEFAULT = '#9dc7f1';
609
+ export const GL_BUTTON_LINK_TEXT_COLOR_HOVER = '#9dc7f1';
610
+ export const GL_BUTTON_LINK_TEXT_COLOR_FOCUS = '#9dc7f1';
611
+ export const GL_BUTTON_LINK_TEXT_COLOR_ACTIVE = '#9dc7f1';
612
612
  export const GL_BUTTON_SELECTED_FOREGROUND_COLOR_DEFAULT = '#ececef';
613
613
  export const GL_BUTTON_SELECTED_FOREGROUND_COLOR_HOVER = '#ececef';
614
614
  export const GL_BUTTON_SELECTED_FOREGROUND_COLOR_FOCUS = '#ececef';
@@ -944,7 +944,7 @@ export const GL_TEXT_COLOR_DEFAULT = '#ececef';
944
944
  export const GL_TEXT_COLOR_SUBTLE = '#bfbfc3';
945
945
  export const GL_TEXT_COLOR_STRONG = '#fff';
946
946
  export const GL_TEXT_COLOR_HEADING = '#fff';
947
- export const GL_TEXT_COLOR_LINK = '#63a6e9';
947
+ export const GL_TEXT_COLOR_LINK = '#9dc7f1';
948
948
  export const GL_TEXT_COLOR_WARNING = '#d99530';
949
949
  export const GL_TEXT_COLOR_DANGER = '#f57f6c';
950
950
  export const GL_TEXT_COLOR_SUCCESS = '#52b87a';
@@ -13271,7 +13271,7 @@
13271
13271
  "text": {
13272
13272
  "color": {
13273
13273
  "default": {
13274
- "$value": "#63a6e9",
13274
+ "$value": "#9dc7f1",
13275
13275
  "$type": "color",
13276
13276
  "$description": "Used for the text of a link button in the default state.",
13277
13277
  "filePath": "src/tokens/contextual/button.tokens.json",
@@ -13292,7 +13292,7 @@
13292
13292
  ]
13293
13293
  },
13294
13294
  "hover": {
13295
- "$value": "#63a6e9",
13295
+ "$value": "#9dc7f1",
13296
13296
  "$type": "color",
13297
13297
  "$description": "Used for the text of a link button in the hover state.",
13298
13298
  "filePath": "src/tokens/contextual/button.tokens.json",
@@ -13313,7 +13313,7 @@
13313
13313
  ]
13314
13314
  },
13315
13315
  "focus": {
13316
- "$value": "#63a6e9",
13316
+ "$value": "#9dc7f1",
13317
13317
  "$type": "color",
13318
13318
  "$description": "Used for the text of a link button in the focus state.",
13319
13319
  "filePath": "src/tokens/contextual/button.tokens.json",
@@ -13334,7 +13334,7 @@
13334
13334
  ]
13335
13335
  },
13336
13336
  "active": {
13337
- "$value": "#63a6e9",
13337
+ "$value": "#9dc7f1",
13338
13338
  "$type": "color",
13339
13339
  "$description": "Used for the text of a link button in the active state.",
13340
13340
  "filePath": "src/tokens/contextual/button.tokens.json",
@@ -14717,10 +14717,7 @@
14717
14717
  "filePath": "src/tokens/contextual/link.tokens.json",
14718
14718
  "isSource": true,
14719
14719
  "original": {
14720
- "$value": {
14721
- "default": "{color.blue.700}",
14722
- "dark": "{color.blue.200}"
14723
- },
14720
+ "$value": "{text.color.link}",
14724
14721
  "$type": "color",
14725
14722
  "$description": "Used for the mention link text color."
14726
14723
  },
@@ -21733,7 +21730,7 @@
21733
21730
  ]
21734
21731
  },
21735
21732
  "link": {
21736
- "$value": "#63a6e9",
21733
+ "$value": "#9dc7f1",
21737
21734
  "$type": "color",
21738
21735
  "$description": "Used for default text links.",
21739
21736
  "filePath": "src/tokens/text.tokens.json",
@@ -21741,7 +21738,7 @@
21741
21738
  "original": {
21742
21739
  "$value": {
21743
21740
  "default": "{color.blue.700}",
21744
- "dark": "{color.blue.300}"
21741
+ "dark": "{color.blue.200}"
21745
21742
  },
21746
21743
  "$type": "color",
21747
21744
  "$description": "Used for default text links."
@@ -14717,10 +14717,7 @@
14717
14717
  "filePath": "src/tokens/contextual/link.tokens.json",
14718
14718
  "isSource": true,
14719
14719
  "original": {
14720
- "$value": {
14721
- "default": "{color.blue.700}",
14722
- "dark": "{color.blue.200}"
14723
- },
14720
+ "$value": "{text.color.link}",
14724
14721
  "$type": "color",
14725
14722
  "$description": "Used for the mention link text color."
14726
14723
  },
@@ -21741,7 +21738,7 @@
21741
21738
  "original": {
21742
21739
  "$value": {
21743
21740
  "default": "{color.blue.700}",
21744
- "dark": "{color.blue.300}"
21741
+ "dark": "{color.blue.200}"
21745
21742
  },
21746
21743
  "$type": "color",
21747
21744
  "$description": "Used for default text links."
@@ -686,7 +686,6 @@ $gl-label-scoped-text-color: $gl-color-neutral-0; // Used for the scoped label t
686
686
  $gl-label-scoped-button-background-color-hover: $gl-color-neutral-0; // Used for the scoped label remove button background in the hover state.
687
687
  $gl-label-scoped-button-icon-color-default: $gl-color-neutral-0; // Used for the scoped label remove button icon in the default state.
688
688
  $gl-label-scoped-button-icon-color-hover: $gl-color-neutral-950; // Used for the scoped label remove button icon in the hover state.
689
- $gl-link-mention-text-color-default: $gl-color-blue-200; // Used for the mention link text color.
690
689
  $gl-link-mention-text-color-current: $gl-color-orange-100; // Used for the mention link text color when referencing the current user.
691
690
  $gl-link-mention-background-color-default: $gl-color-blue-800; // Used for the mention link default background.
692
691
  $gl-link-mention-background-color-current: $gl-color-orange-800; // Used for the mention link background when referencing the current user.
@@ -769,7 +768,7 @@ $gl-text-color-default: $gl-color-neutral-50; // Used for the default text color
769
768
  $gl-text-color-subtle: $gl-color-neutral-200; // Used for supplemental text that doesn't need to be as prominent as other text.
770
769
  $gl-text-color-strong: $gl-color-neutral-0; // Used for text with the highest contrast.
771
770
  $gl-text-color-heading: $gl-color-neutral-0; // Used for headings level 1-6.
772
- $gl-text-color-link: $gl-color-blue-300; // Used for default text links.
771
+ $gl-text-color-link: $gl-color-blue-200; // Used for default text links.
773
772
  $gl-text-color-warning: $gl-color-orange-300; // Used for text that requires caution or careful attention.
774
773
  $gl-text-color-danger: $gl-color-red-300; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
775
774
  $gl-text-color-success: $gl-color-green-300; // Used for text indicating success, completion, approval, addition, or validity.
@@ -880,6 +879,7 @@ $gl-dropdown-option-indicator-color-selected-hover: $gl-color-neutral-0; // Used
880
879
  $gl-dropdown-option-indicator-color-selected-focus: $gl-color-neutral-0; // Used for the dropdown selected option indicator in the focus state.
881
880
  $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
882
881
  $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
882
+ $gl-link-mention-text-color-default: $gl-text-color-link; // Used for the mention link text color.
883
883
  $gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.
884
884
  $gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
885
885
  $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
@@ -686,7 +686,6 @@ $gl-label-scoped-text-color: $gl-color-neutral-950; // Used for the scoped label
686
686
  $gl-label-scoped-button-background-color-hover: $gl-color-neutral-950; // Used for the scoped label remove button background in the hover state.
687
687
  $gl-label-scoped-button-icon-color-default: $gl-color-neutral-950; // Used for the scoped label remove button icon in the default state.
688
688
  $gl-label-scoped-button-icon-color-hover: $gl-color-neutral-0; // Used for the scoped label remove button icon in the hover state.
689
- $gl-link-mention-text-color-default: $gl-color-blue-700; // Used for the mention link text color.
690
689
  $gl-link-mention-text-color-current: $gl-color-orange-800; // Used for the mention link text color when referencing the current user.
691
690
  $gl-link-mention-background-color-default: $gl-color-blue-100; // Used for the mention link default background.
692
691
  $gl-link-mention-background-color-current: $gl-color-orange-100; // Used for the mention link background when referencing the current user.
@@ -880,6 +879,7 @@ $gl-dropdown-option-indicator-color-selected-hover: $gl-control-background-color
880
879
  $gl-dropdown-option-indicator-color-selected-focus: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the focus state.
881
880
  $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
882
881
  $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
882
+ $gl-link-mention-text-color-default: $gl-text-color-link; // Used for the mention link text color.
883
883
  $gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.
884
884
  $gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
885
885
  $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
@@ -19,7 +19,6 @@ import { props as props$2, idMixin } from '../../mixins/id';
19
19
  import { listenOnRootMixin } from '../../mixins/listen-on-root';
20
20
  import { normalizeSlotMixin } from '../../mixins/normalize-slot';
21
21
  import { scopedStyleMixin } from '../../mixins/scoped-style';
22
- import { BButtonClose } from '../button/button-close';
23
22
  import { props as props$1, BLink } from '../link/link';
24
23
  import { BVTransition } from '../transition/bv-transition';
25
24
  import { BToaster } from './toaster';
@@ -53,7 +52,6 @@ const props = makePropsConfigurable(sortKeys({
53
52
  // Switches role to 'status' and aria-live to 'polite'
54
53
  isStatus: makeProp(PROP_TYPE_BOOLEAN, false),
55
54
  noAutoHide: makeProp(PROP_TYPE_BOOLEAN, false),
56
- noCloseButton: makeProp(PROP_TYPE_BOOLEAN, false),
57
55
  noFade: makeProp(PROP_TYPE_BOOLEAN, false),
58
56
  noHoverPause: makeProp(PROP_TYPE_BOOLEAN, false),
59
57
  solid: makeProp(PROP_TYPE_BOOLEAN, false),
@@ -326,7 +324,6 @@ const BToast = /*#__PURE__*/extend({
326
324
  // Render helper for generating the toast
327
325
  makeToast(h) {
328
326
  const {
329
- title,
330
327
  slotScope
331
328
  } = this;
332
329
  const link = isLink(this);
@@ -334,20 +331,6 @@ const BToast = /*#__PURE__*/extend({
334
331
  const $title = this.normalizeSlot(SLOT_NAME_TOAST_TITLE, slotScope);
335
332
  if ($title) {
336
333
  $headerContent.push($title);
337
- } else if (title) {
338
- $headerContent.push(h('strong', {
339
- staticClass: 'mr-2'
340
- }, title));
341
- }
342
- if (!this.noCloseButton) {
343
- $headerContent.push(h(BButtonClose, {
344
- staticClass: 'ml-auto mb-1',
345
- on: {
346
- click: () => {
347
- this.hide();
348
- }
349
- }
350
- }));
351
334
  }
352
335
  let $header = h();
353
336
  if ($headerContent.length > 0) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gitlab/ui",
3
- "version": "101.7.1",
3
+ "version": "101.8.0",
4
4
  "description": "GitLab UI Components",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
@@ -1,26 +1,10 @@
1
1
  <!-- eslint-disable vue/multi-word-component-names -->
2
2
  <script>
3
3
  import iconsPath from '@gitlab/svgs/dist/icons.svg';
4
+ import iconsInfo from '@gitlab/svgs/dist/icons.json';
4
5
  import { iconSizeOptions, iconVariantOptions } from '../../../utils/constants';
5
6
 
6
- let iconValidator = () => true;
7
-
8
- /*
9
- During development/tests we want to validate that we are just using icons that are actually defined
10
- */
11
- if (process.env.NODE_ENV !== 'production') {
12
- // eslint-disable-next-line global-require
13
- const data = require('@gitlab/svgs/dist/icons.json');
14
- const { icons } = data;
15
- iconValidator = (value) => {
16
- if (icons.includes(value)) {
17
- return true;
18
- }
19
- // eslint-disable-next-line no-console
20
- console.warn(`Icon '${value}' is not a known icon of @gitlab/svgs`);
21
- return false;
22
- };
23
- }
7
+ const knownIcons = new Set(iconsInfo.icons);
24
8
 
25
9
  /** This is a re-usable vue component for rendering a svg sprite icon
26
10
  * @example
@@ -48,7 +32,14 @@ export default {
48
32
  name: {
49
33
  type: String,
50
34
  required: true,
51
- validator: iconValidator,
35
+ validator: (value) => {
36
+ if (knownIcons.has(value)) {
37
+ return true;
38
+ }
39
+ // eslint-disable-next-line no-console
40
+ console.warn(`Icon '${value}' is not a known icon of @gitlab/svgs`);
41
+ return false;
42
+ },
52
43
  },
53
44
  /**
54
45
  * Icon size
@@ -8,7 +8,6 @@ const DEFAULT_OPTIONS = {
8
8
  autoHideDelay: 5000,
9
9
  toastClass: 'gl-toast',
10
10
  isStatus: true,
11
- noCloseButton: true,
12
11
  toaster: 'b-toaster-bottom-left',
13
12
  };
14
13
 
@@ -688,7 +688,6 @@
688
688
  --gl-label-scoped-button-background-color-hover: var(--gl-color-neutral-950); /* Used for the scoped label remove button background in the hover state. */
689
689
  --gl-label-scoped-button-icon-color-default: var(--gl-color-neutral-950); /* Used for the scoped label remove button icon in the default state. */
690
690
  --gl-label-scoped-button-icon-color-hover: var(--gl-color-neutral-0); /* Used for the scoped label remove button icon in the hover state. */
691
- --gl-link-mention-text-color-default: var(--gl-color-blue-700); /* Used for the mention link text color. */
692
691
  --gl-link-mention-text-color-current: var(--gl-color-orange-800); /* Used for the mention link text color when referencing the current user. */
693
692
  --gl-link-mention-background-color-default: var(--gl-color-blue-100); /* Used for the mention link default background. */
694
693
  --gl-link-mention-background-color-current: var(--gl-color-orange-100); /* Used for the mention link background when referencing the current user. */
@@ -882,6 +881,7 @@
882
881
  --gl-dropdown-option-indicator-color-selected-focus: var(--gl-control-background-color-selected-focus); /* Used for the dropdown selected option indicator in the focus state. */
883
882
  --gl-dropdown-option-background-color-unselected-focus: var(--gl-action-neutral-background-color-focus); /* Used for the background of an unselected dropdown option in the focus state. */
884
883
  --gl-dropdown-option-background-color-selected-focus: var(--gl-dropdown-option-background-color-selected-hover); /* Used for the background of a selected dropdown option in the focus state. */
884
+ --gl-link-mention-text-color-default: var(--gl-text-color-link); /* Used for the mention link text color. */
885
885
  --gl-progress-bar-indicator-color-default: var(--gl-status-info-icon-color); /* Used for the indicator color for the primary progress-bar variant. */
886
886
  --gl-progress-bar-indicator-color-success: var(--gl-status-success-icon-color); /* Used for the indicator color for the success progress-bar variant. */
887
887
  --gl-progress-bar-indicator-color-warning: var(--gl-status-warning-icon-color); /* Used for the indicator color for the warning progress-bar variant. */
@@ -688,7 +688,6 @@
688
688
  --gl-label-scoped-button-background-color-hover: var(--gl-color-neutral-0); /* Used for the scoped label remove button background in the hover state. */
689
689
  --gl-label-scoped-button-icon-color-default: var(--gl-color-neutral-0); /* Used for the scoped label remove button icon in the default state. */
690
690
  --gl-label-scoped-button-icon-color-hover: var(--gl-color-neutral-950); /* Used for the scoped label remove button icon in the hover state. */
691
- --gl-link-mention-text-color-default: var(--gl-color-blue-200); /* Used for the mention link text color. */
692
691
  --gl-link-mention-text-color-current: var(--gl-color-orange-100); /* Used for the mention link text color when referencing the current user. */
693
692
  --gl-link-mention-background-color-default: var(--gl-color-blue-800); /* Used for the mention link default background. */
694
693
  --gl-link-mention-background-color-current: var(--gl-color-orange-800); /* Used for the mention link background when referencing the current user. */
@@ -771,7 +770,7 @@
771
770
  --gl-text-color-subtle: var(--gl-color-neutral-200); /* Used for supplemental text that doesn't need to be as prominent as other text. */
772
771
  --gl-text-color-strong: var(--gl-color-neutral-0); /* Used for text with the highest contrast. */
773
772
  --gl-text-color-heading: var(--gl-color-neutral-0); /* Used for headings level 1-6. */
774
- --gl-text-color-link: var(--gl-color-blue-300); /* Used for default text links. */
773
+ --gl-text-color-link: var(--gl-color-blue-200); /* Used for default text links. */
775
774
  --gl-text-color-warning: var(--gl-color-orange-300); /* Used for text that requires caution or careful attention. */
776
775
  --gl-text-color-danger: var(--gl-color-red-300); /* Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
777
776
  --gl-text-color-success: var(--gl-color-green-300); /* Used for text indicating success, completion, approval, addition, or validity. */
@@ -882,6 +881,7 @@
882
881
  --gl-dropdown-option-indicator-color-selected-focus: var(--gl-color-neutral-0); /* Used for the dropdown selected option indicator in the focus state. */
883
882
  --gl-dropdown-option-background-color-unselected-focus: var(--gl-action-neutral-background-color-focus); /* Used for the background of an unselected dropdown option in the focus state. */
884
883
  --gl-dropdown-option-background-color-selected-focus: var(--gl-dropdown-option-background-color-selected-hover); /* Used for the background of a selected dropdown option in the focus state. */
884
+ --gl-link-mention-text-color-default: var(--gl-text-color-link); /* Used for the mention link text color. */
885
885
  --gl-progress-bar-indicator-color-default: var(--gl-status-info-icon-color); /* Used for the indicator color for the primary progress-bar variant. */
886
886
  --gl-progress-bar-indicator-color-success: var(--gl-status-success-icon-color); /* Used for the indicator color for the success progress-bar variant. */
887
887
  --gl-progress-bar-indicator-color-warning: var(--gl-status-warning-icon-color); /* Used for the indicator color for the warning progress-bar variant. */
@@ -605,10 +605,10 @@ export const GL_BUTTON_DASHED_BORDER_COLOR_DEFAULT = '#89888d';
605
605
  export const GL_BUTTON_DASHED_BORDER_COLOR_HOVER = '#89888d';
606
606
  export const GL_BUTTON_DASHED_BORDER_COLOR_FOCUS = '#89888d';
607
607
  export const GL_BUTTON_DASHED_BORDER_COLOR_ACTIVE = '#a4a3a8';
608
- export const GL_BUTTON_LINK_TEXT_COLOR_DEFAULT = '#63a6e9';
609
- export const GL_BUTTON_LINK_TEXT_COLOR_HOVER = '#63a6e9';
610
- export const GL_BUTTON_LINK_TEXT_COLOR_FOCUS = '#63a6e9';
611
- export const GL_BUTTON_LINK_TEXT_COLOR_ACTIVE = '#63a6e9';
608
+ export const GL_BUTTON_LINK_TEXT_COLOR_DEFAULT = '#9dc7f1';
609
+ export const GL_BUTTON_LINK_TEXT_COLOR_HOVER = '#9dc7f1';
610
+ export const GL_BUTTON_LINK_TEXT_COLOR_FOCUS = '#9dc7f1';
611
+ export const GL_BUTTON_LINK_TEXT_COLOR_ACTIVE = '#9dc7f1';
612
612
  export const GL_BUTTON_SELECTED_FOREGROUND_COLOR_DEFAULT = '#ececef';
613
613
  export const GL_BUTTON_SELECTED_FOREGROUND_COLOR_HOVER = '#ececef';
614
614
  export const GL_BUTTON_SELECTED_FOREGROUND_COLOR_FOCUS = '#ececef';
@@ -944,7 +944,7 @@ export const GL_TEXT_COLOR_DEFAULT = '#ececef';
944
944
  export const GL_TEXT_COLOR_SUBTLE = '#bfbfc3';
945
945
  export const GL_TEXT_COLOR_STRONG = '#fff';
946
946
  export const GL_TEXT_COLOR_HEADING = '#fff';
947
- export const GL_TEXT_COLOR_LINK = '#63a6e9';
947
+ export const GL_TEXT_COLOR_LINK = '#9dc7f1';
948
948
  export const GL_TEXT_COLOR_WARNING = '#d99530';
949
949
  export const GL_TEXT_COLOR_DANGER = '#f57f6c';
950
950
  export const GL_TEXT_COLOR_SUCCESS = '#52b87a';
@@ -13271,7 +13271,7 @@
13271
13271
  "text": {
13272
13272
  "color": {
13273
13273
  "default": {
13274
- "$value": "#63a6e9",
13274
+ "$value": "#9dc7f1",
13275
13275
  "$type": "color",
13276
13276
  "$description": "Used for the text of a link button in the default state.",
13277
13277
  "filePath": "src/tokens/contextual/button.tokens.json",
@@ -13292,7 +13292,7 @@
13292
13292
  ]
13293
13293
  },
13294
13294
  "hover": {
13295
- "$value": "#63a6e9",
13295
+ "$value": "#9dc7f1",
13296
13296
  "$type": "color",
13297
13297
  "$description": "Used for the text of a link button in the hover state.",
13298
13298
  "filePath": "src/tokens/contextual/button.tokens.json",
@@ -13313,7 +13313,7 @@
13313
13313
  ]
13314
13314
  },
13315
13315
  "focus": {
13316
- "$value": "#63a6e9",
13316
+ "$value": "#9dc7f1",
13317
13317
  "$type": "color",
13318
13318
  "$description": "Used for the text of a link button in the focus state.",
13319
13319
  "filePath": "src/tokens/contextual/button.tokens.json",
@@ -13334,7 +13334,7 @@
13334
13334
  ]
13335
13335
  },
13336
13336
  "active": {
13337
- "$value": "#63a6e9",
13337
+ "$value": "#9dc7f1",
13338
13338
  "$type": "color",
13339
13339
  "$description": "Used for the text of a link button in the active state.",
13340
13340
  "filePath": "src/tokens/contextual/button.tokens.json",
@@ -14717,10 +14717,7 @@
14717
14717
  "filePath": "src/tokens/contextual/link.tokens.json",
14718
14718
  "isSource": true,
14719
14719
  "original": {
14720
- "$value": {
14721
- "default": "{color.blue.700}",
14722
- "dark": "{color.blue.200}"
14723
- },
14720
+ "$value": "{text.color.link}",
14724
14721
  "$type": "color",
14725
14722
  "$description": "Used for the mention link text color."
14726
14723
  },
@@ -21733,7 +21730,7 @@
21733
21730
  ]
21734
21731
  },
21735
21732
  "link": {
21736
- "$value": "#63a6e9",
21733
+ "$value": "#9dc7f1",
21737
21734
  "$type": "color",
21738
21735
  "$description": "Used for default text links.",
21739
21736
  "filePath": "src/tokens/text.tokens.json",
@@ -21741,7 +21738,7 @@
21741
21738
  "original": {
21742
21739
  "$value": {
21743
21740
  "default": "{color.blue.700}",
21744
- "dark": "{color.blue.300}"
21741
+ "dark": "{color.blue.200}"
21745
21742
  },
21746
21743
  "$type": "color",
21747
21744
  "$description": "Used for default text links."
@@ -14717,10 +14717,7 @@
14717
14717
  "filePath": "src/tokens/contextual/link.tokens.json",
14718
14718
  "isSource": true,
14719
14719
  "original": {
14720
- "$value": {
14721
- "default": "{color.blue.700}",
14722
- "dark": "{color.blue.200}"
14723
- },
14720
+ "$value": "{text.color.link}",
14724
14721
  "$type": "color",
14725
14722
  "$description": "Used for the mention link text color."
14726
14723
  },
@@ -21741,7 +21738,7 @@
21741
21738
  "original": {
21742
21739
  "$value": {
21743
21740
  "default": "{color.blue.700}",
21744
- "dark": "{color.blue.300}"
21741
+ "dark": "{color.blue.200}"
21745
21742
  },
21746
21743
  "$type": "color",
21747
21744
  "$description": "Used for default text links."
@@ -686,7 +686,6 @@ $gl-label-scoped-text-color: $gl-color-neutral-0; // Used for the scoped label t
686
686
  $gl-label-scoped-button-background-color-hover: $gl-color-neutral-0; // Used for the scoped label remove button background in the hover state.
687
687
  $gl-label-scoped-button-icon-color-default: $gl-color-neutral-0; // Used for the scoped label remove button icon in the default state.
688
688
  $gl-label-scoped-button-icon-color-hover: $gl-color-neutral-950; // Used for the scoped label remove button icon in the hover state.
689
- $gl-link-mention-text-color-default: $gl-color-blue-200; // Used for the mention link text color.
690
689
  $gl-link-mention-text-color-current: $gl-color-orange-100; // Used for the mention link text color when referencing the current user.
691
690
  $gl-link-mention-background-color-default: $gl-color-blue-800; // Used for the mention link default background.
692
691
  $gl-link-mention-background-color-current: $gl-color-orange-800; // Used for the mention link background when referencing the current user.
@@ -769,7 +768,7 @@ $gl-text-color-default: $gl-color-neutral-50; // Used for the default text color
769
768
  $gl-text-color-subtle: $gl-color-neutral-200; // Used for supplemental text that doesn't need to be as prominent as other text.
770
769
  $gl-text-color-strong: $gl-color-neutral-0; // Used for text with the highest contrast.
771
770
  $gl-text-color-heading: $gl-color-neutral-0; // Used for headings level 1-6.
772
- $gl-text-color-link: $gl-color-blue-300; // Used for default text links.
771
+ $gl-text-color-link: $gl-color-blue-200; // Used for default text links.
773
772
  $gl-text-color-warning: $gl-color-orange-300; // Used for text that requires caution or careful attention.
774
773
  $gl-text-color-danger: $gl-color-red-300; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
775
774
  $gl-text-color-success: $gl-color-green-300; // Used for text indicating success, completion, approval, addition, or validity.
@@ -880,6 +879,7 @@ $gl-dropdown-option-indicator-color-selected-hover: $gl-color-neutral-0; // Used
880
879
  $gl-dropdown-option-indicator-color-selected-focus: $gl-color-neutral-0; // Used for the dropdown selected option indicator in the focus state.
881
880
  $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
882
881
  $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
882
+ $gl-link-mention-text-color-default: $gl-text-color-link; // Used for the mention link text color.
883
883
  $gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.
884
884
  $gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
885
885
  $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
@@ -686,7 +686,6 @@ $gl-label-scoped-text-color: $gl-color-neutral-950; // Used for the scoped label
686
686
  $gl-label-scoped-button-background-color-hover: $gl-color-neutral-950; // Used for the scoped label remove button background in the hover state.
687
687
  $gl-label-scoped-button-icon-color-default: $gl-color-neutral-950; // Used for the scoped label remove button icon in the default state.
688
688
  $gl-label-scoped-button-icon-color-hover: $gl-color-neutral-0; // Used for the scoped label remove button icon in the hover state.
689
- $gl-link-mention-text-color-default: $gl-color-blue-700; // Used for the mention link text color.
690
689
  $gl-link-mention-text-color-current: $gl-color-orange-800; // Used for the mention link text color when referencing the current user.
691
690
  $gl-link-mention-background-color-default: $gl-color-blue-100; // Used for the mention link default background.
692
691
  $gl-link-mention-background-color-current: $gl-color-orange-100; // Used for the mention link background when referencing the current user.
@@ -880,6 +879,7 @@ $gl-dropdown-option-indicator-color-selected-hover: $gl-control-background-color
880
879
  $gl-dropdown-option-indicator-color-selected-focus: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the focus state.
881
880
  $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
882
881
  $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
882
+ $gl-link-mention-text-color-default: $gl-text-color-link; // Used for the mention link text color.
883
883
  $gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.
884
884
  $gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
885
885
  $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
@@ -4,10 +4,7 @@
4
4
  "text": {
5
5
  "color": {
6
6
  "default": {
7
- "$value": {
8
- "default": "{color.blue.700}",
9
- "dark": "{color.blue.200}"
10
- },
7
+ "$value": "{text.color.link}",
11
8
  "$type": "color",
12
9
  "$description": "Used for the mention link text color."
13
10
  },
@@ -63,7 +63,7 @@
63
63
  "link": {
64
64
  "$value": {
65
65
  "default": "{color.blue.700}",
66
- "dark": "{color.blue.300}"
66
+ "dark": "{color.blue.200}"
67
67
  },
68
68
  "$type": "color",
69
69
  "$description": "Used for default text links."
@@ -313,8 +313,7 @@ the `this.$bvToast.hide(id)` method to hide the specific toast:
313
313
  // Create the toast
314
314
  this.$bvToast.toast([$closeButton], {
315
315
  id: id,
316
- title: `Toast ${this.count}`,
317
- noCloseButton: true
316
+ title: `Toast ${this.count}`
318
317
  })
319
318
  }
320
319
  }
@@ -113,19 +113,5 @@ describe('$bvToast', () => {
113
113
  // Find body
114
114
  expect($toast.find('.toast-body').exists()).toBe(true)
115
115
  expect($toast.find('.toast-body').text()).toContain('message')
116
-
117
- // Find the Close button and click it
118
- expect($toast.findAll('button').length).toBe(1)
119
- const $button = $toast.find('button')
120
- expect($button.classes()).toContain('close')
121
-
122
- await $button.trigger('click')
123
- await waitRAF()
124
- await waitRAF()
125
- await waitRAF()
126
- await waitRAF()
127
-
128
- // Toast should be gone from DOM
129
- expect(document.querySelector('#test2')).toBe(null)
130
116
  })
131
117
  })
@@ -28,7 +28,6 @@ export interface BvToastOptions {
28
28
  noAutoHide?: boolean
29
29
  noHoverPause?: boolean
30
30
  autoHideDelay?: number
31
- noCloseButton?: boolean
32
31
  appendToast?: boolean
33
32
  isStatus?: boolean
34
33
  noFade?: boolean
@@ -41,10 +41,6 @@
41
41
  "prop": "noAutoHide",
42
42
  "description": "When set, disabled the toast from automatically dismissing itself"
43
43
  },
44
- {
45
- "prop": "noCloseButton",
46
- "description": "When set, hides the close button in the toast header"
47
- },
48
44
  {
49
45
  "prop": "noHoverPause",
50
46
  "description": "When set, disables the pausing of the auto hide delay when the mouse hovers the toast"