@gitlab/ui 115.0.1 → 115.1.0

package/src/tokens/semantic/status.tokens.json

@@ -8,7 +8,13 @@
             "dark": "{color.neutral.800}"
           },
           "$type": "color",
-          "$description": "Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state."
+          "$description": "Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.",
+          "$extensions": {
+            "com.figma.scope": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ]
+          }
         }
       },
       "text": {
@@ -18,7 +24,12 @@
             "dark": "{color.neutral.200}"
           },
           "$type": "color",
-          "$description": "Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state."
+          "$description": "Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.",
+          "$extensions": {
+            "com.figma.scope": [
+              "TEXT_FILL"
+            ]
+          }
         }
       },
       "icon": {
@@ -28,7 +39,13 @@
             "dark": "{color.neutral.300}"
           },
           "$type": "color",
-          "$description": "Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state."
+          "$description": "Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.",
+          "$extensions": {
+            "com.figma.scope": [
+              "SHAPE_FILL",
+              "TEXT_FILL"
+            ]
+          }
         }
       }
     },
@@ -40,7 +57,13 @@
             "dark": "{color.blue.800}"
           },
           "$type": "color",
-          "$description": "Used for the background of an informational status item when indicating a noteworthy ongoing condition or a state of active progress."
+          "$description": "Used for the background of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.",
+          "$extensions": {
+            "com.figma.scope": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ]
+          }
         }
       },
       "text": {
@@ -50,7 +73,12 @@
             "dark": "{color.blue.200}"
           },
           "$type": "color",
-          "$description": "Used for the text of an informational status item when indicating a noteworthy ongoing condition or a state of active progress."
+          "$description": "Used for the text of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.",
+          "$extensions": {
+            "com.figma.scope": [
+              "TEXT_FILL"
+            ]
+          }
         }
       },
       "icon": {
@@ -60,7 +88,13 @@
             "dark": "{color.blue.300}"
           },
           "$type": "color",
-          "$description": "Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress."
+          "$description": "Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.",
+          "$extensions": {
+            "com.figma.scope": [
+              "SHAPE_FILL",
+              "TEXT_FILL"
+            ]
+          }
         }
       }
     },
@@ -72,7 +106,13 @@
             "dark": "{color.green.800}"
           },
           "$type": "color",
-          "$description": "Used for the background of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation."
+          "$description": "Used for the background of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.",
+          "$extensions": {
+            "com.figma.scope": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ]
+          }
         }
       },
       "text": {
@@ -82,7 +122,12 @@
             "dark": "{color.green.200}"
           },
           "$type": "color",
-          "$description": "Used for the text of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation."
+          "$description": "Used for the text of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.",
+          "$extensions": {
+            "com.figma.scope": [
+              "TEXT_FILL"
+            ]
+          }
         }
       },
       "icon": {
@@ -92,7 +137,13 @@
             "dark": "{color.green.300}"
           },
           "$type": "color",
-          "$description": "Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation."
+          "$description": "Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.",
+          "$extensions": {
+            "com.figma.scope": [
+              "SHAPE_FILL",
+              "TEXT_FILL"
+            ]
+          }
         }
       }
     },
@@ -104,7 +155,13 @@
             "dark": "{color.orange.800}"
           },
           "$type": "color",
-          "$description": "Used for the background of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item."
+          "$description": "Used for the background of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.",
+          "$extensions": {
+            "com.figma.scope": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ]
+          }
         }
       },
       "text": {
@@ -114,7 +171,12 @@
             "dark": "{color.orange.200}"
           },
           "$type": "color",
-          "$description": "Used for the text of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item."
+          "$description": "Used for the text of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.",
+          "$extensions": {
+            "com.figma.scope": [
+              "TEXT_FILL"
+            ]
+          }
         }
       },
       "icon": {
@@ -124,7 +186,13 @@
             "dark": "{color.orange.300}"
           },
           "$type": "color",
-          "$description": "Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item."
+          "$description": "Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.",
+          "$extensions": {
+            "com.figma.scope": [
+              "SHAPE_FILL",
+              "TEXT_FILL"
+            ]
+          }
         }
       }
     },
@@ -136,7 +204,13 @@
             "dark": "{color.red.800}"
           },
           "$type": "color",
-          "$description": "Used for the background of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition."
+          "$description": "Used for the background of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.",
+          "$extensions": {
+            "com.figma.scope": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ]
+          }
         }
       },
       "text": {
@@ -146,7 +220,12 @@
             "dark": "{color.red.200}"
           },
           "$type": "color",
-          "$description": "Used for the text of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition."
+          "$description": "Used for the text of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.",
+          "$extensions": {
+            "com.figma.scope": [
+              "TEXT_FILL"
+            ]
+          }
         }
       },
       "icon": {
@@ -156,7 +235,13 @@
             "dark": "{color.red.300}"
           },
           "$type": "color",
