figma
storybook
react
i18nInline Editing
User can perform inline editing by using inline form.
Zoning
Style
Variations
Single line
Empty single line with a placeholder
Controlled component
Multi lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in massa velit. Duis vestibulum lectus id lacinia aliquam. Aliquam erat volutpat. Donec dignissim augue eu eros blandit faucibus eu quis nulla. In hac habitasse platea dictumst. Ut egestas viverra sem, et dictum elit lacinia interdum. Vivamus accumsan pulvinar faucibus. Donec vestibulum mauris vitae sem lacinia, eget fringilla leo efficitur. In hac habitasse platea dictumst. Nullam consectetur nunc quis tortor congue imperdiet. Ut lobortis suscipit enim, in aliquet sem viverra ut. Sed finibus ex elit, quis ultricies nulla tincidunt sit amet. Maecenas gravida diam ex, vel aliquam tortor elementum et. Duis vitae ligula tristique est iaculis consequat. Nullam in ipsum turpis. Cras aliquam tellus quis turpis convallis, ut faucibus quam tincidunt.
States
Loading
Error
In this example, async submit will always end up with an error.
Interactions
The edit mode can be triggered by clicking on the pencil icon, or by double-clicking on the text.
Quality Assurance
Non-regression testing can be performed using:
| data-test | description |
|---|---|
inlineediting | Container containing value and actions |
inlineediting.button.edit | Edit button to pass into "editing" mode |
inlineediting.input or inlineediting.textarea | Control to change its value in "editing" mode depending on the variant in use |
inlineediting.button.cancel | Cancel button to quit "editing" mode |
inlineediting.button.submit | Submit button to validate edition in "editing" mode |
Usage
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nulla augue, fermentum ac scelerisque quis, aliquet et arcu. Nullam quis sem pulvinar, venenatis nunc vel, lobortis libero
Lorem ipsum dolor sit amet
Accessibility
- In single line mode, press Enter to validate the edition
- Buttons can be focused by using Tab
- Press Esc to cancel the edition
Clicking outside the form will cancel the edition as well