mi6
Test components for wider internationalisation (I18n) work
Summary
Verify that all design system components work correctly with different languages, ensuring text expansion, and localisation do not break layouts or reduce usability.
💬 Description
We need to test design system components under internationalisation (i18n) conditions, starting with European languages (e.g. French, German, Spanish) where text length can expand significantly compared to English.
Out of Scope (for now) -
Full RTL support (Arabic/Hebrew).
Non-European scripts (Chinese, Japanese, etc.).
Key considerations:
Use languages with longer strings (e.g. French or German) to test edge cases.
Check for truncation, wrapping, or overflow issues in elements (buttons, form fields, tables, modals, etc.).
Assess whether components remain accessible and readable when localised.
Identify any components requiring additional flexibility (e.g. spacing, alignment, responsiveness).
✏ Designs
Add or link a Figma file/mock-up simulating long text in different languages.
Include examples of problematic cases and proposed solutions.
### 🧾 Guidance If there's written guidance or documentation, include a link to it here.
🚨 Urgency (low, medium or high)
If applicable, tell us how urgent it is that this issue gets resolved, based on the impact it has on your team's work or project timeline.
Additional info
Tell us anything else useful to help us understand your suggestion.
This is a list of components with hard-coded text which will need to be assessed for max length, in regards to internationalisation. Prime languages for max length testing would be Polish or Finnish.
- [x] Back to top
- [x] Calendar
- [x] Classification banner
- [x] Data list (Edit link)
- [ ] Footer
- [ ] Loading indicator
- [ ] Skip link
- [ ] Stepper
- [ ] Date picker
- [ ] Pagination bar
- [ ] Table of contents
- [ ] AtomsAtoms/Dropdown list (multi-select)/Default
- [ ] Dropdown list/List items/Loading
- [ ] Dropdown list/List items/Option bar
- [ ] Dropdown list/List items/No results
- [ ] Dropdown list/List items/Loading error
- [ ] Text expansion button
Added a new Figma file to show effect of maxxing out text on components. So far the following will need some consideration;
- Back to top
- Calendar
During testing, noted that Error message on date input had incorrect autolayout setting, so have fixed that to be consistent with other state texts.