@gitlab/ui 135.1.2 → 136.1.0

package/src/components/base/form/form_password_input/form_password_input.scss

@@ -1,42 +1,24 @@
 .gl-form-password-input {
+  position: relative;
+  @apply gl-w-full;
+
   // Hide Edge's native password-reveal control so only this component's toggle
   // button is shown; otherwise Edge renders a second reveal icon for typed
   // passwords, producing two overlapping controls.
   input[type="password"]::-ms-reveal {
     display: none;
   }
+}
 
-  // The reveal button (its own border removed via !gl-border-0 in the template)
-  // draws its border the way the input does: an inset box-shadow in the control
-  // color, so the two match exactly and animate together.
-  .gl-form-password-input-toggle {
-    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-default);
-  }
-
-  // Animate the input's and the button's box-shadow borders with the same
-  // timing so the whole outline darkens together on hover.
-  .gl-form-input,
-  .gl-form-password-input-toggle {
-    transition: box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
-  }
-
-  // Darken the whole control's border on hover so the input and reveal button
-  // react as one field, mirroring the input's own hover.
-  &:hover {
-    .gl-form-input {
-      box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-hover);
-    }
-
-    .gl-form-password-input-toggle {
-      box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-hover);
-    }
-  }
+// Reserve room for the toggle button. Both classes are needed: the base padding
+// lands at two-class specificity via `.gl-form-input.form-control`.
+.gl-form-password-input-field.gl-form-input {
+  @apply gl-pe-7;
+}
 
-  // On focus, mirror the input's focus: a border in the focus color plus the
-  // focus ring, combined in one box-shadow. The button's default focus is
-  // ring-only and would otherwise drop the reveal side's border on focus,
-  // leaving it inconsistent with the (still-bordered) input beside it.
-  .gl-form-password-input-toggle:focus {
-    @include gl-focus($color: var(--gl-control-border-color-focus), $important: true);
-  }
+.gl-form-password-input-toggle {
+  position: absolute;
+  top: 50%;
+  @apply gl-end-2;
+  transform: translateY(-50%);
 }

package/src/components/base/form/form_password_input/form_password_input.vue

@@ -1,15 +1,14 @@
 <script>
 import GlButton from '../../button/button.vue';
 import { GlTooltipDirective } from '../../../../directives/tooltip/tooltip';
+import { translate } from '../../../../utils/i18n';
 import GlFormInput from '../form_input/form_input.vue';
