@gitlab/ui 91.4.0 → 91.6.0

package/src/components/experimental/duo/chat/components/duo_chat_context/utils.js

@@ -0,0 +1,29 @@
+function categoryValidator(category) {
+  return Boolean(category && category.value && category.label && category.icon);
+}
+
+export function categoriesValidator(categories) {
+  return Array.isArray(categories) && categories.every((category) => categoryValidator(category));
+}
+
+function disabledReasonsValidator(disabledReasons) {
+  return (
+    disabledReasons === undefined ||
+    (Array.isArray(disabledReasons) &&
+      disabledReasons.every((reason) => typeof reason === 'string'))
+  );
+}
+
+function contextItemValidator(item) {
+  return Boolean(
+    item &&
+      item.id &&
+      item.type &&
+      typeof item.isEnabled === 'boolean' &&
+      disabledReasonsValidator(item.disabledReasons)
+  );
+}
+
+export function contextItemsValidator(items) {
+  return Array.isArray(items) && items.every((item) => contextItemValidator(item));
+}

package/src/tokens/build/css/tokens.dark.css

@@ -666,15 +666,15 @@
   --gl-avatar-fallback-text-color-red: var(--gl-color-red-200); /* Red text color for avatar fallback with no particular meaning. */
   --gl-avatar-border-color-hover: var(--gl-color-alpha-light-24); /* Used to increase the edge definition of an avatar in the hover state. */
   --gl-avatar-border-color-default: var(--gl-color-alpha-light-8); /* Used to define the edge of an avatar. */
-  --gl-alert-danger-border-bottom-color: var(--gl-color-neutral-800); /* Used for the border bottom color of a danger alert. */
+  --gl-alert-danger-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a danger alert. */
   --gl-alert-danger-border-top-color: var(--gl-color-red-400); /* Used for the border color of a danger alert. */
-  --gl-alert-warning-border-bottom-color: var(--gl-color-neutral-800); /* Used for the border bottom color of a warning alert. */
+  --gl-alert-warning-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a warning alert. */
   --gl-alert-warning-border-top-color: var(--gl-color-orange-400); /* Used for the border color of a warning alert. */
-  --gl-alert-success-border-bottom-color: var(--gl-color-neutral-800); /* Used for the border bottom color of a success alert. */
+  --gl-alert-success-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a success alert. */
   --gl-alert-success-border-top-color: var(--gl-color-green-400); /* Used for the border color of a success alert. */
-  --gl-alert-info-border-bottom-color: var(--gl-color-neutral-800); /* Used for the border bottom color of an info alert. */
+  --gl-alert-info-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of an info alert. */
   --gl-alert-info-border-top-color: var(--gl-color-blue-400); /* Used for the border color of an info alert. */
-  --gl-alert-neutral-border-bottom-color: var(--gl-color-neutral-800); /* Used for the border bottom color of a neutral alert. */
+  --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a neutral alert. */
   --gl-alert-neutral-border-top-color: var(--gl-color-neutral-400); /* Used for the border center color of a neutral alert. */
   --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
   --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */

package/src/tokens/build/js/tokens.dark.js

@@ -316,23 +316,23 @@ export const DATA_VIZ_ORANGE_950 = '#fae8d1';
 export const GL_ALERT_NEUTRAL_TITLE_COLOR = '#fff'; // Used for the title color of a neutral alert.
 export const GL_ALERT_NEUTRAL_BACKGROUND_COLOR = '#28272d'; // Used for the background color of a neutral alert.
 export const GL_ALERT_NEUTRAL_BORDER_TOP_COLOR = '#89888d'; // Used for the border center color of a neutral alert.
-export const GL_ALERT_NEUTRAL_BORDER_BOTTOM_COLOR = '#3a383f'; // Used for the border bottom color of a neutral alert.
+export const GL_ALERT_NEUTRAL_BORDER_BOTTOM_COLOR = 'transparent'; // Used for the border bottom color of a neutral alert.
 export const GL_ALERT_INFO_TITLE_COLOR = '#63a6e9'; // Used for the title color of an info alert.
 export const GL_ALERT_INFO_BACKGROUND_COLOR = '#28272d'; // Used for the background color of an info alert.
 export const GL_ALERT_INFO_BORDER_TOP_COLOR = '#428fdc'; // Used for the border color of an info alert.
