Background
For new editors show "Quick" sections they can translate
Design
 |  |
Add "Quick" difficult indicators to help new editors identify the most approachable sections for translation.
- Codex InfoChip component in Success state without the icon and border
- Label: "Quick"
- Placement: Inline with section title with 8px spacing.
- Label text color: color-base (#202122)
- Background color: background-color-success-subtle(#DFF2EB)
Acceptance Criteria
- InfoChip integrates seamlessly with existing design
- No layout shifts or text truncation
Derived Requirement
Add a "Quick" visual indicator using the Codex InfoChip component to identify sections that are easy to translate during the section selection step of the SX workflow. The InfoChip must:
- Display the label "Quick" inline with the section title, with 8px spacing
- Use Codex InfoChip in the success state without icon and border
- Have label text color #202122 and background color #DFF2EB
- Integrate seamlessly with existing design without layout shifts or text truncation
Test Steps
Test Case 1: Ensure "Quick" indicator is displayed for easy sections
- Open SX workflow on the Minerva skin.
- Navigate to the section selection step.
- Observe the sections marked as easy to translate.
- ✅❓❌⬜ AC1: Confirm that a "Quick" label is displayed inline with the section title.
Test Case 2: Ensure correct styling of "Quick" indicator
- Locate a section with the "Quick" label.
- Inspect the InfoChip component.
- ✅❓❌⬜ AC2: Confirm that the label uses text color #202122 and background color #DFF2EB.
- ✅❓❌⬜ AC3: Confirm that the label has no border or icon.
Test Case 3: Ensure correct placement of "Quick" indicator
- Compare section title spacing with and without the "Quick" label.
- ✅❓❌⬜ AC4: Confirm that the "Quick" label appears inline with the section title with exactly 8px spacing.
Test Case 4: Ensure layout stability
- Switch between different sections in the section selection step.
- ✅❓❌⬜ AC5: Confirm that no layout shifts occur when the "Quick" label appears.
- ✅❓❌⬜ AC6: Confirm that section titles are not truncated when the "Quick" label is shown.
QA Results - TestWiki
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T399118#11153651 |
| 2 | ✅ | T399118#11153651 |
| 3 | ✅ | T399118#11153651 |
| 4 | ✅ | T399118#11153651 |
| 5 | ✅ | T399118#11153651 |
| 6 | ✅ | T399118#11153651 |
