docs(PhoneNumber): updates Component-specific props docs

dnbexperience · Sep 27, 2023 · d003a2c · d003a2c
1 parent 68da886
commit d003a2c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 17 deletions.
diff --git a/...ortal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx b/...ortal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx
@@ -10,10 +10,12 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.
 
 ### Component-specific props
 
-| Property                                    | Type                | Description                                                                             |
-| ------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------- |
-| `countryCodeFieldClassName`                 | `string`            | _(optional)_ Class name for the country code component.                                 |
-| `numberFieldClassName`                      | `string`            | _(optional)_ Class name for the number component.                                       |
-| `width`                                     | `string` or `false` | _(optional)_ `large` for predefined standard width, `stretch` for fill available width. |
-| `help`                                      | `object`            | _(optional)_ Provide a help button. Object consisting of `title` and `contents`         |
-| [Space](/uilib/components/space/properties) | Various             | _(optional)_ Spacing properties like `top` or `bottom` are supported.                   |
+| Property                                    | Type                | Description                                                                                                 |
+| ------------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------- |
+| `help`                                      | `object`            | _(optional)_ Provide a help button. Object consisting of `title` and `contents`                             |
+| `countryCodeFieldClassName`                 | `string`            | _(optional)_ Class name for the country code component.                                                     |
+| `numberFieldClassName`                      | `string`            | _(optional)_ Class name for the number component.                                                           |
+| `countryCodeLabel`                          | `string`            | _(optional)_ Label to show above / before the country code field                                            |
+| `numberMask`                                | Various             | _(optional)_ See property `mask` of the [InputMasked](/uilib/components/input-masked/properties) component. |
+| `width`                                     | `string` or `false` | _(optional)_ `large` for predefined standard width, `stretch` for fill available width.                     |
+| [Space](/uilib/components/space/properties) | Various             | _(optional)_ Spacing properties like `top` or `bottom` are supported.                                       |
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber.tsx
@@ -5,18 +5,19 @@ import classnames from 'classnames'
 import CountryCode from './CountryCode'
 import StringComponent from './String'
 import { useDataValue } from '../hooks'
-import { FieldProps, pickSpacingProps } from '../types'
+import { FieldHelpProps, FieldProps, pickSpacingProps } from '../types'
 import SharedContext from '../../../shared/Context'
 
-export type Props = FieldProps<string, undefined> & {
-  countryCodeFieldClassName?: string
-  numberFieldClassName?: string
-  countryCodeLabel?: string
-  numberMask?: InputMaskedProps['mask']
-  width?: 'large' | 'stretch'
-  onCountryCodeChange?: (value: string | undefined) => void
-  onNumberChange?: (value: string | undefined) => void
-}
+export type Props = FieldHelpProps &
+  FieldProps<string, undefined> & {
+    countryCodeFieldClassName?: string
+    numberFieldClassName?: string
+    countryCodeLabel?: string
+    numberMask?: InputMaskedProps['mask']
+    width?: 'large' | 'stretch'
+    onCountryCodeChange?: (value: string | undefined) => void
+    onNumberChange?: (value: string | undefined) => void
+  }
 
 function PhoneNumber(props: Props) {
   const sharedContext = useContext(SharedContext)
@@ -46,6 +47,7 @@ function PhoneNumber(props: Props) {
     error,
     disabled,
     width = 'large',
+    help,
     handleFocus,
     handleBlur,
     handleChange,
@@ -141,6 +143,7 @@ function PhoneNumber(props: Props) {
         error={error}
         disabled={disabled}
         width="stretch"
+        help={help}
       />
     </Div>
   )