-import GlFormInputGroup from '../form_input_group/form_input_group.vue';
 
 export default {
   name: 'GlFormPasswordInput',
   components: {
     GlButton,
     GlFormInput,
-    GlFormInputGroup,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -35,28 +34,29 @@ export default {
     },
     /**
      * 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,10 +80,6 @@ export default {
   },
   methods: {
     toggleVisibility() {
-      if (this.accessibleDisabled) {
-        return;
-      }
-
       this.isMasked = !this.isMasked;
       /**
        * Emitted when the reveal/hide button is clicked.
@@ -98,26 +94,24 @@ export default {
 </script>
 
 <template>
-  <gl-form-input-group class="gl-form-password-input">
+  <div class="gl-form-password-input">
     <gl-form-input
+      v-bind="$attrs"
+      class="gl-form-password-input-field"
       :value="value"
       :type="type"
-      :readonly="accessibleDisabled"
-      :aria-disabled="accessibleDisabled ? 'true' : null"
-      v-bind="$attrs"
+      :disabled="disabled"
       v-on="$listeners"
     />
-    <template #append>
-      <gl-button
-        v-gl-tooltip="toggleLabel"
-        class="gl-form-password-input-toggle !gl-border-0"
-        category="tertiary"
-        accessible-disabled
-        :aria-label="toggleLabel"
-        :icon="toggleIcon"
-        :disabled="accessibleDisabled"
-        @click="toggleVisibility"
-      />
-    </template>
-  </gl-form-input-group>
+    <gl-button
+      v-gl-tooltip="toggleLabel"
+      class="gl-form-password-input-toggle"
+      category="tertiary"
+      size="small"
+      :aria-label="toggleLabel"
+      :icon="toggleIcon"
+      :disabled="disabled"
+      @click="toggleVisibility"
+    />
+  </div>
 </template>

package/src/components/base/label/label.vue

@@ -80,6 +80,14 @@ export default {
       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: {
     removeButtonAriaLabel() {
@@ -166,13 +174,14 @@ export default {
       <gl-icon name="close-xs" :size="12" />
     </gl-button>
     <gl-tooltip
-      v-if="description"
+      v-if="description || footer"
       :target="() => tooltipTarget"
       :placement="tooltipPlacement"
       boundary="viewport"
     >
       <span v-if="scoped" class="gl-label-tooltip-title">Scoped label</span>
       {{ description }}
+      <span v-if="footer" class="gl-block gl-text-subtle">{{ footer }}</span>
     </gl-tooltip>
   </span>
 </template>

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

@@ -46,21 +46,34 @@ function showToast(message, options = {}) {
   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`.
+ */
+export 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.
  */
-export default {
+export const GlToastPlugin = {
   install(V) {
-    V.mixin({
-      beforeCreate() {
-        if (this.$toast) {
-          return;
-        }
-        this.$toast = { show: showToast.bind(this) };
-      },
-    });
+    V.mixin(GlToastMixin);
   },
 };
+
+/**
+ * @deprecated Use the named `GlToastPlugin` export instead.
+ */
+export default GlToastPlugin;

package/src/components/base/tooltip/tooltip.scss

@@ -11,6 +11,7 @@
     @apply gl-rounded-feedback;
     background: var(--gl-feedback-strong-background-color);
     color: var(--gl-feedback-strong-text-color);
+    --gl-text-color-subtle: var(--gl-tooltip-text-color-subtle);
   }
 
   .arrow {

package/src/components/index.js

@@ -33,7 +33,7 @@ export { default as GlBadge } from './base/badge/badge.vue';
 export { default as GlBanner } from './base/banner/banner.vue';
 export { default as GlButton } from './base/button/button.vue';
 export { default as GlTooltip } from './base/tooltip/tooltip.vue';
-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.vue';
 export { default as GlEmptyState } from './regions/empty_state/empty_state.vue';
 export { default as GlForm } from './base/form/form.vue';

package/src/tokens/build/css/tokens.css

@@ -647,6 +647,7 @@
   --gl-toggle-switch-track-color-checked-active: var(--gl-color-neutral-1000); /** Used for the track color of a checked toggle switch in the active state. */
   --gl-token-selector-token-container-token-background-color-focus: var(--gl-color-neutral-300); /** Used for the background color of a token in a token-selector when it's token-container is in the focus state. */
   --gl-token-background-color: var(--gl-color-neutral-100); /** Used for the token background color. */
+  --gl-tooltip-text-color-subtle: var(--gl-color-neutral-200); /** Used for supplemental tooltip text that is less prominent than the default text and remains the same color regardless of mode. */
   --black: var(--gl-color-neutral-1000);
   --white: var(--gl-color-neutral-0);
   --blue-50: var(--gl-color-blue-50);

package/src/tokens/build/css/tokens.dark.css

@@ -665,6 +665,7 @@
   --gl-toggle-switch-track-color-checked-active: var(--gl-color-neutral-0); /** Used for the track color of a checked toggle switch in the active state. */
   --gl-token-selector-token-container-token-background-color-focus: var(--gl-color-neutral-600); /** Used for the background color of a token in a token-selector when it's token-container is in the focus state. */
   --gl-token-background-color: var(--gl-color-neutral-800); /** Used for the token background color. */
+  --gl-tooltip-text-color-subtle: var(--gl-color-neutral-200); /** Used for supplemental tooltip text that is less prominent than the default text and remains the same color regardless of mode. */
   --black: var(--gl-color-neutral-0);
   --white: var(--gl-color-neutral-900);
   --blue-50: var(--gl-color-blue-900);

package/src/tokens/build/figma/mode.dark.json

@@ -5429,6 +5429,16 @@
       ]
     }
   },
+  "🔒/tooltip-text-color-subtle": {
+    "$value": "{color-neutral-200}",
+    "$type": "color",
+    "$description": "Used for supplemental tooltip text that is less prominent than the default text and remains the same color regardless of mode.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "TEXT_FILL"
+      ]
+    }
+  },
   "action-border-radius": {
     "$value": "{border-radius-lg}",
     "$type": "dimension",

package/src/tokens/build/figma/mode.json

@@ -5373,6 +5373,16 @@
       ]
     }
   },
