From 0e8274e420b524130ce2981d4a15db2ff30b234d Mon Sep 17 00:00:00 2001 From: Tyler Ford Date: Tue, 18 Feb 2025 15:47:09 -0700 Subject: [PATCH] fix(readmes): lowercase anchor links to prevent links breaking (#3062) * fix(readmes): lowercase anchor links to prevent links breaking * fix(datatable): update prop comments to remove problematic syntax * fix(datatable): regen readmes * fix(datatable): update readme generator test --- generators/readme/src/index.ts | 17 ++++-- .../readme/test/generate-readme.spec.ts | 2 +- .../buttons/accessible-button/README.md | 2 +- .../components/buttons/flat-button/README.md | 2 +- .../components/buttons/icon-button/README.md | 2 +- .../buttons/primary-button/README.md | 2 +- .../buttons/secondary-icon-button/README.md | 2 +- packages/components/card/README.md | 2 +- .../components/collapsible-motion/README.md | 4 +- .../components/collapsible-panel/README.md | 2 +- packages/components/collapsible/README.md | 2 +- packages/components/data-table/README.md | 61 +++++++------------ .../components/data-table/src/data-table.tsx | 24 +------- packages/components/field-errors/README.md | 4 +- packages/components/field-label/README.md | 2 +- packages/components/field-warnings/README.md | 4 +- .../async-creatable-select-field/README.md | 10 +-- .../fields/async-select-field/README.md | 10 +-- .../fields/creatable-select-field/README.md | 10 +-- .../components/fields/date-field/README.md | 10 +-- .../fields/date-range-field/README.md | 12 ++-- .../fields/date-time-field/README.md | 10 +-- .../localized-multiline-text-field/README.md | 10 +-- .../fields/localized-text-field/README.md | 6 +- .../components/fields/money-field/README.md | 12 ++-- .../fields/multiline-text-field/README.md | 6 +- .../components/fields/number-field/README.md | 6 +- .../fields/password-field/README.md | 6 +- .../components/fields/radio-field/README.md | 6 +- .../fields/search-select-field/README.md | 10 +-- .../components/fields/select-field/README.md | 10 +-- .../components/fields/text-field/README.md | 6 +- .../components/fields/time-field/README.md | 6 +- packages/components/filters/README.md | 8 +-- .../async-creatable-select-input/README.md | 4 +- .../inputs/async-select-input/README.md | 4 +- .../inputs/creatable-select-input/README.md | 4 +- .../components/inputs/date-input/README.md | 4 +- .../inputs/date-range-input/README.md | 6 +- .../inputs/date-time-input/README.md | 4 +- .../inputs/localized-money-input/README.md | 6 +- .../localized-multiline-text-input/README.md | 2 +- .../localized-rich-text-input/README.md | 4 +- .../components/inputs/money-input/README.md | 6 +- .../inputs/rich-text-input/README.md | 4 +- .../inputs/search-select-input/README.md | 4 +- .../inputs/search-text-input/README.md | 4 +- .../components/inputs/select-input/README.md | 4 +- .../inputs/selectable-search-input/README.md | 14 ++--- .../components/inputs/time-input/README.md | 38 ++++++------ packages/components/pagination/README.md | 4 +- .../primary-action-dropdown/README.md | 2 +- packages/components/progress-bar/README.md | 20 +++--- packages/components/quick-filters/README.md | 2 +- packages/components/tag/README.md | 4 +- packages/components/tooltip/README.md | 4 +- packages/components/view-switcher/README.md | 14 ++--- 57 files changed, 211 insertions(+), 239 deletions(-) diff --git a/generators/readme/src/index.ts b/generators/readme/src/index.ts index 5894cf7828..92b7d32978 100644 --- a/generators/readme/src/index.ts +++ b/generators/readme/src/index.ts @@ -369,7 +369,10 @@ const parsePropTypesToMarkdown = ( propTypeNode = [ inlineCode('Object'), html('
'), - link(`#signature-${propName}`, 'See signature.'), + link( + `#signature-${propName.toLowerCase()}`, + 'See signature.' + ), ]; signatures.push( ...[ @@ -387,7 +390,10 @@ const parsePropTypesToMarkdown = ( propTypeNode = [ inlineCode('Function'), html('
'), - link(`#signature-${propName}`, 'See signature.'), + link( + `#signature-${propName.toLowerCase()}`, + 'See signature.' + ), ]; signatures.push( ...[ @@ -416,7 +422,7 @@ const parsePropTypesToMarkdown = ( propTypeNode = [ inlineCode(`Array: ${propInfoType.raw.replace('\n', '')}`), html('
'), - link(`#signature-${propName}`, 'See signature.'), + link(`#signature-${propName.toLowerCase()}`, 'See signature.'), ]; signatures.push( ...[ @@ -470,7 +476,10 @@ const parsePropTypesToMarkdown = ( ...(possibleSignatures.length > 0 ? [ html('
'), - link(`#signature-${propName}`, 'See signature.'), + link( + `#signature-${propName.toLowerCase()}`, + 'See signature.' + ), ] : []), ]; diff --git a/generators/readme/test/generate-readme.spec.ts b/generators/readme/test/generate-readme.spec.ts index bce2b56581..495f7f1ba1 100644 --- a/generators/readme/test/generate-readme.spec.ts +++ b/generators/readme/test/generate-readme.spec.ts @@ -151,7 +151,7 @@ describe('generate README (for TS file)', () => { | - | - | :-: | - | - | | \`name\` | \`string\` | ✅ | | The name of a Justice League member. | | \`identity\` | \`Object\`
[See signature.](#signature-identity) | ✅ | | The real identity of this Justice League member, if known. | - | \`onClick\` | \`Function\`
[See signature.](#signature-onClick) | | | A callback function, called when the component is clicked. | + | \`onClick\` | \`Function\`
[See signature.](#signature-onclick) | | | A callback function, called when the component is clicked. | | \`abilities\` | \`Array: Ability[]\`
[See signature.](#signature-abilities) | ✅ | | List the abilities of this Justice League member. | | \`aliases\` | \`Array: string[]\` | ✅ | | List the aliases of this Justice League member. | | \`movies\` | \`union\`
Possible values:
\`string , Movie\`
[See signature.](#signature-movies) | ✅ | | The list of movies where this Justice League member appears in. It can either be just the name of the movie or a more detailed information about the movie. | diff --git a/packages/components/buttons/accessible-button/README.md b/packages/components/buttons/accessible-button/README.md index 458db6bae1..92e62e86f9 100644 --- a/packages/components/buttons/accessible-button/README.md +++ b/packages/components/buttons/accessible-button/README.md @@ -56,7 +56,7 @@ export default Example; | `isToggled` | `boolean` | | `false` | If `true`, indicates that this element is in a toggled state.
This prop is only used if `isToggleButton` is `true`. | | `isDisabled` | `boolean` | | | If `true`, indicates that the element is in a disabled state. | | `className` | `string` | | | Allow to override the styles by passing a `className` prop.
Custom styles can also be passed using the [`css` prop from emotion](https://emotion.sh/docs/css-prop#style-precedence). | -| `onClick` | `Function`
[See signature.](#signature-onClick) | | | Event handler when the button is clicked, or the user presses `ENTER` or `SPACE`. | +| `onClick` | `Function`
[See signature.](#signature-onclick) | | | Event handler when the button is clicked, or the user presses `ENTER` or `SPACE`. | | `buttonAttributes` | `Record` | | `{}` | Any HTML attributes to be forwarded to the HTML element. | ## Signatures diff --git a/packages/components/buttons/flat-button/README.md b/packages/components/buttons/flat-button/README.md index 4937285d3c..11b2aac328 100644 --- a/packages/components/buttons/flat-button/README.md +++ b/packages/components/buttons/flat-button/README.md @@ -54,7 +54,7 @@ export default Example; | `tone` | `union`
Possible values:
`'primary' , 'secondary' , 'inverted' , 'critical'` | | `'primary'` | Indicates the color scheme of the button. | | `type` | `union`
Possible values:
`'submit' , 'reset' , 'button'` | | `'button'` | Used as the HTML `type` attribute. | | `label` | `string` | ✅ | | Should describe what the button is for. | -| `onClick` | `Function`
[See signature.](#signature-onClick) | | | Handler when the button is clicked. | +| `onClick` | `Function`
[See signature.](#signature-onclick) | | | Handler when the button is clicked. | | `icon` | `ReactElement` | | | The icon of the button. | | `iconPosition` | `union`
Possible values:
`'left' , 'right'` | | `'left'` | The position of the icon. | | `isDisabled` | `boolean` | | `false` | Determines if the button is disabled.
Note that this influences the `tone` and `onClick` will not be triggered in this state. | diff --git a/packages/components/buttons/icon-button/README.md b/packages/components/buttons/icon-button/README.md index 70a21b234a..4770137614 100644 --- a/packages/components/buttons/icon-button/README.md +++ b/packages/components/buttons/icon-button/README.md @@ -55,7 +55,7 @@ export default Example; | `isToggleButton` | `boolean` | | `false` | If this is active, it means the button will persist in an "active" state when toggled (see `isToggled`), and back to normal state when untoggled. | | `isToggled` | `boolean` | | | Tells when the button should present a toggled state. It does not have any effect when `isToggleButton` is `false`. | | `isDisabled` | `boolean` | | | Tells when the button should present a disabled state. | -| `onClick` | `Function`
[See signature.](#signature-onClick) | | | Handler when the button is clicked | +| `onClick` | `Function`
[See signature.](#signature-onclick) | | | Handler when the button is clicked | | `shape` | `union`
Possible values:
`'round' , 'square'` | | `'round'` | @deprecated This prop is only used in the old theme. For the new theme this prop will not be taken into account and `square` is used by default | | `theme` | `union`
Possible values:
`'default' , 'primary' , 'info'` | | `'default'` | The component may have a theme only if `isToggleButton` is `true` | | `size` | `union`
Possible values:
`TLegacySizes , TSizes` | | `'40'` | Indicates the size of the icon. Available sizes are '10', '20', '30', '40'. | diff --git a/packages/components/buttons/primary-button/README.md b/packages/components/buttons/primary-button/README.md index c25f3e611f..0b2cd35d1d 100644 --- a/packages/components/buttons/primary-button/README.md +++ b/packages/components/buttons/primary-button/README.md @@ -57,7 +57,7 @@ export default Example; | `isToggleButton` | `boolean` | | `false` | If this is active, it means the button will persist in an "active" state when toggled (see `isToggled`), and back to normal state when untoggled | | `isToggled` | `boolean` | | | Tells when the button should present a toggled state. It does not have any effect when `isToggleButton` is `false`. | | `isDisabled` | `boolean` | | | Tells when the button should present a disabled state. | -| `onClick` | `Function`
[See signature.](#signature-onClick) | | | Handler when the button is clicked.
Required when `as` is `undefined` | +| `onClick` | `Function`
[See signature.](#signature-onclick) | | | Handler when the button is clicked.
Required when `as` is `undefined` | | `size` | `union`
Possible values:
`TLegacySizes , TSizes` | | `'20'` | Sets the size of the button.
`small`, `medium`, and `big` are deprecated. Use `10`, `20`, instead. | | `tone` | `union`
Possible values:
`'urgent' , 'primary' , 'critical'` | | `'primary'` | Indicates the color scheme of the button. | diff --git a/packages/components/buttons/secondary-icon-button/README.md b/packages/components/buttons/secondary-icon-button/README.md index da777866d7..0e014859ba 100644 --- a/packages/components/buttons/secondary-icon-button/README.md +++ b/packages/components/buttons/secondary-icon-button/README.md @@ -55,7 +55,7 @@ export default Example; | `label` | `string` | ✅ | | Should describe what the button does, for accessibility purposes (screen-reader users) | | `isDisabled` | `boolean` | | `false` | Tells when the button should present a disabled state. | | `size` | `union`
Possible values:
`TLegacySizes , TSizes` | | `'40'` | Indicates the size of the icon. Available sizes are '10', '20', '30', '40'. | -| `onClick` | `Function`
[See signature.](#signature-onClick) | | | Handler when the button is clicked. | +| `onClick` | `Function`
[See signature.](#signature-onclick) | | | Handler when the button is clicked. | ## Signatures diff --git a/packages/components/card/README.md b/packages/components/card/README.md index 333b510930..492df7ac4b 100644 --- a/packages/components/card/README.md +++ b/packages/components/card/README.md @@ -50,7 +50,7 @@ export default Example; | `theme` | `union`
Possible values:
`'light' , 'dark'` | | `'light'` | Determines the background color of the card. | | `className` | `string` | | | Pass a custom CSS class, useful to override the styles.
NOTE: This is not recommended and should only be used for building new components that require special style adjustments. | | `children` | `ReactNode` | | | | -| `onClick` | `Function`
[See signature.](#signature-onClick) | | | The callback function to be executed when the Card component is clicked. Prefer this for managing side effects rather than navigation. | +| `onClick` | `Function`
[See signature.](#signature-onclick) | | | The callback function to be executed when the Card component is clicked. Prefer this for managing side effects rather than navigation. | | `to` | `union`
Possible values:
`string , LocationDescriptor` | | | The URL that the Card should point to. If provided, the Card will be rendered as an anchor element. | | `isExternalLink` | `boolean` | | | A flag to indicate if the Card points to an external source. | | `isDisabled` | `boolean` | | | Indicates that a clickable Card should not allow clicks. This allows consumers to temporarily disable a clickable Card. | diff --git a/packages/components/collapsible-motion/README.md b/packages/components/collapsible-motion/README.md index d32b7c9eae..b0355b947e 100644 --- a/packages/components/collapsible-motion/README.md +++ b/packages/components/collapsible-motion/README.md @@ -69,8 +69,8 @@ export default Example; | ----------------- | ---------------------------------------------------- | :------: | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `Function`
[See signature.](#signature-children) | ✅ | | A render function, called with the following named arguments: `isOpen` (boolean), `toggle` (function), `containerStyles` (css-in-js object), `registerContentNode` (React reference to be used on the animated container).
Siganture: `({ isOpen, containerStyles, toggle, registerContentNode }) => React.node` | | `isClosed` | `boolean` | | | | -| `onToggle` | `Function`
[See signature.](#signature-onToggle) | | | A callback function called when the `toggle` function is called. This prop is required when the component is **controlled**. | -| `minHeight` | `number` | | `0` | The minimal height of the container being animated. | +| `onToggle` | `Function`
[See signature.](#signature-ontoggle) | | | A callback function called when the `toggle` function is called. This prop is required when the component is **controlled**. | +| `minHeight` | `number` | | | The minimal height of the container being animated. | | `isDefaultClosed` | `boolean` | | | The initial value to the internal toggle state `isOpen`. | ## Signatures diff --git a/packages/components/collapsible-panel/README.md b/packages/components/collapsible-panel/README.md index 3de6716be9..00ebcb2de2 100644 --- a/packages/components/collapsible-panel/README.md +++ b/packages/components/collapsible-panel/README.md @@ -79,7 +79,7 @@ export default Example; | `headerControlsAlignment` | `union`
Possible values:
`'left' , 'right'` | | `'right'` | Indicates the position of the control elements in the header component. | | `isDefaultClosed` | `boolean` | | | Indicates if the panel's content should be collapsed or shown by default.
Updates to this value are not respected. Only used for **uncontrolled** mode (when no`onToggle` is passed.) | | `isClosed` | `boolean` | | | Indicates if the panel's content should be collapsed or shown.
Component becomes \*_controlled_ when this is passed. | -| `onToggle` | `Function`
[See signature.](#signature-onToggle) | | | function to be triggered whenever the user clicks the top area to collapse the panel's content
Becomes required when `isClosed` is passed. | +| `onToggle` | `Function`
[See signature.](#signature-ontoggle) | | | function to be triggered whenever the user clicks the top area to collapse the panel's content
Becomes required when `isClosed` is passed. | | `horizontalConstraint` | `union`
Possible values:
`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the panel. | ## Signatures diff --git a/packages/components/collapsible/README.md b/packages/components/collapsible/README.md index 21b14997ce..b28fdff538 100644 --- a/packages/components/collapsible/README.md +++ b/packages/components/collapsible/README.md @@ -53,7 +53,7 @@ export default Example; | `isDefaultClosed` | `boolean` | | `false` | This is only used to initialize the `isOpen` state once, when the component mounts. Therefore there should not be any `componentWillReceiveProps` to update the state from an external source. | | `children` | `Function`
[See signature.](#signature-children) | ✅ | | A render-prop function.
`children` will be called with `options: { isOpen: boolean; toggle: TToggleCallback }`
`options.toggle` will be defined given that Collapsible is a controlled component. | | `isClosed` | `boolean` | | | Passing this prop makes the component a controlled component. Controlled components also require to pass a `onToggle` callback function. | -| `onToggle` | `Function`
[See signature.](#signature-onToggle) | | | A callback function, called when the consumer calls the `toggle` function. This function is only required when the component is controlled. | +| `onToggle` | `Function`
[See signature.](#signature-ontoggle) | | | A callback function, called when the consumer calls the `toggle` function. This function is only required when the component is controlled. | ## Signatures diff --git a/packages/components/data-table/README.md b/packages/components/data-table/README.md index 1f18efa9b8..aaddfb7584 100644 --- a/packages/components/data-table/README.md +++ b/packages/components/data-table/README.md @@ -59,44 +59,28 @@ export default Example; ## Properties -| Props | Type | Required | Default | Description | -| --------- | ---------------------------------------------------------------- | :------: | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `rows` | `Array: Row[]` | ✅ | | The list of data that needs to be rendered in the table. Each object in the list can have any shape as long as it has a unique identifier. The data is rendered by using the callback render function `itemRenderer`. | -| `columns` | `Array: TColumn[]`
[See signature.](#signature-columns) | | `[]` | Each object requires a unique `key` which should correspond to property key of the items of `rows` that you want to render under this column, and a `label` which defines the name shown on the header. The list of columns to be rendered.Column item shape:``` | - -{ -key: string; -label: ReactNode; -width?: string; -align?: 'left' | 'center' | 'right'; -onClick?: (event: MouseEventHandler) => void; -renderItem?: (row: Row, isRowCollapsed: boolean) => ReactNode; -headerIcon?: ReactNode; -isTruncated?: boolean; -isSortable?: boolean; -disableResizing?: boolean; -shouldIgnoreRowClick?: boolean; -} - -````[Colum signatures with description](/?path=/docs/components-datatable-readme--props#signatures) | -| `customColumns` | `Array: TColumn[]`
[See signature.](#signature-customColumns) | | | The columns of the nested items to be rendered in the table. Just like the columns, Each object requires a unique `key` which should correspond to property key of the items of `rows` that you want to render under this column, and a `label` which defines the name shown on the header. The list of columns to be rendered. | -| `footer` | `ReactNode` | | | Element to render within the `tfoot` (footer) element of the table. | -| `maxWidth` | `union`
Possible values:
`number , string` | | | The max width (a number of pixels or a css value string with units) for which the table is allowed to grow. If unset, the table will grow horizontally to fill its parent. | -| `maxHeight` | `union`
Possible values:
`number , string` | | | The max height (a number of pixels or a css value string with units) for which the table is allowed to grow. If unset, the table will grow vertically to fill its parent and we are able to have a sticky header. | -| `onRowClick` | `Function`
[See signature.](#signature-onRowClick) | | | A callback function, called when a user clicks on a row. | -| `isCondensed` | `boolean` | | `true` | Set this to `true` to reduce the paddings of all cells, allowing the table to display more data in less space. | -| `onColumnResized` | `Function`
[See signature.](#signature-onColumnResized) | | | A callback function, called when a column has been resized. Use this callback to get the resized column widths and save them, to be able to restore the value once the user comes back to the page. | -| `disableSelfContainment` | `boolean` | | `false` | Set this to `true` to take control of the containment of the table and doing it on a parent element. This means that the table will grow in size without adding scrollbars on itself, both vertically and horizontally and, as a consequence, the `maxHeight` and `maxWidth` props are ignored. If you need to enforce these constraints, you must also apply them on the parent element. Additionally, the sticky behaviour of the header will get fixed relatively to the closest parent element with `position: relative`. | -| `disableHeaderStickiness` | `boolean` | | | Set this to `true` to prevent the header from being sticky. The header can be sticky only if the table does not have a `maxHeight` set. | -| `itemRenderer` | `Function`
[See signature.](#signature-itemRenderer) | | `(row, column) => row[column.key]` | The default function used to render the content of each item in a cell. In case a column has its own `renderItem` render function, it will take precedence over this function. | -| `wrapHeaderLabels` | `boolean` | | `true` | Set this to `false` to ensure that every column can render their label in one line. By default the header cell grows in height in case the label does not fit in one line. | -| `verticalCellAlignment` | `union`
Possible values:
`'top' , 'center' , 'bottom'` | | `'top'` | The default cell vertical alignment of each row (not the table header). | -| `horizontalCellAlignment` | `union`
Possible values:
`'left' , 'center' , 'right'` | | `'left'` | The default cell horizontal alignment. In case a column has its own `align` property, it will take precedence over this value. | -| `sortedBy` | `string` | | | The key of the column for which the data is currently sorted by. | -| `onSortChange` | `Function`
[See signature.](#signature-onSortChange) | | | A callback function, called when a sortable column's header is clicked. It's required when the `isSortable` flag is set on at least one column. | -| `sortDirection` | `union`
Possible values:
`'desc' , 'asc'` | | | The sorting direction. | -| `renderNestedRow` | `Function`
[See signature.](#signature-renderNestedRow) | | | Custom row renderer for nested rows. | -| `maxExpandableHeight` | `number` | | | If this is provided, then it should control the height of the expanded rows. In the event where there is more content than the maxHeight, a scrollbar should make provision for the overflow. | +| Props | Type | Required | Default | Description | +| ------------------------- | ---------------------------------------------------------------------- | :------: | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `rows` | `Array: Row[]` | ✅ | | The list of data that needs to be rendered in the table. Each object in the list can have any shape as long as it has a unique identifier. The data is rendered by using the callback render function `itemRenderer`. | +| `columns` | `Array: TColumn[]`
[See signature.](#signature-columns) | | `[]` | The list of columns to be rendered. Each object requires a unique `key` which should correspond to property key of the items of `rows` that you want to render under this column, and a `label` which defines the name shown on the header. | +| `customColumns` | `Array: TColumn[]`
[See signature.](#signature-customcolumns) | | | The list of columns to be rendered. The columns of the nested items to be rendered in the table. Just like the columns, Each object requires a unique `key` which should correspond to property key of the items of `rows` that you want to render under this column, and a `label` which defines the name shown on the header. | +| `footer` | `ReactNode` | | | Element to render within the `tfoot` (footer) element of the table. | +| `maxWidth` | `union`
Possible values:
`number , string` | | | The max width (a number of pixels or a css value string with units) for which the table is allowed to grow. If unset, the table will grow horizontally to fill its parent. | +| `maxHeight` | `union`
Possible values:
`number , string` | | | The max height (a number of pixels or a css value string with units) for which the table is allowed to grow. If unset, the table will grow vertically to fill its parent and we are able to have a sticky header. | +| `onRowClick` | `Function`
[See signature.](#signature-onrowclick) | | | A callback function, called when a user clicks on a row. | +| `isCondensed` | `boolean` | | `true` | Set this to `true` to reduce the paddings of all cells, allowing the table to display more data in less space. | +| `onColumnResized` | `Function`
[See signature.](#signature-oncolumnresized) | | | A callback function, called when a column has been resized. Use this callback to get the resized column widths and save them, to be able to restore the value once the user comes back to the page. | +| `disableSelfContainment` | `boolean` | | `false` | Set this to `true` to take control of the containment of the table and doing it on a parent element. This means that the table will grow in size without adding scrollbars on itself, both vertically and horizontally and, as a consequence, the `maxHeight` and `maxWidth` props are ignored. If you need to enforce these constraints, you must also apply them on the parent element. Additionally, the sticky behaviour of the header will get fixed relatively to the closest parent element with `position: relative`. | +| `disableHeaderStickiness` | `boolean` | | | Set this to `true` to prevent the header from being sticky. The header can be sticky only if the table does not have a `maxHeight` set. | +| `itemRenderer` | `Function`
[See signature.](#signature-itemrenderer) | | `(row, column) => row[column.key]` | The default function used to render the content of each item in a cell. In case a column has its own `renderItem` render function, it will take precedence over this function. | +| `wrapHeaderLabels` | `boolean` | | `true` | Set this to `false` to ensure that every column can render their label in one line. By default the header cell grows in height in case the label does not fit in one line. | +| `verticalCellAlignment` | `union`
Possible values:
`'top' , 'center' , 'bottom'` | | `'top'` | The default cell vertical alignment of each row (not the table header). | +| `horizontalCellAlignment` | `union`
Possible values:
`'left' , 'center' , 'right'` | | `'left'` | The default cell horizontal alignment. In case a column has its own `align` property, it will take precedence over this value. | +| `sortedBy` | `string` | | | The key of the column for which the data is currently sorted by. | +| `onSortChange` | `Function`
[See signature.](#signature-onsortchange) | | | A callback function, called when a sortable column's header is clicked. It's required when the `isSortable` flag is set on at least one column. | +| `sortDirection` | `union`
Possible values:
`'desc' , 'asc'` | | | The sorting direction. | +| `renderNestedRow` | `Function`
[See signature.](#signature-rendernestedrow) | | | Custom row renderer for nested rows. | +| `maxExpandableHeight` | `number` | | | If this is provided, then it should control the height of the expanded rows. In the event where there is more content than the maxHeight, a scrollbar should make provision for the overflow. | ## Signatures @@ -289,4 +273,3 @@ shouldIgnoreRowClick?: boolean; ```ts (row: Row) => ReactNode; ``` -```` diff --git a/packages/components/data-table/src/data-table.tsx b/packages/components/data-table/src/data-table.tsx index 7bad3b924e..5399cd79cc 100644 --- a/packages/components/data-table/src/data-table.tsx +++ b/packages/components/data-table/src/data-table.tsx @@ -131,37 +131,17 @@ export type TDataTableProps = { */ rows: Row[]; /** + * The list of columns to be rendered. * Each object requires a unique `key` which should correspond to property key of * the items of `rows` that you want to render under this column, and a `label` * which defines the name shown on the header. - * The list of columns to be rendered. - * - * Column item shape: - * - * ``` - * { - * key: string; - * label: ReactNode; - * width?: string; - * align?: 'left' | 'center' | 'right'; - * onClick?: (event: MouseEventHandler) => void; - * renderItem?: (row: Row, isRowCollapsed: boolean) => ReactNode; - * headerIcon?: ReactNode; - * isTruncated?: boolean; - * isSortable?: boolean; - * disableResizing?: boolean; - * shouldIgnoreRowClick?: boolean; - * } - * ``` - * - * [Colum signatures with description](/?path=/docs/components-datatable-readme--props#signatures) */ columns?: TColumn[]; /** + * The list of columns to be rendered. * The columns of the nested items to be rendered in the table. Just like the columns, Each object requires a unique `key` which should correspond to property key of * the items of `rows` that you want to render under this column, and a `label` * which defines the name shown on the header. - * The list of columns to be rendered. */ customColumns?: TColumn[]; /** diff --git a/packages/components/field-errors/README.md b/packages/components/field-errors/README.md index 8c64cc407b..943b0ae853 100644 --- a/packages/components/field-errors/README.md +++ b/packages/components/field-errors/README.md @@ -76,8 +76,8 @@ export default Example; | `id` | `string` | | | ID of the error field. | | `errors` | `Record` | | | List of errors. Only entries with truthy values will count as active errors. | | `isVisible` | `boolean` | | | `true` when the error messages should be rendered. Usually you'd pass in a `touched` state of fields. | -| `renderError` | `Function`
[See signature.](#signature-renderError) | | | Function which gets called with each error key (from the `errors` prop) and may render an error message or return `null` to hand the error handling off to `renderDefaultError`. | -| `renderDefaultError` | `Function`
[See signature.](#signature-renderDefaultError) | | | Function which gets called with each error key (from the `errors` prop) for which `renderError` returned `null`. It may render an error message or return `null` to hand the error handling off to `FieldError`s built-in error handling. | +| `renderError` | `Function`
[See signature.](#signature-rendererror) | | | Function which gets called with each error key (from the `errors` prop) and may render an error message or return `null` to hand the error handling off to `renderDefaultError`. | +| `renderDefaultError` | `Function`
[See signature.](#signature-renderdefaulterror) | | | Function which gets called with each error key (from the `errors` prop) for which `renderError` returned `null`. It may render an error message or return `null` to hand the error handling off to `FieldError`s built-in error handling. | ## Signatures diff --git a/packages/components/field-label/README.md b/packages/components/field-label/README.md index cecbb2fdf7..60f8ceb3c1 100644 --- a/packages/components/field-label/README.md +++ b/packages/components/field-label/README.md @@ -61,7 +61,7 @@ export default Example; | `title` | `union`
Possible values:
`string , ReactNode` | ✅ | | Title of the label | | `hint` | `union`
Possible values:
`string , ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas description can describe it in more depth. Can also receive a hintIcon. | | `description` | `union`
Possible values:
`string , ReactNode` | | | Provides a description for the title. | -| `onInfoButtonClick` | `Function`
[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed. Info button will only be visible when this prop is passed. | +| `onInfoButtonClick` | `Function`
[See signature.](#signature-oninfobuttonclick) | | | Function called when info button is pressed. Info button will only be visible when this prop is passed. | | `tone` | `union`
Possible values:
`'primary' , 'inverted'` | | | Indicates the tone to be applied to the label | | `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text. Will only get rendered when hint is passed as well. | | `badge` | `ReactNode` | | | Badge to be displayed beside the label. Might be used to display additional information about the content of the field (E.g verified email) | diff --git a/packages/components/field-warnings/README.md b/packages/components/field-warnings/README.md index 3beedcb435..d610535338 100644 --- a/packages/components/field-warnings/README.md +++ b/packages/components/field-warnings/README.md @@ -75,8 +75,8 @@ export default Example; | `id` | `string` | | | ID of the warning field. | | `warnings` | `Record` | | | List of warnings. Only entries with truthy values will count as active warnings. | | `isVisible` | `boolean` | | | `true` when the warning messages should be rendered. Usually you'd pass in a `touched` state of fields. | -| `renderWarning` | `Function`
[See signature.](#signature-renderWarning) | | | Function which gets called with each warning key (from the `warnings` prop) and may render a warning message or return `null` to hand the warning handling off to `renderDefaultWarning`. | -| `renderDefaultWarning` | `Function`
[See signature.](#signature-renderDefaultWarning) | | | Function which gets called with each warning key (from the `warnings` prop) for which `renderWarning` returned `null`. It may render a warning message or return `null` to hand the warning handling off to `FieldWarning`s built-in warning handling. | +| `renderWarning` | `Function`
[See signature.](#signature-renderwarning) | | | Function which gets called with each warning key (from the `warnings` prop) and may render a warning message or return `null` to hand the warning handling off to `renderDefaultWarning`. | +| `renderDefaultWarning` | `Function`
[See signature.](#signature-renderdefaultwarning) | | | Function which gets called with each warning key (from the `warnings` prop) for which `renderWarning` returned `null`. It may render a warning message or return `null` to hand the warning handling off to `FieldWarning`s built-in warning handling. | ## Signatures diff --git a/packages/components/fields/async-creatable-select-field/README.md b/packages/components/fields/async-creatable-select-field/README.md index d021252b57..ebd17ae794 100644 --- a/packages/components/fields/async-creatable-select-field/README.md +++ b/packages/components/fields/async-creatable-select-field/README.md @@ -57,9 +57,9 @@ export default Example; | `id` | `AsyncCreatableProps['inputId']` | | | Used as HTML id property. An id is auto-generated when it is not specified.
[Props from React select was used](https://react-select.com/props) | | `horizontalConstraint` | `union`
Possible values:
`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. | | `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.
Unknown errors will be forwarded to `renderError` | -| `renderError` | `Function`
[See signature.](#signature-renderError) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | +| `renderError` | `Function`
[See signature.](#signature-rendererror) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | | `warnings` | `Record` | | | A map of warnings. Warning messages for known warnings are rendered automatically.
Unknown warnings will be forwarded to `renderWarning` | -| `renderWarning` | `Function`
[See signature.](#signature-renderWarning) | | | Called with custom warnings. This function can return a message which will be wrapped in an WarningMessage. It can also return null to show no warning. | +| `renderWarning` | `Function`
[See signature.](#signature-renderwarning) | | | Called with custom warnings. This function can return a message which will be wrapped in an WarningMessage. It can also return null to show no warning. | | `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. | | `touched` | `union`
Possible values:
`boolean[] , boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. | | `aria-label` | `AsyncCreatableProps['aria-label']` | | | Aria label (for assistive tech)
[Props from React select was used](https://react-select.com/props) | @@ -83,8 +83,8 @@ export default Example; | `menuShouldBlockScroll` | `AsyncCreatableProps['menuShouldBlockScroll']` | | | whether the menu should block scroll while open
[Props from React select was used](https://react-select.com/props) | | `name` | `AsyncCreatableProps['name']` | | | Name of the HTML Input (optional - without this, no input will be rendered)
[Props from React select was used](https://react-select.com/props) | | `noOptionsMessage` | `AsyncCreatableProps['noOptionsMessage']` | | | Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place).
Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present.
[Props from React select was used](https://react-select.com/props) | -| `onBlur` | `Function`
[See signature.](#signature-onBlur) | | | Handle blur events on the control | -| `onChange` | `Function`
[See signature.](#signature-onChange) | | | Called with a fake event when value changes.
The event's `target.name` will be the name supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`.
[Props from React select was used](https://react-select.com/props) | +| `onBlur` | `Function`
[See signature.](#signature-onblur) | | | Handle blur events on the control | +| `onChange` | `Function`
[See signature.](#signature-onchange) | | | Called with a fake event when value changes.
The event's `target.name` will be the name supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`.
[Props from React select was used](https://react-select.com/props) | | `onFocus` | `AsyncCreatableProps['onFocus']` | | | Handle focus events on the control
[Props from React select was used](https://react-select.com/props) | | `onInputChange` | `AsyncCreatableProps['onInputChange']` | | | Handle change events on the input
[Props from React select was used](https://react-select.com/props) | | `placeholder` | `AsyncCreatableProps['placeholder']` | | | Placeholder text for the select value
[Props from React select was used](https://react-select.com/props) | @@ -104,7 +104,7 @@ export default Example; | `title` | `union`
Possible values:
`string , ReactNode` | ✅ | | Title of the label | | `hint` | `union`
Possible values:
`string , ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`. | | `description` | `union`
Possible values:
`string , ReactNode` | | | Provides a description for the title. | -| `onInfoButtonClick` | `Function`
[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | +| `onInfoButtonClick` | `Function`
[See signature.](#signature-oninfobuttonclick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | | `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.
Will only get rendered when `hint` is passed as well. | | `badge` | `ReactNode` | | | Badge to be displayed beside the label.
Might be used to display additional information about the content of the field (E.g verified email) | | `iconLeft` | `ReactNode` | | | Icon to display on the left of the placeholder text and selected value. Has no effect when isMulti is enabled. | diff --git a/packages/components/fields/async-select-field/README.md b/packages/components/fields/async-select-field/README.md index bb8e24bdeb..7ec684d874 100644 --- a/packages/components/fields/async-select-field/README.md +++ b/packages/components/fields/async-select-field/README.md @@ -55,9 +55,9 @@ export default Example; | `id` | `AsyncProps['inputId']` | | | Used as HTML id property. An id is auto-generated when it is not specified.
[Props from React select was used](https://react-select.com/props) | | `horizontalConstraint` | `union`
Possible values:
`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. | | `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.
Unknown errors will be forwarded to `renderError` | -| `renderError` | `Function`
[See signature.](#signature-renderError) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | +| `renderError` | `Function`
[See signature.](#signature-rendererror) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | | `warnings` | `Record` | | | A map of warnings. Warning messages for known warnings are rendered automatically.
Unknown warnings will be forwarded to `renderWarning` | -| `renderWarning` | `Function`
[See signature.](#signature-renderWarning) | | | Called with custom warnings. This function can return a message which will be wrapped in an WarningMessage. It can also return null to show no warning. | +| `renderWarning` | `Function`
[See signature.](#signature-renderwarning) | | | Called with custom warnings. This function can return a message which will be wrapped in an WarningMessage. It can also return null to show no warning. | | `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. | | `touched` | `union`
Possible values:
`boolean[] , boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. | | `aria-label` | `AsyncProps['aria-label']` | | | Aria label (for assistive tech)
[Props from React select was used](https://react-select.com/props) | @@ -82,8 +82,8 @@ export default Example; | `menuShouldBlockScroll` | `AsyncProps['menuShouldBlockScroll']` | | | whether the menu should block scroll while open
[Props from React select was used](https://react-select.com/props) | | `name` | `AsyncProps['name']` | | | Name of the HTML Input (optional - without this, no input will be rendered)
[Props from React select was used](https://react-select.com/props) | | `noOptionsMessage` | `AsyncProps['noOptionsMessage']` | | | Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place).
[Props from React select was used](https://react-select.com/props) | -| `onBlur` | `Function`
[See signature.](#signature-onBlur) | | | Handle blur events on the control | -| `onChange` | `Function`
[See signature.](#signature-onChange) | | | Called with a fake event when value changes.
The event's `target.name` will be the name supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`. | +| `onBlur` | `Function`
[See signature.](#signature-onblur) | | | Handle blur events on the control | +| `onChange` | `Function`
[See signature.](#signature-onchange) | | | Called with a fake event when value changes.
The event's `target.name` will be the name supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`. | | `onFocus` | `FocusEventHandler` | | | Handle focus events on the control | | `onInputChange` | `AsyncProps['onInputChange']` | | | Handle change events on the input
[Props from React select was used](https://react-select.com/props) | | `placeholder` | `AsyncProps['placeholder']` | | | Placeholder text for the select value
[Props from React select was used](https://react-select.com/props) | @@ -98,7 +98,7 @@ export default Example; | `title` | `union`
Possible values:
`string , ReactNode` | ✅ | | Title of the label | | `hint` | `union`
Possible values:
`string , ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`. | | `description` | `union`
Possible values:
`string , ReactNode` | | | Provides a description for the title. | -| `onInfoButtonClick` | `Function`
[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | +| `onInfoButtonClick` | `Function`
[See signature.](#signature-oninfobuttonclick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | | `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.
Will only get rendered when `hint` is passed as well. | | `badge` | `ReactNode` | | | Badge to be displayed beside the label.
Might be used to display additional information about the content of the field (E.g verified email) | | `iconLeft` | `ReactNode` | | | Icon to display on the left of the placeholder text and selected value. Has no effect when isMulti is enabled. | diff --git a/packages/components/fields/creatable-select-field/README.md b/packages/components/fields/creatable-select-field/README.md index 3a0350e4cb..0d1e648b7b 100644 --- a/packages/components/fields/creatable-select-field/README.md +++ b/packages/components/fields/creatable-select-field/README.md @@ -54,9 +54,9 @@ export default Example; | `id` | `CreatableProps['inputId']` | | | Used as HTML id property. An id is auto-generated when it is not specified.
[Props from React select was used](https://react-select.com/props#creatable-props) | | `horizontalConstraint` | `union`
Possible values:
`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. | | `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.
Unknown errors will be forwarded to `renderError` | -| `renderError` | `Function`
[See signature.](#signature-renderError) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | +| `renderError` | `Function`
[See signature.](#signature-rendererror) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | | `warnings` | `Record` | | | A map of warnings. Warning messages for known warnings are rendered automatically.
Unknown warnings will be forwarded to `renderWarning` | -| `renderWarning` | `Function`
[See signature.](#signature-renderWarning) | | | Called with custom warnings. This function can return a message which will be wrapped in an WarningMessage. It can also return null to show no warning. | +| `renderWarning` | `Function`
[See signature.](#signature-renderwarning) | | | Called with custom warnings. This function can return a message which will be wrapped in an WarningMessage. It can also return null to show no warning. | | `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. | | `touched` | `union`
Possible values:
`boolean[] , boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. | | `aria-label` | `CreatableProps['aria-label']` | | | Aria label (for assistive tech)
[Props from React select was used](https://react-select.com/props#creatable-props) | @@ -79,8 +79,8 @@ export default Example; | `menuShouldBlockScroll` | `CreatableProps['menuShouldBlockScroll']` | | | whether the menu should block scroll while open
[Props from React select was used](https://react-select.com/props#creatable-props) | | `name` | `CreatableProps['name']` | | | Name of the HTML Input (optional - without this, no input will be rendered)
[Props from React select was used](https://react-select.com/props#creatable-props) | | `noOptionsMessage` | `CreatableProps['noOptionsMessage']` | | | Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place).
Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present.
[Props from React select was used](https://react-select.com/props#creatable-props) | -| `onBlur` | `Function`
[See signature.](#signature-onBlur) | | | Handle blur events on the control | -| `onChange` | `Function`
[See signature.](#signature-onChange) | | | Called with a fake event when value changes.
The event's `target.name` will be the name supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`. | +| `onBlur` | `Function`
[See signature.](#signature-onblur) | | | Handle blur events on the control | +| `onChange` | `Function`
[See signature.](#signature-onchange) | | | Called with a fake event when value changes.
The event's `target.name` will be the name supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`. | | `onFocus` | `CreatableProps['onFocus']` | | | Handle focus events on the control
[Props from React select was used](https://react-select.com/props#creatable-props) | | `onInputChange` | `CreatableProps['onInputChange']` | | | Handle change events on the input
[Props from React select was used](https://react-select.com/props#creatable-props) | | `options` | `union`
Possible values:
`TValue[] , { options: TValue[] }[]` | | | Array of options that populate the select menu | @@ -99,7 +99,7 @@ export default Example; | `title` | `union`
Possible values:
`string , ReactNode` | ✅ | | Title of the label | | `hint` | `union`
Possible values:
`string , ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`. | | `description` | `union`
Possible values:
`string , ReactNode` | | | Provides a description for the title. | -| `onInfoButtonClick` | `Function`
[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | +| `onInfoButtonClick` | `Function`
[See signature.](#signature-oninfobuttonclick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | | `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.
Will only get rendered when `hint` is passed as well. | | `badge` | `ReactNode` | | | Badge to be displayed beside the label.
Might be used to display additional information about the content of the field (E.g verified email) | | `iconLeft` | `ReactNode` | | | Icon to display on the left of the placeholder text and selected value. Has no effect when isMulti is enabled. | diff --git a/packages/components/fields/date-field/README.md b/packages/components/fields/date-field/README.md index 2e67bdcdb3..8c4b550779 100644 --- a/packages/components/fields/date-field/README.md +++ b/packages/components/fields/date-field/README.md @@ -50,15 +50,15 @@ export default Example; | `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. | | `horizontalConstraint` | `union`
Possible values:
`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. | | `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.
Unknown errors will be forwarded to `renderError` | -| `renderError` | `Function`
[See signature.](#signature-renderError) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | +| `renderError` | `Function`
[See signature.](#signature-rendererror) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | | `warnings` | `Record` | | | A map of warnings. Warning messages for known warnings are rendered automatically.
Unknown warnings will be forwarded to `renderWarning` | -| `renderWarning` | `Function`
[See signature.](#signature-renderWarning) | | | Called with custom warnings. This function can return a message which will be wrapped in an WarningMessage. It can also return null to show no warning. | +| `renderWarning` | `Function`
[See signature.](#signature-renderwarning) | | | Called with custom warnings. This function can return a message which will be wrapped in an WarningMessage. It can also return null to show no warning. | | `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. | | `touched` | `boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. | | `name` | `string` | | | Used as HTML name of the input component. | | `value` | `string` | ✅ | | Value of the input | -| `onChange` | `Function`
[See signature.](#signature-onChange) | | | Called with an event containing the new value. This is always called with either an empty string or a valid date in the format of `YYYY-MM-DD`.
Parent should pass it back as `value`. | -| `onBlur` | `Function`
[See signature.](#signature-onBlur) | | | Called when input is blurred | +| `onChange` | `Function`
[See signature.](#signature-onchange) | | | Called with an event containing the new value. This is always called with either an empty string or a valid date in the format of `YYYY-MM-DD`.
Parent should pass it back as `value`. | +| `onBlur` | `Function`
[See signature.](#signature-onblur) | | | Called when input is blurred | | `onFocus` | `FocusEventHandler` | | | Called when input is focused | | `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). | | `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content | @@ -69,7 +69,7 @@ export default Example; | `title` | `ReactNode` | ✅ | | Title of the label | | `hint` | `ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`. | | `description` | `ReactNode` | | | Provides a description for the title. | -| `onInfoButtonClick` | `Function`
[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | +| `onInfoButtonClick` | `Function`
[See signature.](#signature-oninfobuttonclick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | | `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.
Will only get rendered when `hint` is passed as well. | | `badge` | `ReactNode` | | | Badge to be displayed beside the label.
Might be used to display additional information about the content of the field (E.g verified email) | diff --git a/packages/components/fields/date-range-field/README.md b/packages/components/fields/date-range-field/README.md index cf9600d459..02fbd46373 100644 --- a/packages/components/fields/date-range-field/README.md +++ b/packages/components/fields/date-range-field/README.md @@ -50,16 +50,16 @@ export default Example; | `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. | | `horizontalConstraint` | `union`
Possible values:
`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. | | `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.
Unknown errors will be forwarded to `renderError` | -| `renderError` | `Function`
[See signature.](#signature-renderError) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | +| `renderError` | `Function`
[See signature.](#signature-rendererror) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | | `warnings` | `Record` | | | A map of warnings. Warning messages for known warnings are rendered automatically.
Unknown warnings will be forwarded to renderWarning. | -| `renderWarning` | `Function`
[See signature.](#signature-renderWarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
It can also return null to show no warning. | +| `renderWarning` | `Function`
[See signature.](#signature-renderwarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
It can also return null to show no warning. | | `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. | | `touched` | `boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. | | `name` | `string` | | | Used as HTML name of the input component. | | `value` | `Array: string[]` | ✅ | | The selected date range. Must either be an empty array or an array of two strings holding dates formatted as "YYYY-MM-DD". | -| `onChange` | `Function`
[See signature.](#signature-onChange) | | | Called when the date range changes, with an event containing either an empty array (no value) or an array holding two string in this format: "YYYY-MM-DD".
Required when input is not read only. | -| `onBlur` | `Function`
[See signature.](#signature-onBlur) | | | Called when input is blurred | -| `onFocus` | `Function`
[See signature.](#signature-onFocus) | | | Called when input is focused | +| `onChange` | `Function`
[See signature.](#signature-onchange) | | | Called when the date range changes, with an event containing either an empty array (no value) or an array holding two string in this format: "YYYY-MM-DD".
Required when input is not read only. | +| `onBlur` | `Function`
[See signature.](#signature-onblur) | | | Called when input is blurred | +| `onFocus` | `Function`
[See signature.](#signature-onfocus) | | | Called when input is focused | | `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). | | `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content | | `placeholder` | `string` | | | Placeholder text for the input | @@ -67,7 +67,7 @@ export default Example; | `title` | `union`
Possible values:
`string , ReactNode` | ✅ | | Title of the label | | `hint` | `union`
Possible values:
`string , ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`. | | `description` | `union`
Possible values:
`string , ReactNode` | | | Provides a description for the title. | -| `onInfoButtonClick` | `Function`
[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | +| `onInfoButtonClick` | `Function`
[See signature.](#signature-oninfobuttonclick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | | `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.
Will only get rendered when `hint` is passed as well. | | `badge` | `ReactNode` | | | Badge to be displayed beside the label.
Might be used to display additional information about the content of the field (E.g verified email) | diff --git a/packages/components/fields/date-time-field/README.md b/packages/components/fields/date-time-field/README.md index 0058f04495..847a33d012 100644 --- a/packages/components/fields/date-time-field/README.md +++ b/packages/components/fields/date-time-field/README.md @@ -50,15 +50,15 @@ export default Example; | `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. | | `horizontalConstraint` | `union`
Possible values:
`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. | | `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.
Unknown errors will be forwarded to `renderError` | -| `renderError` | `Function`
[See signature.](#signature-renderError) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | +| `renderError` | `Function`
[See signature.](#signature-rendererror) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | | `warnings` | `Record` | | | A map of warnings. Warning messages for known warnings are rendered automatically.
Unknown warnings will be forwarded to renderWarning. | -| `renderWarning` | `Function`
[See signature.](#signature-renderWarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
It can also return null to show no warning. | +| `renderWarning` | `Function`
[See signature.](#signature-renderwarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
It can also return null to show no warning. | | `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. | | `touched` | `boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. | | `name` | `string` | | | Used as HTML name of the input component. | | `value` | `string` | ✅ | | Value of the input | -| `onChange` | `Function`
[See signature.](#signature-onChange) | | | Called with an event holding the new value.
Required when input is not read only. Parent should pass it back as `value`- | -| `onBlur` | `Function`
[See signature.](#signature-onBlur) | | | Called when input is blurred | +| `onChange` | `Function`
[See signature.](#signature-onchange) | | | Called with an event holding the new value.
Required when input is not read only. Parent should pass it back as `value`- | +| `onBlur` | `Function`
[See signature.](#signature-onblur) | | | Called when input is blurred | | `onFocus` | `FocusEventHandler` | | | Called when input is focused | | `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). | | `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content | @@ -68,7 +68,7 @@ export default Example; | `title` | `ReactNode` | ✅ | | Title of the label | | `hint` | `ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`. | | `description` | `ReactNode` | | | Provides a description for the title. | -| `onInfoButtonClick` | `Function`
[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | +| `onInfoButtonClick` | `Function`
[See signature.](#signature-oninfobuttonclick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | | `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.
Will only get rendered when `hint` is passed as well. | | `badge` | `ReactNode` | | | Badge to be displayed beside the label.
Might be used to display additional information about the content of the field (E.g verified email) | | `defaultDaySelectionTime` | `string` | | | The time that will be used by default when a user selects a calendar day. It must follow the “HH:mm” pattern (eg: 04:30, 13:25, 23:59) | diff --git a/packages/components/fields/localized-multiline-text-field/README.md b/packages/components/fields/localized-multiline-text-field/README.md index 8d8e4ce2d6..d73e9a1c02 100644 --- a/packages/components/fields/localized-multiline-text-field/README.md +++ b/packages/components/fields/localized-multiline-text-field/README.md @@ -54,9 +54,9 @@ export default Example; | `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. | | `horizontalConstraint` | `union`
Possible values:
`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. | | `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.
Unknown errors will be forwarded to `renderError` | -| `renderError` | `Function`
[See signature.](#signature-renderError) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | +| `renderError` | `Function`
[See signature.](#signature-rendererror) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | | `warnings` | `Record` | | | A map of warnings. Warning messages for known warnings are rendered automatically.
Unknown warnings will be forwarded to renderWarning. | -| `renderWarning` | `Function`
[See signature.](#signature-renderWarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
It can also return null to show no warning. | +| `renderWarning` | `Function`
[See signature.](#signature-renderwarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
It can also return null to show no warning. | | `additionalInfo` | `Record` | | | An object mapping locales to additional messages to be rendered below each input element. Example: { en: 'Some value', es: 'Algún valor', } | | `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. | | `touched` | `boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. | @@ -66,7 +66,7 @@ export default Example; | `onChange` | `ChangeEventHandler` | | | Gets called when any input is changed. Is called with the change event of the changed input. | | `selectedLanguage` | `string` | ✅ | | Specifies which language will be shown in case the `LocalizedTextInput` is collapsed. | | `onBlur` | `FocusEventHandler` | | | Called when input is blurred | -| `onFocus` | `Function`
[See signature.](#signature-onFocus) | | | Called when input is focused | +| `onFocus` | `Function`
[See signature.](#signature-onfocus) | | | Called when input is focused | | `defaultExpandMultilineText` | `boolean` | | | Expands input components holding multiline values instead of collapsing them by default. | | `cacheMeasurements` | `boolean` | | `true` | Use this property to turn off caching input measurements. | | `hideLanguageExpansionControls` | `boolean` | | | Will hide the language expansion controls when set to `true`. All languages will be shown when set to `true`. | @@ -76,11 +76,11 @@ export default Example; | `isDisabled` | `boolean` | | | Disables all input fields. | | `isReadOnly` | `boolean` | | | Disables all input fields and shows them in read-only mode. | | `placeholder` | `Object`
[See signature.](#signature-placeholder) | | | Placeholders for each language. Object of the same shape as `value`. | -| `errorsByLanguage` | `Object`
[See signature.](#signature-errorsByLanguage) | | | Errors for each translation. These are forwarded to the `errors` prop of `LocalizedTextInput`. | +| `errorsByLanguage` | `Object`
[See signature.](#signature-errorsbylanguage) | | | Errors for each translation. These are forwarded to the `errors` prop of `LocalizedTextInput`. | | `title` | `union`
Possible values:
`string , ReactNode` | ✅ | | Title of the label | | `hint` | `union`
Possible values:
`string , ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas description can describe it in more depth. Can also receive a hintIcon. | | `description` | `union`
Possible values:
`string , ReactNode` | | | Provides a description for the title. | -| `onInfoButtonClick` | `Function`
[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed. Info button will only be visible when this prop is passed. | +| `onInfoButtonClick` | `Function`
[See signature.](#signature-oninfobuttonclick) | | | Function called when info button is pressed. Info button will only be visible when this prop is passed. | | `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text. Will only get rendered when hint is passed as well. | | `badge` | `ReactNode` | | | Badge to be displayed beside the label. Might be used to display additional information about the content of the field (E.g verified email) | diff --git a/packages/components/fields/localized-text-field/README.md b/packages/components/fields/localized-text-field/README.md index 3ba6ec7400..79713bd9f9 100644 --- a/packages/components/fields/localized-text-field/README.md +++ b/packages/components/fields/localized-text-field/README.md @@ -54,9 +54,9 @@ export default Example; | `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. | | `horizontalConstraint` | `union`
Possible values:
`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. | | `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.
Unknown errors will be forwarded to `renderError` | -| `renderError` | `Function`
[See signature.](#signature-renderError) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | +| `renderError` | `Function`
[See signature.](#signature-rendererror) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | | `warnings` | `Record` | | | A map of warnings. Warning messages for known warnings are rendered automatically.
Unknown warnings will be forwarded to renderWarning. | -| `renderWarning` | `Function`
[See signature.](#signature-renderWarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
It can also return null to show no warning. | +| `renderWarning` | `Function`
[See signature.](#signature-renderwarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
It can also return null to show no warning. | | `additionalInfo` | `Record` | | | An object mapping locales to additional messages to be rendered below each input element. Example: { en: 'Some value', es: 'Algún valor', } | | `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. | | `touched` | `boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. | @@ -78,7 +78,7 @@ export default Example; | `title` | `ReactNode` | ✅ | | Title of the label | | `hint` | `ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`. | | `description` | `ReactNode` | | | Provides a description for the title. | -| `onInfoButtonClick` | `Function`
[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | +| `onInfoButtonClick` | `Function`
[See signature.](#signature-oninfobuttonclick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | | `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.
Will only get rendered when `hint` is passed as well. | | `badge` | `ReactNode` | | | Badge to be displayed beside the label.
Might be used to display additional information about the content of the field (E.g verified email) | diff --git a/packages/components/fields/money-field/README.md b/packages/components/fields/money-field/README.md index b105dc8221..3e8f24d4be 100644 --- a/packages/components/fields/money-field/README.md +++ b/packages/components/fields/money-field/README.md @@ -64,8 +64,8 @@ export default Example; | `horizontalConstraint` | `union`
Possible values:
`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. | | `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.
Unknown errors will be forwarded to `renderError` | | `warnings` | `Record` | | | A map of warnings. Warning messages for known warnings are rendered automatically.
Unknown warnings will be forwarded to renderWarning. | -| `renderError` | `Function`
[See signature.](#signature-renderError) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | -| `renderWarning` | `Function`
[See signature.](#signature-renderWarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
It can also return null to show no warning. | +| `renderError` | `Function`
[See signature.](#signature-rendererror) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | +| `renderWarning` | `Function`
[See signature.](#signature-renderwarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
It can also return null to show no warning. | | `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. | | `touched` | `Object`
[See signature.](#signature-touched) | | | Indicates whether the `currencyCode` or `amount` fields were touched.
Errors will only be shown when the field was touched. | | `isTouched` | `unknown` | | | | @@ -74,19 +74,19 @@ export default Example; | `value` | `Object`
[See signature.](#signature-value) | ✅ | | Value of the input. Consists of the currency code and an amount. `amount` is a string representing the amount. A dot has to be used as the decimal separator. | | `currencies` | `Array: string[]` | | | List of possible currencies. When not provided or empty, the component renders a label with the value's currency instead of a dropdown. | | `placeholder` | `string` | | | Placeholder text for the amount input | -| `onBlur` | `Function`
[See signature.](#signature-onBlur) | | | Called when input is blurred | -| `onFocus` | `Function`
[See signature.](#signature-onFocus) | | | Called when input is focused | +| `onBlur` | `Function`
[See signature.](#signature-onblur) | | | Called when input is blurred | +| `onFocus` | `Function`
[See signature.](#signature-onfocus) | | | Called when input is focused | | `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). | | `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content | | `isAutofocussed` | `boolean` | | | Focus the input on initial render | -| `onChange` | `Function`
[See signature.](#signature-onChange) | | | Called with the event of the input or dropdown when either the currency or the amount have changed. | +| `onChange` | `Function`
[See signature.](#signature-onchange) | | | Called with the event of the input or dropdown when either the currency or the amount have changed. | | `menuPortalTarget` | `ReactSelectProps['menuPortalTarget']` | | | Dom element to portal the currency select menu to
[Props from React select was used](https://react-select.com/props) | | `menuPortalZIndex` | `number` | | | z-index value for the currency select menu portal
Use in conjunction with `menuPortalTarget` | | `menuShouldBlockScroll` | `ReactSelectProps['menuShouldBlockScroll']` | | | whether the menu should block scroll while open
[Props from React select was used](https://react-select.com/props) | | `title` | `union`
Possible values:
`string , ReactNode` | ✅ | | Title of the label | | `hint` | `union`
Possible values:
`string , ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`. | | `description` | `union`
Possible values:
`string , ReactNode` | | | Provides a description for the title. | -| `onInfoButtonClick` | `Function`
[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | +| `onInfoButtonClick` | `Function`
[See signature.](#signature-oninfobuttonclick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | | `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.
Will only get rendered when `hint` is passed as well. | | `hasHighPrecisionBadge` | `boolean` | | | Shows high precision badge in case current value uses high precision. | | `isCurrencyInputDisabled` | `boolean` | | | Indicates that the currency input cannot be modified. | diff --git a/packages/components/fields/multiline-text-field/README.md b/packages/components/fields/multiline-text-field/README.md index 71f285c893..289341c346 100644 --- a/packages/components/fields/multiline-text-field/README.md +++ b/packages/components/fields/multiline-text-field/README.md @@ -49,8 +49,8 @@ export default Example; | ---------------------------- | -------------------------------------------------------------------------------------------- | :------: | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. | | `horizontalConstraint` | `union`
Possible values:
`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. | -| `renderError` | `Function`
[See signature.](#signature-renderError) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | -| `renderWarning` | `Function`
[See signature.](#signature-renderWarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
It can also return null to show no warning. | +| `renderError` | `Function`
[See signature.](#signature-rendererror) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | +| `renderWarning` | `Function`
[See signature.](#signature-renderwarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
It can also return null to show no warning. | | `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. | | `touched` | `boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. | | `autoComplete` | `string` | | | Used as HTML `autocomplete` property | @@ -69,7 +69,7 @@ export default Example; | `title` | `union`
Possible values:
`string , ReactNode` | | | Title of the label | | `hint` | `union`
Possible values:
`string , ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`. | | `description` | `union`
Possible values:
`string , ReactNode` | | | Provides a description for the title. | -| `onInfoButtonClick` | `Function`
[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | +| `onInfoButtonClick` | `Function`
[See signature.](#signature-oninfobuttonclick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | | `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.
Will only get rendered when `hint` is passed as well. | | `badge` | `string` | | | Badge to be displayed beside the label.
Might be used to display additional information about the content of the field (E.g verified email) | diff --git a/packages/components/fields/number-field/README.md b/packages/components/fields/number-field/README.md index bc8937bb36..fcea4280dc 100644 --- a/packages/components/fields/number-field/README.md +++ b/packages/components/fields/number-field/README.md @@ -51,8 +51,8 @@ export default Example; | `horizontalConstraint` | `union`
Possible values:
`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. | | `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.
Unknown errors will be forwarded to `renderError` | | `warnings` | `Record` | | | A map of warnings. Warning messages for known warnings are rendered automatically.
Unknown warnings will be forwarded to renderWarning. | -| `renderError` | `Function`
[See signature.](#signature-renderError) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | -| `renderWarning` | `Function`
[See signature.](#signature-renderWarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
It can also return null to show no warning. | +| `renderError` | `Function`
[See signature.](#signature-rendererror) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | +| `renderWarning` | `Function`
[See signature.](#signature-renderwarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
It can also return null to show no warning. | | `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. | | `touched` | `boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. | | `name` | `string` | | | Used as HTML name of the input component. property | @@ -71,7 +71,7 @@ export default Example; | `title` | `union`
Possible values:
`string , ReactNode` | ✅ | | Title of the label | | `hint` | `union`
Possible values:
`string , ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`. | | `description` | `union`
Possible values:
`string , ReactNode` | | | Provides a description for the title. | -| `onInfoButtonClick` | `Function`
[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | +| `onInfoButtonClick` | `Function`
[See signature.](#signature-oninfobuttonclick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | | `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.
Will only get rendered when `hint` is passed as well. | | `badge` | `ReactNode` | | | Badge to be displayed beside the label.
Might be used to display additional information about the content of the field (E.g verified email) | diff --git a/packages/components/fields/password-field/README.md b/packages/components/fields/password-field/README.md index cbc0387e2e..0393debe08 100644 --- a/packages/components/fields/password-field/README.md +++ b/packages/components/fields/password-field/README.md @@ -51,8 +51,8 @@ export default Example; | `horizontalConstraint` | `union`
Possible values:
`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. | | `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.
Unknown errors will be forwarded to `renderError` | | `warnings` | `Record` | | | A map of warnings. Warning messages for known warnings are rendered automatically.
Unknown warnings will be forwarded to renderWarning. | -| `renderError` | `Function`
[See signature.](#signature-renderError) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | -| `renderWarning` | `Function`
[See signature.](#signature-renderWarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
It can also return null to show no warning. | +| `renderError` | `Function`
[See signature.](#signature-rendererror) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | +| `renderWarning` | `Function`
[See signature.](#signature-renderwarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
It can also return null to show no warning. | | `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. | | `touched` | `boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. | | `name` | `string` | | | Used as HTML name of the input component. property | @@ -68,7 +68,7 @@ export default Example; | `title` | `union`
Possible values:
`string , ReactNode` | ✅ | | Title of the label | | `hint` | `union`
Possible values:
`string , ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`. | | `description` | `union`
Possible values:
`string , ReactNode` | | | Provides a description for the title. | -| `onInfoButtonClick` | `Function`
[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | +| `onInfoButtonClick` | `Function`
[See signature.](#signature-oninfobuttonclick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | | `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.
Will only get rendered when `hint` is passed as well. | | `badge` | `ReactNode` | | | Badge to be displayed beside the label.
Might be used to display additional information about the content of the field (E.g verified email) | | `renderShowHideButton` | `boolean` | | `true` | Determines whether to render the "Show/Hide" button for the password field. | diff --git a/packages/components/fields/radio-field/README.md b/packages/components/fields/radio-field/README.md index 73203b96da..2074f6c214 100644 --- a/packages/components/fields/radio-field/README.md +++ b/packages/components/fields/radio-field/README.md @@ -56,8 +56,8 @@ export default Example; | `horizontalConstraint` | `union`
Possible values:
`, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. | | `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically. Unknown errors will be forwarded to `renderError`. | | `warnings` | `Record` | | | A map of warnings. Warning messages for known warnings are rendered automatically.
Unknown warnings will be forwarded to renderWarning. | -| `renderError` | `Function`
[See signature.](#signature-renderError) | | | Called with custom errors.
This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | -| `renderWarning` | `Function`
[See signature.](#signature-renderWarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
It can also return null to show no warning. | +| `renderError` | `Function`
[See signature.](#signature-rendererror) | | | Called with custom errors.
This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | +| `renderWarning` | `Function`
[See signature.](#signature-renderwarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
It can also return null to show no warning. | | `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. | | `touched` | `boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. | | `name` | `string` | | | Used as HTML name of the input component. | @@ -73,7 +73,7 @@ export default Example; | `title` | `union`
Possible values:
`string , ReactNode` | ✅ | | Title of the label | | `hint` | `union`
Possible values:
`string , ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas description can describe it in more depth.
Can also receive a `hintIcon`. | | `description` | `union`
Possible values:
`string , ReactNode` | | | Provides a description for the title. | -| `onInfoButtonClick` | `Function`
[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | +| `onInfoButtonClick` | `Function`
[See signature.](#signature-oninfobuttonclick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | | `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.
Will only get rendered when `hint` is passed as well. | | `badge` | `ReactNode` | | | Badge to be displayed beside the label.
Might be used to display additional information about the content of the field (E.g verified email) | diff --git a/packages/components/fields/search-select-field/README.md b/packages/components/fields/search-select-field/README.md index fbf2ef8ee8..1932d6531a 100644 --- a/packages/components/fields/search-select-field/README.md +++ b/packages/components/fields/search-select-field/README.md @@ -112,8 +112,8 @@ export default Example; | `menuPortalZIndex` | `number` | | | z-index value for the menu portal
Use in conjunction with `menuPortalTarget` | | `menuShouldBlockScroll` | `boolean` | | | whether the menu should block scroll while open | | `showOptionGroupDivider` | `boolean` | | | Determines if option groups will be separated by a divider | -| `onBlur` | `Function`
[See signature.](#signature-onBlur) | | | Handle blur events on the control | -| `onChange` | `Function`
[See signature.](#signature-onChange) | | | Called with a fake event when value changes.
The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`. | +| `onBlur` | `Function`
[See signature.](#signature-onblur) | | | Handle blur events on the control | +| `onChange` | `Function`
[See signature.](#signature-onchange) | | | Called with a fake event when value changes.
The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`. | | `onFocus` | `AsyncProps['onFocus']` | | | Handle focus events on the control
[Props from React select was used](https://react-select.com/props) | | `onInputChange` | `AsyncProps['onInputChange']` | | | Handle change events on the input
[Props from React select was used](https://react-select.com/props) | | `tabSelectsValue` | `AsyncProps['tabSelectsValue']` | | | Select the currently focused option when the user presses tab
[Props from React select was used](https://react-select.com/props) | @@ -123,15 +123,15 @@ export default Example; | `filterOption` | `AsyncProps['filterOption']` | | | Custom method to filter whether an option should be displayed in the menu
[Props from React select was used](https://react-select.com/props) | | `optionType` | `union`
Possible values:
`'single-property' , 'double-property' , 'multiple-properties'` | | | The style of the an option in the dropdown menu. It could be single lined option or an option with more and custom info | | `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.
Unknown errors will be forwarded to `renderError` | -| `renderError` | `Function`
[See signature.](#signature-renderError) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | +| `renderError` | `Function`
[See signature.](#signature-rendererror) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | | `warnings` | `Record` | | | A map of warnings. Warning messages for known warnings are rendered automatically.
Unknown warnings will be forwarded to renderWarning. | -| `renderWarning` | `Function`
[See signature.](#signature-renderWarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
It can also return null to show no warning. | +| `renderWarning` | `Function`
[See signature.](#signature-renderwarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
It can also return null to show no warning. | | `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. | | `touched` | `union`
Possible values:
`boolean[] , boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. | | `title` | `ReactNode` | ✅ | | Title of the label | | `hint` | `ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`. | | `description` | `ReactNode` | | | Provides a description for the title. | -| `onInfoButtonClick` | `Function`
[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | +| `onInfoButtonClick` | `Function`
[See signature.](#signature-oninfobuttonclick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | | `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.
Will only get rendered when `hint` is passed as well. | | `badge` | `ReactNode` | | | Badge to be displayed beside the label.
Might be used to display additional information about the content of the field (E.g verified email) | | `iconLeft` | `ReactNode` | | | Icon to display on the left of the placeholder text and selected value. Has no effect when `isMulti` is enabled. | diff --git a/packages/components/fields/select-field/README.md b/packages/components/fields/select-field/README.md index f556abaaf3..07fe2f9b32 100644 --- a/packages/components/fields/select-field/README.md +++ b/packages/components/fields/select-field/README.md @@ -54,9 +54,9 @@ export default Example; | `id` | `string` | | | Used as HTML id property. An id is generated automatically when not provided. | | `horizontalConstraint` | `union`
Possible values:
`, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | | | `errors` | `Object`
[See signature.](#signature-errors) | | | A map of errors. Error messages for known errors are rendered automatically.
Unknown errors will be forwarded to renderError. | -| `renderError` | `Function`
[See signature.](#signature-renderError) | | | This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error.
| +| `renderError` | `Function`
[See signature.](#signature-rendererror) | | | This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error.
| | `warnings` | `Record` | | | A map of warnings. Warning messages for known warnings are rendered automatically.
Unknown warnings will be forwarded to renderWarning. | -| `renderWarning` | `Function`
[See signature.](#signature-renderWarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
It can also return null to show no warning. | +| `renderWarning` | `Function`
[See signature.](#signature-renderwarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
It can also return null to show no warning. | | `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. | | `touched` | `union`
Possible values:
`boolean[] , boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. | | `appearance` | `union`
Possible values:
`'default' , 'quiet'` | | | Indicates the appearance of the input. Quiet appearance is meant to be used with the `horizontalConstraint="auto"`. | @@ -81,8 +81,8 @@ export default Example; | `menuShouldBlockScroll` | `boolean` | | | whether the menu should block scroll while open | | `name` | `string` | | | Name of the HTML Input (optional - without this, no input will be rendered) | | `noOptionsMessage` | `ReactSelectProps['noOptionsMessage']` | | | Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with { inputValue: String }.
`inputValue` will be an empty string when no search text is present.
[Props from React select was used](https://react-select.com/props) | -| `onBlur` | `Function`
[See signature.](#signature-onBlur) | | | Handle blur events on the control | -| `onChange` | `Function`
[See signature.](#signature-onChange) | | | Called with a fake event when value changes. The event's target.name will be the name supplied in props. The event's target.value will hold the value.
The value will be the selected option, or an array of options in case isMulti is true. | +| `onBlur` | `Function`
[See signature.](#signature-onblur) | | | Handle blur events on the control | +| `onChange` | `Function`
[See signature.](#signature-onchange) | | | Called with a fake event when value changes. The event's target.name will be the name supplied in props. The event's target.value will hold the value.
The value will be the selected option, or an array of options in case isMulti is true. | | `onFocus` | `ReactSelectProps['onFocus']` | | | Handle focus events on the control
[Props from React select was used](https://react-select.com/props) | | `onInputChange` | `ReactSelectProps['onInputChange']` | | | Handle change events on the input
[Props from React select was used](https://react-select.com/props) | | `options` | `union`
Possible values:
`TOption[] , TOptionObject[]` | | | Array of options that populate the select menu | @@ -94,7 +94,7 @@ export default Example; | `title` | `ReactNode` | ✅ | | Title of the label | | `hint` | `ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas description can describe it in more depth.
Can also receive a hintIcon. | | `description` | `ReactNode` | | | Provides a description for the title. | -| `onInfoButtonClick` | `Function`
[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | +| `onInfoButtonClick` | `Function`
[See signature.](#signature-oninfobuttonclick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | | `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text. Will only get rendered when hint is passed as well. | | `badge` | `ReactNode` | | | Badge to be displayed beside the label. Might be used to display additional information about the content of the field (E.g verified email) | | `hasWarning` | `boolean` | | | Control to indicate on the input if there are selected values that are potentially invalid @deprecated Please use the `warnings` prop instead so users know the reason why the field is in warning state. | diff --git a/packages/components/fields/text-field/README.md b/packages/components/fields/text-field/README.md index b14ad9c03c..747c533604 100644 --- a/packages/components/fields/text-field/README.md +++ b/packages/components/fields/text-field/README.md @@ -47,8 +47,8 @@ export default Example; | `horizontalConstraint` | `union`
Possible values:
`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. | | `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.
Unknown errors will be forwarded to renderError. | | `warnings` | `Record` | | | A map of warnings. Warning messages for known warnings are rendered automatically.
Unknown warnings will be forwarded to renderWarning. | -| `renderError` | `Function`
[See signature.](#signature-renderError) | | | This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | -| `renderWarning` | `Function`
[See signature.](#signature-renderWarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
It can also return null to show no warning. | +| `renderError` | `Function`
[See signature.](#signature-rendererror) | | | This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error. | +| `renderWarning` | `Function`
[See signature.](#signature-renderwarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
It can also return null to show no warning. | | `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. | | `touched` | `boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. | | `autoComplete` | `string` | | | Used as HTML autocomplete property | @@ -65,7 +65,7 @@ export default Example; | `title` | `union`
Possible values:
`string , ReactNode` | ✅ | | Title of the label | | `hint` | `union`
Possible values:
`string , ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas description can describe it in more depth. Can also receive a hintIcon. | | `description` | `union`
Possible values:
`string , ReactNode` | | | Provides a description for the title. | -| `onInfoButtonClick` | `Function`
[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed. Info button will only be visible when this prop is passed. | +| `onInfoButtonClick` | `Function`
[See signature.](#signature-oninfobuttonclick) | | | Function called when info button is pressed. Info button will only be visible when this prop is passed. | | `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text. Will only get rendered when hint is passed as well. | | `badge` | `ReactNode` | | | Badge to be displayed beside the label. Might be used to display additional information about the content of the field (E.g verified email) | | `maxLength` | `number` | | | Maximum number of characters allowed in the input. if this prop is used, It is recommended to inform the user about this limit in the InputField description, or otherwise | diff --git a/packages/components/fields/time-field/README.md b/packages/components/fields/time-field/README.md index ad6d139ab9..26a0901e20 100644 --- a/packages/components/fields/time-field/README.md +++ b/packages/components/fields/time-field/README.md @@ -51,8 +51,8 @@ export default Example; | `horizontalConstraint` | `union`
Possible values:
`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. | | `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.
Unknown errors will be forwarded to renderError. | | `warnings` | `Record` | | | A map of warnings. Warning messages for known warnings are rendered automatically.
Unknown warnings will be forwarded to renderWarning. | -| `renderError` | `Function`
[See signature.](#signature-renderError) | | | Called with custom errors, as renderError(key, error). This function can return a message which will be wrapped in an ErrorMessage.
It can also return null to show no error. | -| `renderWarning` | `Function`
[See signature.](#signature-renderWarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
It can also return null to show no warning. | +| `renderError` | `Function`
[See signature.](#signature-rendererror) | | | Called with custom errors, as renderError(key, error). This function can return a message which will be wrapped in an ErrorMessage.
It can also return null to show no error. | +| `renderWarning` | `Function`
[See signature.](#signature-renderwarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
It can also return null to show no warning. | | `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. | | `touched` | `boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. | | `name` | `string` | | | Used as HTML name of the input component. | @@ -69,7 +69,7 @@ export default Example; | `title` | `ReactNode` | ✅ | | Title of the label | | `hint` | `ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas description can describe it in more depth. Can also receive a hintIcon. | | `description` | `ReactNode` | | | Provides a description for the title. | -| `onInfoButtonClick` | `Function`
[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | +| `onInfoButtonClick` | `Function`
[See signature.](#signature-oninfobuttonclick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | | `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text. Will only get rendered when hint is passed as well. | | `badge` | `ReactNode` | | | Badge to be displayed beside the label.
Might be used to display additional information about the content of the field (E.g verified email) | diff --git a/packages/components/filters/README.md b/packages/components/filters/README.md index 0cc364e81e..7656fb5c41 100644 --- a/packages/components/filters/README.md +++ b/packages/components/filters/README.md @@ -115,11 +115,11 @@ export default FiltersExample; | Props | Type | Required | Default | Description | | ----------------------- | ---------------------------------------------------------------------------------- | :------: | ------- | ------------------------------------------------------------------------------------------------------------------------ | -| `appliedFilters` | `Array: TAppliedFilter[]`
[See signature.](#signature-appliedFilters) | ✅ | | array of applied filters, each containing a unique key and an array of values. | +| `appliedFilters` | `Array: TAppliedFilter[]`
[See signature.](#signature-appliedfilters) | ✅ | | array of applied filters, each containing a unique key and an array of values. | | `filters` | `Array: TFilterConfiguration[]`
[See signature.](#signature-filters) | ✅ | | configuration for the available filters. | -| `filterGroups` | `Array: TFilterGroupConfiguration[]`
[See signature.](#signature-filterGroups) | | | optional configuration for filter groups. | -| `onClearAllRequest` | `Function`
[See signature.](#signature-onClearAllRequest) | ✅ | | controls the `clear all` (added filters) button from the menu list, meant to clear the parent application's filter state | -| `onAddFilterRequest` | `Function`
[See signature.](#signature-onAddFilterRequest) | | | optional callback when the add filter button is clicked | +| `filterGroups` | `Array: TFilterGroupConfiguration[]`
[See signature.](#signature-filtergroups) | | | optional configuration for filter groups. | +| `onClearAllRequest` | `Function`
[See signature.](#signature-onclearallrequest) | ✅ | | controls the `clear all` (added filters) button from the menu list, meant to clear the parent application's filter state | +| `onAddFilterRequest` | `Function`
[See signature.](#signature-onaddfilterrequest) | | | optional callback when the add filter button is clicked | | `renderSearchComponent` | `ReactNode` | ✅ | | function to render a search input, selectable from applicable UI Kit components. | | `defaultOpen` | `boolean` | | `false` | controls whether the filters list is initially open | diff --git a/packages/components/inputs/async-creatable-select-input/README.md b/packages/components/inputs/async-creatable-select-input/README.md index 70a37c55ae..4221a0269e 100644 --- a/packages/components/inputs/async-creatable-select-input/README.md +++ b/packages/components/inputs/async-creatable-select-input/README.md @@ -82,8 +82,8 @@ export default Example; | `closeMenuOnSelect` | `AsyncCreatableProps['closeMenuOnSelect']` | | | Whether the menu should close after a value is selected. Defaults to `true`.
[Props from React select was used](https://react-select.com/props) | | `name` | `AsyncCreatableProps['name']` | | | Name of the HTML Input (optional - without this, no input will be rendered)
[Props from React select was used](https://react-select.com/props) | | `noOptionsMessage` | `AsyncCreatableProps['noOptionsMessage']` | | | Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present.
[Props from React select was used](https://react-select.com/props) | -| `onBlur` | `Function`
[See signature.](#signature-onBlur) | | | Handle blur events on the control | -| `onChange` | `Function`
[See signature.](#signature-onChange) | | | Called with a fake event when value changes. The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`. | +| `onBlur` | `Function`
[See signature.](#signature-onblur) | | | Handle blur events on the control | +| `onChange` | `Function`
[See signature.](#signature-onchange) | | | Called with a fake event when value changes. The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`. | | `onFocus` | `AsyncCreatableProps['onFocus']` | | | Handle focus events on the control
[Props from React select was used](https://react-select.com/props) | | `onInputChange` | `AsyncCreatableProps['onInputChange']` | | | Handle change events on the input
[Props from React select was used](https://react-select.com/props) | | `placeholder` | `AsyncCreatableProps['placeholder']` | | | Placeholder text for the select value
[Props from React select was used](https://react-select.com/props) | diff --git a/packages/components/inputs/async-select-input/README.md b/packages/components/inputs/async-select-input/README.md index fd8b1d7509..72993f5eaf 100644 --- a/packages/components/inputs/async-select-input/README.md +++ b/packages/components/inputs/async-select-input/README.md @@ -82,8 +82,8 @@ export default Example; | `closeMenuOnSelect` | `AsyncProps['closeMenuOnSelect']` | | | Whether the menu should close after a value is selected. Defaults to `true`.
[Props from React select was used](https://react-select.com/props) | | `name` | `AsyncProps['name']` | | | Name of the HTML Input (optional - without this, no input will be rendered)
[Props from React select was used](https://react-select.com/props) | | `noOptionsMessage` | `AsyncProps['noOptionsMessage']` | | | Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present.
[Props from React select was used](https://react-select.com/props) | -| `onBlur` | `Function`
[See signature.](#signature-onBlur) | | | Handle blur events on the control | -| `onChange` | `Function`
[See signature.](#signature-onChange) | | | Called with a fake event when value changes. The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`. | +| `onBlur` | `Function`
[See signature.](#signature-onblur) | | | Handle blur events on the control | +| `onChange` | `Function`
[See signature.](#signature-onchange) | | | Called with a fake event when value changes. The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`. | | `onFocus` | `AsyncProps['onFocus']` | | | Handle focus events on the control
[Props from React select was used](https://react-select.com/props) | | `onInputChange` | `AsyncProps['onInputChange']` | | | Handle change events on the input
[Props from React select was used](https://react-select.com/props) | | `placeholder` | `AsyncProps['placeholder']` | | | Placeholder text for the select value
[Props from React select was used](https://react-select.com/props) | diff --git a/packages/components/inputs/creatable-select-input/README.md b/packages/components/inputs/creatable-select-input/README.md index 817b564ae0..dcde4a5c6a 100644 --- a/packages/components/inputs/creatable-select-input/README.md +++ b/packages/components/inputs/creatable-select-input/README.md @@ -82,8 +82,8 @@ export default Example; | `closeMenuOnSelect` | `CreatableProps['closeMenuOnSelect']` | | | Whether the menu should close after a value is selected. Defaults to `true`.
[Props from React select was used](https://react-select.com/props#creatable-props) | | `name` | `CreatableProps['name']` | | | Name of the HTML Input (optional - without this, no input will be rendered)
[Props from React select was used](https://react-select.com/props#creatable-props) | | `noOptionsMessage` | `CreatableProps['noOptionsMessage']` | | | Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present.
[Props from React select was used](https://react-select.com/props#creatable-props) | -| `onBlur` | `Function`
[See signature.](#signature-onBlur) | | | Handle blur events on the control | -| `onChange` | `Function`
[See signature.](#signature-onChange) | | | Called with a fake event when value changes. The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`. | +| `onBlur` | `Function`
[See signature.](#signature-onblur) | | | Handle blur events on the control | +| `onChange` | `Function`
[See signature.](#signature-onchange) | | | Called with a fake event when value changes. The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`. | | `onFocus` | `CreatableProps['onFocus']` | | | Handle focus events on the control
[Props from React select was used](https://react-select.com/props#creatable-props) | | `onInputChange` | `CreatableProps['onInputChange']` | | | Handle change events on the input
[Props from React select was used](https://react-select.com/props#creatable-props) | | `options` | `union`
Possible values:
`TValue[] , { options: TValue[] }[]` | | | Array of options that populate the select menu | diff --git a/packages/components/inputs/date-input/README.md b/packages/components/inputs/date-input/README.md index a014772725..3186e0894b 100644 --- a/packages/components/inputs/date-input/README.md +++ b/packages/components/inputs/date-input/README.md @@ -49,9 +49,9 @@ export default Example; | ---------------------- | -------------------------------------------------------------------------------------------- | :------: | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | `horizontalConstraint` | `union`
Possible values:
`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | | Horizontal size limit of the input field. | | `value` | `string` | ✅ | | The selected date, must either be an empty string or a date formatted as "YYYY-MM-DD". | -| `onChange` | `Function`
[See signature.](#signature-onChange) | | | Called when the date changes. Called with an event containing either an empty string (no value) or a string in this format: "YYYY-MM-DD". | +| `onChange` | `Function`
[See signature.](#signature-onchange) | | | Called when the date changes. Called with an event containing either an empty string (no value) or a string in this format: "YYYY-MM-DD". | | `onFocus` | `FocusEventHandler` | | | Called when the date input gains focus. | -| `onBlur` | `Function`
[See signature.](#signature-onBlur) | | | Called when the date input loses focus. | +| `onBlur` | `Function`
[See signature.](#signature-onblur) | | | Called when the date input loses focus. | | `id` | `string` | | | Used as the HTML `id` attribute. | | `aria-invalid` | `boolean` | | | Indicate if the value entered in the input is invalid. | | `aria-errormessage` | `string` | | | HTML ID of an element containing an error message related to the input. | diff --git a/packages/components/inputs/date-range-input/README.md b/packages/components/inputs/date-range-input/README.md index 52a09aa41b..e087bf8017 100644 --- a/packages/components/inputs/date-range-input/README.md +++ b/packages/components/inputs/date-range-input/README.md @@ -51,10 +51,10 @@ export default Example; | `value` | `Array: MomentInput[]` | ✅ | | The selected date range, must either be an empty array or an array of two strings holding dates formatted as "YYYY-MM-DD". | | `aria-invalid` | `boolean` | | | Indicate if the value entered in the input is invalid. | | `aria-errormessage` | `string` | | | HTML ID of an element containing an error message related to the input. | -| `onChange` | `Function`
[See signature.](#signature-onChange) | | | Called when the date range changes. Called with an event containing either an empty array (no value) or an array holding two string in this format: "YYYY-MM-DD". | +| `onChange` | `Function`
[See signature.](#signature-onchange) | | | Called when the date range changes. Called with an event containing either an empty array (no value) or an array holding two string in this format: "YYYY-MM-DD". | | `isClearable` | `boolean` | | `true` | Allows the range to be cleared | -| `onFocus` | `Function`
[See signature.](#signature-onFocus) | | | Called when the date input gains focus. | -| `onBlur` | `Function`
[See signature.](#signature-onBlur) | | | Called when the date input loses focus. | +| `onFocus` | `Function`
[See signature.](#signature-onfocus) | | | Called when the date input gains focus. | +| `onBlur` | `Function`
[See signature.](#signature-onblur) | | | Called when the date input loses focus. | | `id` | `string` | | | Used as the HTML `id` attribute. | | `name` | `string` | | | Used as the HTML `name` attribute. | | `placeholder` | `string` | | | Placeholder value to show in the input field | diff --git a/packages/components/inputs/date-time-input/README.md b/packages/components/inputs/date-time-input/README.md index fa4ecc8a65..7f4dd2c17d 100644 --- a/packages/components/inputs/date-time-input/README.md +++ b/packages/components/inputs/date-time-input/README.md @@ -54,9 +54,9 @@ export default Example; | `aria-errormessage` | `string` | | | HTML ID of an element containing an error message related to the input. | | `horizontalConstraint` | `union`
Possible values:
`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | | Horizontal size limit of the input field. | | `value` | `string` | ✅ | | The selected date, must either be an empty string or a date formatted in ISO 8601 (e.g. "2018-10-04T09:00:00.000Z"). | -| `onChange` | `Function`
[See signature.](#signature-onChange) | | | Called when the date changes. Called with an event containing an empty string (no value) or a string in this format: "YYYY-MM-DD". | +| `onChange` | `Function`
[See signature.](#signature-onchange) | | | Called when the date changes. Called with an event containing an empty string (no value) or a string in this format: "YYYY-MM-DD". | | `onFocus` | `FocusEventHandler` | | | Called when the date input gains focus. | -| `onBlur` | `Function`
[See signature.](#signature-onBlur) | | | Called when the date input loses focus. | +| `onBlur` | `Function`
[See signature.](#signature-onblur) | | | Called when the date input loses focus. | | `timeZone` | `string` | ✅ | | Specifies the time zone in which the calendar and selected values are shown. It also influences how entered dates and times are parsed. Get list of timezone with `moment.tz.names()` [See moment docs](https://momentjs.com/timezone/docs/#/data-loading/getting-zone-names/) | | `id` | `string` | | | Used as the HTML `id` attribute. | | `name` | `string` | | | Used as the HTML `name` attribute. | diff --git a/packages/components/inputs/localized-money-input/README.md b/packages/components/inputs/localized-money-input/README.md index d9c3b08b27..163a98f394 100644 --- a/packages/components/inputs/localized-money-input/README.md +++ b/packages/components/inputs/localized-money-input/README.md @@ -56,10 +56,10 @@ export default Example; | `id` | `string` | | | Used as HTML id property. | | `name` | `string` | | | The prefix used to create a HTML `name` property for the amount input field (`${name}.amount`). | | `value` | `Record` | ✅ | | value of possible currency
the input doesn't accept a "currencies" prop, instead all possible currencies have to exist (with empty or filled strings) on the value: { EUR: {amount: '12.00', currencyCode: 'EUR'}, USD: {amount: '', currencyCode: 'USD'}} | -| `onChange` | `Function`
[See signature.](#signature-onChange) | | | Called with the event of the input. | +| `onChange` | `Function`
[See signature.](#signature-onchange) | | | Called with the event of the input. | | `selectedCurrency` | `string` | ✅ | | the currently selected currency | -| `onBlur` | `Function`
[See signature.](#signature-onBlur) | | | Called when input is blurred | -| `onFocus` | `Function`
[See signature.](#signature-onFocus) | | | Called when input is focused | +| `onBlur` | `Function`
[See signature.](#signature-onblur) | | | Called when input is blurred | +| `onFocus` | `Function`
[See signature.](#signature-onfocus) | | | Called when input is focused | | `hideCurrencyExpansionControls` | `boolean` | | | Will hide the currency expansion controls when set to `true`. All currencies will be shown when set to `true`. | | `defaultExpandCurrencies` | `boolean` | | | Controls whether one or all currencirs are visible by default | | `isCondensed` | `boolean` | | | Use this property to reduce the paddings of the component for a ui compact variant | diff --git a/packages/components/inputs/localized-multiline-text-input/README.md b/packages/components/inputs/localized-multiline-text-input/README.md index 3d17efe4a6..ea36e0981b 100644 --- a/packages/components/inputs/localized-multiline-text-input/README.md +++ b/packages/components/inputs/localized-multiline-text-input/README.md @@ -59,7 +59,7 @@ export default Example; | `onChange` | `ChangeEventHandler` | | | Gets called when any input is changed. Is called with the change event of the changed input. | | `selectedLanguage` | `string` | ✅ | | Specifies which language will be shown in case the `LocalizedTextInput` is collapsed. | | `onBlur` | `FocusEventHandler` | | | Called when input is blurred | -| `onFocus` | `Function`
[See signature.](#signature-onFocus) | | | Called when input is focused | +| `onFocus` | `Function`
[See signature.](#signature-onfocus) | | | Called when input is focused | | `defaultExpandMultilineText` | `boolean` | | | Expands input components holding multiline values instead of collpasing them by default. | | `cacheMeasurements` | `boolean` | | `true` | Use this property to turn off caching input measurements. | | `hideLanguageExpansionControls` | `boolean` | | | Will hide the language expansion controls when set to `true`. All languages will be shown when set to `true`. | diff --git a/packages/components/inputs/localized-rich-text-input/README.md b/packages/components/inputs/localized-rich-text-input/README.md index 958e14ba14..bae0280a30 100644 --- a/packages/components/inputs/localized-rich-text-input/README.md +++ b/packages/components/inputs/localized-rich-text-input/README.md @@ -54,7 +54,7 @@ export default Example; | `id` | `string` | | | Used as prefix of HTML `id` property. Each input field id will have the language as a suffix (`${idPrefix}.${lang}`), e.g. \`foo.en | | `name` | `string` | | | Used as HTML `name` property for each input field. Each input field name will have the language as a suffix (`${namePrefix}.${lang}`), e.g. `foo.en` | | `value` | `Record` | ✅ | | Values to use. Keyed by language, the values are the actual values, e.g. \`{ en: '

Horse

', de: '

Pferd

' } | -| `onChange` | `Function`
[See signature.](#signature-onChange) | | | Gets called when any input is changed. Is called with the change event of the changed input. | +| `onChange` | `Function`
[See signature.](#signature-onchange) | | | Gets called when any input is changed. Is called with the change event of the changed input. | | `selectedLanguage` | `string` | ✅ | | Specifies which language will be shown in case the `LocalizedRichTextInput` is collapsed. | | `onBlur` | `FocusEventHandler` | | | Called when any field is blurred. Is called with the `event` of that field. | | `onFocus` | `FocusEventHandler` | | | Called when any field is focussed. Is called with the `event` of that field. | @@ -71,7 +71,7 @@ export default Example; | `warnings` | `Record` | | | Used to show warnings underneath the inputs of specific languages. Pass an object whose key is a language and whose value is the warning to show for that key. | | `additionalInfo` | `Record` | | | An object mapping locales to additional messages to be rendered below each input element. Example: { en: 'Some value', es: 'Algún valor', } | | `showExpandIcon` | `boolean` | | `false` | Shows an `expand` icon in the toolbar | -| `onClickExpand` | `Function`
[See signature.](#signature-onClickExpand) | | | Called when the `expand` button is clicked | +| `onClickExpand` | `Function`
[See signature.](#signature-onclickexpand) | | | Called when the `expand` button is clicked | ## Signatures diff --git a/packages/components/inputs/money-input/README.md b/packages/components/inputs/money-input/README.md index ba72d94e77..d0cb7549c0 100644 --- a/packages/components/inputs/money-input/README.md +++ b/packages/components/inputs/money-input/README.md @@ -59,13 +59,13 @@ export default Example; | `value` | `Object`
[See signature.](#signature-value) | ✅ | | Value of the input. Consists of the currency code and an amount. `amount` is a string representing the amount. A dot has to be used as the decimal separator. | | `currencies` | `Array: string[]` | | `[]` | List of possible currencies. When not provided or empty, the component renders a label with the value's currency instead of a dropdown. | | `placeholder` | `string` | | | Placeholder text for the input | -| `onBlur` | `Function`
[See signature.](#signature-onBlur) | | | Called when input is blurred | -| `onFocus` | `Function`
[See signature.](#signature-onFocus) | | | Called when input is focused | +| `onBlur` | `Function`
[See signature.](#signature-onblur) | | | Called when input is blurred | +| `onFocus` | `Function`
[See signature.](#signature-onfocus) | | | Called when input is focused | | `isCondensed` | `boolean` | | | Use this property to reduce the paddings of the component for a ui compact variant | | `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). | | `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content | | `isAutofocussed` | `boolean` | | | Focus the input on initial render | -| `onChange` | `Function`
[See signature.](#signature-onChange) | | | Called with the event of the input or dropdown when either the currency or the amount have changed. | +| `onChange` | `Function`
[See signature.](#signature-onchange) | | | Called with the event of the input or dropdown when either the currency or the amount have changed. | | `menuPortalTarget` | `ReactSelectProps['menuPortalTarget']` | | | Dom element to portal the currency select menu to
[Props from React select was used](https://react-select.com/props) | | `menuPortalZIndex` | `number` | | `1` | z-index value for the currency select menu portal
Use in conjunction with `menuPortalTarget` | | `menuShouldBlockScroll` | `ReactSelectProps['menuShouldBlockScroll']` | | | whether the menu should block scroll while open
[Props from React select was used](https://react-select.com/props) | diff --git a/packages/components/inputs/rich-text-input/README.md b/packages/components/inputs/rich-text-input/README.md index 693da00d21..12bedd01e2 100644 --- a/packages/components/inputs/rich-text-input/README.md +++ b/packages/components/inputs/rich-text-input/README.md @@ -70,12 +70,12 @@ export default Example; | `isDisabled` | `boolean` | | | Disables the rich text input | | `isReadOnly` | `boolean` | | | Indicates that the rich text input is displaying read-only content | | `horizontalConstraint` | `union`
Possible values:
`, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | | Horizontal size limit of the input fields | -| `onChange` | `Function`
[See signature.](#signature-onChange) | | | Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value. | +| `onChange` | `Function`
[See signature.](#signature-onchange) | | | Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value. | | `onFocus` | `FocusEventHandler` | | | Called when input is focused | | `onBlur` | `FocusEventHandler` | | | Called when input is blurred | | `value` | `string` | | | Value of the input component. | | `showExpandIcon` | `boolean` | ✅ | | Indicates whether the expand icon should be visible | -| `onClickExpand` | `Function`
[See signature.](#signature-onClickExpand) | | | Called when the `expand` button is clicked | +| `onClickExpand` | `Function`
[See signature.](#signature-onclickexpand) | | | Called when the `expand` button is clicked | ## Signatures diff --git a/packages/components/inputs/search-select-input/README.md b/packages/components/inputs/search-select-input/README.md index eb1310dbea..6c459ca2bc 100644 --- a/packages/components/inputs/search-select-input/README.md +++ b/packages/components/inputs/search-select-input/README.md @@ -94,8 +94,8 @@ export default Example; | `closeMenuOnSelect` | `AsyncProps['closeMenuOnSelect']` | | | Whether the menu should close after a value is selected. Defaults to `true`.
[Props from React select was used](https://react-select.com/props) | | `showOptionGroupDivider` | `boolean` | | | Determines if option groups will be separated by a divider | | `defaultOptions` | `AsyncProps['defaultOptions']` | | | The default set of options to show before the user starts searching. When set to `true`, the results for `loadOptions('')` will be autoloaded.
[Props from React select was used](https://react-select.com/props) | -| `onBlur` | `Function`
[See signature.](#signature-onBlur) | | | Handle blur events on the control | -| `onChange` | `Function`
[See signature.](#signature-onChange) | | | Called with a fake event when value changes.
The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`. | +| `onBlur` | `Function`
[See signature.](#signature-onblur) | | | Handle blur events on the control | +| `onChange` | `Function`
[See signature.](#signature-onchange) | | | Called with a fake event when value changes.
The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`. | | `onFocus` | `AsyncProps['onFocus']` | | | Handle focus events on the control
[Props from React select was used](https://react-select.com/props) | | `onInputChange` | `AsyncProps['onInputChange']` | | | Handle change events on the input
[Props from React select was used](https://react-select.com/props) | | `tabSelectsValue` | `AsyncProps['tabSelectsValue']` | | | Select the currently focused option when the user presses tab
[Props from React select was used](https://react-select.com/props) | diff --git a/packages/components/inputs/search-text-input/README.md b/packages/components/inputs/search-text-input/README.md index 28304bb146..1ca9f83204 100644 --- a/packages/components/inputs/search-text-input/README.md +++ b/packages/components/inputs/search-text-input/README.md @@ -57,8 +57,8 @@ export default Example; | `onChange` | `ChangeEventHandler` | | | Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value. | | `onBlur` | `FocusEventHandler` | | | Called when input is blurred | | `onFocus` | `FocusEventHandler` | | | Called when input is focused | -| `onSubmit` | `Function`
[See signature.](#signature-onSubmit) | ✅ | | Handler when the search button is clicked. | -| `onReset` | `Function`
[See signature.](#signature-onReset) | ✅ | | Handler when the clear button is clicked. | +| `onSubmit` | `Function`
[See signature.](#signature-onsubmit) | ✅ | | Handler when the search button is clicked. | +| `onReset` | `Function`
[See signature.](#signature-onreset) | ✅ | | Handler when the clear button is clicked. | | `isAutofocussed` | `boolean` | | | Focus the input on initial render | | `isCondensed` | `boolean` | | | Use this property to reduce the paddings of the component for a ui compact variant | | `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). | diff --git a/packages/components/inputs/select-input/README.md b/packages/components/inputs/select-input/README.md index ff39728670..4ce881fee7 100644 --- a/packages/components/inputs/select-input/README.md +++ b/packages/components/inputs/select-input/README.md @@ -93,8 +93,8 @@ export default Example; | `closeMenuOnSelect` | `ReactSelectProps['closeMenuOnSelect']` | | | Whether the menu should close after a value is selected. Defaults to `true`.
[Props from React select was used](https://react-select.com/props) | | `name` | `ReactSelectProps['name']` | | | Name of the HTML Input (optional - without this, no input will be rendered)
[Props from React select was used](https://react-select.com/props) | | `noOptionsMessage` | `ReactSelectProps['noOptionsMessage']` | | | Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with { inputValue: String }.
`inputValue` will be an empty string when no search text is present.
[Props from React select was used](https://react-select.com/props) | -| `onBlur` | `Function`
[See signature.](#signature-onBlur) | | | Handle blur events on the control | -| `onChange` | `Function`
[See signature.](#signature-onChange) | | | Called with a fake event when value changes. The event's target.name will be the name supplied in props. The event's target.value will hold the value.
The value will be the selected option, or an array of options in case isMulti is true. | +| `onBlur` | `Function`
[See signature.](#signature-onblur) | | | Handle blur events on the control | +| `onChange` | `Function`
[See signature.](#signature-onchange) | | | Called with a fake event when value changes. The event's target.name will be the name supplied in props. The event's target.value will hold the value.
The value will be the selected option, or an array of options in case isMulti is true. | | `onFocus` | `ReactSelectProps['onFocus']` | | | Handle focus events on the control
[Props from React select was used](https://react-select.com/props) | | `onInputChange` | `ReactSelectProps['onInputChange']` | | | Handle change events on the input
[Props from React select was used](https://react-select.com/props) | | `options` | `union`
Possible values:
`TOption[] , TOptionObject[]` | | `[]` | Array of options that populate the select menu | diff --git a/packages/components/inputs/selectable-search-input/README.md b/packages/components/inputs/selectable-search-input/README.md index f5caaa7447..998c37e3bc 100644 --- a/packages/components/inputs/selectable-search-input/README.md +++ b/packages/components/inputs/selectable-search-input/README.md @@ -65,12 +65,12 @@ export default Example; | `aria-errormessage` | `string` | | | HTML ID of an element containing an error message related to the input. | | `name` | `string` | | | Used as HTML name of the input component property. | | `value` | `Object`
[See signature.](#signature-value) | ✅ | | Value of the input. Consists of text input and selected option. | -| `_experimentalValue` | `Object`
[See signature.](#signature-_experimentalValue) | | | | -| `onChange` | `Function`
[See signature.](#signature-onChange) | | | Called with the event of the input or dropdown when either the selectable dropdown or the text input have changed. The change event from the text input has a suffix of `.textInput` and the change event from the dropdown has a suffix of `.dropdown`. | -| `onBlur` | `Function`
[See signature.](#signature-onBlur) | | | Called when input is blurred | -| `onFocus` | `Function`
[See signature.](#signature-onFocus) | | | Called when input is focused | -| `onSubmit` | `Function`
[See signature.](#signature-onSubmit) | ✅ | | Handler when the search button is clicked. | -| `onReset` | `Function`
[See signature.](#signature-onReset) | | | Handler when the clear button is clicked. | +| `_experimentalValue` | `Object`
[See signature.](#signature-_experimentalvalue) | | | | +| `onChange` | `Function`
[See signature.](#signature-onchange) | | | Called with the event of the input or dropdown when either the selectable dropdown or the text input have changed. The change event from the text input has a suffix of `.textInput` and the change event from the dropdown has a suffix of `.dropdown`. | +| `onBlur` | `Function`
[See signature.](#signature-onblur) | | | Called when input is blurred | +| `onFocus` | `Function`
[See signature.](#signature-onfocus) | | | Called when input is focused | +| `onSubmit` | `Function`
[See signature.](#signature-onsubmit) | ✅ | | Handler when the search button is clicked. | +| `onReset` | `Function`
[See signature.](#signature-onreset) | | | Handler when the clear button is clicked. | | `isAutofocussed` | `boolean` | | | Focus the input on initial render | | `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). | | `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content | @@ -80,7 +80,7 @@ export default Example; | `isClearable` | `boolean` | | `true` | Indicates if the input should be cleared when the clear button is clicked. Defaults to true. | | `isCondensed` | `boolean` | | | Use this property to reduce the paddings of the component for a ui compact variant | | `horizontalConstraint` | `union`
Possible values:
`10 , 11 , 12 , 13 , 14 , 15 , 16 , 'scale' , 'auto'` | | `'scale'` | Horizontal size limit of the input fields. | -| `options` | `union`
Possible values:
`TOption[] , TOptionObject[]` | | `[]` | Array of options that populate the select menu | +| `options` | `union`
Possible values:
`TOption[] , TOptionObject[]` | ✅ | | Array of options that populate the select menu | | `menuPortalZIndex` | `number` | | `1` | z-index value for the menu portal
Use in conjunction with `menuPortalTarget` | | `menuPortalTarget` | `ReactSelectProps['menuPortalTarget']` | | | Dom element to portal the select menu to
[Props from React select was used](https://react-select.com/props) | | `menuShouldBlockScroll` | `ReactSelectProps['menuShouldBlockScroll']` | | | whether the menu should block scroll while open
[Props from React select was used](https://react-select.com/props) | diff --git a/packages/components/inputs/time-input/README.md b/packages/components/inputs/time-input/README.md index 2d38ee3d9e..b07fcf76e7 100644 --- a/packages/components/inputs/time-input/README.md +++ b/packages/components/inputs/time-input/README.md @@ -40,25 +40,25 @@ export default Example; ## Properties -| Props | Type | Required | Default | Description | -| ---------------------- | ----------------------------------------------------------------------------------------------------- | :------: | --------- | ---------------------------------------------------------------------------------------------- | -| `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. | -| `aria-invalid` | `boolean` | | | Indicate if the value entered in the input is invalid. | -| `aria-errormessage` | `string` | | | HTML ID of an element containing an error message related to the input. | -| `horizontalConstraint` | `union`
Possible values:
`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. | -| `name` | `string` | | | Used as HTML name of the input component. | -| `autoComplete` | `string` | | | Used as HTML autocomplete of the input component. | -| `value` | `string` | | | Value of the input | -| `onChange` | `ChangeEventHandler` | | | Called with an event holding the new value. | -| `onBlur` | `FocusEventHandler` | | | Called when input is blurred | -| `onFocus` | `FocusEventHandler` | | | Called when input is focused | -| `isAutofocussed` | `boolean` | | | Focus the input on initial render | -| `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). | -| `placeholder` | `string` | | | Placeholder text for the input | -| `isCondensed` | `boolean` | | | Use this property to reduce the paddings of the component for a ui compact variant | -| `hasWarning` | `boolean` | | | Indicates the input field has a warning | -| `hasError` | `boolean` | | | Indicates if the input has invalid values | -| `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content | +| Props | Type | Required | Default | Description | +| ---------------------- | ----------------------------------------------------------------------------------------------------- | :------: | ------- | ---------------------------------------------------------------------------------------------- | +| `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. | +| `aria-invalid` | `boolean` | | | Indicate if the value entered in the input is invalid. | +| `aria-errormessage` | `string` | | | HTML ID of an element containing an error message related to the input. | +| `horizontalConstraint` | `union`
Possible values:
`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | | Horizontal size limit of the input fields. | +| `name` | `string` | | | Used as HTML name of the input component. | +| `autoComplete` | `string` | | | Used as HTML autocomplete of the input component. | +| `value` | `string` | | | Value of the input | +| `onChange` | `ChangeEventHandler` | | | Called with an event holding the new value. | +| `onBlur` | `FocusEventHandler` | | | Called when input is blurred | +| `onFocus` | `FocusEventHandler` | | | Called when input is focused | +| `isAutofocussed` | `boolean` | | | Focus the input on initial render | +| `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). | +| `placeholder` | `string` | | | Placeholder text for the input | +| `isCondensed` | `boolean` | | | Use this property to reduce the paddings of the component for a ui compact variant | +| `hasWarning` | `boolean` | | | Indicates the input field has a warning | +| `hasError` | `boolean` | | | Indicates if the input has invalid values | +| `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content | ## `value` diff --git a/packages/components/pagination/README.md b/packages/components/pagination/README.md index 027f8af5af..554450c4bf 100644 --- a/packages/components/pagination/README.md +++ b/packages/components/pagination/README.md @@ -53,10 +53,10 @@ export default Example; | ----------------- | ----------------------------------------------------------- | :------: | ------- | --------------------------------------------------------------------------------------------------------- | | `totalItems` | `number` | ✅ | | Total number of items across all pages | | `page` | `number` | ✅ | | The current page | -| `onPageChange` | `Function`
[See signature.](#signature-onPageChange) | ✅ | | A callback function, called when the page is changed. | +| `onPageChange` | `Function`
[See signature.](#signature-onpagechange) | ✅ | | A callback function, called when the page is changed. | | `perPage` | `number` | | `20` | Number of items per page, according to the pre-defined range values. | | `perPageRange` | `TPageRangeSize` | | `'s'` | Range of items per page.
`s: 20,50`
`m: 20,50,100`
`l: 200,500` | -| `onPerPageChange` | `Function`
[See signature.](#signature-onPerPageChange) | ✅ | | A callback function, called when `perPage` is changed. | +| `onPerPageChange` | `Function`
[See signature.](#signature-onperpagechange) | ✅ | | A callback function, called when `perPage` is changed. | ## Signatures diff --git a/packages/components/primary-action-dropdown/README.md b/packages/components/primary-action-dropdown/README.md index 1a3a6aac0e..2f7a2c5669 100644 --- a/packages/components/primary-action-dropdown/README.md +++ b/packages/components/primary-action-dropdown/README.md @@ -68,7 +68,7 @@ export default Example; | Props | Type | Required | Default | Description | | ------------ | --------------------------------------------------- | :------: | ------- | --------------------------------------------------------------------------------------------------- | -| `onClick` | `Function`
[See signature.](#signature-onClick) | ✅ | | Event handler triggers whenever the option is clicked. | +| `onClick` | `Function`
[See signature.](#signature-onclick) | ✅ | | Event handler triggers whenever the option is clicked. | | `isDisabled` | `boolean` | | `false` | Disables the option within the dropdown. If all options are disabled the dropdown will be disabled. | | `children` | `string` | ✅ | | Any string which serves as the label. | | `iconLeft` | `ReactNode` | | | Any React node. | diff --git a/packages/components/progress-bar/README.md b/packages/components/progress-bar/README.md index 890d6b39d2..fd7170cd23 100644 --- a/packages/components/progress-bar/README.md +++ b/packages/components/progress-bar/README.md @@ -39,13 +39,13 @@ export default Example; ## Properties -| Props | Type | Required | Default | Description | -| --------------- | ----------------------------------------------------------------------------------------------------------------------------- | :------: | --------- | ---------------------------------------------------------------------------------------------------- | -| `progress` | `number` | | `0` | The percentage of the task completion to fill the bar. | -| `label` | `union`
Possible values:
`, string, ReactElement, (MessageDescriptor & { values?: Record }), null` | | `null` | The text to display alongside the bar. | -| `labelPosition` | `union`
Possible values:
`'top' , 'bottom' , 'left' , 'right'` | | `'top'` | Location of the text in relation to the bar. | -| `labelWidth` | `union`
Possible values:
`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | The scale of the width for the label, uses values available in the Constraints.Horizontal component. | -| `isInverted` | `boolean` | | `false` | Specifies the use of light colors(default) or dark colors. | -| `isAnimated` | `boolean` | | `true` | Specifies whether the inner bar should have the styles animated. | -| `height` | `union`
Possible values:
`'10' , '20'` | | `'20'` | The scale of the height for the bar, also affects the styles of the label. | -| `barWidth` | `union`
Possible values:
`4 , 5 , 6 , 7 , 8 , 9 , 10 , 11 , 12 , 13 , 14 , 15 , 16 , 'scale'` | | `6` | The scale of the width for the label, uses values available in the Constraints.Horizontal component. | +| Props | Type | Required | Default | Description | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------- | :------: | -------------------------- | ---------------------------------------------------------------------------------------------------- | +| `progress` | `number` | | `0` | The percentage of the task completion to fill the bar. | +| `label` | `union`
Possible values:
`, string, ReactElement, (MessageDescriptor & { values?: Record }), null` | | `null` | The text to display alongside the bar. | +| `labelPosition` | `union`
Possible values:
`'top' , 'bottom' , 'left' , 'right'` | | `'top'` | Location of the text in relation to the bar. | +| `labelWidth` | `union`
Possible values:
`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `defaultStyles.labelWidth` | The scale of the width for the label, uses values available in the Constraints.Horizontal component. | +| `isInverted` | `boolean` | | `false` | Specifies the use of light colors(default) or dark colors. | +| `isAnimated` | `boolean` | | `true` | Specifies whether the inner bar should have the styles animated. | +| `height` | `union`
Possible values:
`'10' , '20'` | | `defaultStyles.height` | The scale of the height for the bar, also affects the styles of the label. | +| `barWidth` | `union`
Possible values:
`4 , 5 , 6 , 7 , 8 , 9 , 10 , 11 , 12 , 13 , 14 , 15 , 16 , 'scale'` | | `6` | The scale of the width for the label, uses values available in the Constraints.Horizontal component. | diff --git a/packages/components/quick-filters/README.md b/packages/components/quick-filters/README.md index bbba3ed99c..cd00889bec 100644 --- a/packages/components/quick-filters/README.md +++ b/packages/components/quick-filters/README.md @@ -68,7 +68,7 @@ export default App; | Props | Type | Required | Default | Description | | ------------- | ------------------------------------------------------------------- | :------: | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `items` | `Array: TQuickFiltersItem[]`
[See signature.](#signature-items) | ✅ | | collection of quick filter items@param item.id unique identifier for the item. @param item.label label to display @param item.isActive the current active state of the item | -| `onItemClick` | `Function`
[See signature.](#signature-onItemClick) | ✅ | | callback fn, executed when an item is clicked | +| `onItemClick` | `Function`
[See signature.](#signature-onitemclick) | ✅ | | callback fn, executed when an item is clicked | ## Signatures diff --git a/packages/components/tag/README.md b/packages/components/tag/README.md index bbd68eceaa..b464e3e94a 100644 --- a/packages/components/tag/README.md +++ b/packages/components/tag/README.md @@ -62,8 +62,8 @@ export default Example; | `to` | `union`
Possible values:
`string , LocationDescriptor` | | | Link of the tag when not disabled | | `isDisabled` | `boolean` | | `false` | Disable the tag element along with the option to remove it. | | `isDraggable` | `boolean` | | `false` | Adds the draggable icon on the left side. | -| `onRemove` | `Function`
[See signature.](#signature-onRemove) | | | Called when remove button is clicked. | -| `onClick` | `Function`
[See signature.](#signature-onClick) | | | Called when tag element is clicked. This is not called when remove button is clicked. | +| `onRemove` | `Function`
[See signature.](#signature-onremove) | | | Called when remove button is clicked. | +| `onClick` | `Function`
[See signature.](#signature-onclick) | | | Called when tag element is clicked. This is not called when remove button is clicked. | | `horizontalConstraint` | `union`
Possible values:
`, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the tag. | | `children` | `ReactNode` | ✅ | | Content rendered within the tag | | `tone` | `union`
Possible values:
`'primary' , 'warning' , 'surface'` | | `'primary'` | Indicates the color scheme of the tag. | diff --git a/packages/components/tooltip/README.md b/packages/components/tooltip/README.md index e35ef89a0c..3e0f075254 100644 --- a/packages/components/tooltip/README.md +++ b/packages/components/tooltip/README.md @@ -188,8 +188,8 @@ export { | `styles` | `Record` | | | Custom css-in-js object styles for the tooltip body. | | `off` | `boolean` | | `false` | Determines if the tooltip should not appear. | | `id` | `string` | | | An identifier for the tooltip, used for `aria-describedby`. | -| `onClose` | `Function`
[See signature.](#signature-onClose) | | | A callback function, called when the tooltip is closing. | -| `onOpen` | `Function`
[See signature.](#signature-onOpen) | | | A callback function, called when the tooltip is opening. | +| `onClose` | `Function`
[See signature.](#signature-onclose) | | | A callback function, called when the tooltip is closing. | +| `onOpen` | `Function`
[See signature.](#signature-onopen) | | | A callback function, called when the tooltip is opening. | | `isOpen` | `boolean` | | | | | `placement` | `union`
Possible values:
`, 'top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end'` | | `'top'` | How the tooltip is positioned relative to the child element. | | `title` | `string` | ✅ | | The message to show in the tooltip. | diff --git a/packages/components/view-switcher/README.md b/packages/components/view-switcher/README.md index 8947feb99c..6f1e9576e8 100644 --- a/packages/components/view-switcher/README.md +++ b/packages/components/view-switcher/README.md @@ -99,13 +99,13 @@ export { UncontrolledExample, ControlledExample }; ## Properties -| Props | Type | Required | Default | Description | -| ----------------- | ---------------------------------------------------- | :------: | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `isCondensed` | `boolean` | | | Indicates that the view switcher can be reduced to save space. | -| `children` | `ReactNode` | ✅ | | Pass one or more `ViewSwitcher.Button` components. | -| `onChange` | `Function`
[See signature.](#signature-onChange) | | | Will be triggered whenever a `ViewSwitcher.Button` is selected. Called with the ViewSwitcherButton value. This function is only required when the component is controlled. | -| `defaultSelected` | `string` | | | Passing this prop makes the component an uncontrolled component. Indicates the default selected button it is only used to as an initial state once, when the component mounts. | -| `selectedValue` | `string` | | | Passing this prop makes the component an controlled component. Controlled components also require to pass a `onChange` callback function. | +| Props | Type | Required | Default | Description | +| ----------------- | -------------------------------------------------------------------------------------------- | :------: | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `isCondensed` | `boolean` | | | Indicates that the view switcher can be reduced to save space. | +| `children` | `union`
Possible values:
`TViewSwitcherButtonElement , TViewSwitcherButtonElement[]` | ✅ | | Pass one or more `ViewSwitcher.Button` components. | +| `onChange` | `Function`
[See signature.](#signature-onchange) | | | Will be triggered whenever a `ViewSwitcher.Button` is selected. Called with the ViewSwitcherButton value. This function is only required when the component is controlled. | +| `defaultSelected` | `string` | | | Passing this prop makes the component an uncontrolled component. Indicates the default selected button it is only used to as an initial state once, when the component mounts. | +| `selectedValue` | `string` | | | Passing this prop makes the component an controlled component. Controlled components also require to pass a `onChange` callback function. | ## Signatures