-          "$description": "Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition."
+          "$description": "Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.",
+          "$extensions": {
+            "com.figma.scope": [
+              "SHAPE_FILL",
+              "TEXT_FILL"
+            ]
+          }
         }
       }
     },
@@ -168,7 +253,13 @@
             "dark": "{color.purple.900}"
           },
           "$type": "color",
-          "$description": "Used for the background of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface."
+          "$description": "Used for the background of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.",
+          "$extensions": {
+            "com.figma.scope": [
+              "FRAME_FILL",
+              "SHAPE_FILL"
+            ]
+          }
         }
       },
       "text": {
@@ -178,7 +269,12 @@
             "dark": "{color.purple.300}"
           },
           "$type": "color",
-          "$description": "Used for the text of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface."
+          "$description": "Used for the text of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.",
+          "$extensions": {
+            "com.figma.scope": [
+              "TEXT_FILL"
+            ]
+          }
         }
       },
       "icon": {
@@ -188,7 +284,13 @@
             "dark": "{color.purple.500}"
           },
           "$type": "color",
-          "$description": "Used for the icon of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface."
+          "$description": "Used for the icon of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.",
+          "$extensions": {
+            "com.figma.scope": [
+              "SHAPE_FILL",
+              "TEXT_FILL"
+            ]
+          }
         }
       }
     }

package/src/tokens/semantic/text.tokens.json

@@ -7,6 +7,11 @@
       },
       "$type": "color",
       "$description": "Use text.color.default instead.",
+      "$extensions": {
+        "com.figma.scope": [
+          "TEXT_FILL"
+        ]
+      },
       "deprecated": true
     },
     "secondary": {
@@ -16,6 +21,11 @@
       },
       "$type": "color",
       "$description": "Use text.color.subtle instead.",
+      "$extensions": {
+        "com.figma.scope": [
+          "TEXT_FILL"
+        ]
+      },
       "deprecated": true
     },
     "tertiary": {
@@ -25,6 +35,11 @@
       },
       "$type": "color",
       "$description": "Use text.color.disabled instead.",
+      "$extensions": {
+        "com.figma.scope": [
+          "TEXT_FILL"
+        ]
+      },
       "deprecated": true
     },
     "color": {
@@ -34,7 +49,12 @@
           "dark": "{color.neutral.50}"
         },
         "$type": "color",
-        "$description": "Used for the default text color."
+        "$description": "Used for the default text color.",
+        "$extensions": {
+          "com.figma.scope": [
+            "TEXT_FILL"
+          ]
+        }
       },
       "subtle": {
         "$value": {
@@ -42,7 +62,12 @@
           "dark": "{color.neutral.200}"
         },
         "$type": "color",
-        "$description": "Used for supplemental text that doesn't need to be as prominent as other text."
+        "$description": "Used for supplemental text that doesn't need to be as prominent as other text.",
+        "$extensions": {
+          "com.figma.scope": [
+            "TEXT_FILL"
+          ]
+        }
       },
       "strong": {
         "$value": {
@@ -50,7 +75,12 @@
           "dark": "{color.neutral.0}"
         },
         "$type": "color",
-        "$description": "Used for text with the highest contrast."
+        "$description": "Used for text with the highest contrast.",
+        "$extensions": {
+          "com.figma.scope": [
+            "TEXT_FILL"
+          ]
+        }
       },
       "heading": {
         "$value": {
@@ -58,7 +88,12 @@
           "dark": "{color.neutral.0}"
         },
         "$type": "color",
-        "$description": "Used for headings level 1-6."
+        "$description": "Used for headings level 1-6.",
+        "$extensions": {
+          "com.figma.scope": [
+            "TEXT_FILL"
+          ]
+        }
       },
       "link": {
         "$value": {
@@ -66,7 +101,12 @@
           "dark": "{color.blue.200}"
         },
         "$type": "color",
-        "$description": "Used for default text links."
+        "$description": "Used for default text links.",
+        "$extensions": {
+          "com.figma.scope": [
+            "TEXT_FILL"
+          ]
+        }
       },
       "warning": {
         "$value": {
@@ -74,7 +114,12 @@
           "dark": "{color.orange.300}"
         },
         "$type": "color",
-        "$description": "Used for text that requires caution or careful attention."
+        "$description": "Used for text that requires caution or careful attention.",
+        "$extensions": {
+          "com.figma.scope": [
+            "TEXT_FILL"
+          ]
+        }
       },
       "danger": {
         "$value": {
@@ -82,7 +127,12 @@
           "dark": "{color.red.300}"
         },
         "$type": "color",
-        "$description": "Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination."
+        "$description": "Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.",
+        "$extensions": {
+          "com.figma.scope": [
+            "TEXT_FILL"
+          ]
+        }
       },
       "success": {
         "$value": {
@@ -90,7 +140,12 @@
           "dark": "{color.green.300}"
         },
         "$type": "color",
-        "$description": "Used for text indicating success, completion, approval, addition, or validity."
+        "$description": "Used for text indicating success, completion, approval, addition, or validity.",
+        "$extensions": {
+          "com.figma.scope": [
+            "TEXT_FILL"
+          ]
+        }
       },
       "disabled": {
         "$value": {
@@ -98,7 +153,12 @@
           "dark": "{color.neutral.400}"
         },
         "$type": "color",
-        "$description": "Used for disabled text."
+        "$description": "Used for disabled text.",
+        "$extensions": {
+          "com.figma.scope": [
+            "TEXT_FILL"
+          ]
+        }
       }
     }
   }

