Chatbot: Right aligned user message variant
まだ誰も着手していません。
評価
- 難易度
- 5/5
- 見積もり時間
- 1週間以上
- 初心者へのやさしさ
- 25/100
- issue の種類
- 機能追加
- 明瞭さ
- 説明が足りない
- 活発さ
- 停滞
- 技術スタック
- figma
- 領域
- design
調査の方向性
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.
索引モデルが issue の本文から書いたものです。
説明
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.
- 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.
- 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
- 主要言語
- 言語のデータがありません
- スター
- 50
- フォーク
- 40
- PR マージ指標
- 30日以内にマージされた PR はありません
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートなし
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
patternfly/patternfly-design-kit のほかの issue
-
Patterns & Extensions Library Topology
難易度 4/5 3〜5日 初心者へのやさしさ 48/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 35/100
-
React component groups
難易度 5/5 1週間以上 初心者へのやさしさ 25/100
-
PatternFly 6
難易度 4/5 3〜5日 初心者へのやさしさ 35/100
-
Component Library
難易度 2/5 1〜3時間 初心者へのやさしさ 48/100
patternfly/patternfly-design-kit の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 62/100
aaronified/fluenough#466 ·
メンテナーはふだん 1 日以内に返信
-
good first issue help wanted track:ui
難易度 2/5 1〜3時間 初心者へのやさしさ 86/100
Sara-Managed-Projects/space-radar#703 ·
メンテナーはふだん 1 日以内に返信
-
bug milestone-qa mobile
難易度 2/5 1〜3時間 初心者へのやさしさ 62/100
lognorman20/monaco#4844 ·
-
deferred-post-preview good first issue ui
難易度 1/5 1時間未満 初心者へのやさしさ 65/100
MoranWeissman/sharko#8 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
cloudflare/kumo#866 ·
メンテナーはふだん 1 日以内に返信