GlFormPasswordInput add input-class prop

Eduardo Sanz Garcíarequested to merge
eduardosanz/gl-form-password-input-input-class into main

What does this MR do?

Adds an input-class prop to GlFormPasswordInput that applies CSS class(es) to the inner input element rather than the wrapper.

A class passed to the component lands on the wrapper element, not the input, under Vue 2: the component sets inheritAttrs: false and binds $attrs to the input, and class is never part of $attrs in Vue 2. Consumers that need a class on the input itself, for example a JS hook that selects the input to read its value or listen for events, had no way to reach it. This mirrors the existing input-class prop on GlFormInputGroup.

This unblocks migrating GitLab's custom password input to GlFormPasswordInput on forms that rely on input-level hooks (password complexity validation, form error tracking).

Integrations

A GitLab adoption MR will follow separately and does not block this change.

Does this MR meet the acceptance criteria?

Conformity

  • The "What does this MR do?" section is filled out.
  • Relevant label(s) are applied to the MR.
  • The MR is added to a milestone.
  • Added the ~"component:*" label(s) if applicable.
  • A changeset is added (minor: new prop).

Components

  • If the MR changes a component's API, integration MR(s) have been opened (follow-up, see above).

Accessibility

  • No behavioural or visual change: the prop only forwards class(es) to the existing inner input.

Merge request reports