package/src/tokens/tokens_tailwind_table.vue

@@ -150,7 +150,7 @@ export default {
         const token = tokens[key];
         if (token.$value) {
           tokensArray.push(
-            this.transformTokenToTableColumns({ ...token, context: [...context, key] })
+            this.transformTokenToTableColumns({ ...token, context: [...context, key] }),
           );
         } else if (key !== 'colors') {
           tokensArray.push(...this.transformTokensToTableRows(token, [...context, key]));

package/src/utils/charts/config.js

@@ -255,26 +255,26 @@ export function getThresholdConfig(thresholds) {
           generateMarkArea({
             min: threshold,
             max: Infinity,
-          })
+          }),
         );
       } else if (LESS_THAN.includes(operator)) {
         acc.areas.push(
           generateMarkArea({
             min: Number.NEGATIVE_INFINITY,
             max: threshold,
-          })
+          }),
         );
       }
 
       acc.lines.push(
         generateMarkLines({
           max: threshold,
-        })
+        }),
       );
 
       return acc;
     },
-    { lines: [], areas: [] }
+    { lines: [], areas: [] },
   );
 
   return {
@@ -314,7 +314,7 @@ export const parseAnnotations = (annotations) =>
       acc.areas.push(generateMarkArea(annotation, 'xAxis'));
       return acc;
     },
-    { areas: [], lines: [], points: [] }
+    { areas: [], lines: [], points: [] },
   );
 
 /**
@@ -379,7 +379,7 @@ export const generateAnnotationSeries = (annotations, yAxisIndex = 1) => {
       type: 'scatter',
       data: [],
     },
-    getAnnotationsConfig(annotations)
+    getAnnotationsConfig(annotations),
   );
 };
 
@@ -507,7 +507,7 @@ export const getDefaultTooltipContent = (params, yAxisTitle = null) => {
     {
       xLabels: [],
       tooltipContent: {},
-    }
+    },
   );
 
   return { xLabels, tooltipContent };

package/src/utils/charts/utils.js

@@ -12,7 +12,7 @@ export const seriesHasAnnotations = (series = []) =>
   (series || []).filter(
     (seriesData) =>
       seriesData.name === ANNOTATIONS_SERIES_NAME &&
-      seriesData[ANNOTATIONS_COMPONENT_TYPE]?.data?.length
+      seriesData[ANNOTATIONS_COMPONENT_TYPE]?.data?.length,
   ).length !== 0;
 
 /**

package/src/utils/use_mock_intersection_observer.js

@@ -39,7 +39,7 @@ class MockObserver {
 
   $_hasObserver(node, options = {}) {
     return this.$_observers.some(
-      ([obvNode, obvOptions]) => node === obvNode && isMatch(options, obvOptions)
+      ([obvNode, obvOptions]) => node === obvNode && isMatch(options, obvOptions),
     );
   }
 

package/src/utils/utils.js

@@ -187,7 +187,7 @@ export function logWarning(message = '', element = '') {
  */
 export function stopEvent(
   event,
-  { preventDefault = true, stopPropagation = true, stopImmediatePropagation = false } = {}
+  { preventDefault = true, stopPropagation = true, stopImmediatePropagation = false } = {},
 ) {
   if (preventDefault) {
     event.preventDefault();

package/tailwind.defaults.js

@@ -43,7 +43,7 @@ const spacing = {
       88: 88,
     }).map(([scale, factor]) => {
       return [scale, `${factor * gridSize}rem`];
-    })
+    }),
   ),
 };
 

package/translations.js

@@ -31,10 +31,10 @@ export default {
   'GlProgressBar.ariaLabel': 'Progress bar',
   'GlSearchBoxByType.clearButtonTitle': 'Clear',
   'GlSearchBoxByType.input.placeholder': 'Search',
-  'GlSorting.sortByLabel': 'Sort by:',
   'GlSorting.sortAscending': 'Sort direction: ascending',
+  'GlSorting.sortByLabel': 'Sort by:',
   'GlSorting.sortDescending': 'Sort direction: descending',
-  'GlToken.closeButtonTitle': 'Remove',
   'GlTabs.GlScrollableTabs.scrollLeftLabel': 'Scroll left',
   'GlTabs.GlScrollableTabs.scrollRightLabel': 'Scroll right',
+  'GlToken.closeButtonTitle': 'Remove',
 };