Background
- Description: InlineMessage is now quite prominent. We could redesign its icon and text to be more subtle.
- History: previous discussions about InlineMessage in T309239
- Considerations: list any known challenges or blockers, or any other important information
- Known use case(s):
 | In Field component T309239 we've decided that InlineMessage (validation message) will be displayed below the Helper text. Since helper text is more subtle, InlineMessage text and icon seem too prominent |
User stories
add at least one user story
Previous implementations
- Codex demo: InlineMessage implemented as property in Message component.
- Design style guide: add link, if applicable
- OOUI: InlineMessage implementation in the OOUI demo
- Vue: add link, if applicable
Design proposal
Option 1:
- Bold message with base text size
- Reduce the icon from 20px to 16px
Option 2:
- Regular message with base text size
- Reduce the icon from 20px to 16px
In both cases, the proposal is to use #AC6600 for Warning message since error and success use the feedback color in the message. We will need to create a new content color token in this case.
Design spec
Once a component spec sheet has been created in Figma, remove the note stating that the spec is missing and link to the spec below.
| Component spec sheet |
Open questions
- Should InlineMessage (validation message) be implemented as a separate component from Message component?
Acceptance criteria (or Done)
Design
- Design the Figma spec sheet and add it in this task
- Update the component in the Figma library. This step will be done by a DST member.
Code
- Implement the component in Codex