@gitlab/ui 32.25.0 → 32.29.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [32.29.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.28.0...v32.29.0) (2021-10-29)
+
+
+### Features
+
+* **Toggle:** Update label semantics for accessibility ([a16af22](https://gitlab.com/gitlab-org/gitlab-ui/commit/a16af22246dbd4e886ca8ac4640bf9c44da5c995))
+
+# [32.28.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.27.0...v32.28.0) (2021-10-28)
+
+
+### Features
+
+* **css:** Use px in breakpoints instead of rem ([d107ae6](https://gitlab.com/gitlab-org/gitlab-ui/commit/d107ae68b9201a677e96fea7c19d479802f721fb))
+
+# [32.27.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.26.0...v32.27.0) (2021-10-28)
+
+
+### Features
+
+* **GlBanner:** Add embedded prop to gl-banner ([e0669e3](https://gitlab.com/gitlab-org/gitlab-ui/commit/e0669e328fd396276c47bd246864af9108b2688d))
+
+# [32.26.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.25.0...v32.26.0) (2021-10-27)
+
+
+### Features
+
+* **breadcrumb:** Set default separator and fix spacing ([95a7fc8](https://gitlab.com/gitlab-org/gitlab-ui/commit/95a7fc8e3ff3a06feb77ea7cdbfa7255b6f2c3f7))
+
 # [32.25.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.24.1...v32.25.0) (2021-10-26)
 
 

package/dist/components/base/banner/banner.js

@@ -56,6 +56,15 @@ var script = {
         return bannerVariants.includes(value);
       }
 
+    },
+
+    /**
+     * Removes the border for banners embedded in content.
+     */
+    embedded: {
+      type: Boolean,
+      required: false,
+      default: null
     }
   },
   computed: {
@@ -92,7 +101,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('gl-card',{staticClass:"gl-px-8 gl-py-6 gl-line-height-20",class:{ 'gl-banner-introduction': _vm.isIntroducing },attrs:{"body-class":"gl-display-flex gl-p-0!"}},[(_vm.svgPath)?_c('div',{staticClass:"gl-banner-illustration"},[_c('img',{attrs:{"src":_vm.svgPath,"alt":"","role":"presentation"}})]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-banner-content"},[_c('h1',{staticClass:"gl-banner-title"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),_vm._t("default"),_vm._v(" "),_c('gl-button',{attrs:{"variant":"confirm","category":"primary","data-testid":"gl-banner-primary-button","href":_vm.buttonLink},on:{"click":_vm.primaryButtonClicked}},[_vm._v(_vm._s(_vm.buttonText))]),_vm._v(" "),_vm._t("actions")],2),_vm._v(" "),_c('gl-button',{staticClass:"gl-banner-close",attrs:{"variant":_vm.isIntroducing ? 'confirm' : 'default',"category":"tertiary","size":"small","icon":"close","aria-label":"Close banner"},on:{"click":_vm.handleClose}})],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-card',{staticClass:"gl-px-8 gl-py-6 gl-line-height-20",class:{ 'gl-banner-introduction': _vm.isIntroducing, 'gl-border-none!': _vm.embedded },attrs:{"body-class":"gl-display-flex gl-p-0!"}},[(_vm.svgPath)?_c('div',{staticClass:"gl-banner-illustration"},[_c('img',{attrs:{"src":_vm.svgPath,"alt":"","role":"presentation"}})]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-banner-content"},[_c('h1',{staticClass:"gl-banner-title"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),_vm._t("default"),_vm._v(" "),_c('gl-button',{attrs:{"variant":"confirm","category":"primary","data-testid":"gl-banner-primary-button","href":_vm.buttonLink},on:{"click":_vm.primaryButtonClicked}},[_vm._v(_vm._s(_vm.buttonText))]),_vm._v(" "),_vm._t("actions")],2),_vm._v(" "),_c('gl-button',{staticClass:"gl-banner-close",attrs:{"variant":_vm.isIntroducing ? 'confirm' : 'default',"category":"tertiary","size":"small","icon":"close","aria-label":"Close banner"},on:{"click":_vm.handleClose}})],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/breadcrumb/breadcrumb.js

@@ -1,10 +1,12 @@
 import { BBreadcrumb, BBreadcrumbItem } from 'bootstrap-vue/esm/index.js';
+import GlIcon from '../icon/icon';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
   components: {
     BBreadcrumb,
-    BBreadcrumbItem
+    BBreadcrumbItem,
+    GlIcon
   },
   inheritAttrs: false,
   props: {
@@ -25,6 +27,12 @@ var script = {
         });
       }
     }
+  },
+  methods: {
+    isLastItem(items, index) {
+      return index === items.length - 1;
+    }
+
   }
 };
 
@@ -32,7 +40,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-breadcrumbs"},[_c('b-breadcrumb',_vm._g(_vm._b({staticClass:"gl-breadcrumb-list"},'b-breadcrumb',_vm.$attrs,false),_vm.$listeners),[_vm._t("avatar"),_vm._v(" "),_vm._l((_vm.items),function(item,index){return [_c('b-breadcrumb-item',{key:index,staticClass:"gl-breadcrumb-item",attrs:{"text":item.text,"href":item.href,"to":item.to}}),_vm._v(" "),(index != _vm.items.length - 1)?_c('span',{key:("index " + (item.text)),staticClass:"gl-breadcrumb-separator",attrs:{"data-testid":"separator"}},[_vm._t("separator")],2):_vm._e()]})],2)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-breadcrumbs"},[_vm._t("avatar"),_vm._v(" "),_c('b-breadcrumb',_vm._g(_vm._b({staticClass:"gl-breadcrumb-list"},'b-breadcrumb',_vm.$attrs,false),_vm.$listeners),[_vm._l((_vm.items),function(item,index){return [_c('b-breadcrumb-item',{key:index,staticClass:"gl-breadcrumb-item",attrs:{"text":item.text,"href":item.href,"to":item.to}},[_c('span',[_vm._v(_vm._s(item.text))]),_vm._v(" "),(!_vm.isLastItem(_vm.items, index))?_c('span',{key:(index + " " + (item.text)),staticClass:"gl-breadcrumb-separator",attrs:{"data-testid":"separator"}},[_vm._t("separator",[_c('gl-icon',{attrs:{"name":"chevron-right"}})])],2):_vm._e()])]})],2)],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/toggle/toggle.js

@@ -66,7 +66,15 @@ var script = {
     },
 
     /**
-     * The label's position relative to the toggle.
+     * The id for the label. This id is used by the aria-labelledby attribute on the toggle button.
+     */
+    labelId: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * The label's position relative to the toggle. If 'hidden', the toggle will add the .gl-sr-only class so the label is still accessible to screen readers.
      */
     labelPosition: {
       type: String,
@@ -84,10 +92,6 @@ var script = {
       return this.value ? 'mobile-issue-close' : 'close';
     },
 
-    shouldShowLabel() {
-      return this.label && this.labelPosition !== 'hidden';
-    },
-
     helpId() {
       return this.help ? `toggle-help-${this.uuid}` : undefined;
     },
@@ -123,11 +127,11 @@ 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('label',{staticClass:"gl-display-flex gl-flex-direction-column gl-mb-0 gl-w-max-content"},[_c('span',{staticClass:"gl-toggle-wrapper",class:{ 'gl-toggle-label-inline': _vm.labelPosition === 'left', 'is-disabled': _vm.disabled }},[(_vm.shouldShowLabel)?_c('span',{staticClass:"gl-toggle-label",attrs:{"data-testid":"toggle-label"}},[_vm._t("label",[_vm._v(_vm._s(_vm.label))])],2):_vm._e(),_vm._v(" "),(_vm.name)?_c('input',{attrs:{"name":_vm.name,"type":"hidden"},domProps:{"value":_vm.value}}):_vm._e(),_vm._v(" "),_c('button',{class:{
-        'gl-toggle': true,
-        'is-checked': _vm.value,
-        'is-disabled': _vm.disabled,
-      },attrs:{"role":"switch","aria-checked":_vm.isChecked,"aria-label":_vm.label,"aria-describedby":_vm.helpId,"type":"button"},on:{"click":function($event){$event.preventDefault();return _vm.toggleFeature($event)}}},[(_vm.isLoading)?_c('gl-loading-icon',{staticClass:"toggle-loading",attrs:{"color":"light"}}):_c('span',{class:{ 'toggle-icon': true, disabled: _vm.disabled }},[_c('gl-icon',{attrs:{"name":_vm.icon,"size":16}})],1)],1)]),_vm._v(" "),(_vm.help)?_c('span',{staticClass:"gl-help-label",attrs:{"id":_vm.helpId,"data-testid":"toggle-help"}},[_vm._t("help",[_vm._v(_vm._s(_vm.help))])],2):_vm._e()])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-toggle-wrapper gl-display-flex gl-flex-direction-column gl-mb-0 gl-w-max-content",class:{ 'gl-toggle-label-inline': _vm.labelPosition === 'left', 'is-disabled': _vm.disabled }},[_c('span',{staticClass:"gl-toggle-label",class:{ 'gl-sr-only': _vm.labelPosition === 'hidden' },attrs:{"id":_vm.labelId,"data-testid":"toggle-label"}},[_vm._t("label",[_vm._v(_vm._s(_vm.label))])],2),_vm._v(" "),(_vm.name)?_c('input',{attrs:{"name":_vm.name,"type":"hidden"},domProps:{"value":_vm.value}}):_vm._e(),_vm._v(" "),_c('button',{class:{
+      'gl-toggle': true,
+      'is-checked': _vm.value,
+      'is-disabled': _vm.disabled,
+    },attrs:{"role":"switch","aria-checked":_vm.isChecked,"aria-labelledby":_vm.labelId,"aria-describedby":_vm.helpId,"type":"button"},on:{"click":function($event){$event.preventDefault();return _vm.toggleFeature($event)}}},[(_vm.isLoading)?_c('gl-loading-icon',{staticClass:"toggle-loading",attrs:{"color":"light"}}):_c('span',{class:{ 'toggle-icon': true, disabled: _vm.disabled }},[_c('gl-icon',{attrs:{"name":_vm.icon,"size":16}})],1)],1),_vm._v(" "),(_vm.help)?_c('span',{staticClass:"gl-help-label",attrs:{"id":_vm.helpId,"data-testid":"toggle-help"}},[_vm._t("help",[_vm._v(_vm._s(_vm.help))])],2):_vm._e()])};
 var __vue_staticRenderFns__ = [];
 
   /* style */