Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Chatbot: Right aligned user message variant

Abierto
#907 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
25/100
Tipo de issue
Nueva funcionalidad
Claridad
Necesita aclaración
Estado de actividad
Estancado
Stack tecnológico
figma
Área
design

Línea de trabajo

Start by reviewing the linked Aladdin Figma files and the four listed message-layout use cases, then check the linked Jira issue PF-3428 for context. Done means producing the requested high-fidelity mockups, redline margin and padding token specs, and responsive-container behavior documentation.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

PatternFly 6

Based on the results of the Compass/unified theme dev/design sync on Jan 14:

We are updating our existing Chat components to support a more modern "threaded" appearance. This issue focuses on defining the spacing and layout behavior when messages are right-aligned and when metadata is hidden.

  1. Standard Layout (Left-Aligned)

  • Case A (Full): Message is left-aligned; Avatar and Metadata (AI label, timestamp) are visible.

  • Case B (Minimal): Message is left-aligned; Avatar and Metadata are hidden. Ensure the message body aligns correctly with the container edge.

  1. User-Specific Layout (Right-Aligned)

  • Case C (Full): Message is right-aligned; Avatar and Metadata are visible.

  • Case D (Minimal): Message is right-aligned; Avatar and Metadata are hidden.

Specs Needed

  • Margin/Padding Tokens: Define the specific left-margin or padding value for right-aligned user messages to ensure they don't span the full width of the container (creating the "right-aligned" look).

  • Vertical Spacing: Double check if vertical spacing between messages changes when metadata/avatars are removed to ensure the "simplified" view doesn't look too cramped or spaced.

Alignment Logic: Ensure the design clarifies if the message "bubble" expands to fit content or remains a fixed width with a margin.

  • High-fidelity mockups for all 4 use cases listed above.

  • Redline specs showing token values for margins and padding.

  • Documentation on how the layout behaves in a responsive/narrow container.

Just so you have it handy, these are the aladdin figma files we were looking at during this discussion.

Jira Issue: PF-3428

Lenguaje dominante
Sin datos de lenguaje
Estrellas
50
Forks
40
Sin PR fusionados en 30 d

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de patternfly/patternfly-design-kit

Todos los issues de patternfly/patternfly-design-kit

Issues similares

Más issues de Design

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.