Skip to content

Commit

Permalink
feat(NumberFormat): add half-even rounding and deprecated `omit_rou…
Browse files Browse the repository at this point in the history 
…nding` in favor of `rounding="omit"` (#3988)

We need a following up PR to add support to the Value.Number and
Value.Currency components.

---------

Co-authored-by: Joakim Bjerknes <joakbjerk@gmail.com>
Co-authored-by: Anders <anderslangseth@gmail.com>
  • Loading branch information
@tujoworker @joakbjerk @langz
3 people authored Sep 25, 2024
1 parent 9ab9de5 commit 0c121f1
Show file tree
Hide file tree
Showing 14 changed files with 466 additions and 90 deletions.
4 changes: 4 additions & 0 deletions ...design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v11-info.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,4 +133,8 @@ The `InputPassword` component has been moved to `Field.Password`, and is now a p

- Rename label variable `{itemNr}` to `{itemNo}`.

## NumberFormat

- Replace `omit_rounding` with `rounding="omit"`.

_February, 6. 2024_
2 changes: 1 addition & 1 deletion packages/dnb-design-system-portal/src/docs/uilib/components/number-format/Examples.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ export const NumberProvider = () => (
value={{
NumberFormat: {
currency: true,
omit_rounding: true,
rounding: 'omit',
clean_copy_value: true,
},
}}
Expand Down
8 changes: 7 additions & 1 deletion packages/dnb-design-system-portal/src/docs/uilib/components/number-format/info.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,13 @@ Example: <NumberFormat value="invalid" currency />

## Decimals

When the amount of wanted `decimals` is set as a property, but the given value contains decimals that exceeds the wanted `decimals`, the output value will get rounded up or down. Use `omit_rounding` if you need to hard-cut decimals from the displayed value.
If the value has more decimal places than specified by the `decimals={2}` property, it will be rounded accordingly.

Here are the available options for the `rounding` property:

- `omit` truncate decimals without rounding.
- `half-even` will round to the nearest even number.
- `half-up` (default) will round up if the fractional part is 0.5 or greater, the number is rounded up. If the fractional part is less than 0.5, the number is rounded down.

## Provider

Expand Down
33 changes: 3 additions & 30 deletions ...dnb-design-system-portal/src/docs/uilib/components/number-format/properties.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,39 +5,12 @@ redirect_from:
---

import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
import { NumberFormatProperties } from '@dnb/eufemia/src/components/number-format/NumberFormatDocs'

## Properties

| Properties | Description |
| --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `value` or `children` | _(required)_ a number. |
| `srLabel` | _(optional)_ Will add a visually hidden label to give screen reader users the missing context to understand easier what the number represents. |
| `locale` | _(optional)_ Use a [2 Letter Language Codes](https://www.sitepoint.com/iso-2-letter-language-codes/) or an extended code such as `nb-NO`. Use `auto` to detect the locale from the browser (`navigator.language`). Defaults to the Norwegian locale: `nb-NO`. |
| `compact` | _(optional)_ Shortens any number or currency including an abbreviation. You can combine `compact` with `currency`. It gives you zero decimal by default `decimals={0}`. Use either `short` or `long`. Defaults to `short` if `true` is given. |
| `clean` | _(optional)_ if set to `true` a dirty string will be parsed to to extract the number (`prefix -123.45 suffix` would result in e.g. `kr -123,45`). |
| `currency` | _(optional)_ Currency code (ISO 4217) or `true` to use the default `NOK`. Uses two decimals by default. |
| `currency_display` | _(optional)_ Use either empty/false to hide the sign/name or use `code` (NOK), `name` (kroner) , `symbol` (kr) or `narrowSymbol` (for a shorter symbol variant). Defaults to `narrowSymbol` when the locale is `no` else we default to `code`. |
| `currency_position` | _(optional)_ Use either `before` or `after` to change/define the position of the currency. Defaults to `auto` (Browser API defaults, but with an exception, if the locale is `nb-NO` or `no`, use after as the default position). |
| `ban` | _(optional)_ **Bank Account Number**: use `true` to use the default Norwegian style (2000 12 34567) formatting. |
| `nin` | _(optional)_ **National Identification Number**: use `true` to use the default Norwegian style (180892 12345) formatting. |
| `org` | _(optional)_ **Organization Number**: use `true` to use the default Norwegian style (123 456 789) formatting. Screen readers get digit by digit. |
| `percent` | _(optional)_ **Percentage**: use `true` to enable percent formatting. |
| `phone` | _(optional)_ use `true` to use the default Norwegian style (22 22 22 22) of phone number formatting, regulated by the [Norwegian authority](https://lovdata.no/forskrift/2004-02-16-426/§16). More info by [Sprakradet](https://www.sprakradet.no/sprakhjelp/Skriveregler/Dato/#tlf) as well. |
| `decimals` | _(optional)_ set a number to define the number of decimals. Like `decimals="0"` will ensure that decimals are simply not shown. The default decimals for currency usage are `2` (Browser API default). |
| `omit_rounding` | _(optional)_ if set to `true`, the decimal will NOT be rounded. Normally, by using `toFixed` or by using `maximumFractionDigits`, decimals get rounded. |
| `prefix` | _(optional)_ add a string or React component before the number, including white space. |
| `suffix` | _(optional)_ appends a string or React component after the number, including white space. |
| `selectall` | _(optional)_ use `false` to disable the auto select all on the first click. Defaults to `true`. |
| `always_selectall` | _(optional)_ use `true` to always auto select all on the first click. Defaults to `false`. |
| `copy_selection` | _(optional)_ use `false` to disable the auto copy feature. Defaults to `true`. |
| `clean_copy_value` | _(optional)_ if set to `true` the copy&paste value will be provided without e.g. a currency sign or a percent sign. Defaults to `false`. |
| `link` | _(optional)_ use `tel` or `sms` to enable a clickable / touchable anchor link. |
| `monospace` | _(optional)_ Sets the font to [DNB Mono Regular](/quickguide-designer/fonts/#dnbmono-regular). |
| `element` | _(optional)_ define what HTML element should be used. Defaults to `<span>`. |
| `options` | _(optional)_ accepts all [number.toLocaleString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString) or [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) options as an object - can also be a JSON given as the parameter e.g. `options={{ 'minimumFractionDigits': 2 }}`. |
| `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. |
| `tooltip` | _(optional)_ Provide a string or a React Element to be shown as the tooltip content. |
| [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
<PropertiesTable props={NumberFormatProperties} />

## Translations

Expand Down
2 changes: 1 addition & 1 deletion packages/dnb-eufemia/src/components/input-masked/InputMasked.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export interface InputMaskedProps
*/
mask_options?: InputMaskedMaskOptions;
/**
* Use an object with [NumberFormat](/uilib/components/number-format/properties) e.g. `{ omit_rounding: false }`.
* Use an object with [NumberFormat](/uilib/components/number-format/properties)
*/
number_format?: NumberFormatProps;
/**
Expand Down
2 changes: 1 addition & 1 deletion packages/dnb-eufemia/src/components/input-masked/InputMaskedDocs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const inputMaskedProperties: PropertiesTableProps = {
status: 'optional',
},
number_format: {
doc: 'Use an object with [NumberFormat](/uilib/components/number-format/properties) e.g. `{ omit_rounding: false }`.',
doc: 'Use an object with [NumberFormat](/uilib/components/number-format/properties).',
type: 'object',
status: 'optional',
},
Expand Down
10 changes: 2 additions & 8 deletions packages/dnb-eufemia/src/components/input-masked/__tests__/InputMasked.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1381,11 +1381,7 @@ describe('InputMasked component as_currency', () => {
expect(document.querySelector('input').value).toBe('12 345,01 kr')

rerender(
<InputMasked
value="12345.016"
as_currency="NOK"
number_format={{ omit_rounding: false }}
/>
<InputMasked value="12345.016" as_currency="NOK" number_format />
)

expect(document.querySelector('input').value).toBe('12 345,02 kr')
Expand Down Expand Up @@ -1439,9 +1435,7 @@ describe('InputMasked component as_currency', () => {
currency_mask: {
decimalLimit: 2,
},
number_format: {
omit_rounding: false,
},
number_format: {},
}}
>
<InputMasked as_currency value="12345.678" />
Expand Down
9 changes: 8 additions & 1 deletion packages/dnb-eufemia/src/components/number-format/NumberFormat.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,9 +116,16 @@ export type NumberFormatProps = {
*/
clean_copy_value?: boolean;
/**
* If set to `true`, the decimal will NOT be rounded. Normally, by using `toFixed` or by using `maximumFractionDigits`, decimals get rounded.
* @deprecated Use `rounding="omit"` instead.
*/
omit_rounding?: boolean;
/**
* If set to `omit`, the decimal will NOT be rounded.
* If set to `half-even`, the decimal will be rounded to the nearest even number.
* If set to `half-up`, the fractional part is 0.5 or greater, the number is rounded up. If the fractional part is less than 0.5, the number is rounded down.
* Defaults to `half-up`.
*/
rounding?: 'omit' | 'half-even' | 'half-up';
/**
* If set to `true` a dirty string will be parsed to to extract the number (`prefix -123.45 suffix` would result in e.g. `kr -123,45`).
*/
Expand Down
6 changes: 5 additions & 1 deletion packages/dnb-eufemia/src/components/number-format/NumberFormat.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,8 @@ export default class NumberFormat extends React.PureComponent {
PropTypes.string,
PropTypes.bool,
]),
omit_rounding: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
omit_rounding: PropTypes.bool,
rounding: PropTypes.oneOf(['omit', 'half-even', 'half-up']),
clean: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
srLabel: PropTypes.node,
element: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
Expand Down Expand Up @@ -133,6 +134,7 @@ export default class NumberFormat extends React.PureComponent {
copy_selection: true,
clean_copy_value: false,
omit_rounding: null,
rounding: null,
clean: null,
srLabel: null,
element: 'span', // span or abbr
Expand Down Expand Up @@ -279,6 +281,7 @@ export default class NumberFormat extends React.PureComponent {
locale,
decimals,
omit_rounding,
rounding,
clean,
selectall,
copy_selection,
Expand Down Expand Up @@ -311,6 +314,7 @@ export default class NumberFormat extends React.PureComponent {
percent,
decimals,
omit_rounding: isTrue(omit_rounding),
rounding,
options,
clean: isTrue(clean),
clean_copy_value: isTrue(clean_copy_value),
Expand Down
Loading

0 comments on commit 0c121f1

Please sign in to comment.