@gitlab/ui 74.6.0 → 74.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "74.6.0",
+  "version": "74.7.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -25,7 +25,7 @@
     "prebuild": "run-s build-tokens generate-utilities",
     "prepare": "run-s build-tokens generate-utilities",
     "generate-utilities": "make src/scss/utilities.scss",
-    "deprecate-gl-utils": "./bin/deprecate_utils.js",
+    "deprecate-gl-utils": "node ./bin/deprecate_utils.js",
     "copy-fonts": "make copy-fonts",
     "build-tokens": "node ./bin/build_tokens.js",
     "clean": "rm -r dist storybook src/scss/utilities.scss",
@@ -106,19 +106,19 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.6.14",
-    "@storybook/addon-docs": "7.6.14",
-    "@storybook/addon-essentials": "7.6.14",
-    "@storybook/addon-interactions": "7.6.14",
-    "@storybook/addon-viewport": "7.6.14",
-    "@storybook/builder-webpack5": "7.6.14",
-    "@storybook/test": "7.6.14",
+    "@storybook/addon-a11y": "^7.6.14",
+    "@storybook/addon-docs": "^7.6.14",
+    "@storybook/addon-essentials": "^7.6.14",
+    "@storybook/addon-interactions": "^7.6.14",
+    "@storybook/addon-viewport": "^7.6.14",
+    "@storybook/builder-webpack5": "^7.6.14",
+    "@storybook/test": "^7.6.14",
     "@storybook/test-runner": "0.16.0",
-    "@storybook/theming": "7.6.14",
-    "@storybook/vue": "7.6.14",
-    "@storybook/vue-webpack5": "7.6.14",
-    "@storybook/vue3": "7.6.14",
-    "@storybook/vue3-webpack5": "7.6.14",
+    "@storybook/theming": "^7.6.14",
+    "@storybook/vue": "^7.6.14",
+    "@storybook/vue-webpack5": "^7.6.14",
+    "@storybook/vue3": "^7.6.14",
+    "@storybook/vue3-webpack5": "^7.6.14",
     "@types/jest-image-snapshot": "^6.4.0",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
@@ -170,7 +170,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.6.14",
+    "storybook": "^7.6.14",
     "storybook-dark-mode": "3.0.3",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",

package/src/components/base/tabs/tabs/tabs.stories.js

@@ -11,24 +11,13 @@ const components = {
   GlTab,
 };
 
-const generateProps = ({
+const generateProps = ({ justified } = {}) => ({
   justified,
-  actionPrimary = null,
-  actionSecondary = null,
-  actionTertiary = null,
-} = {}) => ({
-  justified,
-  actionPrimary,
-  actionSecondary,
-  actionTertiary,
 });
 
 const wrap = (template) => `
   <gl-tabs
     :justified="justified"
-    :action-primary="actionPrimary"
-    :action-secondary="actionSecondary"
-    :action-tertiary="actionTertiary"
   >
     ${template}
   </gl-tabs>
@@ -170,35 +159,6 @@ export const WithCounterBadges = (_args, { argTypes }) => ({
   badgeVariantOptions,
 });
 
-export const WithActions = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components,
-  template: wrap(`
-    <gl-tab title="Tab 1">
-      Tab panel 1
-    </gl-tab>`),
-});
-WithActions.args = generateProps({
-  actionPrimary: {
-    attributes: {
-      variant: 'danger',
-    },
-    text: 'Primary action',
-  },
-  actionSecondary: {
-    attributes: {
-      variant: 'success',
-    },
-    text: 'Secondary action',
-  },
-  actionTertiary: {
-    attributes: {
-      variant: 'default',
-    },
-    text: 'Tertiary action',
-  },
-});
-
 export const WithScroll = (_args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: {

package/src/scss/utilities.scss

@@ -481,6 +481,14 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   background-color: $purple-50 !important
 }
 
+.gl-bg-purple-500 {
+  background-color: $purple-500
+}
+
+.gl-bg-purple-500\! {
+  background-color: $purple-500 !important
+}
+
 .gl-bg-purple-800 {
   background-color: $purple-800
 }
@@ -1388,6 +1396,14 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   border-color: $purple-300 !important;
 }
 
+.gl-border-purple-500 {
+  border-color: $purple-500;
+}
+
+.gl-border-purple-500\! {
+  border-color: $purple-500 !important;
+}
+
 .gl-border-purple-700 {
   border-color: $purple-700;
 }
@@ -2816,6 +2832,14 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   color: $red-900 !important;
 }
 
+.gl-text-purple-500 {
+  color: $purple-500;
+}
+
+.gl-text-purple-500\! {
+  color: $purple-500 !important;
+}
+
 .gl-text-purple-600 {
   color: $purple-600;
 }

package/src/scss/utility-mixins/background.scss

@@ -150,6 +150,10 @@
   background-color: $purple-50;
 }
 
+@mixin gl-bg-purple-500 {
+  background-color: $purple-500;
+}
+
 @mixin gl-bg-purple-800 {
   background-color: $purple-800;
 }

package/src/scss/utility-mixins/border.scss

@@ -183,6 +183,10 @@
   border-color: $purple-300;
 }
 
+@mixin gl-border-purple-500 {
+  border-color: $purple-500;
+}
+
 @mixin gl-border-purple-700 {
   border-color: $purple-700;
 }

package/src/scss/utility-mixins/color.scss

@@ -193,6 +193,10 @@
   color: $red-900;
 }
 
+@mixin gl-text-purple-500 {
+  color: $purple-500;
+}
+
 @mixin gl-text-purple-600 {
   color: $purple-600;
 }

package/tailwind.defaults.js

@@ -19,39 +19,41 @@ const themeColors = Object.entries(themeColorTokens.theme).reduce((acc, [color,
 }, {});
 
 const gridSize = 0.5; // rem
-const spacing = Object.fromEntries(
-  Object.entries({
-    0: 0,
-    1: 0.25,
-    2: 0.5,
-    3: 1,
-    4: 1.5,
-    5: 2,
-    6: 3,
-    7: 4,
-    8: 5,
-    9: 6,
-    10: 7,
-    11: 8,
-    '11-5': 9,
-    12: 10,
-    13: 12,
-    15: 15,
-    20: 20,
-    26: 26,
-    28: 28,
-    30: 30,
-    31: 31,
-    34: 34,
-    48: 48,
-    62: 62,
-    75: 75,
-    80: 80,
-    88: 88,
-  }).map(([scale, factor]) => {
-    return [scale, `${factor * gridSize}rem`];
-  })
-);
+const spacing = {
+  0: '0',
+  ...Object.fromEntries(
+    Object.entries({
+      1: 0.25,
+      2: 0.5,
+      3: 1,
+      4: 1.5,
+      5: 2,
+      6: 3,
+      7: 4,
+      8: 5,
+      9: 6,
+      10: 7,
+      11: 8,
+      '11-5': 9,
+      12: 10,
+      13: 12,
+      15: 15,
+      20: 20,
+      26: 26,
+      28: 28,
+      30: 30,
+      31: 31,
+      34: 34,
+      48: 48,
+      62: 62,
+      75: 75,
+      80: 80,
+      88: 88,
+    }).map(([scale, factor]) => {
+      return [scale, `${factor * gridSize}rem`];
+    })
+  ),
+};
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {