[Amount] Improve formatting capabilities and fix edge cases
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Aptitud para principiantes
- 45/100
- Tipo de issue
- Nueva funcionalidad
- Claridad
- Bastante claro
- Estado de actividad
- Estancado
- Stack tecnológico
- react, typescript
- Área
- frontend
Línea de trabajo
Comienza localizando el componente Amount y su uso de Intl.NumberFormat; después, inspecciona las props currencyDisplay existentes y las rutas de formateo. El trabajo estará terminado cuando se admitan las opciones solicitadas notation, narrowSymbol y signDisplay, la creación del formatter esté memoizada o combinada, y los valores cortos se formateen correctamente.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
Summary
Improvements to the Amount component to enhance formatting capabilities, fix edge cases, and follow component conventions.
Improvements
2. Add notation prop
No way to get compact formatting like $1.2M or $13K. Intl.NumberFormat supports notation: 'compact' natively. This is useful for dashboards and summary views.
3. Add narrowSymbol to currencyDisplay
Intl.NumberFormat supports 'narrowSymbol' (e.g., $ instead of US$ in non-US locales), but the currencyDisplay prop only allows 'symbol' | 'code' | 'name'.
4. Add signDisplay prop
Intl.NumberFormat supports signDisplay ('auto', 'always', 'exceptZero', 'never') for controlling +/- sign display — useful for showing gains/losses.
5. Memoize formatter instances
getCurrencyDecimals() and isValidCurrency() each create a new Intl.NumberFormat instance on every render. These should be memoized or combined into a single formatter creation.
6. Fix string slicing edge case for short strings
value.slice(0, -decimals) + '.' + value.slice(-decimals) breaks for strings shorter than the decimal count (e.g., value="5" with USD → ".5" instead of "0.05").
Moved to Cross-Cutting Issues
The following items have been moved to cross-cutting issues that address them across all components:
- Forward HTML attributes (#674)
- TypeScript strictness (#675)
- Lenguaje dominante
- TypeScript
- Estrellas
- 70
- Forks
- 13
- Merge medio
- 4 d 6 h
- PR fusionados (30 d)
- 10
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de raystack/apsara
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
-
Dificultad 3/5 1-2 días Aptitud para principiantes 75/100
-
Docs: hand-duplicated props tables drift risk, missing a11y sections, no per-component changelog Abiertoenhancement global
Dificultad 4/5 3-5 días Aptitud para principiantes 48/100
-
bug global
Dificultad 4/5 3-5 días Aptitud para principiantes 48/100
Todos los issues de raystack/apsara
Issues similares
-
blocklist removal
Dificultad 2/5 1-3 horas Aptitud para principiantes 65/100
MetaMask/eth-phishing-detect#296544 ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 70/100
pastelsky/bundlephobia#1122 ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 70/100
-
category/development priority/P2 scope/file-operations scope/testing type/enhancement
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
-
Enatega Customer and Rider app: Add-ons price is not visible to customer after order is placed. Abierto
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100