Add ChatDivider component and export from library

What does this MR do?

Follow-up to gitlab!252753 (comment 3770006110)

Extracts the repeated horizontal-divider-with-label pattern into a reusable ChatDivider component and exports it from the library.

The same markup appeared in (at least) three places with slightly different styling:

  • DuoChatConversation — gl-my-5 gl-flex gl-items-center gl-gap-4 gl-text-gray-500, bare <hr class="gl-grow">
  • MessageCompaction (gitlab-org/gitlab) — gl-text-sm gl-text-subtle, <hr class="gl-border-t gl-border-default">
  • VerificationDivider (gitlab-org/gitlab) — a third copy of the same idiom

ChatDivider unifies the pattern with a single message prop for the label text. DuoChatConversation is updated to use it internally; consumers can now import ChatDivider directly to replace their own copies.

%{first_multiline_commit}

Screenshots or screen recordings

This MR includes intentional styling updates when replacing the inline markup in DuoChatConversation with the new ChatDivider component:

  • Text color: changed from gl-text-gray-500 to gl-text-subtle (via gl-text-sm gl-text-subtle), aligning with the design token used in MessageCompaction.
  • <hr> border: the <hr> elements now have gl-border-t gl-border-default instead of being borderless, again matching the MessageCompaction pattern.

These changes are reflected in the regenerated duo-chat-conversation-* image snapshots.

Integration merge requests

  • GitLab: (follow-up: replace MessageCompaction and VerificationDivider inline markup with ChatDivider)

Does this MR meet the acceptance criteria?

Toggle the acceptance checklist

Conformity

  • Code review guidelines.
  • GitLab UI's contributing guidelines.
  • If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
  • If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
  • If the MR changes a component's API, integration MR(s) have been opened (see integration merge requests above).
  • Added the ~"component:*" label(s) if applicable.

Security

  • N/A — no credential or auth changes.

Accessibility

  • All content is presented in text or with a text equivalent.
  • Color combinations have sufficient contrast (uses design token gl-text-subtle and gl-border-default).
Edited by Enrique Alcántara

Merge request reports

Loading
Loading