diff --git a/collections/ui/API.md b/collections/ui/API.md index adeb2567f7..de3a9ddbff 100644 --- a/collections/ui/API.md +++ b/collections/ui/API.md @@ -14,15 +14,15 @@ import { AlertBar } from '@dhis2/ui' |Name|Type|Default|Required|Description| |---|---|---|---|---| -|actions|custom|||An array of 0-2 action objects| +|actions|custom|||An array of 0-2 action objects
`[{label: "Save", onClick: clickHandler}]`| |children|string|||The message string for the alert| |className|string|||| |critical|custom|||Alert bars with `critical` will not autohide| |dataTest|string|`'dhis2-uicore-alertbar'`||| -|duration|number|`8000`||| -|hidden|boolean|||| +|duration|number|`8000`||How long you want the notification to display, in `ms`, when it's not permanent| +|hidden|boolean|||AlertBar will be hidden on creation when this is set| |icon|custom|`true`||A specific icon to override the default icon in the bar.
If `false` is provided, no icon will be shown.| -|permanent|boolean|||| +|permanent|boolean|||When set, AlertBar will not auto-hide| |success|custom|||| |warning|custom|||Alert bars with `warning` will not autohide| |onHidden|function|||| @@ -231,6 +231,24 @@ import { Calendar } from '@dhis2/ui' |weekDayFormat|'narrow' │ 'short' │ 'long'|`'narrow'`||the format to display for the week day, i.e. Monday (long), Mon (short), M (narrow)| |width|string|`'240px'`||the width of the calendar component| +### CalendarInput + +#### Usage + +To use `CalendarInput`, you can import the component from the `@dhis2/ui` library + + +```js +import { CalendarInput } from '@dhis2/ui' +``` + + +#### Props + +|Name|Type|Default|Required|Description| +|---|---|---|---|---| +|dataTest|undefined|`'dhis2-uiwidgets-calendar-inputfield'`||| + ### Card #### Usage diff --git a/components/alert/API.md b/components/alert/API.md index 23e669859f..6aa9db37b9 100644 --- a/components/alert/API.md +++ b/components/alert/API.md @@ -14,15 +14,15 @@ import { AlertBar } from '@dhis2/ui' |Name|Type|Default|Required|Description| |---|---|---|---|---| -|actions|custom|||An array of 0-2 action objects| +|actions|custom|||An array of 0-2 action objects
`[{label: "Save", onClick: clickHandler}]`| |children|string|||The message string for the alert| |className|string|||| |critical|custom|||Alert bars with `critical` will not autohide| |dataTest|string|`'dhis2-uicore-alertbar'`||| -|duration|number|`8000`||| -|hidden|boolean|||| +|duration|number|`8000`||How long you want the notification to display, in `ms`, when it's not permanent| +|hidden|boolean|||AlertBar will be hidden on creation when this is set| |icon|custom|`true`||A specific icon to override the default icon in the bar.
If `false` is provided, no icon will be shown.| -|permanent|boolean|||| +|permanent|boolean|||When set, AlertBar will not auto-hide| |success|custom|||| |warning|custom|||Alert bars with `warning` will not autohide| |onHidden|function|||| diff --git a/components/alert/src/alert-bar/alert-bar.js b/components/alert/src/alert-bar/alert-bar.js index f17e74fbba..8e84bd2c23 100644 --- a/components/alert/src/alert-bar/alert-bar.js +++ b/components/alert/src/alert-bar/alert-bar.js @@ -149,7 +149,8 @@ AlertBar.defaultProps = { } AlertBar.propTypes = { - /** An array of 0-2 action objects */ + /** An array of 0-2 action objects +`[{label: "Save", onClick: clickHandler}]`*/ actions: actionsPropType, /** The message string for the alert */ children: PropTypes.string, @@ -157,13 +158,16 @@ AlertBar.propTypes = { /** Alert bars with `critical` will not autohide */ critical: alertTypePropType, dataTest: PropTypes.string, + /** How long you want the notification to display, in `ms`, when it's not permanent */ duration: PropTypes.number, + /** AlertBar will be hidden on creation when this is set to true */ hidden: PropTypes.bool, /** * A specific icon to override the default icon in the bar. * If `false` is provided, no icon will be shown. */ icon: iconPropType, + /** When set, AlertBar will not autohide */ permanent: PropTypes.bool, success: alertTypePropType, /** Alert bars with `warning` will not autohide */ diff --git a/components/calendar/API.md b/components/calendar/API.md index cc8e8edee3..26f8eaac53 100644 --- a/components/calendar/API.md +++ b/components/calendar/API.md @@ -24,3 +24,21 @@ import { Calendar } from '@dhis2/ui' |timeZone|string|||the timeZone to use| |weekDayFormat|'narrow' │ 'short' │ 'long'|`'narrow'`||the format to display for the week day, i.e. Monday (long), Mon (short), M (narrow)| |width|string|`'240px'`||the width of the calendar component| + +### CalendarInput + +#### Usage + +To use `CalendarInput`, you can import the component from the `@dhis2/ui` library + + +```js +import { CalendarInput } from '@dhis2/ui' +``` + + +#### Props + +|Name|Type|Default|Required|Description| +|---|---|---|---|---| +|dataTest|undefined|`'dhis2-uiwidgets-calendar-inputfield'`||| diff --git a/docs/docs/components/alertbar.md b/docs/docs/components/alertbar.md index 8a04ce5e0b..eadcac2316 100644 --- a/docs/docs/components/alertbar.md +++ b/docs/docs/components/alertbar.md @@ -46,6 +46,12 @@ An alert bar communicates something to the user by showing a prominent, floating Data export complete. +```jsx + + Data export complete. + +``` + - An `info` alert bar is the default. Use it if none of the other variants fit. - Automatically dismiss after 5 seconds, so the message should be a useful but not critical. - Use for minor positive confirmations, like _Sharing settings changed._ @@ -57,16 +63,29 @@ An alert bar communicates something to the user by showing a prominent, floating 1000 objects updated. +```jsx + + 1000 objects updated. + +``` + - Only use to confirm successful, major actions. - Don't use for minor confirmations or navigation movements. - Always tell the user what was successful. Use clear labels like _45 units updated_, rather than just _Updated_. + #### Warning Some data is taking a long time to sync. +```jsx + + Some data is taking a long time to sync. + +``` + - Use to warn of potential problems or things that might happen, like _Some data is taking a long time to sync_. - Show before the problem happens, if possible. - If a problem has already happened, use a `critical` variant instead. @@ -78,6 +97,12 @@ An alert bar communicates something to the user by showing a prominent, floating There was a problem loading this dashboard. +```jsx + + There was a problem loading this dashboard. + +``` + - Only use to communicate a serious problem, like broken functionality or a failed process. - Use when a user can still interact with the page. If the entire page broken, use a [`Modal`](modal.md) dialog or error screen instead. - Communicate clearly what happened. Use labels like _There was a problem loading this dashboard_ or _Message failed to send_. @@ -112,6 +137,24 @@ An alert bar communicates something to the user by showing a prominent, floating ]} permanent>Hello world +```jsx + + + Hello world + + +``` + - Alert bars can have up to two optional actions. - Actions offer a shortcut to act on the information in the alert bar. - Actions can do something on the current page, like _Retry_ for a failed action.