The_unexpected_odyssey_of_building_a_money_input

Transcript

3. The Unexpected Odyssey of Building a Money Input € $ ₩ ₦
4. Design system realm
6. Easy peasy
8. Design system realm The whirlpool of requirements
10. Readable display Currency and number position Keyboard shortcuts
11. 1234567.89 Readable display
12. 1234567 89 . 1 234 567 89 , 1 234 567 89 , , . 1 234 567 89 . . , Readable display
13. 1234567 89 . United States 1 234 567 89 , , . Readable display Don’t reinvent the wheel !
14. Currency and number position Item ABC 240.00 Edit Item ABC 170.00 Edit Item ABC 120.00| Save Item ABC 50.00 Edit Name Price ($) Action Spot/Fwd EUR/USD NDF You sell EUR 1.23 456 You buy EUR 1.23 456 0.2 Notional EUR 22 Mar 2025 SP Price Buy order Sell order Price £ 1,234.56
15. Currency and number position Be consistent in your design system Number position = Start / End Currency position = Start / End
16. Keyboard shortcuts Thousand Million Billion
17. Keyboard shortcuts Standardize useful interactions K M B 000 000,000 000,000,000
18. 1,234.56 USD Readable display Currency and number alignment Keyboard shortcuts
19. Design system realm Kraken of complexity The whirlpool of requirements
20. F ormatting C u r rrency Alig n e m m e n t s Shortcuts
21. - Specific decimal currencies - Naming conventions - Currency selection
22. No one knows what I went through...
24. Size SM MD LG XL State Default Validation None Value Yes No Value text 1,234.56 Currency USD Currency position Start End Value position Start End Design
25. Size SM MD LG XL State Default Validation None Value Yes No Value text 1,234.56 Currency USD Currency position Start End Value position Start End Design Code size = “MD” state = “Default” validation = “None” value = “1234.56” ccy = “USD” ccy-custom-name = “$” ccy-position = “Start / End” value-position = “Start / End” locale = “fr” max-decimals = “2”
26. Design system realm Kraken of complexity The whirlpool of requirements Release Island
27. Design system realm Release Island Adoption & usage ! Kraken of complexity The whirlpool of requirements
28. The fleet of tickets Design system realm Release Island Kraken of complexity Adoption & usage ! The whirlpool of requirements
29. Need new features for my project with amount input ! Amount input is not working... amount-input, I need to choose the number of decimals to display ! Limit the decimals in Amount input Precision setting for the amount input Several requests for the amount-input When is this going to end?!
30. Feedback is a sign of life One by one please
31. Code size = “MD” state = “Default” validation = “None” value = “1234.56” ccy = “USD” ccy-custom-name = “$” ccy-position = “Start / End” value-position = “Start / End” locale = “fr” max-decimals = “2” max-decimals-displayed = “2” placeholder = “” required = “true / false” disabled = “true / false” validation-message = “” input-id = “123”
32. The fleet of tickets The end... ? Design system realm Realease Island Kraken of complexity The whirlpool of requirements
33. Be realistic, embrace complexity
34. Be realistic, embrace complexity Don’t sail alone, collaboration is key
35. Be realistic, embrace complexity Manage your energy, release is only step 1 Don’t sail alone, collaboration is key
36. The fleet of tickets The end... ? Design system realm Realease Island Kraken of complexity The whirlpool of requirements Thank you!