+  "🔒/tooltip-text-color-subtle": {
+    "$value": "{color-neutral-200}",
+    "$type": "color",
+    "$description": "Used for supplemental tooltip text that is less prominent than the default text and remains the same color regardless of mode.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "TEXT_FILL"
+      ]
+    }
+  },
   "action-border-radius": {
     "$value": "{border-radius-lg}",
     "$type": "dimension",

package/src/tokens/build/js/tokens.dark.js

@@ -827,6 +827,7 @@ export const GL_TOKEN_SELECTOR_TOKEN_CONTAINER_TOKEN_BACKGROUND_COLOR_FOCUS = '#
 export const GL_TOKEN_BORDER_RADIUS = '0.25rem';
 export const GL_TOKEN_FOREGROUND_COLOR = '#ececef';
 export const GL_TOKEN_BACKGROUND_COLOR = '#3a383f';
+export const GL_TOOLTIP_TEXT_COLOR_SUBTLE = '#bfbfc3';
 export const DATA_VIZ_GREEN_50 = '#133a03';
 export const DATA_VIZ_GREEN_100 = '#1a4500';
 export const DATA_VIZ_GREEN_200 = '#275600';

package/src/tokens/build/js/tokens.js

@@ -827,6 +827,7 @@ export const GL_TOKEN_SELECTOR_TOKEN_CONTAINER_TOKEN_BACKGROUND_COLOR_FOCUS = '#
 export const GL_TOKEN_BORDER_RADIUS = '0.25rem';
 export const GL_TOKEN_FOREGROUND_COLOR = '#3a383f';
 export const GL_TOKEN_BACKGROUND_COLOR = '#dcdcde';
+export const GL_TOOLTIP_TEXT_COLOR_SUBTLE = '#bfbfc3';
 export const DATA_VIZ_GREEN_50 = '#ddfab7';
 export const DATA_VIZ_GREEN_100 = '#c6ed94';
 export const DATA_VIZ_GREEN_200 = '#b0d97b';

package/src/tokens/build/json/tokens.dark.json

@@ -24901,6 +24901,44 @@
       }
     }
   },
+  "tooltip": {
+    "text": {
+      "color": {
+        "subtle": {
+          "key": "{tooltip.text.color.subtle}",
+          "$value": "#bfbfc3",
+          "$type": "color",
+          "$description": "Used for supplemental tooltip text that is less prominent than the default text and remains the same color regardless of mode.",
+          "$extensions": {
+            "com.figma.scopes": [
+              "TEXT_FILL"
+            ]
+          },
+          "filePath": "src/tokens/contextual/tooltip.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{color.neutral.200}",
+            "$type": "color",
+            "$description": "Used for supplemental tooltip text that is less prominent than the default text and remains the same color regardless of mode.",
+            "$extensions": {
+              "com.figma.scopes": [
+                "TEXT_FILL"
+              ]
+            },
+            "key": "{tooltip.text.color.subtle}"
+          },
+          "name": "TOOLTIP_TEXT_COLOR_SUBTLE",
+          "attributes": {},
+          "path": [
+            "tooltip",
+            "text",
+            "color",
+            "subtle"
+          ]
+        }
+      }
+    }
+  },
   "data-viz": {
     "green": {
       "50": {

package/src/tokens/build/json/tokens.json

@@ -24901,6 +24901,44 @@
       }
     }
   },
