@gitlab/ui 97.1.0 → 97.2.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [97.2.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v97.2.0...v97.2.1) (2024-10-18)
+
+
+### Bug Fixes
+
+* **GlProgressBar:** adds accessible name ([dad2627](https://gitlab.com/gitlab-org/gitlab-ui/commit/dad262736cf44b04ffd04ce731960c23b23d0dc1)), closes [/gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/4125#note_1878259355](https://gitlab.com//gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/4125/issues/note_1878259355)
+
+# [97.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v97.1.0...v97.2.0) (2024-10-17)
+
+
+### Features
+
+* **GlIcon:** Add iconOpticallyAligned prop ([041e211](https://gitlab.com/gitlab-org/gitlab-ui/commit/041e211a5133562787064cb143dd1280876c5785))
+
 # [97.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v97.0.0...v97.1.0) (2024-10-16)
 
 

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

@@ -39,6 +39,14 @@ var script = {
       default: 'md',
       validator: value => Object.keys(badgeIconSizeOptions).includes(value),
       required: false
+    },
+    /**
+     * Optically aligns circular icons with the badge.
+     */
+    iconOpticallyAligned: {
+      type: Boolean,
+      default: false,
+      required: false
     }
   },
   computed: {
@@ -47,7 +55,7 @@ var script = {
       return Boolean(this.icon && Object.keys(this.$slots).length === 0);
     },
     isCircularIcon() {
-      return ['issue-open-m', 'issue-close'].includes(this.icon);
+      return this.iconOpticallyAligned || ['issue-open-m', 'issue-close'].includes(this.icon);
     },
     role() {
       return this.hasIconOnly ? 'img' : undefined;

package/dist/components/base/progress_bar/progress_bar.js

@@ -1,3 +1,4 @@
+import { translate } from '../../../utils/i18n';
 import { progressBarVariantOptions } from '../../../utils/constants';
 import { toFloat } from '../../../utils/number_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -5,6 +6,11 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 var script = {
   name: 'GlProgressBar',
   props: {
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: translate('GlProgressBar.ariaLabel', 'Progress bar')
+    },
     value: {
       type: [Number, String],
       required: false,
@@ -55,7 +61,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-progress-bar progress",style:(_vm.progressHeight)},[_c('div',{class:_vm.classes,style:(_vm.progressBarStyles),attrs:{"role":"progressbar","aria-valuemin":"0","aria-valuemax":String(_vm.computedMax),"aria-valuenow":_vm.computedValue}})])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-progress-bar progress",style:(_vm.progressHeight)},[_c('div',{class:_vm.classes,style:(_vm.progressBarStyles),attrs:{"role":"progressbar","aria-label":_vm.ariaLabel,"aria-valuemin":"0","aria-valuemax":String(_vm.computedMax),"aria-valuenow":_vm.computedValue}})])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "97.1.0",
+  "version": "97.2.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -116,7 +116,7 @@
     "@gitlab/eslint-plugin": "20.4.1",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.2.2",
-    "@gitlab/svgs": "3.117.0",
+    "@gitlab/svgs": "3.119.0",
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",

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

@@ -40,6 +40,14 @@ export default {
       validator: (value) => Object.keys(badgeIconSizeOptions).includes(value),
       required: false,
     },
+    /**
+     * Optically aligns circular icons with the badge.
+     */
+    iconOpticallyAligned: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
   computed: {
     hasIconOnly() {
@@ -47,7 +55,7 @@ export default {
       return Boolean(this.icon && Object.keys(this.$slots).length === 0);
     },
     isCircularIcon() {
-      return ['issue-open-m', 'issue-close'].includes(this.icon);
+      return this.iconOpticallyAligned || ['issue-open-m', 'issue-close'].includes(this.icon);
     },
     role() {
       return this.hasIconOnly ? 'img' : undefined;

package/src/components/base/progress_bar/progress_bar.vue

@@ -1,10 +1,16 @@
 <script>
+import { translate } from '../../../utils/i18n';
 import { progressBarVariantOptions } from '../../../utils/constants';
 import { toFloat } from '../../../utils/number_utils';
 
 export default {
   name: 'GlProgressBar',
   props: {
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: translate('GlProgressBar.ariaLabel', 'Progress bar'),
+    },
     value: {
       type: [Number, String],
       required: false,
@@ -56,6 +62,7 @@ export default {
       :class="classes"
       :style="progressBarStyles"
       role="progressbar"
+      :aria-label="ariaLabel"
       aria-valuemin="0"
       :aria-valuemax="String(computedMax)"
       :aria-valuenow="computedValue"

package/translations.js

@@ -77,6 +77,7 @@ export default {
   'GlPagination.nav': 'Pagination',
   'GlPagination.nextText': 'Next',
   'GlPagination.prevText': 'Previous',
+  'GlProgressBar.ariaLabel': 'Progress bar',
   'GlSearchBoxByType.clearButtonTitle': 'Clear',
   'GlSearchBoxByType.input.placeholder': 'Search',
   'GlSorting.sortAscending': 'Sort direction: ascending',