diff --git a/CHANGELOG.md b/CHANGELOG.md index bce6f9aaed..f96af85b66 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,38 @@ +# [9.12.0](https://github.com/dhis2/ui/compare/v9.11.8...v9.12.0) (2024-10-29) + + +### Features + +* **icons:** add link-off icons ([e72be1e](https://github.com/dhis2/ui/commit/e72be1ec672fd16072a33ec057ccc3413713abeb)) + +## [9.11.8](https://github.com/dhis2/ui/compare/v9.11.7...v9.11.8) (2024-10-15) + + +### Bug Fixes + +* **sharing-dialog:** add 'route' to SharingType type ([#1617](https://github.com/dhis2/ui/issues/1617)) ([1d9664a](https://github.com/dhis2/ui/commit/1d9664a80410f8ea6a8a4a4a7c3f6acc36a74587)) + +## [9.11.7](https://github.com/dhis2/ui/compare/v9.11.6...v9.11.7) (2024-10-01) + + +### Bug Fixes + +* revert "fix: select-field not showing in correct place" ([#1614](https://github.com/dhis2/ui/issues/1614)) ([c83de6b](https://github.com/dhis2/ui/commit/c83de6b0a8993ac16a87a3351ec96ff1aa43151b)) + +## [9.11.6](https://github.com/dhis2/ui/compare/v9.11.5...v9.11.6) (2024-09-29) + + +### Bug Fixes + +* **translations:** sync translations from transifex (master) ([491bf04](https://github.com/dhis2/ui/commit/491bf0477e8990e591b32ebfb32e6837f5e563b3)) + +## [9.11.5](https://github.com/dhis2/ui/compare/v9.11.4...v9.11.5) (2024-09-26) + + +### Bug Fixes + +* update default props to JS default params ([#1598](https://github.com/dhis2/ui/issues/1598)) ([20e343f](https://github.com/dhis2/ui/commit/20e343fc9e34570dcd8678ddb449d48c5b62a140)) + # [10.0.0-alpha.6](https://github.com/dhis2/ui/compare/v10.0.0-alpha.5...v10.0.0-alpha.6) (2024-10-29) diff --git a/collections/ui/API.md b/collections/ui/API.md index e23a8369ff..8e096b79ed 100644 --- a/collections/ui/API.md +++ b/collections/ui/API.md @@ -796,7 +796,7 @@ import { Input } from '@dhis2/ui' |role|string|||Sets a role attribute on the input| |step|string|||The [native `step` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-step), for use when `type` is `'number'`| |tabIndex|string|||| -|type|'text' │ 'number' │ 'password' │ 'email' │ 'url' │ 'tel' │ 'date' │ 'datetime' │ 'datetime-local' │ 'month' │ 'week' │ 'time' │ 'search'|`'text'`||The native input `type` attribute| +|type|inputTypes|`'text'`||The native input `type` attribute| |valid|custom|||Applies 'valid' appearance for validation feedback. Mutually exclusive with `error` and `warning` props| |value|string|||Value in the input. Can be used to control the component (recommended). Passed to event handler callbacks in object| |warning|custom|||Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props| @@ -840,7 +840,7 @@ import { InputField } from '@dhis2/ui' |required|boolean|||Indicates this input is required| |step|string|||The [native `step` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-step), for use when `type` is `'number'`| |tabIndex|string|||| -|type|custom|||Type of input| +|type|inputTypes|||Type of input| |valid|custom|||Applies 'valid' appearance for validation feedback. Mutually exclusive with `error` and `warning` props| |validationText|string|||Text below input for validation feedback. Receives styles depending on validation status| |value|string|||Value in the input. Can be used to control the component (recommended). Passed to event handler callbacks in object| @@ -1462,7 +1462,7 @@ import { Pagination } from '@dhis2/ui' |pageSelectText|string │ function|`() => i18n.t('Page')`||| |pageSizeSelectText|string │ function|`() => i18n.t('Items per page')`||| |pageSizes|arrayOf(string)|`['5', '10', '20', '30', '40', '50', '75', '100']`||| -|pageSummaryText|string │ function|`getDefaultPageSummaryText`||| +|pageSummaryText|string │ function|||| |previousPageText|string │ function|`() => i18n.t('Previous')`||| |total|number|||| |onPageChange|function|||| @@ -2707,7 +2707,7 @@ import { TableHead } from '@dhis2/ui' |---|---|---|---|---| |children|node|||Should be `` components| |className|string|||| -|dataTest|string|`'dhis2-uicore-tablehead'`||| +|dataTest|string|||| |role|string|||| ### TableRow diff --git a/components/alert/src/alert-bar/alert-bar.js b/components/alert/src/alert-bar/alert-bar.js index 8e84bd2c23..4440e1996f 100644 --- a/components/alert/src/alert-bar/alert-bar.js +++ b/components/alert/src/alert-bar/alert-bar.js @@ -13,10 +13,10 @@ const AlertBar = ({ children, className, critical, - dataTest, - duration, + dataTest = 'dhis2-uicore-alertbar', + duration = 8000, hidden, - icon, + icon = true, permanent, success, warning, @@ -142,12 +142,6 @@ const alertTypePropType = mutuallyExclusive( PropTypes.bool ) -AlertBar.defaultProps = { - duration: 8000, - dataTest: 'dhis2-uicore-alertbar', - icon: true, -} - AlertBar.propTypes = { /** An array of 0-2 action objects `[{label: "Save", onClick: clickHandler}]`*/ diff --git a/components/alert/src/alert-bar/icon.js b/components/alert/src/alert-bar/icon.js index cb78de8a30..dec45757b7 100644 --- a/components/alert/src/alert-bar/icon.js +++ b/components/alert/src/alert-bar/icon.js @@ -9,7 +9,7 @@ import { import PropTypes from 'prop-types' import React from 'react' -const StatusIcon = ({ error, warning, valid, info, defaultTo }) => { +const StatusIcon = ({ error, warning, valid, info, defaultTo = null }) => { if (error) { return } @@ -26,10 +26,6 @@ const StatusIcon = ({ error, warning, valid, info, defaultTo }) => { return defaultTo } -StatusIcon.defaultProps = { - defaultTo: null, -} - StatusIcon.propTypes = { defaultTo: PropTypes.element, error: PropTypes.bool, diff --git a/components/alert/src/alert-stack/alert-stack.js b/components/alert/src/alert-stack/alert-stack.js index c4b35ed022..31ce8f4838 100644 --- a/components/alert/src/alert-stack/alert-stack.js +++ b/components/alert/src/alert-stack/alert-stack.js @@ -4,7 +4,11 @@ import cx from 'classnames' import PropTypes from 'prop-types' import React from 'react' -export const AlertStack = ({ className, children, dataTest }) => ( +export const AlertStack = ({ + className, + children, + dataTest = 'dhis2-uicore-alertstack', +}) => (
{children} @@ -33,10 +37,6 @@ export const AlertStack = ({ className, children, dataTest }) => ( ) -AlertStack.defaultProps = { - dataTest: 'dhis2-uicore-alertstack', -} - AlertStack.propTypes = { children: PropTypes.node, className: PropTypes.string, diff --git a/components/box/src/box.js b/components/box/src/box.js index da9daa35b1..0221e1462e 100644 --- a/components/box/src/box.js +++ b/components/box/src/box.js @@ -11,7 +11,7 @@ export const Box = ({ maxWidth, marginTop, children, - dataTest, + dataTest = 'dhis2-uicore-box', className, }) => (
@@ -31,10 +31,6 @@ export const Box = ({
) -Box.defaultProps = { - dataTest: 'dhis2-uicore-box', -} - Box.propTypes = { children: PropTypes.node, className: PropTypes.string, diff --git a/components/button/src/button-strip/button-strip.js b/components/button/src/button-strip/button-strip.js index 38ccc7a8d5..3857a0b194 100644 --- a/components/button/src/button-strip/button-strip.js +++ b/components/button/src/button-strip/button-strip.js @@ -4,7 +4,13 @@ import cx from 'classnames' import PropTypes from 'prop-types' import React, { Children } from 'react' -const ButtonStrip = ({ className, children, middle, end, dataTest }) => ( +const ButtonStrip = ({ + className, + children, + middle, + end, + dataTest = 'dhis2-uicore-buttonstrip', +}) => (
( const alignmentPropType = mutuallyExclusive(['middle', 'end'], PropTypes.bool) -ButtonStrip.defaultProps = { - dataTest: 'dhis2-uicore-buttonstrip', -} - ButtonStrip.propTypes = { children: PropTypes.node, className: PropTypes.string, diff --git a/components/button/src/button/button.js b/components/button/src/button/button.js index a920e49b77..b25843f6e7 100644 --- a/components/button/src/button/button.js +++ b/components/button/src/button/button.js @@ -8,7 +8,7 @@ import styles from './button.styles.js' export const Button = ({ children, className, - dataTest, + dataTest = 'dhis2-uicore-button', destructive, disabled, icon, @@ -20,7 +20,7 @@ export const Button = ({ small, tabIndex, toggled, - type, + type = 'button', value, onBlur, onClick, @@ -94,11 +94,6 @@ export const Button = ({ ) } -Button.defaultProps = { - type: 'button', - dataTest: 'dhis2-uicore-button', -} - Button.propTypes = { /** Component to render inside the button */ children: PropTypes.node, diff --git a/components/button/src/dropdown-button/dropdown-button.js b/components/button/src/dropdown-button/dropdown-button.js index 82abc73249..418235f37c 100644 --- a/components/button/src/dropdown-button/dropdown-button.js +++ b/components/button/src/dropdown-button/dropdown-button.js @@ -67,6 +67,10 @@ class DropdownButton extends Component { open: false, } + static defaultProps = { + dataTest: 'dhis2-uicore-dropdownbutton', + } + anchorRef = React.createRef() componentDidMount() { @@ -124,7 +128,7 @@ class DropdownButton extends Component { tabIndex, type, initialFocus, - dataTest, + dataTest = 'dhis2-uicore-dropdownbutton', } = this.props const open = typeof this.props.open === 'boolean' @@ -181,10 +185,6 @@ class DropdownButton extends Component { } } -DropdownButton.defaultProps = { - dataTest: 'dhis2-uicore-dropdownbutton', -} - DropdownButton.propTypes = { /** Children to render inside the buton */ children: PropTypes.node, diff --git a/components/button/src/split-button/split-button.js b/components/button/src/split-button/split-button.js index 4aab19d6f5..21041d1c26 100644 --- a/components/button/src/split-button/split-button.js +++ b/components/button/src/split-button/split-button.js @@ -20,6 +20,10 @@ class SplitButton extends Component { open: false, } + static defaultProps = { + dataTest: 'dhis2-uicore-splitbutton', + } + anchorRef = React.createRef() componentDidMount() { @@ -72,7 +76,7 @@ class SplitButton extends Component { disabled, type, tabIndex, - dataTest, + dataTest = 'dhis2-uicore-splitbutton', initialFocus, } = this.props @@ -159,10 +163,6 @@ class SplitButton extends Component { } } -SplitButton.defaultProps = { - dataTest: 'dhis2-uicore-splitbutton', -} - SplitButton.propTypes = { children: PropTypes.string, className: PropTypes.string, diff --git a/components/calendar/src/calendar-input/calendar-input.js b/components/calendar/src/calendar-input/calendar-input.js index c8f17c3cb2..cfca1f98c1 100644 --- a/components/calendar/src/calendar-input/calendar-input.js +++ b/components/calendar/src/calendar-input/calendar-input.js @@ -37,6 +37,7 @@ export const CalendarInput = ({ format, strictValidation, inputWidth, + dataTest = 'dhis2-uiwidgets-calendar-inputfield', ...rest } = {}) => { const ref = useRef() @@ -147,6 +148,7 @@ export const CalendarInput = ({ { const [selectedDateString, setSelectedDateString] = useState(date) const languageDirection = useResolvedDirection(dir, locale) @@ -70,12 +70,6 @@ export const Calendar = ({ ) } -Calendar.defaultProps = { - cellSize: '32px', - width: '240px', - weekDayFormat: 'narrow', -} - export const CalendarProps = { /** the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts */ calendar: PropTypes.any.isRequired, diff --git a/components/calendar/src/stories/calendar-story-wrapper.js b/components/calendar/src/stories/calendar-story-wrapper.js index b5da716267..940ab5323d 100644 --- a/components/calendar/src/stories/calendar-story-wrapper.js +++ b/components/calendar/src/stories/calendar-story-wrapper.js @@ -6,13 +6,13 @@ import { Calendar } from '../calendar/calendar.js' const { calendars, numberingSystems } = constants export const CalendarStoryWrapper = (props) => { const { - calendar, + calendar = 'gregory', locale, timeZone, dir, - component: Component, + component: Component = Calendar, date, - weekDayFormat, + weekDayFormat = 'narrow', } = props const [selectedCalendar, setSelectedCalendar] = useState(calendar) const [selectedNumberingSystem, setSelectedNumberingSystem] = useState() @@ -150,12 +150,6 @@ export const CalendarStoryWrapper = (props) => { ) } -CalendarStoryWrapper.defaultProps = { - calendar: 'gregorian', - component: Calendar, - weekDayFormat: 'narrow', -} - CalendarStoryWrapper.propTypes = { calendar: PropTypes.string.isRequired, component: PropTypes.elementType.isRequired, diff --git a/components/card/src/card.js b/components/card/src/card.js index 9319d2b974..8de324e841 100644 --- a/components/card/src/card.js +++ b/components/card/src/card.js @@ -3,7 +3,7 @@ import cx from 'classnames' import PropTypes from 'prop-types' import React from 'react' -const Card = ({ className, children, dataTest }) => ( +const Card = ({ className, children, dataTest = 'dhis2-uicore-card' }) => (
{children} @@ -23,10 +23,6 @@ const Card = ({ className, children, dataTest }) => (
) -Card.defaultProps = { - dataTest: 'dhis2-uicore-card', -} - Card.propTypes = { children: PropTypes.node, className: PropTypes.string, diff --git a/components/center/src/center.js b/components/center/src/center.js index 7222bbb4aa..12275421a6 100644 --- a/components/center/src/center.js +++ b/components/center/src/center.js @@ -3,7 +3,15 @@ import PropTypes from 'prop-types' import React, { forwardRef } from 'react' export const Center = forwardRef( - ({ className, dataTest, children, position }, ref) => ( + ( + { + className, + dataTest = 'dhis2-uicore-centeredcontent', + children, + position = 'middle', + }, + ref + ) => (
( ) -CheckboxField.defaultProps = { - dataTest: 'dhis2-uiwidgets-checkboxfield', -} - CheckboxField.propTypes = { checked: PropTypes.bool, className: PropTypes.string, diff --git a/components/checkbox/src/checkbox/checkbox.js b/components/checkbox/src/checkbox/checkbox.js index c4e95492df..735a1fa6c1 100644 --- a/components/checkbox/src/checkbox/checkbox.js +++ b/components/checkbox/src/checkbox/checkbox.js @@ -58,10 +58,16 @@ class Checkbox extends Component { } } + static defaultProps = { + checked: false, + indeterminate: false, + dataTest: 'dhis2-uicore-checkbox', + } + render() { const { - checked, - indeterminate, + checked = false, + indeterminate = false, className, disabled, error, @@ -72,7 +78,7 @@ class Checkbox extends Component { value, warning, dense, - dataTest, + dataTest = 'dhis2-uicore-checkbox', } = this.props const classes = cx({ @@ -178,12 +184,6 @@ class Checkbox extends Component { } } -Checkbox.defaultProps = { - checked: false, - indeterminate: false, - dataTest: 'dhis2-uicore-checkbox', -} - const uniqueOnStatePropType = mutuallyExclusive( ['checked', 'indeterminate'], PropTypes.bool diff --git a/components/chip/src/chip.js b/components/chip/src/chip.js index 221bf677cd..c06364b3b3 100644 --- a/components/chip/src/chip.js +++ b/components/chip/src/chip.js @@ -19,11 +19,11 @@ const Chip = ({ onRemove, onClick, icon, - dataTest, - marginBottom, + dataTest = 'dhis2-uicore-chip', + marginBottom = 4, marginLeft, marginRight, - marginTop, + marginTop = 4, marginInlineStart, marginInlineEnd, }) => ( @@ -114,12 +114,6 @@ const Chip = ({ ) -Chip.defaultProps = { - dataTest: 'dhis2-uicore-chip', - marginBottom: 4, - marginTop: 4, -} - Chip.propTypes = { children: PropTypes.any, className: PropTypes.string, diff --git a/components/cover/src/cover.js b/components/cover/src/cover.js index 01b2422fdc..2ddb89ff52 100644 --- a/components/cover/src/cover.js +++ b/components/cover/src/cover.js @@ -10,7 +10,13 @@ const createClickHandler = (onClick) => (event) => { } } -const Cover = ({ children, className, dataTest, onClick, translucent }) => ( +const Cover = ({ + children, + className, + dataTest = 'dhis2-uicore-componentcover', + onClick, + translucent, +}) => (
(
) -Cover.defaultProps = { - dataTest: 'dhis2-uicore-componentcover', -} - Cover.propTypes = { children: PropTypes.node, className: PropTypes.string, diff --git a/components/css/src/css-variables/css-variables.js b/components/css/src/css-variables/css-variables.js index d1136932fa..959956efc7 100644 --- a/components/css/src/css-variables/css-variables.js +++ b/components/css/src/css-variables/css-variables.js @@ -15,7 +15,13 @@ const toCustomPropertyString = (themeSection) => .map(([key, value]) => `--${key}: ${value};`) .join('\n') -const CssVariables = ({ colors, theme, layers, spacers, elevations }) => { +const CssVariables = ({ + colors = false, + theme = false, + layers = false, + spacers = false, + elevations = false, +}) => { const allowedProps = { colors, theme, layers, spacers, elevations } const variables = Object.keys(allowedProps) // Filter all props that are false @@ -36,14 +42,6 @@ const CssVariables = ({ colors, theme, layers, spacers, elevations }) => { ) } -CssVariables.defaultProps = { - colors: false, - theme: false, - layers: false, - spacers: false, - elevations: false, -} - CssVariables.propTypes = { colors: PropTypes.bool, elevations: PropTypes.bool, diff --git a/components/divider/src/divider.js b/components/divider/src/divider.js index 1db09c1b3e..10f75165db 100644 --- a/components/divider/src/divider.js +++ b/components/divider/src/divider.js @@ -15,7 +15,12 @@ const flipMargin = (margin) => { return margin } -const Divider = ({ className, dataTest, dense, margin }) => { +const Divider = ({ + className, + dataTest = 'dhis2-uicore-divider', + dense, + margin = `${spacers.dp8} 0`, +}) => { return (
- - ) -} diff --git a/components/select/src/single-select-field/single-select-field.js b/components/select/src/single-select-field/single-select-field.js index 662fd076fc..f3766e2a93 100644 --- a/components/select/src/single-select-field/single-select-field.js +++ b/components/select/src/single-select-field/single-select-field.js @@ -15,6 +15,17 @@ const translate = (prop, interpolationObject) => { return prop } class SingleSelectField extends React.Component { + static defaultProps = { + dataTest: 'dhis2-uiwidgets-singleselectfield', + selected: '', + + clearText: () => i18n.t('Clear'), + empty: () => i18n.t('No data found'), + filterPlaceholder: () => i18n.t('Type to filter options'), + loadingText: () => i18n.t('Loading options'), + noMatchText: () => i18n.t('No options found'), + } + render() { const { className, @@ -29,7 +40,7 @@ class SingleSelectField extends React.Component { warning, disabled, loading, - selected, + selected = SingleSelectField.defaultProps.selected, tabIndex, helpText, validationText, @@ -38,17 +49,18 @@ class SingleSelectField extends React.Component { inputWidth, children, clearable, - clearText, + clearText = SingleSelectField.defaultProps.clearText, filterable, - filterPlaceholder, + filterPlaceholder = SingleSelectField.defaultProps + .filterPlaceholder, placeholder, prefix, - empty, - loadingText, - noMatchText, + empty = SingleSelectField.defaultProps.empty, + loadingText = SingleSelectField.defaultProps.loadingText, + noMatchText = SingleSelectField.defaultProps.noMatchText, initialFocus, dense, - dataTest, + dataTest = SingleSelectField.defaultProps.dataTest, } = this.props return ( @@ -99,17 +111,6 @@ class SingleSelectField extends React.Component { } } -SingleSelectField.defaultProps = { - dataTest: 'dhis2-uiwidgets-singleselectfield', - selected: '', - - clearText: () => i18n.t('Clear'), - empty: () => i18n.t('No data found'), - filterPlaceholder: () => i18n.t('Type to filter options'), - loadingText: () => i18n.t('Loading options'), - noMatchText: () => i18n.t('No options found'), -} - SingleSelectField.propTypes = { /** Should be `SingleSelectOption` components */ children: PropTypes.node, 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 bd0a610a00..cf20d6dbc9 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 @@ -39,7 +39,15 @@ export default { // default args for stories args: { // Fix default prop issues - causes 'i18n is not defined' error - ...SingleSelectField.defaultProps, + dataTest: 'dhis2-uiwidgets-singleselectfield', + selected: '', + + clearText: 'Clear', + empty: 'No data found', + filterPlaceholder: 'Type to filter options', + loadingText: 'Loading options', + noMatchText: 'No options found', + label: 'Default label', children: options, onChange: onChange, diff --git a/components/select/src/single-select-option/single-select-option.js b/components/select/src/single-select-option/single-select-option.js index 91370fe9d4..3614f2b64f 100644 --- a/components/select/src/single-select-option/single-select-option.js +++ b/components/select/src/single-select-option/single-select-option.js @@ -9,7 +9,7 @@ const SingleSelectOption = ({ disabled, onClick, className, - dataTest, + dataTest = 'dhis2-uicore-singleselectoption', value, }) => (
) -SingleSelectOption.defaultProps = { - dataTest: 'dhis2-uicore-singleselectoption', -} - SingleSelectOption.propTypes = { label: PropTypes.string.isRequired, value: PropTypes.string.isRequired, diff --git a/components/select/src/single-select/input.js b/components/select/src/single-select/input.js index 4d2b4f4a1b..80c119f842 100644 --- a/components/select/src/single-select/input.js +++ b/components/select/src/single-select/input.js @@ -21,7 +21,7 @@ const Input = ({ options, className, disabled, - inputMaxHeight, + inputMaxHeight = '100px', }) => { const hasSelection = selected && typeof selected === 'string' const onClear = (e) => { @@ -84,10 +84,6 @@ const Input = ({ ) } -Input.defaultProps = { - inputMaxHeight: '100px', -} - Input.propTypes = { dataTest: PropTypes.string.isRequired, className: PropTypes.string, diff --git a/components/select/src/single-select/menu.js b/components/select/src/single-select/menu.js index 2447246654..35e549702d 100644 --- a/components/select/src/single-select/menu.js +++ b/components/select/src/single-select/menu.js @@ -11,7 +11,7 @@ const Menu = ({ options, onChange, selected, - empty, + empty = '', handleFocusInput, handleClose, dataTest, @@ -62,10 +62,6 @@ const Menu = ({ return {children} } -Menu.defaultProps = { - empty: '', -} - Menu.propTypes = { dataTest: PropTypes.string.isRequired, empty: PropTypes.node, diff --git a/components/select/src/single-select/single-select.js b/components/select/src/single-select/single-select.js index 8ce8f279aa..9f190e1ac7 100644 --- a/components/select/src/single-select/single-select.js +++ b/components/select/src/single-select/single-select.js @@ -10,7 +10,7 @@ import { Menu } from './menu.js' const SingleSelect = ({ className, - selected, + selected = '', tabIndex, maxHeight, inputMaxHeight, @@ -35,7 +35,7 @@ const SingleSelect = ({ noMatchText, initialFocus, dense, - dataTest, + dataTest = 'dhis2-uicore-singleselect', }) => { // If the select is filterable, use a filterable menu const menu = filterable ? ( @@ -105,11 +105,6 @@ const SingleSelect = ({ ) } -SingleSelect.defaultProps = { - selected: '', - dataTest: 'dhis2-uicore-singleselect', -} - SingleSelect.propTypes = { children: PropTypes.node, className: PropTypes.string, diff --git a/components/selector-bar/src/selector-bar-item/selector-bar-item.js b/components/selector-bar/src/selector-bar-item/selector-bar-item.js index 2e4cb91fe1..5f68f3e75d 100644 --- a/components/selector-bar/src/selector-bar-item/selector-bar-item.js +++ b/components/selector-bar/src/selector-bar-item/selector-bar-item.js @@ -27,7 +27,7 @@ const offsetModifier = { export const SelectorBarItem = ({ children, className, - dataTest, + dataTest = 'dhis2-ui-selectorbaritem', disabled, displayOnly, label, @@ -166,10 +166,6 @@ export const SelectorBarItem = ({ ) } -SelectorBarItem.defaultProps = { - dataTest: 'dhis2-ui-selectorbaritem', -} - SelectorBarItem.propTypes = { label: PropTypes.string.isRequired, children: PropTypes.any, diff --git a/components/selector-bar/src/selector-bar/selector-bar.js b/components/selector-bar/src/selector-bar/selector-bar.js index 495dafc0a2..61ba0c46e7 100644 --- a/components/selector-bar/src/selector-bar/selector-bar.js +++ b/components/selector-bar/src/selector-bar/selector-bar.js @@ -33,7 +33,7 @@ export const SelectorBar = ({ className, children, onClearSelectionClick, - dataTest, + dataTest = 'dhis2-ui-selectorbar', disableClearSelections, additionalContent, ariaLabel, @@ -160,10 +160,6 @@ export const SelectorBar = ({ ) } -SelectorBar.defaultProps = { - dataTest: 'dhis2-ui-selectorbar', -} - SelectorBar.propTypes = { children: PropTypes.any.isRequired, additionalContent: PropTypes.any, diff --git a/components/sharing-dialog/i18n/vi.po b/components/sharing-dialog/i18n/vi.po index 0d7a3c2f2b..05fa82f245 100644 --- a/components/sharing-dialog/i18n/vi.po +++ b/components/sharing-dialog/i18n/vi.po @@ -1,16 +1,17 @@ # # Translators: -# phil_dhis2, 2021 +# Philip Larsen Donnelly, 2021 # Viktor Varland , 2021 # Mai Nguyen , 2021 +# Thuy Nguyen , 2024 # msgid "" msgstr "" "Project-Id-Version: i18next-conv\n" "POT-Creation-Date: 2021-11-25T09:59:40.995Z\n" "PO-Revision-Date: 2021-10-01 23:39+0000\n" -"Last-Translator: Mai Nguyen , 2021\n" -"Language-Team: Vietnamese (https://www.transifex.com/hisp-uio/teams/100509/vi/)\n" +"Last-Translator: Thuy Nguyen , 2024\n" +"Language-Team: Vietnamese (https://app.transifex.com/hisp-uio/teams/100509/vi/)\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=UTF-8\n" "Content-Transfer-Encoding: 8bit\n" @@ -18,7 +19,7 @@ msgstr "" "Plural-Forms: nplurals=1; plural=0;\n" msgid "View only" -msgstr "" +msgstr "Chỉ xem" msgid "View and edit" msgstr "" diff --git a/components/sharing-dialog/src/autocomplete/autocomplete.js b/components/sharing-dialog/src/autocomplete/autocomplete.js index 265385df29..f16a5a329f 100644 --- a/components/sharing-dialog/src/autocomplete/autocomplete.js +++ b/components/sharing-dialog/src/autocomplete/autocomplete.js @@ -8,7 +8,7 @@ import i18n from '../locales/index.js' import { MenuPopup } from './menu-popup.js' export const Autocomplete = ({ - dataTest, + dataTest = 'dhis2-sharingdialog-autocomplete', inputWidth, label, loading, @@ -60,10 +60,6 @@ export const Autocomplete = ({ ) } -Autocomplete.defaultProps = { - dataTest: 'dhis2-sharingdialog-autocomplete', -} - Autocomplete.propTypes = { searchResults: PropTypes.arrayOf( PropTypes.shape({ diff --git a/components/sharing-dialog/src/autocomplete/menu-popup.js b/components/sharing-dialog/src/autocomplete/menu-popup.js index a0aea6717c..afba09f4ef 100644 --- a/components/sharing-dialog/src/autocomplete/menu-popup.js +++ b/components/sharing-dialog/src/autocomplete/menu-popup.js @@ -7,7 +7,7 @@ import React from 'react' export const MenuPopup = ({ children, dataTest, - maxHeight, + maxHeight = '280px', menuWidth, onClick, menuRef, @@ -33,10 +33,6 @@ export const MenuPopup = ({ ) } -MenuPopup.defaultProps = { - maxHeight: '280px', -} - MenuPopup.propTypes = { dataTest: PropTypes.string.isRequired, menuRef: PropTypes.object.isRequired, diff --git a/components/sharing-dialog/src/modal/modal.js b/components/sharing-dialog/src/modal/modal.js index ff2cdbc49c..0ade1762e2 100644 --- a/components/sharing-dialog/src/modal/modal.js +++ b/components/sharing-dialog/src/modal/modal.js @@ -9,7 +9,12 @@ import PropTypes from 'prop-types' import React from 'react' import i18n from '../locales/index.js' -export const Modal = ({ onClose, name, children, dataTest }) => { +export const Modal = ({ + onClose, + name, + children, + dataTest = 'dhis2-uicore-sharingdialog-modal', +}) => { const title = name ? i18n.t('Sharing and access: {{- objectName}}', { objectName: name, @@ -32,10 +37,6 @@ export const Modal = ({ onClose, name, children, dataTest }) => { ) } -Modal.defaultProps = { - dataTest: 'dhis2-uicore-sharingdialog-modal', -} - Modal.propTypes = { children: PropTypes.node.isRequired, dataTest: PropTypes.string, diff --git a/components/sharing-dialog/src/sharing-dialog.js b/components/sharing-dialog/src/sharing-dialog.js index 0abb8a7ef0..21490420ab 100644 --- a/components/sharing-dialog/src/sharing-dialog.js +++ b/components/sharing-dialog/src/sharing-dialog.js @@ -38,14 +38,22 @@ const mutation = { data: ({ data }) => data, } +const emptyFunction = () => {} +const defaultInitialSharingSettings = { + name: '', + allowPublic: true, + public: ACCESS_NONE, + groups: {}, + users: {}, +} export const SharingDialog = ({ id, type, - onClose, - onError, - onSave, - initialSharingSettings, - dataTest, + onClose = emptyFunction, + onError = emptyFunction, + onSave = emptyFunction, + initialSharingSettings = defaultInitialSharingSettings, + dataTest = 'dhis2-uicore-sharingdialog', }) => { const { show: showError } = useAlert((error) => error, { critical: true }) @@ -178,20 +186,6 @@ export const SharingDialog = ({ ) } -SharingDialog.defaultProps = { - initialSharingSettings: { - name: '', - allowPublic: true, - public: ACCESS_NONE, - groups: {}, - users: {}, - }, - onClose: () => {}, - onError: () => {}, - onSave: () => {}, - dataTest: 'dhis2-uicore-sharingdialog', -} - SharingDialog.propTypes = { /** The id of the object to share */ id: PropTypes.string.isRequired, diff --git a/components/sharing-dialog/types/index.d.ts b/components/sharing-dialog/types/index.d.ts index fc26c09471..1cdecbddf6 100644 --- a/components/sharing-dialog/types/index.d.ts +++ b/components/sharing-dialog/types/index.d.ts @@ -54,6 +54,7 @@ type SharingType = | 'programStageWorkingList' | 'relationshipType' | 'report' + | 'route' | 'sqlView' | 'trackedEntityAttribute' | 'trackedEntityFilter' diff --git a/components/switch/src/switch-field/switch-field.js b/components/switch/src/switch-field/switch-field.js index e388b1b6e5..02f979a441 100644 --- a/components/switch/src/switch-field/switch-field.js +++ b/components/switch/src/switch-field/switch-field.js @@ -37,7 +37,7 @@ const SwitchField = ({ required, helpText, validationText, - dataTest, + dataTest = 'dhis2-uiwidgets-switchfield', }) => ( ) -SwitchField.defaultProps = { - dataTest: 'dhis2-uiwidgets-switchfield', -} - SwitchField.propTypes = { checked: PropTypes.bool, className: PropTypes.string, diff --git a/components/switch/src/switch/switch.js b/components/switch/src/switch/switch.js index a53cf7cc35..28b2aa1912 100644 --- a/components/switch/src/switch/switch.js +++ b/components/switch/src/switch/switch.js @@ -45,10 +45,16 @@ class Switch extends Component { } } + static defaultProps = { + checked: false, + dataTest: 'dhis2-uicore-switch', + role: 'switch', + } + render() { const { 'aria-label': ariaLabel, - checked, + checked = false, className, disabled, error, @@ -59,8 +65,8 @@ class Switch extends Component { value, warning, dense, - dataTest, - role, + dataTest = 'dhis2-uicore-switch', + role = 'switch', } = this.props const classes = cx({ @@ -164,12 +170,6 @@ class Switch extends Component { } } -Switch.defaultProps = { - checked: false, - dataTest: 'dhis2-uicore-switch', - role: 'switch', -} - Switch.propTypes = { /** Sets an aria-label attribute on the input */ 'aria-label': PropTypes.string, diff --git a/components/tab/src/tab-bar/tab-bar.js b/components/tab/src/tab-bar/tab-bar.js index fa958a31be..3ef72d519c 100644 --- a/components/tab/src/tab-bar/tab-bar.js +++ b/components/tab/src/tab-bar/tab-bar.js @@ -3,7 +3,13 @@ import React from 'react' import { ScrollBar } from './scroll-bar.js' import { Tabs } from './tabs.js' -const TabBar = ({ fixed, children, className, scrollable, dataTest }) => { +const TabBar = ({ + fixed, + children, + className, + scrollable, + dataTest = 'dhis2-uicore-tabbar', +}) => { if (scrollable) { return (
@@ -25,10 +31,6 @@ const TabBar = ({ fixed, children, className, scrollable, dataTest }) => { ) } -TabBar.defaultProps = { - dataTest: 'dhis2-uicore-tabbar', -} - TabBar.propTypes = { children: PropTypes.node, className: PropTypes.string, diff --git a/components/tab/src/tab/tab.js b/components/tab/src/tab/tab.js index 5f8da77203..0e2e893c22 100644 --- a/components/tab/src/tab/tab.js +++ b/components/tab/src/tab/tab.js @@ -6,7 +6,15 @@ import React, { useState, useEffect, useRef } from 'react' export const Tab = React.forwardRef( ( - { icon, onClick, selected, disabled, children, className, dataTest }, + { + icon, + onClick, + selected, + disabled, + children, + className, + dataTest = 'dhis2-uicore-tab', + }, ref ) => { let tabRef = useRef(null) @@ -161,10 +169,6 @@ export const Tab = React.forwardRef( } ) -Tab.defaultProps = { - dataTest: 'dhis2-uicore-tab', -} - Tab.propTypes = { children: PropTypes.node, className: PropTypes.string, diff --git a/components/table/API.md b/components/table/API.md index e7bddcef12..cfc4a7008e 100644 --- a/components/table/API.md +++ b/components/table/API.md @@ -551,7 +551,7 @@ import { TableHead } from '@dhis2/ui' |---|---|---|---|---| |children|node|||Should be `` components| |className|string|||| -|dataTest|string|`'dhis2-uicore-tablehead'`||| +|dataTest|string|||| |role|string|||| ### TableRow diff --git a/components/table/src/data-table/data-table-cell.js b/components/table/src/data-table/data-table-cell.js index e183dd8f51..aadd100c8f 100644 --- a/components/table/src/data-table/data-table-cell.js +++ b/components/table/src/data-table/data-table-cell.js @@ -7,17 +7,18 @@ export const DataTableCell = forwardRef( ( { active, - align, + align = 'left', backgroundColor, bordered, children, className, colSpan, - dataTest, + dataTest = 'dhis2-uicore-datatablecell', error, fixed, large, - left, + + left = 'auto', muted, rowSpan, role, @@ -25,7 +26,7 @@ export const DataTableCell = forwardRef( staticStyle, tag, valid, - width, + width = 'auto', onClick, ...props }, @@ -67,13 +68,6 @@ export const DataTableCell = forwardRef( DataTableCell.displayName = 'DataTableCell' -DataTableCell.defaultProps = { - align: 'left', - dataTest: 'dhis2-uicore-datatablecell', - left: 'auto', - width: 'auto', -} - const stylePropType = mutuallyExclusive( ['valid', 'error', 'muted'], PropTypes.bool diff --git a/components/table/src/data-table/data-table-column-header/data-table-column-header.js b/components/table/src/data-table/data-table-column-header/data-table-column-header.js index 4a943d9093..c3dbb8a836 100644 --- a/components/table/src/data-table/data-table-column-header/data-table-column-header.js +++ b/components/table/src/data-table/data-table-column-header/data-table-column-header.js @@ -23,7 +23,7 @@ export const DataTableColumnHeader = forwardRef( children, className, colSpan, - dataTest, + dataTest = 'dhis2-uicore-datatablecellhead', filter, fixed, large, @@ -95,10 +95,6 @@ export const DataTableColumnHeader = forwardRef( DataTableColumnHeader.displayName = 'DataTableColumnHeader' -DataTableColumnHeader.defaultProps = { - dataTest: 'dhis2-uicore-datatablecellhead', -} - DataTableColumnHeader.propTypes = { align: PropTypes.oneOf(['left', 'center', 'right']), children: PropTypes.node, diff --git a/components/table/src/data-table/data-table-row/data-table-row.js b/components/table/src/data-table/data-table-row/data-table-row.js index d29caa40a3..ad9e6ff40e 100644 --- a/components/table/src/data-table/data-table-row/data-table-row.js +++ b/components/table/src/data-table/data-table-row/data-table-row.js @@ -13,7 +13,7 @@ export const DataTableRow = forwardRef( { children, className, - dataTest, + dataTest = 'dhis2-uicore-datatablerow', expandableContent, expanded, selected, @@ -78,10 +78,6 @@ export const DataTableRow = forwardRef( DataTableRow.displayName = 'DataTableRow' -DataTableRow.defaultProps = { - dataTest: 'dhis2-uicore-datatablerow', -} - DataTableRow.propTypes = { /** Should be `` or `` components */ children: PropTypes.node, diff --git a/components/table/src/data-table/data-table.js b/components/table/src/data-table/data-table.js index b35adea53e..e1b9c72d28 100644 --- a/components/table/src/data-table/data-table.js +++ b/components/table/src/data-table/data-table.js @@ -8,12 +8,12 @@ export const DataTable = forwardRef( { children, className, - dataTest, - layout, + dataTest = 'dhis2-uicore-datatable', + layout = 'auto', role, scrollHeight, scrollWidth, - width, + width = '100%', }, ref ) => { @@ -49,12 +49,6 @@ export const DataTable = forwardRef( DataTable.displayName = 'DataTable' -DataTable.defaultProps = { - dataTest: 'dhis2-uicore-datatable', - width: '100%', - layout: 'auto', -} - DataTable.propTypes = { /** * Should be ``, ``, and `` components diff --git a/components/table/src/data-table/table-elements/table-body.js b/components/table/src/data-table/table-elements/table-body.js index b170b871f7..b382793cdc 100644 --- a/components/table/src/data-table/table-elements/table-body.js +++ b/components/table/src/data-table/table-elements/table-body.js @@ -4,7 +4,17 @@ import PropTypes from 'prop-types' import React, { forwardRef } from 'react' export const TableBody = forwardRef( - ({ children, className, dataTest, role, loading, ...props }, ref) => ( + ( + { + children, + className, + dataTest = 'dhis2-uicore-tablebody', + role, + loading, + ...props + }, + ref + ) => ( ` components */ children: PropTypes.node, diff --git a/components/table/src/data-table/table-elements/table-data-cell/table-data-cell.js b/components/table/src/data-table/table-elements/table-data-cell/table-data-cell.js index f5e861b4e2..655e81a821 100644 --- a/components/table/src/data-table/table-elements/table-data-cell/table-data-cell.js +++ b/components/table/src/data-table/table-elements/table-data-cell/table-data-cell.js @@ -15,23 +15,24 @@ export const TableDataCell = forwardRef( ( { active, - align, + + align = 'left', backgroundColor, bordered, children, className, colSpan, - dataTest, + dataTest = 'dhis2-uicore-tabledatacel', error, large, - left, + left = 'auto', muted, role, rowSpan, scope, staticStyle, valid, - width, + width = 'auto', onClick, ...props }, @@ -90,13 +91,6 @@ export const TableDataCell = forwardRef( TableDataCell.displayName = 'TableDataCell' -TableDataCell.defaultProps = { - align: 'left', - dataTest: 'dhis2-uicore-tabledatacel', - left: 'auto', - width: 'auto', -} - const stylePropType = mutuallyExclusive( ['valid', 'error', 'muted'], PropTypes.bool diff --git a/components/table/src/data-table/table-elements/table-foot.js b/components/table/src/data-table/table-elements/table-foot.js index 61212028c8..26b3a11946 100644 --- a/components/table/src/data-table/table-elements/table-foot.js +++ b/components/table/src/data-table/table-elements/table-foot.js @@ -2,7 +2,16 @@ import PropTypes from 'prop-types' import React, { forwardRef } from 'react' export const TableFoot = forwardRef( - ({ children, className, dataTest, role, ...props }, ref) => ( + ( + { + children, + className, + dataTest = 'dhis2-uicore-tablefoot', + role, + ...props + }, + ref + ) => ( ` components */ children: PropTypes.node, diff --git a/components/table/src/data-table/table-elements/table-head.js b/components/table/src/data-table/table-elements/table-head.js index f8ef0545e3..f863db72c7 100644 --- a/components/table/src/data-table/table-elements/table-head.js +++ b/components/table/src/data-table/table-elements/table-head.js @@ -17,10 +17,6 @@ export const TableHead = forwardRef( TableHead.displayName = 'TableHead' -TableHead.defaultProps = { - dataTest: 'dhis2-uicore-tablehead', -} - TableHead.propTypes = { /** Should be `` components */ children: PropTypes.node, diff --git a/components/table/src/data-table/table-elements/table-header-cell-action.js b/components/table/src/data-table/table-elements/table-header-cell-action.js index 286f8d6903..5eeec74bf7 100644 --- a/components/table/src/data-table/table-elements/table-header-cell-action.js +++ b/components/table/src/data-table/table-elements/table-header-cell-action.js @@ -3,7 +3,17 @@ import PropTypes from 'prop-types' import React, { forwardRef } from 'react' export const TableHeaderCellAction = forwardRef( - ({ onClick, children, className, dataTest, title, ...props }, ref) => ( + ( + { + onClick, + children, + className, + dataTest = 'dhis2-uicore-tableheadercellaction', + title, + ...props + }, + ref + ) => (