@gitlab/ui 118.1.2 → 119.1.0

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

@@ -16513,6 +16513,7 @@
                 "STROKE_COLOR"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
@@ -16527,6 +16528,7 @@
                   "STROKE_COLOR"
                 ]
               },
+              "$deprecated": true,
               "key": "{button.dashed.border.color.default}"
             },
             "name": "BUTTON_DASHED_BORDER_COLOR_DEFAULT",
@@ -16549,6 +16551,7 @@
                 "STROKE_COLOR"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
@@ -16560,6 +16563,7 @@
                   "STROKE_COLOR"
                 ]
               },
+              "$deprecated": true,
               "key": "{button.dashed.border.color.hover}"
             },
             "name": "BUTTON_DASHED_BORDER_COLOR_HOVER",
@@ -16582,6 +16586,7 @@
                 "STROKE_COLOR"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
@@ -16593,6 +16598,7 @@
                   "STROKE_COLOR"
                 ]
               },
+              "$deprecated": true,
               "key": "{button.dashed.border.color.focus}"
             },
             "name": "BUTTON_DASHED_BORDER_COLOR_FOCUS",
@@ -16615,6 +16621,7 @@
                 "STROKE_COLOR"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
@@ -16629,6 +16636,7 @@
                   "STROKE_COLOR"
                 ]
               },
+              "$deprecated": true,
               "key": "{button.dashed.border.color.active}"
             },
             "name": "BUTTON_DASHED_BORDER_COLOR_ACTIVE",

package/src/tokens/contextual/button.tokens.json

@@ -1264,7 +1264,8 @@
               "com.figma.scope": [
                 "STROKE_COLOR"
               ]
-            }
+            },
+            "$deprecated": true
           },
           "hover": {
             "$value": "{button.dashed.border.color.default}",
@@ -1274,7 +1275,8 @@
               "com.figma.scope": [
                 "STROKE_COLOR"
               ]
-            }
+            },
+            "$deprecated": true
           },
           "focus": {
             "$value": "{button.dashed.border.color.default}",
@@ -1284,7 +1286,8 @@
               "com.figma.scope": [
                 "STROKE_COLOR"
               ]
-            }
+            },
+            "$deprecated": true
           },
           "active": {
             "$value": {
@@ -1297,7 +1300,8 @@
               "com.figma.scope": [
                 "STROKE_COLOR"
               ]
-            }
+            },
+            "$deprecated": true
           }
         }
       }

package/src/utils/constants.js

@@ -108,7 +108,6 @@ export const buttonVariantOptions = {
   default: 'default',
   confirm: 'confirm',
   danger: 'danger',
-  dashed: 'dashed',
   link: 'link',
   /**
    * The "reset" variant can be used when customization of GlButton styles is required

package/tailwind.defaults.js

@@ -1,5 +1,6 @@
 const { range, round } = require('lodash');
 const plugin = require('tailwindcss/plugin');
+const { tailwindCQsMQsPlugin } = require('./tailwind_cqs_mqs_plugin');
 const {
   colors,
   backgroundColor,
@@ -9,6 +10,8 @@ const {
   textColor,
 } = require('./src/tokens/build/tailwind/tokens.cjs');
 
+const buildCQs = Boolean(process.env.USE_TAILWIND_CONTAINER_QUERIES);
+
 const gridSize = 0.5; // rem
 const spacing = {
   0: '0',
@@ -489,7 +492,7 @@ module.exports = {
     ringColor: false,
     ringOffsetWidth: false,
   },
-  plugins: [plugin(addCustomDefinitions)],
+  plugins: [plugin(addCustomDefinitions), tailwindCQsMQsPlugin(buildCQs)],
   theme: {
     animation: {
       spin: 'spin 0.6s infinite linear',

package/tailwind_cqs_mqs_plugin.js

@@ -0,0 +1,98 @@
+const plugin = require('tailwindcss/plugin');
+
+const tailwindCQsMQsPlugin = (buildCQs = false) =>
+  plugin(
+    ({ matchUtilities, matchVariant, theme }) => {
+      const values = theme('containers') ?? {};
+
+      function parseValue(value) {
+        const numericValue = value.match(/^(\d+\.\d+|\d+|\.\d+)\D+/)?.[1] ?? null;
+        if (numericValue === null) return null;
+
+        return parseFloat(value);
+      }
+
+      matchUtilities(
+        {
+          '@container': (value, { modifier }) => {
+            return {
+              'container-type': value,
+              'container-name': modifier,
+            };
+          },
+        },
+        {
+          values: {
+            DEFAULT: 'inline-size',
+            normal: 'normal',
+          },
+          modifiers: 'any',
+        },
+      );
+
+      const buildVariantMatcher = (variant, { cqBuilder, mqBuilder }) => [
+        variant,
+        (value = '', { modifier }) => {
+          const parsed = parseValue(value);
+
+          if (parsed === null) return [];
+
+          return buildCQs ? cqBuilder(modifier, value) : mqBuilder(value);
+        },
+        {
+          values,
+          sort(aVariant, zVariant) {
+            const a = parseFloat(aVariant.value);
+            const z = parseFloat(zVariant.value);
+
+            if (a === null || z === null) return 0;
+
+            // Sort values themselves regardless of unit
+            if (a - z !== 0) return a - z;
+
+            const aLabel = aVariant.modifier ?? '';
+            const zLabel = zVariant.modifier ?? '';
+
+            // Explicitly move empty labels to the end
+            if (aLabel === '' && zLabel !== '') {
+              return 1;
+            }
+            if (aLabel !== '' && zLabel === '') {
+              return -1;
+            }
+
+            // Sort labels alphabetically in the English locale
+            // We are intentionally overriding the locale because we do not want the sort to
+            // be affected by the machine's locale (be it a developer or CI environment)
+            return aLabel.localeCompare(zLabel, 'en', { numeric: true });
+          },
+        },
+      ];
+
+      matchVariant(
+        ...buildVariantMatcher('@', {
+          cqBuilder: (modifier, value) => `@container ${modifier ?? ''} (min-width: ${value})`,
+          mqBuilder: (value) => `@media (min-width: ${value})`,
+        }),
+      );
+
+      matchVariant(
+        ...buildVariantMatcher('@max', {
+          cqBuilder: (modifier, value) => `@container ${modifier ?? ''} (max-width: ${value})`,
+          mqBuilder: (value) => `@media (max-width: ${value})`,
+        }),
+      );
+    },
+    {
+      theme: {
+        containers: {
+          sm: '576px',
+          md: '768px',
+          lg: '992px',
+          xl: '1200px',
+        },
+      },
+    },
+  );
+
+module.exports = { tailwindCQsMQsPlugin };