+
+)
diff --git a/components/file-input/src/file-input-field/file-input-field.prod.stories.js b/components/file-input/src/file-input-field/file-input-field.prod.stories.js
index 5cb7435d59..bcb4a8094b 100644
--- a/components/file-input/src/file-input-field/file-input-field.prod.stories.js
+++ b/components/file-input/src/file-input-field/file-input-field.prod.stories.js
@@ -26,6 +26,7 @@ export default {
onChange: onChange,
name: 'uploadName',
label: 'Upload something',
+ buttonLabel: 'Upload a file',
},
argTypes: {
small: { ...sharedPropTypes.sizeArgType },
diff --git a/components/input/src/input-field/input-field.prod.stories.js b/components/input/src/input-field/input-field.prod.stories.js
index 4bf091d920..63dcda1c67 100644
--- a/components/input/src/input-field/input-field.prod.stories.js
+++ b/components/input/src/input-field/input-field.prod.stories.js
@@ -128,13 +128,13 @@ export const InputWidth = (args) => (
diff --git a/components/loader/src/circular-loader/circular-loader.prod.stories.js b/components/loader/src/circular-loader/circular-loader.prod.stories.js
index a52f9f902b..90c7ca7bd9 100644
--- a/components/loader/src/circular-loader/circular-loader.prod.stories.js
+++ b/components/loader/src/circular-loader/circular-loader.prod.stories.js
@@ -25,6 +25,7 @@ export default {
small: { ...sharedPropTypes.sizeArgType },
large: { ...sharedPropTypes.sizeArgType },
extrasmall: { ...sharedPropTypes.sizeArgType },
+ invert: { ...sharedPropTypes.sizeArgType },
},
}
diff --git a/components/modal/src/modal/modal.prod.stories.js b/components/modal/src/modal/modal.prod.stories.js
index d421cfeecd..250fdf274f 100644
--- a/components/modal/src/modal/modal.prod.stories.js
+++ b/components/modal/src/modal/modal.prod.stories.js
@@ -1,12 +1,16 @@
import { sharedPropTypes } from '@dhis2/ui-constants'
import { Box } from '@dhis2-ui/box'
import { Button, ButtonStrip } from '@dhis2-ui/button'
+import { Center as CenteredContent } from '@dhis2-ui/center'
+import { InputField } from '@dhis2-ui/input'
+import { CircularLoader } from '@dhis2-ui/loader'
import {
FlyoutMenu,
MenuDivider,
MenuItem,
MenuSectionHeader,
} from '@dhis2-ui/menu'
+import { NoticeBox } from '@dhis2-ui/notice-box'
import { SingleSelect, SingleSelectOption } from '@dhis2-ui/select'
import { Tooltip } from '@dhis2-ui/tooltip'
import React, { useEffect, useState } from 'react'
@@ -669,6 +673,59 @@ export const LargeWithSelectComponent = (args) => (
LargeWithSelectComponent.args = { large: true }
LargeWithSelectComponent.storyName = 'Large: with Select component'
+export const ModalWithErrorState = (args) => (
+
+ Update profile
+
+
+
+
+ There is a problem with this form.
+
+
+
+
+
+
+
+
+
+)
+ModalWithErrorState.storyName = 'With error state'
+
+export const ModalWithLoadingState = (args) => (
+
+ Modal title
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+)
+ModalWithLoadingState.storyName = 'With loading state'
+
export const LargeModalWithMoreNestedModals = (args) => (
<>
diff --git a/components/pagination/src/pagination.prod.stories.js b/components/pagination/src/pagination.prod.stories.js
index 111ed65890..b6d346f184 100644
--- a/components/pagination/src/pagination.prod.stories.js
+++ b/components/pagination/src/pagination.prod.stories.js
@@ -63,7 +63,12 @@ export const NoTotalAtLastPageWithoutPageLength = Template.bind({})
NoTotalAtLastPageWithoutPageLength.args = { ...pagers.noTotalAtLastPage }
export const WithoutPageSizeSelect = Template.bind({})
-WithoutPageSizeSelect.args = { ...pagers.atTenthPage, hidePageSizeSelect: true }
+WithoutPageSizeSelect.args = {
+ ...pagers.atTenthPage,
+ hidePageSizeSelect: true,
+ hidePageSelect: false,
+ hidePageSummary: false,
+}
export const WithoutGoToPageSelect = Template.bind({})
WithoutGoToPageSelect.args = { ...pagers.atTenthPage, hidePageSelect: true }
diff --git a/components/select/src/single-select-field/single-select-field.prod.stories.js b/components/select/src/single-select-field/single-select-field.prod.stories.js
index 9ae6b55cf2..bd0a610a00 100644
--- a/components/select/src/single-select-field/single-select-field.prod.stories.js
+++ b/components/select/src/single-select-field/single-select-field.prod.stories.js
@@ -89,6 +89,13 @@ StatusError.args = {
}
StatusError.storyName = 'Status: Error'
+export const StatusDisabled = Template.bind({})
+StatusDisabled.args = {
+ disabled: true,
+ ...WithHelpText.args,
+}
+StatusDisabled.storyName = 'Status: Disabled'
+
export const Required = Template.bind({})
Required.args = { required: true }
diff --git a/components/select/src/single-select/single-select.prod.stories.js b/components/select/src/single-select/single-select.prod.stories.js
index b0ebcec064..6039292bef 100644
--- a/components/select/src/single-select/single-select.prod.stories.js
+++ b/components/select/src/single-select/single-select.prod.stories.js
@@ -207,7 +207,7 @@ WithOptionsASelectionAndDisabled.storyName =
'With options, a selection and disabled'
export const WithPrefix = WithOptionsTemplate.bind({})
-WithPrefix.args = { prefix: 'Prefix text' }
+WithPrefix.args = { prefix: 'Prefix text', selected: '1' }
export const WithPrefixAndSelection = WithOptionsTemplate.bind({})
WithPrefixAndSelection.args = {
diff --git a/docs/docs/components/alertbar.md b/docs/docs/components/alertbar.md
index 6ad62ed254..c47a4be2f7 100644
--- a/docs/docs/components/alertbar.md
+++ b/docs/docs/components/alertbar.md
@@ -3,18 +3,15 @@ title: Alert bar
---
import { Demo } from '@site/src/components/DemoComponent.jsx'
-import { DocFigure } from '@site/src/components/DocFigure.jsx'
-import { AlertBar } from '@dhis2/ui'
-
import API from '../../../components/alert/API.md'
# Alert bar
An alert bar communicates something to the user by showing a prominent, floating bar at the bottom of the screen, using one of several styles each indicating a different purpose.
-
-
- Hello world
-
+
## Usage
@@ -72,9 +69,11 @@ Read more about the `useAlert()` hook at the [App Runtime documentation](https:/
#### Info
-
- Data export complete.
-
+
```jsx
@@ -89,9 +88,11 @@ Read more about the `useAlert()` hook at the [App Runtime documentation](https:/
#### Success
-
- 1000 objects updated.
-
+
```jsx
@@ -107,14 +108,16 @@ Read more about the `useAlert()` hook at the [App Runtime documentation](https:/
#### Warning
-
- Some data is taking a long time to sync.
-
+
```jsx
- Some data is taking a long time to sync.
+ Sync incomplete
```
@@ -126,14 +129,16 @@ Read more about the `useAlert()` hook at the [App Runtime documentation](https:/
#### Critical
-
- There was a problem loading this dashboard.
-
+
```jsx
- There was a problem loading this dashboard.
+ Problem loading data
```
@@ -160,17 +165,10 @@ Read more about the `useAlert()` hook at the [App Runtime documentation](https:/
### Actions
-
- Hello world
-
+
```jsx
@@ -203,6 +201,11 @@ Read more about the `useAlert()` hook at the [App Runtime documentation](https:/
- Each variant shows a default icon to support the content being communicated.
- A custom icon can be used. Only use icons that are relevant to the content and that help the user understand the context. Use the default icon unless there's a good reason not to.
+
+
## Using AlertStack
As you can see with all the demo's above, we've used the `AlertStack` component to render the `AlertBar` component. This is because the `AlertStack` component is responsible for positioning the `AlertBar` component in relation to other `AlertBar`s. Especially when there are multiple `AlertBar` components on the page, the `AlertStack` component will make sure that they are stacked on top of each other and that they are not overlapping. It is therefore recommended to always use the `AlertStack` component when using the `AlertBar` component.
diff --git a/docs/docs/components/avatar.md b/docs/docs/components/avatar.md
index 03fffee556..88ae68e1e8 100644
--- a/docs/docs/components/avatar.md
+++ b/docs/docs/components/avatar.md
@@ -4,18 +4,16 @@ id: avatar
---
import { Demo } from '@site/src/components/DemoComponent.jsx'
-import { DocFigure } from '@site/src/components/DocFigure.jsx'
-import { UserAvatar } from '@dhis2/ui'
-
import API from '../../../components/user-avatar/API.md'
# User Avatar
A User Avatar is a visual icon that represents a user.
-
-
-
+
## Usage
@@ -37,15 +35,10 @@ A User Avatar is a visual icon that represents a user.
#### Size
-
-
-
-
-
-
-
-
-
+
Avatars are available in different sizes. Use the size that works best for the space available and the context.
diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md
index 70a02cbbbb..ff9574581f 100644
--- a/docs/docs/components/button.md
+++ b/docs/docs/components/button.md
@@ -3,16 +3,16 @@ title: Button
---
import { Demo } from '@site/src/components/DemoComponent.jsx'
-import { Button, DropdownButton, SplitButton, IconCheckmark24 } from '@dhis2/ui'
-
import API from '../../../components/button/API.md'
# Button
Buttons are used to trigger actions. There are different button variants that are used for different types of actions.
-
-
-
+
## Usage
@@ -37,9 +37,11 @@ Buttons are used to trigger actions. There are different button variants that ar
#### Basic
-
-
-
+
```jsx
@@ -50,9 +52,11 @@ Buttons are used to trigger actions. There are different button variants that ar
#### Primary
-
-
-
+
```jsx
@@ -64,9 +68,11 @@ Buttons are used to trigger actions. There are different button variants that ar
#### Secondary
-
-
-
+
```jsx
@@ -78,20 +84,26 @@ Buttons are used to trigger actions. There are different button variants that ar
#### Destructive
-
-
-
-
-
-
+
```jsx
-
-
-
-
+
+```
+
+
+
+```jsx
+
```
- Only use for primary-type actions that will destroy data.
diff --git a/docs/docs/components/calendar-input.md b/docs/docs/components/calendar-input.md
index 9b35c65d5a..5aaca0bc2a 100644
--- a/docs/docs/components/calendar-input.md
+++ b/docs/docs/components/calendar-input.md
@@ -3,9 +3,6 @@ title: Calendar Input
---
import { Demo } from '@site/src/components/DemoComponent.jsx'
-import { CalendarDemo } from '@site/src/components/CalendarDemo.jsx'
-import { Box, CalendarInput } from '@dhis2/ui'
-
import API from '../../../components/calendar/API.md'
# Calendar Input
@@ -14,106 +11,12 @@ This is an Input wrapper around [calendar](./calendar) to display an input that
## Demo
-Ethiopic calendar (with narrow day names, short day names and localised to English)
+Below you'll find a customizable demo of the CalendarInput component. Click "show full demo" to see this and other components.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
The Gregorian with initial date is then generated with this code.
diff --git a/docs/docs/components/calendar.md b/docs/docs/components/calendar.md
index 9dde639cce..0da47ffcc0 100644
--- a/docs/docs/components/calendar.md
+++ b/docs/docs/components/calendar.md
@@ -3,8 +3,8 @@ title: Calendar
---
import { Demo } from '@site/src/components/DemoComponent.jsx'
-import { CalendarDemo as Calendar } from '@site/src/components/CalendarDemo.jsx'
-import { Box } from '@dhis2/ui'
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
import API from '../../../components/calendar/API.md'
@@ -22,30 +22,11 @@ Ethiopic calendar with narrow day names, short day names and localised to Englis
### Narrow day names
-
-
-
-
-
-
-
+
To display the calendar with short day names, use the codeblock below. For the narrow day names remove the `weekDayFormat` prop. For the English locale, use the `en` locale and the short `weekDayFormat`.
@@ -55,88 +36,87 @@ To display the calendar with short day names, use the codeblock below. For the n
locale="am-ET"
numberingSystem="ethi"
timeZone="Europe/London"
- weekDayFormat="short"
+ weekDayFormat="narrow"
/>
```
## Nepali calendar
-Nepali calendar (with Nepali and English characters)
-
:::note
Nepali is a custom calendar not natively implemented in Temporal and Nepali locale is not natively supported by browsers' Internationalization standard. We are providing a custom implementation for the calendar, as well as the localised values. The only two locales allowed are: `ne-NP` (nepali) and `en-NP` (nepali transliterated in latin characters).
:::
-
-
-
-
-
-
+Nepali calendar with Napali characters.
+
+
```jsx
- // Napali
-
-
- // Nepali transliterated in latin characters
-
+// Napali
+
+```
+
+Nepali calendar transliterated into latin characters.
+
+
+```jsx
+// Nepali transliterated in latin characters
+
```
## Gregorian calendar
Gregorian calendar localised in English, Arabic (Tunisia), Arabic (Sudan), Arabic (Iraq) and Amharic.
-
-
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
-
+
+
To display the calendar with a specific locale, use the codeblock below. Adjust the locale to the desired language.
@@ -148,35 +128,29 @@ To display the calendar with a specific locale, use the codeblock below. Adjust
Some other calendars: Islamic in Arabic, Indian in English and Persian in Farsi
-
-
-
+
+
-
+
+
-
+
+
-
-
-
+
+
Each of the calendars above can be displayed with the following code.
diff --git a/docs/docs/components/card.md b/docs/docs/components/card.md
index dde83cfd93..f933250260 100644
--- a/docs/docs/components/card.md
+++ b/docs/docs/components/card.md
@@ -3,22 +3,22 @@ title: Card
---
import { Demo } from '@site/src/components/DemoComponent.jsx'
-import { Card } from '@dhis2/ui'
-
import API from '../../../components/card/API.md'
# Card
A card is a container element used to group together and separate blocks of content.
-
- This is content that's inside a card.
-
+
## Usage
```jsx
-This is content that's inside a card.
+Card Content.
```
### When to use
diff --git a/docs/docs/components/checkbox.md b/docs/docs/components/checkbox.md
index 46d317d2e9..57bd4307d9 100644
--- a/docs/docs/components/checkbox.md
+++ b/docs/docs/components/checkbox.md
@@ -3,22 +3,20 @@ title: Checkbox
---
import { Demo } from '@site/src/components/DemoComponent.jsx'
-import { Checkbox } from '@dhis2/ui'
-
import API from '../../../components/checkbox/API.md'
# Checkbox
Checkboxes are used to choose one or more items from a list. A checkbox can also be used to toggle an option.
-
-
-
-
+
```jsx
-
-
+
```
## Usage
@@ -42,10 +40,15 @@ Checkboxes are used to choose one or more items from a list. A checkbox can also
#### Size
-
-
-
-
+
+
+```jsx
+
+```
- Checkboxes are available in two sizes, regular and `dense`. Regular sized checkboxes are useful when there's space available. Use `dense` sized checkboxes in compact, information-dense interfaces.
diff --git a/docs/docs/components/chip.md b/docs/docs/components/chip.md
index bd8c1e3ad6..d2e53a75b1 100644
--- a/docs/docs/components/chip.md
+++ b/docs/docs/components/chip.md
@@ -3,17 +3,17 @@ title: Chip
---
import { Demo } from '@site/src/components/DemoComponent.jsx'
-import { Chip, IconStar24 } from '@dhis2/ui'
-
import API from '../../../components/chip/API.md'
# Chip
Chips are used to select from a set of defined options. Chips can also represent a set of chosen options.
-
- Hello world
-
+
```jsx
Hello world
@@ -40,13 +40,13 @@ Chips are used to select from a set of defined options. Chips can also represent
#### Size
-
- Hello world
- Hello world
-
+
```jsx
-Hello worldHello world
```
@@ -70,9 +70,11 @@ Chips are used to select from a set of defined options. Chips can also represent
### Removable
-
- Hello world
-
+
```jsx
Hello world
@@ -83,9 +85,11 @@ Chips are used to select from a set of defined options. Chips can also represent
### Icon
-
- } >Hello world
-
+
```jsx
}>Hello world
diff --git a/docs/docs/components/data-table.md b/docs/docs/components/data-table.md
index 6485e2d14c..2db70b907a 100644
--- a/docs/docs/components/data-table.md
+++ b/docs/docs/components/data-table.md
@@ -3,18 +3,18 @@ title: Data table
---
import { Demo } from '@site/src/components/DemoComponent.jsx'
-
import API from '../../../components/table/API.md'
# Data table
A data table is used to display and allow interaction with data in a structured way.
-
-
-
+
-A minimal version of the linked demo looks like this.
+A minimal version of the demo looks like this.
```jsx
@@ -50,85 +50,95 @@ A minimal version of the linked demo looks like this.
### Sorting
-
-
-
+
- Data table items can be sorted by different columns by clicking on the sort icon in a column header.
- Always allow sorting of items by different columns unless the order is specific and shouldn't be changed.
### Filtering: Inline
-
-
-
+
- Use inline filters in complex interfaces to offer filtering functionality without extra controls outside of the table.
- If filtering is the main functionality of the data table, consider offering standalone filters.
### Fixed header
-
-
-
+
- Use a fixed header in data tables that are used to browse a lot of data. Fixed headers stay in view and make it easier to understand what cells contain.
### Fixed columns
-
-
-
+
- Use fixed columns in dense interfaces where the table might need to be scrolled horizontally.
- Any number of columns can be fixed, but usually a single column is enough, as long as it provides a clear reference for the rest of the row.
### Expandable rows
-
-
-
+
- Use expandable rows if there's more useful information that doesn't fit well into columns, like paragraphs of text, images, or video.
### Selectable rows
-
-
-
+
- Use selectable rows if a user can perform batch actions on rows in the data table, like selecting several rows and exporting or deleting them.
### Draggable rows
-
-
-
+
- Use draggable rows if the order of rows in the data table has a meaningful impact. With draggable rows, a user can drag rows to change the order.
### Bordered cells
-
-
-
+
- Use bordered cells when showing complex data that might have similar values, like long numbers, to help a user visually scan data values.
### Built-in styles
-
-
-
+
- A data table offers several built-in text styles.
- Use the built-in styles to help offer a consistent data table experience across DHIS2 apps.
### Large cells
-
-
-
+
- Use large cells can be used for data tables that will don't show a lot of rows.
- Large cells can help users scan and work with a few rows.
@@ -194,4 +204,4 @@ Patterns are common ways of achieving some functionality. Patterns aren't offere
## Links
-- Demo
+- Demo
diff --git a/docs/docs/components/elevation.md b/docs/docs/components/elevation.md
index 8d9f2ed4ed..a25b859e99 100644
--- a/docs/docs/components/elevation.md
+++ b/docs/docs/components/elevation.md
@@ -3,21 +3,12 @@ title: Elevation
---
import { Demo } from '@site/src/components/DemoComponent.jsx'
-import { CssVariables } from '@dhis2/ui'
-
import API from '../../../components/css/API.md'
# Elevation
Elevation is used to create and communicate depth in an interface.
-
-
-
-
An elevated element
-
-
-
## Usage
To use elevation, apply a `box-shadow` to an element. The `box-shadow` property takes the variable available in the UI library, as specified in the variants.
@@ -48,15 +39,10 @@ This example usees the `e200` variant.
### Variants
-
-
-
-
e100
-
e200
-
e300
-
e400
-
-
+
- There are four levels of elevation: `e100`, `e200`, `e300`, `e400`.
- Use different elevation levels to communicate different depths or stacks of elements.
diff --git a/docs/docs/components/fileinput.md b/docs/docs/components/fileinput.md
index cfa9748a1c..691e64622e 100644
--- a/docs/docs/components/fileinput.md
+++ b/docs/docs/components/fileinput.md
@@ -3,20 +3,16 @@ title: File input
---
import { Demo } from '@site/src/components/DemoComponent.jsx'
-import { FileInputField, FileListItem } from '@dhis2/ui'
-
import API from '../../../components/file-input/API.md'
# File input
A file input is used to choose and upload files.
-
-
-
+
## Usage
@@ -34,11 +30,11 @@ A file input is used to choose and upload files.
##### Label
-
-
-
+
```jsx
@@ -48,11 +44,11 @@ A file input is used to choose and upload files.
##### Button
-
-
-
+
```jsx
@@ -62,18 +58,14 @@ A file input is used to choose and upload files.
##### Help text
-
-
-
+
```jsx
-
+
```
- Use help text to tell the user about any limitations or expectations of the files, like size or format.
@@ -82,19 +74,24 @@ A file input is used to choose and upload files.
### Multiple files
-
-
-
-
-
-
-
+
```jsx
-
-
-
+
+
+
```
diff --git a/docs/docs/components/inputfield.md b/docs/docs/components/inputfield.md
index f3eec0a902..999cc5bb43 100644
--- a/docs/docs/components/inputfield.md
+++ b/docs/docs/components/inputfield.md
@@ -3,17 +3,17 @@ title: Input
---
import { Demo } from '@site/src/components/DemoComponent.jsx'
-import { InputField, TextAreaField, Tooltip } from '@dhis2/ui'
-
import API from '../../../components/input/API.md'
# Input
An input is used to enter data, like text or a number.
-
-
-
+
## Usage
@@ -38,9 +38,11 @@ An input is used to enter data, like text or a number.
##### Label
-
-
-
+
```jsx
@@ -50,12 +52,14 @@ An input is used to enter data, like text or a number.
##### Placeholder
-
-
-
+
```jsx
-
+
```
- Only use placeholder text to clarify what kind of content is expected.
@@ -65,15 +69,17 @@ An input is used to enter data, like text or a number.
##### Help text
-
-
-
+
```jsx
```
@@ -82,15 +88,13 @@ An input is used to enter data, like text or a number.
#### Size
-
-
-
-
-
-
+
```jsx
-
```
@@ -98,19 +102,18 @@ An input is used to enter data, like text or a number.
#### Width
-
-
-
-
-
-
+
```jsx
-
-
+
+
```
-- Inputs width should reflect the expected content.
+Inputs width should reflect the expected content.
+
- If a three digit number is expected then the input should be narrow.
- If a longer sentence is expected then the input should be wider.
@@ -118,9 +121,11 @@ An input is used to enter data, like text or a number.
### Textarea
-
-
-
+
```jsx
@@ -136,9 +141,11 @@ An input is used to enter data, like text or a number.
### Read-only
-
-
-
+
```jsx
@@ -150,16 +157,18 @@ An input is used to enter data, like text or a number.
### State: Error
-
-
-
+
```jsx
```
@@ -169,9 +178,17 @@ An input is used to enter data, like text or a number.
### State: Disabled
-
-
-
+
+
+```jsx
+
+```
+
+However, it is recommended to add a Tooltip to explain why the input is disabled.
```jsx
@@ -184,9 +201,11 @@ An input is used to enter data, like text or a number.
### Data type: Text
-
-
-
+
```jsx
@@ -197,9 +216,11 @@ An input is used to enter data, like text or a number.
### Data type: Number
-
-
-
+
```jsx
-
-
+
```jsx
-
-
+
```jsx
-
-
+
## Usage
@@ -37,9 +38,10 @@ Loaders are used to show that something is in progress. They keep users informed
#### Circular
-
-
-
+
```jsx
@@ -49,9 +51,11 @@ Loaders are used to show that something is in progress. They keep users informed
#### Linear
-
-
-
+
```jsx
@@ -63,14 +67,32 @@ Loaders are used to show that something is in progress. They keep users informed
#### Size
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```jsx
@@ -86,15 +108,15 @@ Loaders are used to show that something is in progress. They keep users informed
### Inverted
-
-
-
-
-
-
+
+
+```jsx
+
+```
- Inverted loaders can be used on dark backgrounds, like a blocking backdrop layer.
diff --git a/docs/docs/components/menu.md b/docs/docs/components/menu.md
index 11aef00a17..92759444be 100644
--- a/docs/docs/components/menu.md
+++ b/docs/docs/components/menu.md
@@ -3,21 +3,16 @@ title: Menu
---
import { Demo } from '@site/src/components/DemoComponent.jsx'
-import { FlyoutMenu, MenuItem, MenuDivider, MenuSectionHeader, IconSave24, IconDelete24, IconShare24, IconEdit24, IconVisualizationColumn24, IconFilter24, IconClock24, IconLaunch16 } from '@dhis2/ui'
-
import API from '../../../components/menu/API.md'
# Menu
A menu gives access to menu items, through a panel that opens from a trigger element. Menu items usually trigger actions.
-
-
-
-
-
-
-
+
## Usage
@@ -41,23 +36,39 @@ A menu gives access to menu items, through a panel that opens from a trigger ele
##### Order and grouping
-
-
-
-
-
-
-
-
-
+
```jsx
-
-
+
+
+
+
+
+
+
+
-
-
+
+
+
```
@@ -66,24 +77,12 @@ A menu gives access to menu items, through a panel that opens from a trigger ele
##### Size
-
-
-
-
-
-
-
-
-
-
-
-
+
```jsx
-
-
-
-
@@ -95,13 +94,7 @@ A menu gives access to menu items, through a panel that opens from a trigger ele
#### Nesting
-
-
-
-
-
+As shown in the [order and grouping](#order-and-grouping) section, a menu can contain multiple levels of menu items.
```jsx
@@ -119,16 +112,7 @@ A menu gives access to menu items, through a panel that opens from a trigger ele
### Dividers and section headers
-
-
-
-
-
-
-
-
-
-
+As shown in the [order and grouping](#order-and-grouping) section, a menu can contain dividers and section headers.
```jsx
@@ -148,22 +132,17 @@ A menu gives access to menu items, through a panel that opens from a trigger ele
### Suffix
-
-
- } label="Filter data" />
- } label="Change time period" />
- } label="Open in Data Visualizer app" suffix= {}/>
-
-
+
```jsx
- } label="Filter data" />
- } label="Change time period" />
}
- label="Open in Data Visualizer app"
- suffix={}
+ suffix={}
+ icon={}
+ label="Open in data visualizer"
/>
```
@@ -175,20 +154,19 @@ A menu gives access to menu items, through a panel that opens from a trigger ele
### Icon
-
-
- } label="Save" />
- } label="Rename" />
- } label="Share" />
-
-
+
```jsx
-
- } label="Save" />
- } label="Rename" />
- } label="Share" />
-
+
```
- A menu item can show an icon.
@@ -197,24 +175,14 @@ A menu gives access to menu items, through a panel that opens from a trigger ele
### Type: Destructive
-
-
- } label="Save" />
- } label="Rename" />
- } label="Share" />
-
- } label="Delete program" />
-
-
+
```jsx
-
- } label="Save" />
- } label="Rename" />
- } label="Share" />
-
- } label="Delete program" />
-
+
```
- Use destructive menu items for critical, destructive actions like _Delete_ or _End process_.
@@ -224,20 +192,14 @@ A menu gives access to menu items, through a panel that opens from a trigger ele
### State: Disabled
-
-
- } label="Save" />
- } label="Rename" />
- } label="Share" />
-
-
+
```jsx
-
- } label="Save" />
- } label="Rename" />
- } label="Share" />
-
+
```
- Use disabled menu items when a menu item is temporarily unavailable.
diff --git a/docs/docs/components/modal.md b/docs/docs/components/modal.md
index 6f430258b4..8b7c843008 100755
--- a/docs/docs/components/modal.md
+++ b/docs/docs/components/modal.md
@@ -3,18 +3,16 @@ title: Modal
---
import { Demo } from '../../src/components/DemoComponent.jsx'
-import { ModalDemoMain, ModalDemoActions, ModalDemoLoading, ModalDemoError } from '@site/src/components/ModalDemos.jsx'
-import { Modal, ModalTitle, ModalContent, ModalActions, Button } from '@dhis2/ui'
-
import API from '../../../components/modal/API.md'
# Modal
A modal shows content on a layer on top of page, interrupting a workflow and focusing a user's attention on the modal contents.
-
-
-
+
## Usage
@@ -57,36 +55,43 @@ A modal shows content on a layer on top of page, interrupting a workflow and foc
The `hide` variable used in the demo's below are initiated using `useState(true)` and set to `false` with the button you see in the demos.
:::
-
-
-
+
+
+Here's the initial state of the demo, showing the buttons that control the modal:
+
+```jsx
+
+
+
+
+
+```
+
+Here's the modal that is controlled by the buttons:
```jsx
- Modal title
+ Can be hidden
-
-
+
-
@@ -100,9 +105,10 @@ The `hide` variable used in the demo's below are initiated using `useState(true)
### State: Loading
-
-
-
+
```jsx
@@ -132,9 +138,10 @@ The `hide` variable used in the demo's below are initiated using `useState(true)
### State: Error
-
-
-
+
```jsx
diff --git a/docs/docs/components/notice-box.md b/docs/docs/components/notice-box.md
index 99abd0d4e3..b414ad1af9 100644
--- a/docs/docs/components/notice-box.md
+++ b/docs/docs/components/notice-box.md
@@ -3,7 +3,6 @@ title: Notice box
---
import { Demo } from '@site/src/components/DemoComponent.jsx'
-import { NoticeBox, Button } from '@dhis2/ui'
import API from '../../../components/notice-box/API.md'
@@ -11,11 +10,10 @@ import API from '../../../components/notice-box/API.md'
A notice box shows important information about a situation.
-
-
- Notice box content
-
-
+
## Usage
@@ -43,11 +41,10 @@ A notice box shows important information about a situation.
#### Information
-
-
- Dashboard data can take a few hours to update, so the most recent data might not be shown.
-
-
+
```jsx
@@ -60,21 +57,15 @@ A notice box shows important information about a situation.
#### Warning
-
-
- No one will be able to find this program because it doesn't have any assigned organisation units.
-
-
-
+
```jsx
-
- No one will be able to find this program because it doesn't have any
- assigned organisation units.
-
-
+
+ No one will be able to access this program. Add some Organisation Units to
+ the access list.
```
@@ -83,21 +74,15 @@ A notice box shows important information about a situation.
#### Error
-
-
- There isn't any data because there was a problem generating analytics tables.
-
-
-
+
```jsx
-
- There isn't any data because there was a problem generating analytics
- tables.
-
-
+
+ Data could be accessed from outside this instance. Update access rules
+ immediately.
```
@@ -106,16 +91,14 @@ A notice box shows important information about a situation.
#### Valid
-
-
- Your password has been reset. You can log in with your username and password.
-
-
+
```jsx
-
- Your password has been reset. You can log in with your username and
- password.
+
+ Programs using these rules are updated automatically.
```
diff --git a/docs/docs/components/org-unit-tree.md b/docs/docs/components/org-unit-tree.md
index dbcdb1dd6e..28b7711d92 100644
--- a/docs/docs/components/org-unit-tree.md
+++ b/docs/docs/components/org-unit-tree.md
@@ -3,8 +3,6 @@ title: Organisation unit tree
---
import { Demo } from '@site/src/components/DemoComponent.jsx'
-import { OrganisationUnitTree } from '@dhis2/ui'
-
import API from '../../../components/organisation-unit-tree/API.md'
# Organisation unit tree
@@ -13,9 +11,10 @@ import API from '../../../components/organisation-unit-tree/API.md'
An organisation unit tree is used to choose organisation units from a hierarchy.
-
-
-
+
## Usage
@@ -32,6 +31,11 @@ An organisation unit tree is used to choose organisation units from a hierarchy.
### Selection mode: Single
+
+
- In _Single selection mode_ only one organisation unit can be chosen.
- Use this mode when choosing more than one organisation unit isn't valid.
diff --git a/docs/docs/components/pagination.md b/docs/docs/components/pagination.md
index 491f607024..083b410c6a 100644
--- a/docs/docs/components/pagination.md
+++ b/docs/docs/components/pagination.md
@@ -3,7 +3,6 @@ title: Pagination
---
import { Demo } from '@site/src/components/DemoComponent.jsx'
-import { Pagination } from '@dhis2/ui'
import API from '../../../components/pagination/API.md'
@@ -11,9 +10,10 @@ import API from '../../../components/pagination/API.md'
Pagination is used to navigate content across several pages.
-
-
-
+
## Usage
@@ -39,9 +39,11 @@ Different elements of the pagination component can be included, depending on the
### Element: Page number selector
-
-
-
+
```jsx
-
-
+
```jsx
-
-
+
```jsx
-
-
+
## Usage
diff --git a/docs/docs/components/radio.md b/docs/docs/components/radio.md
index 4a6192de55..57fbced36b 100644
--- a/docs/docs/components/radio.md
+++ b/docs/docs/components/radio.md
@@ -3,18 +3,18 @@ title: Radio
---
import { Demo } from '@site/src/components/DemoComponent.jsx'
-import { Radio } from '@dhis2/ui'
-
import API from '../../../components/radio/API.md'
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
# Radio
Radio inputs are used to choose one item from a list.
-
-
-
-
+
## Usage
@@ -43,10 +43,20 @@ Radio inputs are used to choose one item from a list.
#### Size
-
-
-
-
+
+
+
+
+
+
+
+
```jsx
diff --git a/docs/docs/components/segmented-control.md b/docs/docs/components/segmented-control.md
index 1e1da41e50..7c750f7774 100644
--- a/docs/docs/components/segmented-control.md
+++ b/docs/docs/components/segmented-control.md
@@ -3,7 +3,6 @@ title: Segmented control
---
import { Demo } from '@site/src/components/DemoComponent.jsx'
-import { SegmentedControl } from '@dhis2/ui'
import API from '../../../components/segmented-control/API.md'
@@ -11,27 +10,10 @@ import API from '../../../components/segmented-control/API.md'
A segmented control is used to choose between related options that have an effect on a related area.
-
- {
- console.log(value)
- }}
- />
-
+
## Usage
@@ -39,15 +21,15 @@ A segmented control is used to choose between related options that have an effec
-
-
-
-
-
-
-
-
-
-
-
-
-
+
## Usage
@@ -40,24 +28,17 @@ Selects are used to choose one or more items from a list of options.
#### Single select
-
-
-
-
-
-
-
-
-
-
-
-
+
```jsx
-
-
-
+
+
+
```
@@ -65,19 +46,14 @@ Selects are used to choose one or more items from a list of options.
#### Multi select
-
-
-
-
-
-
-
-
-
-
+
```jsx
-
+
@@ -97,20 +73,11 @@ Selects are used to choose one or more items from a list of options.
##### Placeholder
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
```jsx
@@ -127,20 +94,11 @@ Selects are used to choose one or more items from a list of options.
##### Help text
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
```jsx
-
-
-
-
-
-
-
-
-
-
-
+
```jsx
-
-
-
-
-
@@ -195,20 +140,10 @@ Selects are used to choose one or more items from a list of options.
### Filtering
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
```jsx
@@ -225,20 +160,10 @@ Selects are used to choose one or more items from a list of options.
### Clearing
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
```jsx
@@ -255,20 +180,11 @@ Selects are used to choose one or more items from a list of options.
### Prefix
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
```jsx
@@ -285,25 +201,15 @@ Selects are used to choose one or more items from a list of options.
### State: Error
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
```jsx
@@ -319,20 +225,10 @@ Selects are used to choose one or more items from a list of options.
### State: Disabled
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
```jsx
diff --git a/docs/docs/components/switch.md b/docs/docs/components/switch.md
index 42399666f4..7e7bc91025 100644
--- a/docs/docs/components/switch.md
+++ b/docs/docs/components/switch.md
@@ -3,7 +3,6 @@ title: Switch
---
import { Demo } from '@site/src/components/DemoComponent.jsx'
-import { Switch } from '@dhis2/ui'
import API from '../../../components/switch/API.md'
@@ -11,16 +10,15 @@ import API from '../../../components/switch/API.md'
Switches are used to toggle something between an on and off state.
-
-
-
-
+
## Usage
```jsx
-
-
+
```
### When to use
@@ -40,14 +38,13 @@ Switches are used to toggle something between an on and off state.
#### Size
-
-
-
-
+
```jsx
-
-
+
```
- Switches are available in two sizes, regular and `dense`. Regular sized switches are useful when there's space available. Use `dense` sized switches in compact, information-dense interfaces.
diff --git a/docs/docs/components/tab.md b/docs/docs/components/tab.md
index ed27492cac..e6963b22c8 100644
--- a/docs/docs/components/tab.md
+++ b/docs/docs/components/tab.md
@@ -3,7 +3,6 @@ title: Tabs
---
import { Demo } from '@site/src/components/DemoComponent.jsx'
-import { TabBar, Tab, IconSubscribe16, IconShare16, IconDownload16 } from '@dhis2/ui'
import API from '../../../components/tab/API.md'
@@ -11,14 +10,10 @@ import API from '../../../components/tab/API.md'
Tabs are used to navigate between different views within the same page or context.
-
-
- Tab label 1
- Tab label 2
- Tab label 3
- Tab label 4
-
-
+
## Usage
@@ -43,13 +38,10 @@ Tabs are used to navigate between different views within the same page or contex
### Icon
-
-
- }>Notifications
- } selected>Sharing and access
- }>Downloads
-
-
+
```jsx
@@ -67,14 +59,12 @@ Tabs are used to navigate between different views within the same page or contex
### State: Disabled
-
-
- Tab label 1
- Tab label 2
- Tab label 3
- Tab label 4
-
-
+
+
+In the example above you can see the 3rd tab is disabled.
```jsx
diff --git a/docs/docs/components/tag.md b/docs/docs/components/tag.md
index f93c9aa182..c6c23e034d 100644
--- a/docs/docs/components/tag.md
+++ b/docs/docs/components/tag.md
@@ -3,7 +3,8 @@ title: Tag
---
import { Demo } from '@site/src/components/DemoComponent.jsx'
-import { Chip, Tag, IconError16, IconCheckmarkCircle16 } from '@dhis2/ui'
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
import API from '../../../components/tag/API.md'
@@ -11,9 +12,10 @@ import API from '../../../components/tag/API.md'
Tags are used to label items by a set of shared properties, like category or status.
-
- Tag label
-
+
## Usage
@@ -28,12 +30,39 @@ Tags are used to label items by a set of shared properties, like category or sta
### Variants
-| Variant | When to use |
-| ---------------------------- | ------------------------------------------------------------------------- |
-| Default | The default choice. Use this if no other variant matches the use case. |
-| Neutral | Use to communicate neutrality, when something isn't positive or negative. |
-| Positive | Use to communicate success or validity. |
-| Negative | Use to communicate a problem or error. |
+| Variant | When to use |
+| -------- | ------------------------------------------------------------------------- |
+| Default | The default choice. Use this if no other variant matches the use case. |
+| Neutral | Use to communicate neutrality, when something isn't positive or negative. |
+| Positive | Use to communicate success or validity. |
+| Negative | Use to communicate a problem or error. |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```jsx
Default
@@ -52,12 +81,10 @@ Tags are used to label items by a set of shared properties, like category or sta
### Icon
-
-