-export const GL_ALERT_INFO_BORDER_BOTTOM_COLOR = '#3a383f'; // Used for the border bottom color of an info alert.
+export const GL_ALERT_INFO_BORDER_BOTTOM_COLOR = 'transparent'; // Used for the border bottom color of an info alert.
 export const GL_ALERT_SUCCESS_TITLE_COLOR = '#52b87a'; // Used for the title color of a success alert.
 export const GL_ALERT_SUCCESS_BACKGROUND_COLOR = '#28272d'; // Used for the background color of a success alert.
 export const GL_ALERT_SUCCESS_BORDER_TOP_COLOR = '#2da160'; // Used for the border color of a success alert.
-export const GL_ALERT_SUCCESS_BORDER_BOTTOM_COLOR = '#3a383f'; // Used for the border bottom color of a success alert.
+export const GL_ALERT_SUCCESS_BORDER_BOTTOM_COLOR = 'transparent'; // Used for the border bottom color of a success alert.
 export const GL_ALERT_WARNING_TITLE_COLOR = '#d99530'; // Used for the title color of a warning alert.
 export const GL_ALERT_WARNING_BACKGROUND_COLOR = '#28272d'; // Used for the background color of a warning alert.
 export const GL_ALERT_WARNING_BORDER_TOP_COLOR = '#c17d10'; // Used for the border color of a warning alert.
-export const GL_ALERT_WARNING_BORDER_BOTTOM_COLOR = '#3a383f'; // Used for the border bottom color of a warning alert.
+export const GL_ALERT_WARNING_BORDER_BOTTOM_COLOR = 'transparent'; // Used for the border bottom color of a warning alert.
 export const GL_ALERT_DANGER_TITLE_COLOR = '#f57f6c'; // Used for the title color of a danger alert.
 export const GL_ALERT_DANGER_BACKGROUND_COLOR = '#28272d'; // Used for the background color of a danger alert.
 export const GL_ALERT_DANGER_BORDER_TOP_COLOR = '#ec5941'; // Used for the border color of a danger alert.
-export const GL_ALERT_DANGER_BORDER_BOTTOM_COLOR = '#3a383f'; // Used for the border bottom color of a danger alert.
+export const GL_ALERT_DANGER_BORDER_BOTTOM_COLOR = 'transparent'; // Used for the border bottom color of a danger alert.
 export const GL_AVATAR_BORDER_COLOR_DEFAULT = 'rgba(255, 255, 255, 0.08)'; // Used to define the edge of an avatar.
 export const GL_AVATAR_BORDER_COLOR_HOVER = 'rgba(255, 255, 255, 0.24)'; // Used to increase the edge definition of an avatar in the hover state.
 export const GL_AVATAR_FALLBACK_TEXT_COLOR_RED = '#fcb5aa'; // Red text color for avatar fallback with no particular meaning.

package/src/tokens/build/json/tokens.dark.json

