patternfly / patternfly/chatbot

Investigate resolving differences between CodeMessage and CodeModal

Open
#424 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

PF Team PF6
Dominant language
TypeScript
Stars
6
Forks
37
Avg merge
3d 19h
Merged PRs (30d)
5

Description

There are some unresolved areas of difference between Figma and the codebase that Kayla would love to have resolved. One example is the code message and code editor modal. In Figma, these are 1 single component. Kayla would expect these components to be identical in look and feel. In the codebase, we are using two different PatternFly components, one of which is largely based around a third-party Monaco editor. This is not currently themed using PatternFly, which makes it difficult to change to exactly match design parameters at present. We would also need to explore what customizations are possible to get more of a match to the design using the default PatternFly components.

These are some options provided by Kayla:

image

Note that the existing code editor/code message do not exhibit the "old" behavior in dark mode at present.

Kayla and team want to use CodeBlock for everything that doesn't require editing. CodeEditor may make more sense where editing is important.

See also https://github.com/patternfly/chatbot/issues/149 for some of the earlier problems.


Jira Issue: PF-1562

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Compare the existing CodeMessage and CodeModal implementations with the Figma design, including the CodeBlock and CodeEditor options. Read the earlier PatternFly chatbot issue 149 and investigate what Monaco and the PatternFly components can support; done means agreeing on the component usage and matching the intended look and feel, including dark mode.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
design, frontend
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.