Loading
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-500togl-text-subtle(viagl-text-sm gl-text-subtle), aligning with the design token used inMessageCompaction. <hr>border: the<hr>elements now havegl-border-t gl-border-defaultinstead of being borderless, again matching theMessageCompactionpattern.
These changes are reflected in the regenerated duo-chat-conversation-* image snapshots.
Integration merge requests
- GitLab: (follow-up: replace
MessageCompactionandVerificationDividerinline markup withChatDivider)
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-subtleandgl-border-default).
Edited by Enrique Alcántara