@gitlab/ui 73.1.0 → 73.1.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [73.1.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v73.1.0...v73.1.1) (2024-02-01)
+
+
+### Bug Fixes
+
+* **GlBadge:** Pass aria label through if any ([5f3d8ec](https://gitlab.com/gitlab-org/gitlab-ui/commit/5f3d8ec5a09bc0963ea3282da758ba3c7469935c))
+
 # [73.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v73.0.1...v73.1.0) (2024-01-31)
 
 

package/dist/components/base/badge/badge.js

@@ -61,6 +61,9 @@ var script = {
       return this.hasIconOnly ? 'img' : undefined;
     },
     ariaLabel() {
+      if (this.$attrs['aria-label']) {
+        return this.$attrs['aria-label'];
+      }
       return this.role === 'img' ? this.icon : undefined;
     },
     iconSizeComputed() {

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 31 Jan 2024 08:13:00 GMT
+ * Generated on Thu, 01 Feb 2024 16:57:13 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 31 Jan 2024 08:13:00 GMT
+ * Generated on Thu, 01 Feb 2024 16:57:13 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 31 Jan 2024 08:13:00 GMT
+ * Generated on Thu, 01 Feb 2024 16:57:13 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 31 Jan 2024 08:13:00 GMT
+ * Generated on Thu, 01 Feb 2024 16:57:13 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 31 Jan 2024 08:13:00 GMT
+// Generated on Thu, 01 Feb 2024 16:57:13 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 31 Jan 2024 08:13:00 GMT
+// Generated on Thu, 01 Feb 2024 16:57:13 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "73.1.0",
+  "version": "73.1.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/badge/badge.spec.js

@@ -17,44 +17,51 @@ describe('badge', () => {
 
   describe('with "icon" prop', () => {
     describe.each`
-      scenario                | hasSlot  | iconName     | iconSize | expectedIconSize | expectedRole
-      ${'icon-only'}          | ${false} | ${'warning'} | ${'md'}  | ${16}            | ${'img'}
-      ${'16px icon and slot'} | ${true}  | ${'warning'} | ${'md'}  | ${16}            | ${undefined}
-      ${'12px icon and slot'} | ${true}  | ${'warning'} | ${'sm'}  | ${12}            | ${undefined}
-    `('with $scenario', ({ iconName, iconSize, expectedIconSize, hasSlot, expectedRole }) => {
-      beforeEach(() => {
-        const slots = hasSlot ? { default: 'slot-content' } : undefined;
-        createComponent({ propsData: { icon: iconName, iconSize }, slots });
-      });
-
-      it(`sets badge "role" attribute to ${expectedRole}`, () => {
-        expect(wrapper.attributes('role')).toBe(expectedRole);
-      });
+      scenario                | hasSlot  | iconName     | iconSize | expectedIconSize | expectedRole | expectedAriaLabel
+      ${'icon-only'}          | ${false} | ${'warning'} | ${'md'}  | ${16}            | ${'img'}     | ${'warning'}
+      ${'16px icon and slot'} | ${true}  | ${'warning'} | ${'md'}  | ${16}            | ${undefined} | ${undefined}
+      ${'12px icon and slot'} | ${true}  | ${'warning'} | ${'sm'}  | ${12}            | ${undefined} | ${undefined}
+    `(
+      'with $scenario',
+      ({ iconName, iconSize, expectedIconSize, hasSlot, expectedRole, expectedAriaLabel }) => {
+        beforeEach(() => {
+          const slots = hasSlot ? { default: 'slot-content' } : undefined;
+          createComponent({ propsData: { icon: iconName, iconSize }, slots });
+        });
 
-      describe('renders icon', () => {
-        it('with correct props', () => {
-          const icon = findIcon();
-          expect(icon.exists()).toBe(true);
-          expect(icon.props('name')).toBe(iconName);
+        it(`sets badge "role" attribute to ${expectedRole}`, () => {
+          expect(wrapper.attributes('role')).toBe(expectedRole);
         });
 
-        it('with correct class', () => {
-          const icon = findIcon();
+        describe('renders icon', () => {
+          it('with correct props', () => {
+            const icon = findIcon();
+            expect(icon.exists()).toBe(true);
+            expect(icon.props('name')).toBe(iconName);
+          });
+
+          it('with correct class', () => {
+            const icon = findIcon();
+
+            expect(icon.classes('gl-mr-2')).toBe(hasSlot);
+          });
 
-          expect(icon.classes('gl-mr-2')).toBe(hasSlot);
+          it('with correct size', () => {
+            expect(findIcon().props('size')).toBe(expectedIconSize);
+          });
         });
 
-        it('with correct size', () => {
-          expect(findIcon().props('size')).toBe(expectedIconSize);
+        it('sets aria-label', () => {
+          expect(wrapper.attributes('aria-label')).toBe(expectedAriaLabel);
         });
-      });
-    });
+      }
+    );
   });
 
   describe('without "icon" prop', () => {
     const mockSlotContent = 'slot-content';
     beforeEach(() => {
-      createComponent({ slots: { default: mockSlotContent } });
+      createComponent({ slots: { default: mockSlotContent }, attrs: { 'aria-label': 'Success' } });
     });
 
     it('renders slot content', () => {
@@ -68,5 +75,9 @@ describe('badge', () => {
     it('sets badge "role" attribute to undefined', () => {
       expect(wrapper.attributes('role')).toBe(undefined);
     });
+
+    it('sets aria-label', () => {
+      expect(wrapper.attributes('aria-label')).toBe('Success');
+    });
   });
 });

package/src/components/base/badge/badge.vue

@@ -65,6 +65,10 @@ export default {
       return this.hasIconOnly ? 'img' : undefined;
     },
     ariaLabel() {
+      if (this.$attrs['aria-label']) {
+        return this.$attrs['aria-label'];
+      }
+
       return this.role === 'img' ? this.icon : undefined;
     },
     iconSizeComputed() {

package/tailwind.defaults.js

@@ -4,7 +4,7 @@ const themeColorTokens = require('./src/tokens/color.theme.tokens.json');
 const baseColors = ['blue', 'gray', 'green', 'orange', 'purple', 'red'].reduce((acc, color) => {
   acc[color] = {};
   Object.entries(baseColorTokens[color]).forEach(([shade, { $value }]) => {
-    acc[color][shade] = $value;
+    acc[color][shade] = `var(--${color}-${shade}, ${$value})`;
   });
   return acc;
 }, {});
@@ -13,7 +13,7 @@ const themeColors = Object.entries(themeColorTokens.theme).reduce((acc, [color,
   const colorKey = `theme-${color}`;
   acc[colorKey] = {};
   Object.entries(shades).forEach(([shade, { $value }]) => {
-    acc[colorKey][shade] = $value;
+    acc[colorKey][shade] = `var(--${colorKey}-${shade}, ${$value})`;
   });
   return acc;
 }, {});
@@ -58,8 +58,8 @@ module.exports = {
   prefix: 'gl-',
   theme: {
     colors: {
-      white: baseColorTokens.white.$value,
-      black: baseColorTokens.black.$value,
+      white: `var(--white, ${baseColorTokens.white.$value})`,
+      black: `var(--black, ${baseColorTokens.black.$value})`,
       ...baseColors,
       ...themeColors,
     },