fix(Field.Number): replace rightAligned prop with align (#3175)

Removed Number and Currency component support for the `rightAligned` prop and replaced it with a more flexible `align` prop that accepts one of `left`, (default) `center` and `right`.
dnbexperience · Jan 5, 2024 · ba130ba · ba130ba
1 parent 48b10da
commit ba130ba
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 19 deletions.
diff --git a/.../dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/Examples.tsx b/.../dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/Examples.tsx
@@ -47,13 +47,25 @@ export const LabelAndValue = () => {
   )
 }
 
-export const RightAligned = () => {
+export const Alignment = () => {
   return (
     <ComponentBox>
       <Field.Number
-        rightAligned
-        value={420000.25}
-        label="Label text"
+        align="center"
+        label="Center aligned (default)"
+        value={10}
+        onChange={(value) => console.log('onChange', value)}
+      />
+      <Field.Number
+        align="left"
+        label="Left aligned"
+        value={10}
+        onChange={(value) => console.log('onChange', value)}
+      />
+      <Field.Number
+        align="right"
+        label="Right aligned"
+        value={10}
         onChange={(value) => console.log('onChange', value)}
       />
     </ComponentBox>

diff --git a/...sign-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/demos.mdx b/...sign-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/demos.mdx
@@ -22,9 +22,9 @@ import * as Examples from './Examples'
 
 <Examples.LabelAndValue />
 
-### Right aligned
+### Alignment
 
-<Examples.RightAligned />
+<Examples.Alignment />
 
 ### With help
 

diff --git a/...system-portal/src/docs/uilib/extensions/forms/base-fields/Number/properties.mdx b/...system-portal/src/docs/uilib/extensions/forms/base-fields/Number/properties.mdx
@@ -23,6 +23,7 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.
 | `exclusiveMaximum`                      | `number`            | _(optional)_ Validation for exclusive maximum number value (less than).                                                                                   |
 | `multipleOf`                            | `number`            | _(optional)_ Validation that requires the number to be a multiple of given value.                                                                         |
 | `width`                                 | `string` or `false` | _(optional)_ `false` for no width (use browser default), `small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width. |
+| `align`                                 | `string`            | _(optional)_ Lateral alignment of contents of input field, one of `left` (default), `center`, or `right`.                                                 |
 | `help`                                  | `object`            | _(optional)_ Provide a help button. Object consisting of `title` and `contents`.                                                                          |
 | `autoComplete`                          | `on` or `string`    | _(optional)_ For HTML `autocomplete` [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).                             |
 | [Space](/uilib/layout/space/properties) | Various             | _(optional)_ Spacing properties like `top` or `bottom` are supported.                                                                                     |

diff --git a/...design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Currency/Examples.tsx b/...design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Currency/Examples.tsx
@@ -69,7 +69,7 @@ export const WithGBLocale = () => {
   return (
     <ComponentBox>
       <Provider locale="en-GB">
-        <Field.Currency value={-150000} rightAligned />
+        <Field.Currency value={-150000} align="right" />
       </Provider>
     </ComponentBox>
   )

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Currency/Currency.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Currency/Currency.tsx
@@ -9,7 +9,7 @@ import type { FieldProps, FieldHelpProps } from '../../types'
 export type Props = FieldHelpProps &
   FieldProps<number, undefined> & {
     currency?: NumberProps['currency']
-    rightAligned?: NumberProps['rightAligned']
+    align?: NumberProps['align']
   }
 
 function Currency(props: Props) {

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Currency/__tests__/Currency.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Currency/__tests__/Currency.test.tsx
@@ -45,11 +45,19 @@ describe('Field.Currency', () => {
     ).toBe('NOK')
   })
 
-  it('should allow rightAligned', () => {
-    render(<Currency value={123} rightAligned />)
+  it('should align input correctly', () => {
+    render(
+      <>
+        <Currency value={123} align="left" />
+        <Currency value={123} align="center" />
+        <Currency value={123} align="right" />
+      </>
+    )
 
-    const element = document.querySelector('.dnb-input')
-    expect(element.className).toContain('dnb-input__align--right')
+    const inputs = document.querySelectorAll('.dnb-input')
+    expect(inputs[0]).toHaveClass('dnb-input__align--left')
+    expect(inputs[1]).toHaveClass('dnb-input__align--center')
+    expect(inputs[2]).toHaveClass('dnb-input__align--right')
   })
 
   it('should have decimal input mode', () => {

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx
@@ -2,6 +2,7 @@ import React, { useContext, useMemo, useCallback } from 'react'
 import { JSONSchema7 } from 'json-schema'
 import { InputMasked, HelpButton } from '../../../../components'
 import { InputMaskedProps } from '../../../../components/InputMasked'
+import { InputAlign } from '../../../../components/Input'
 import SharedContext from '../../../../shared/Context'
 import classnames from 'classnames'
 import FieldBlock from '../../FieldBlock'
@@ -39,7 +40,7 @@ export type Props = FieldHelpProps &
     multipleOf?: number
     // Styling
     width?: false | 'small' | 'medium' | 'large' | 'stretch'
-    rightAligned?: boolean
+    align?: InputAlign
   }
 
 function NumberComponent(props: Props) {
@@ -55,7 +56,6 @@ function NumberComponent(props: Props) {
     decimalLimit = 12,
     prefix,
     suffix,
-    rightAligned,
   } = props
 
   const errorMessages = useMemo(
@@ -149,6 +149,7 @@ function NumberComponent(props: Props) {
     toInput,
     fromInput,
     width: props.width ?? 'medium',
+    align: props.align ?? 'left',
   }
 
   const {
@@ -170,6 +171,7 @@ function NumberComponent(props: Props) {
     help,
     emptyValue,
     width,
+    align,
     handleFocus,
     handleBlur,
     handleChange,
@@ -202,7 +204,7 @@ function NumberComponent(props: Props) {
         placeholder={placeholder}
         value={value}
         {...maskProps}
-        align={rightAligned && 'right'}
+        align={align}
         on_focus={handleFocus}
         on_blur={handleBlur}
         on_change={handleChange}

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.test.tsx
@@ -109,11 +109,19 @@ describe('Field.Number', () => {
       expect(screen.getByDisplayValue('123,456')).toBeInTheDocument()
     })
 
-    it('should set align="right" when rightAligned is true', () => {
-      render(<Field.Number value={123} rightAligned />)
+    it('should align input correctly', () => {
+      render(
+        <>
+          <Field.Number value={123} align="left" />
+          <Field.Number value={123} align="center" />
+          <Field.Number value={123} align="right" />
+        </>
+      )
 
-      const element = document.querySelector('.dnb-input')
-      expect(element.className).toContain('dnb-input__align--right')
+      const inputs = document.querySelectorAll('.dnb-input')
+      expect(inputs[0]).toHaveClass('dnb-input__align--left')
+      expect(inputs[1]).toHaveClass('dnb-input__align--center')
+      expect(inputs[2]).toHaveClass('dnb-input__align--right')
     })
 
     it('should have decimal input mode', () => {