+  "tooltip": {
+    "text": {
+      "color": {
+        "subtle": {
+          "key": "{tooltip.text.color.subtle}",
+          "$value": "#bfbfc3",
+          "$type": "color",
+          "$description": "Used for supplemental tooltip text that is less prominent than the default text and remains the same color regardless of mode.",
+          "$extensions": {
+            "com.figma.scopes": [
+              "TEXT_FILL"
+            ]
+          },
+          "filePath": "src/tokens/contextual/tooltip.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{color.neutral.200}",
+            "$type": "color",
+            "$description": "Used for supplemental tooltip text that is less prominent than the default text and remains the same color regardless of mode.",
+            "$extensions": {
+              "com.figma.scopes": [
+                "TEXT_FILL"
+              ]
+            },
+            "key": "{tooltip.text.color.subtle}"
+          },
+          "name": "TOOLTIP_TEXT_COLOR_SUBTLE",
+          "attributes": {},
+          "path": [
+            "tooltip",
+            "text",
+            "color",
+            "subtle"
+          ]
+        }
+      }
+    }
+  },
   "data-viz": {
     "green": {
       "50": {

package/src/tokens/build/scss/_tokens.dark.scss

@@ -663,6 +663,7 @@ $gl-toggle-switch-track-color-checked-hover: $gl-color-neutral-10; // Used for t
 $gl-toggle-switch-track-color-checked-active: $gl-color-neutral-0; // Used for the track color of a checked toggle switch in the active state.
 $gl-token-selector-token-container-token-background-color-focus: $gl-color-neutral-600; // Used for the background color of a token in a token-selector when it's token-container is in the focus state.
 $gl-token-background-color: $gl-color-neutral-800; // Used for the token background color.
+$gl-tooltip-text-color-subtle: $gl-color-neutral-200; // Used for supplemental tooltip text that is less prominent than the default text and remains the same color regardless of mode.
 $black: $gl-color-neutral-0 !default;
 $white: $gl-color-neutral-900 !default;
 $blue-50: $gl-color-blue-900 !default;

package/src/tokens/build/scss/_tokens.scss

@@ -645,6 +645,7 @@ $gl-toggle-switch-track-color-checked-hover: $gl-color-neutral-950; // Used for
 $gl-toggle-switch-track-color-checked-active: $gl-color-neutral-1000; // Used for the track color of a checked toggle switch in the active state.
 $gl-token-selector-token-container-token-background-color-focus: $gl-color-neutral-300; // Used for the background color of a token in a token-selector when it's token-container is in the focus state.
 $gl-token-background-color: $gl-color-neutral-100; // Used for the token background color.
+$gl-tooltip-text-color-subtle: $gl-color-neutral-200; // Used for supplemental tooltip text that is less prominent than the default text and remains the same color regardless of mode.
 $black: $gl-color-neutral-1000 !default;
 $white: $gl-color-neutral-0 !default;
 $blue-50: $gl-color-blue-50 !default;

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -736,6 +736,7 @@ $gl-token-selector-token-container-token-background-color-focus: var(--gl-token-
 $gl-token-border-radius: var(--gl-token-border-radius);
 $gl-token-foreground-color: var(--gl-token-foreground-color);
 $gl-token-background-color: var(--gl-token-background-color);
+$gl-tooltip-text-color-subtle: var(--gl-tooltip-text-color-subtle);
 $data-viz-green-50: var(--data-viz-green-50);
 $data-viz-green-100: var(--data-viz-green-100);
 $data-viz-green-200: var(--data-viz-green-200);

package/src/tokens/contextual/tooltip.tokens.json

@@ -0,0 +1,18 @@
+{
+  "tooltip": {
+    "text": {
+      "color": {
+        "subtle": {
+          "$value": "{color.neutral.200}",
+          "$type": "color",
+          "$description": "Used for supplemental tooltip text that is less prominent than the default text and remains the same color regardless of mode.",
+          "$extensions": {
+            "com.figma.scopes": [
+              "TEXT_FILL"
+            ]
+          }
+        }
+      }
+    }
+  }
+}

package/src/vendor/bootstrap-vue/src/components/tooltip/helpers/bv-tooltip.js

@@ -814,7 +814,9 @@ export const BVTooltip = /*#__PURE__*/ extend({
       } else if (type === 'focusin' && triggers.includes('focus')) {
         // `focusin` is a bubbling event
         // `event` includes `relatedTarget` (element losing focus)
-        this.enter(event)
+        if (event.target.matches(':focus-visible')) {
+          this.enter(event)
+        }
       } else if (
         (type === 'focusout' && (triggers.includes('focus') || triggers.includes('blur'))) ||
         (type === 'mouseleave' && triggers.includes('hover'))

package/translations.js

@@ -21,6 +21,8 @@ export default {
   'GlColorModeToggle.lightLabel': 'Light mode',
   'GlDatepicker.monthLabel': 'Month',
   'GlDatepicker.yearLabel': 'Year',
+  'GlFormPasswordInput.hideLabel': 'Hide password',
+  'GlFormPasswordInput.revealLabel': 'Reveal password',
   'GlKeysetPagination.navigationLabel': 'Pagination',
   'GlKeysetPagination.nextText': 'Next',
   'GlKeysetPagination.prevText': 'Previous',