@gitlab/ui 135.1.2 → 136.1.0

package/dist/components/base/form/form_password_input/form_password_input.js

@@ -1,15 +1,14 @@
 import GlButton from '../../button/button';
 import { GlTooltipDirective } from '../../../../directives/tooltip/tooltip';
+import { translate } from '../../../../utils/i18n';
 import GlFormInput from '../form_input/form_input';
-import GlFormInputGroup from '../form_input_group/form_input_group';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
   name: 'GlFormPasswordInput',
   components: {
     GlButton,
-    GlFormInput,
-    GlFormInputGroup
+    GlFormInput
   },
   directives: {
     GlTooltip: GlTooltipDirective
@@ -35,28 +34,29 @@ var script = {
     },
     /**
      * Accessible label and tooltip for the toggle button while the value is masked.
-     * Pass a translated string.
      */
     revealLabel: {
       type: String,
       required: false,
-      default: 'Reveal password'
+      default: () => translate('GlFormPasswordInput.revealLabel', 'Reveal password')
     },
     /**
      * Accessible label and tooltip for the toggle button while the value is revealed.
-     * Pass a translated string.
      */
     hideLabel: {
       type: String,
       required: false,
-      default: 'Hide password'
+      default: () => translate('GlFormPasswordInput.hideLabel', 'Hide password')
     },
     /**
-     * Disables the field while keeping it in the focus order and announced by
-     * assistive technology (via `aria-disabled`), rather than removing it from
-     * the tab sequence.
+     * Disables the field and its toggle. Neither is in the tab order and the
+     * value is not submitted with the form.
+     *
+     * To prevent edits while keeping the value readable, copyable and
+     * submitted, pass `readonly` instead. It reaches the input untouched and
+     * leaves the toggle usable, since revealing a value is a read.
      */
-    accessibleDisabled: {
+    disabled: {
       type: Boolean,
       required: false,
       default: false
@@ -80,9 +80,6 @@ var script = {
   },
   methods: {
     toggleVisibility() {
-      if (this.accessibleDisabled) {
-        return;
-      }
       this.isMasked = !this.isMasked;
       /**
        * Emitted when the reveal/hide button is clicked.
@@ -99,7 +96,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-form-input-group',{staticClass:"gl-form-password-input",scopedSlots:_vm._u([{key:"append",fn:function(){return [_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:(_vm.toggleLabel),expression:"toggleLabel"}],staticClass:"gl-form-password-input-toggle !gl-border-0",attrs:{"category":"tertiary","accessible-disabled":"","aria-label":_vm.toggleLabel,"icon":_vm.toggleIcon,"disabled":_vm.accessibleDisabled},on:{"click":_vm.toggleVisibility}})]},proxy:true}])},[_c('gl-form-input',_vm._g(_vm._b({attrs:{"value":_vm.value,"type":_vm.type,"readonly":_vm.accessibleDisabled,"aria-disabled":_vm.accessibleDisabled ? 'true' : null}},'gl-form-input',_vm.$attrs,false),_vm.$listeners))],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-form-password-input"},[_c('gl-form-input',_vm._g(_vm._b({staticClass:"gl-form-password-input-field",attrs:{"value":_vm.value,"type":_vm.type,"disabled":_vm.disabled}},'gl-form-input',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:(_vm.toggleLabel),expression:"toggleLabel"}],staticClass:"gl-form-password-input-toggle",attrs:{"category":"tertiary","size":"small","aria-label":_vm.toggleLabel,"icon":_vm.toggleIcon,"disabled":_vm.disabled},on:{"click":_vm.toggleVisibility}})],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/label/label.js

@@ -79,6 +79,14 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    /**
+     * Additional text shown in a muted footer line of the tooltip (e.g. "Archived")
+     */
+    footer: {
+      type: String,
+      required: false,
+      default: ''
     }
   },
   computed: {
@@ -139,7 +147,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('span',_vm._b({staticClass:"gl-label",class:_vm.cssClasses,style:(_vm.cssVariables),on:{"click":_vm.onClick}},'span',_vm.$attrs,false),[_c(_vm.labelComponent,{ref:"labelTitle",tag:"component",staticClass:"gl-label-link",class:{ 'gl-label-link-underline': _vm.target },attrs:{"href":_vm.target ? _vm.target : false,"tabindex":"0"}},[_c('span',{staticClass:"gl-label-text"},[_vm._v("\n      "+_vm._s(_vm.scopedKey)+"\n    ")]),_vm._v(" "),(_vm.scoped && _vm.scopedValue)?_c('span',{staticClass:"gl-label-text-scoped"},[_vm._v("\n      "+_vm._s(_vm.scopedValue)+"\n    ")]):_vm._e()]),_vm._v(" "),(_vm.showCloseButton)?_c('gl-button',{staticClass:"gl-label-close !gl-p-0",attrs:{"category":"tertiary","size":"small","variant":"reset","aria-label":_vm.removeButtonAriaLabel,"disabled":_vm.disabled},on:{"click":_vm.onClose}},[_c('gl-icon',{attrs:{"name":"close-xs","size":12}})],1):_vm._e(),_vm._v(" "),(_vm.description)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.tooltipTarget; },"placement":_vm.tooltipPlacement,"boundary":"viewport"}},[(_vm.scoped)?_c('span',{staticClass:"gl-label-tooltip-title"},[_vm._v("Scoped label")]):_vm._e(),_vm._v("\n    "+_vm._s(_vm.description)+"\n  ")]):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',_vm._b({staticClass:"gl-label",class:_vm.cssClasses,style:(_vm.cssVariables),on:{"click":_vm.onClick}},'span',_vm.$attrs,false),[_c(_vm.labelComponent,{ref:"labelTitle",tag:"component",staticClass:"gl-label-link",class:{ 'gl-label-link-underline': _vm.target },attrs:{"href":_vm.target ? _vm.target : false,"tabindex":"0"}},[_c('span',{staticClass:"gl-label-text"},[_vm._v("\n      "+_vm._s(_vm.scopedKey)+"\n    ")]),_vm._v(" "),(_vm.scoped && _vm.scopedValue)?_c('span',{staticClass:"gl-label-text-scoped"},[_vm._v("\n      "+_vm._s(_vm.scopedValue)+"\n    ")]):_vm._e()]),_vm._v(" "),(_vm.showCloseButton)?_c('gl-button',{staticClass:"gl-label-close !gl-p-0",attrs:{"category":"tertiary","size":"small","variant":"reset","aria-label":_vm.removeButtonAriaLabel,"disabled":_vm.disabled},on:{"click":_vm.onClose}},[_c('gl-icon',{attrs:{"name":"close-xs","size":12}})],1):_vm._e(),_vm._v(" "),(_vm.description || _vm.footer)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.tooltipTarget; },"placement":_vm.tooltipPlacement,"boundary":"viewport"}},[(_vm.scoped)?_c('span',{staticClass:"gl-label-tooltip-title"},[_vm._v("Scoped label")]):_vm._e(),_vm._v("\n    "+_vm._s(_vm.description)+"\n    "),(_vm.footer)?_c('span',{staticClass:"gl-block gl-text-subtle"},[_vm._v(_vm._s(_vm.footer))]):_vm._e()]):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/toast/index.js

@@ -42,25 +42,33 @@ function showToast(message) {
   return toast;
 }
 
+/**
+ * Adds a `$toast` property to the component it's applied to.
+ *
+ * Use this to opt individual components into toasts, instead of adding `$toast`
+ * to every component in the app with `GlToastPlugin`.
+ */
+const GlToastMixin = {
+  beforeCreate() {
+    if (this.$toast) {
+      return;
+    }
+    this.$toast = {
+      show: showToast.bind(this)
+    };
+  }
+};
+
 /**
  * Note: This is not a typical Vue component and needs to be registered before instantiating a Vue app.
  * Once registered, the toast will be globally available throughout your app.
  *
- * See https://design.gitlab.com/storybook for detailed documentation.
+ * See https://design.gitlab.com/components/toast for detailed documentation.
  */
-var index = {
+const GlToastPlugin = {
   install(V) {
-    V.mixin({
-      beforeCreate() {
-        if (this.$toast) {
-          return;
-        }
-        this.$toast = {
-          show: showToast.bind(this)
-        };
-      }
-    });
+    V.mixin(GlToastMixin);
   }
 };
 
-export { index as default };
+export { GlToastMixin, GlToastPlugin, GlToastPlugin as default };

package/dist/components/index.js

@@ -32,7 +32,7 @@ export { default as GlBadge } from './base/badge/badge';
 export { default as GlBanner } from './base/banner/banner';
 export { default as GlButton } from './base/button/button';
 export { default as GlTooltip } from './base/tooltip/tooltip';
-export { default as GlToast } from './base/toast';
+export { default as GlToast, GlToastMixin, GlToastPlugin } from './base/toast';
 export { default as GlDashboardSkeleton } from './regions/dashboard_skeleton/dashboard_skeleton';
 export { default as GlEmptyState } from './regions/empty_state/empty_state';
 export { default as GlForm } from './base/form/form';