@@ -6353,16 +6353,13 @@
         },
         "bottom": {
           "color": {
-            "value": "#3a383f",
+            "value": "transparent",
             "$type": "color",
             "comment": "Used for the border bottom color of a neutral alert.",
             "filePath": "src/tokens/contextual/alert.tokens.json",
             "isSource": true,
             "original": {
-              "value": {
-                "default": "{color.alpha.0}",
-                "dark": "{color.neutral.800}"
-              },
+              "value": "{color.alpha.0}",
               "$type": "color",
               "comment": "Used for the border bottom color of a neutral alert."
             },
@@ -6459,16 +6456,13 @@
         },
         "bottom": {
           "color": {
-            "value": "#3a383f",
+            "value": "transparent",
             "$type": "color",
             "comment": "Used for the border bottom color of an info alert.",
             "filePath": "src/tokens/contextual/alert.tokens.json",
             "isSource": true,
             "original": {
-              "value": {
-                "default": "{color.alpha.0}",
-                "dark": "{color.neutral.800}"
-              },
+              "value": "{color.alpha.0}",
               "$type": "color",
               "comment": "Used for the border bottom color of an info alert."
             },
@@ -6565,16 +6559,13 @@
         },
         "bottom": {
           "color": {
-            "value": "#3a383f",
+            "value": "transparent",
             "$type": "color",
             "comment": "Used for the border bottom color of a success alert.",
             "filePath": "src/tokens/contextual/alert.tokens.json",
             "isSource": true,
             "original": {
-              "value": {
-                "default": "{color.alpha.0}",
-                "dark": "{color.neutral.800}"
-              },
+              "value": "{color.alpha.0}",
               "$type": "color",
               "comment": "Used for the border bottom color of a success alert."
             },
@@ -6671,16 +6662,13 @@
         },
         "bottom": {
           "color": {
-            "value": "#3a383f",
+            "value": "transparent",
             "$type": "color",
             "comment": "Used for the border bottom color of a warning alert.",
             "filePath": "src/tokens/contextual/alert.tokens.json",
             "isSource": true,
             "original": {
-              "value": {
-                "default": "{color.alpha.0}",
-                "dark": "{color.neutral.800}"
-              },
+              "value": "{color.alpha.0}",
               "$type": "color",
               "comment": "Used for the border bottom color of a warning alert."
             },
@@ -6777,16 +6765,13 @@
         },
         "bottom": {
           "color": {
-            "value": "#3a383f",
+            "value": "transparent",
             "$type": "color",
             "comment": "Used for the border bottom color of a danger alert.",
             "filePath": "src/tokens/contextual/alert.tokens.json",
             "isSource": true,
             "original": {
-              "value": {
-                "default": "{color.alpha.0}",
-                "dark": "{color.neutral.800}"
-              },
+              "value": "{color.alpha.0}",
               "$type": "color",
               "comment": "Used for the border bottom color of a danger alert."
             },

package/src/tokens/build/json/tokens.json

@@ -6359,10 +6359,7 @@
             "filePath": "src/tokens/contextual/alert.tokens.json",
             "isSource": true,
             "original": {
-              "value": {
-                "default": "{color.alpha.0}",
-                "dark": "{color.neutral.800}"
-              },
+              "value": "{color.alpha.0}",
               "$type": "color",
               "comment": "Used for the border bottom color of a neutral alert."
             },
@@ -6465,10 +6462,7 @@
             "filePath": "src/tokens/contextual/alert.tokens.json",
             "isSource": true,
             "original": {
-              "value": {
-                "default": "{color.alpha.0}",
-                "dark": "{color.neutral.800}"
-              },
+              "value": "{color.alpha.0}",
               "$type": "color",
               "comment": "Used for the border bottom color of an info alert."
             },
@@ -6571,10 +6565,7 @@
             "filePath": "src/tokens/contextual/alert.tokens.json",
             "isSource": true,
             "original": {
-              "value": {
-                "default": "{color.alpha.0}",
-                "dark": "{color.neutral.800}"
-              },
+              "value": "{color.alpha.0}",
               "$type": "color",
               "comment": "Used for the border bottom color of a success alert."
             },
@@ -6677,10 +6668,7 @@
             "filePath": "src/tokens/contextual/alert.tokens.json",
             "isSource": true,
             "original": {
-              "value": {
-                "default": "{color.alpha.0}",
-                "dark": "{color.neutral.800}"
-              },
+              "value": "{color.alpha.0}",
               "$type": "color",
               "comment": "Used for the border bottom color of a warning alert."
             },
@@ -6783,10 +6771,7 @@
             "filePath": "src/tokens/contextual/alert.tokens.json",
             "isSource": true,
             "original": {
-              "value": {
-                "default": "{color.alpha.0}",
-                "dark": "{color.neutral.800}"
-              },
+              "value": "{color.alpha.0}",
               "$type": "color",
               "comment": "Used for the border bottom color of a danger alert."
             },

package/src/tokens/build/scss/_tokens.dark.scss

@@ -664,15 +664,15 @@ $gl-avatar-fallback-text-color-purple: $gl-color-purple-200; // Purple text colo
 $gl-avatar-fallback-text-color-red: $gl-color-red-200; // Red text color for avatar fallback with no particular meaning.
 $gl-avatar-border-color-hover: $gl-color-alpha-light-24; // Used to increase the edge definition of an avatar in the hover state.
 $gl-avatar-border-color-default: $gl-color-alpha-light-8; // Used to define the edge of an avatar.
-$gl-alert-danger-border-bottom-color: $gl-color-neutral-800; // Used for the border bottom color of a danger alert.
+$gl-alert-danger-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a danger alert.
 $gl-alert-danger-border-top-color: $gl-color-red-400; // Used for the border color of a danger alert.
-$gl-alert-warning-border-bottom-color: $gl-color-neutral-800; // Used for the border bottom color of a warning alert.
+$gl-alert-warning-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a warning alert.
 $gl-alert-warning-border-top-color: $gl-color-orange-400; // Used for the border color of a warning alert.
-$gl-alert-success-border-bottom-color: $gl-color-neutral-800; // Used for the border bottom color of a success alert.
+$gl-alert-success-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a success alert.
 $gl-alert-success-border-top-color: $gl-color-green-400; // Used for the border color of a success alert.
-$gl-alert-info-border-bottom-color: $gl-color-neutral-800; // Used for the border bottom color of an info alert.
+$gl-alert-info-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of an info alert.
 $gl-alert-info-border-top-color: $gl-color-blue-400; // Used for the border color of an info alert.
-$gl-alert-neutral-border-bottom-color: $gl-color-neutral-800; // Used for the border bottom color of a neutral alert.
+$gl-alert-neutral-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a neutral alert.
 $gl-alert-neutral-border-top-color: $gl-color-neutral-400; // Used for the border center color of a neutral alert.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.

package/src/tokens/contextual/alert.tokens.json

@@ -34,10 +34,7 @@
         },
         "bottom": {
           "color": {
-            "$value": {
-              "default": "{color.alpha.0}",
-              "dark": "{color.neutral.800}"
-            },
+            "$value": "{color.alpha.0}",
             "$type": "color",
             "$description": "Used for the border bottom color of a neutral alert."
           }
@@ -78,10 +75,7 @@
         },
         "bottom": {
           "color": {
-            "$value": {
-              "default": "{color.alpha.0}",
-              "dark": "{color.neutral.800}"
-            },
+            "$value": "{color.alpha.0}",
             "$type": "color",
             "$description": "Used for the border bottom color of an info alert."
           }
@@ -122,10 +116,7 @@
         },
         "bottom": {
           "color": {
-            "$value": {
-              "default": "{color.alpha.0}",
-              "dark": "{color.neutral.800}"
-            },
+            "$value": "{color.alpha.0}",
             "$type": "color",
             "$description": "Used for the border bottom color of a success alert."
           }
@@ -166,10 +157,7 @@
         },
         "bottom": {
           "color": {
-            "$value": {
-              "default": "{color.alpha.0}",
-              "dark": "{color.neutral.800}"
-            },
+            "$value": "{color.alpha.0}",
             "$type": "color",
             "$description": "Used for the border bottom color of a warning alert."
           }
@@ -210,10 +198,7 @@
         },
         "bottom": {
           "color": {
-            "$value": {
-              "default": "{color.alpha.0}",
-              "dark": "{color.neutral.800}"
-            },
+            "$value": "{color.alpha.0}",
             "$type": "color",
             "$description": "Used for the border bottom color of a danger alert."
           }

package/translations.js

@@ -8,6 +8,7 @@ export default {
   'GlBreadcrumb.showMoreLabel': 'Show more breadcrumbs',
   'GlBroadcastMessage.closeButtonTitle': 'Dismiss',
   'GlCollapsibleListbox.srOnlyResultsLabel': null,
+  'GlDuoChatContextItemMenu.selectedContextItemsTitle': 'Included references',
   'GlDuoChatMessage.SelectedContextItemsTitleAssistantMessage': null,
   'GlDuoChatMessage.SelectedContextItemsTitleUserMessage': null,
   'GlDuoWorkflowPanel.collapseButtonTitle': 'Collapse',