@dhis2-ui/modal 9.1.2 → 9.3.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -28,11 +28,11 @@ const CloseButton = _ref => {
|
|
|
28
28
|
return /*#__PURE__*/_react.default.createElement("button", {
|
|
29
29
|
"data-test": "dhis2-modal-close-button",
|
|
30
30
|
onClick: createClickHandler(onClick),
|
|
31
|
-
className: _style.default.dynamic([["
|
|
31
|
+
className: _style.default.dynamic([["80232614", [_uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey200, _uiConstants.theme.focus, _uiConstants.colors.grey300]]])
|
|
32
32
|
}, /*#__PURE__*/_react.default.createElement(_uiIcons.IconCross16, null), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
33
|
-
id: "
|
|
33
|
+
id: "80232614",
|
|
34
34
|
dynamic: [_uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey200, _uiConstants.theme.focus, _uiConstants.colors.grey300]
|
|
35
|
-
}, ["button.__jsx-style-dynamic-selector{background-color:transparent;color:".concat(_uiConstants.colors.grey700, ";border:none;outline:none;padding:4px 4px 0px;border-radius:3px;position:absolute;top:0px;
|
|
35
|
+
}, ["button.__jsx-style-dynamic-selector{background-color:transparent;color:".concat(_uiConstants.colors.grey700, ";border:none;outline:none;padding:4px 4px 0px;border-radius:3px;position:absolute;top:0px;inset-inline-end:0px;}"), "button.__jsx-style-dynamic-selector:hover{background-color:".concat(_uiConstants.colors.grey200, ";color:").concat(_uiConstants.colors.grey900, ";}"), "button.__jsx-style-dynamic-selector:focus{background-color:".concat(_uiConstants.colors.grey200, ";outline:3px solid ").concat(_uiConstants.theme.focus, ";}"), "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "button.__jsx-style-dynamic-selector:active{background-color:".concat(_uiConstants.colors.grey300, ";}")]));
|
|
36
36
|
};
|
|
37
37
|
|
|
38
38
|
exports.CloseButton = CloseButton;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.TopScrollable = exports.SmallTitleContentAction = exports.SmallLongTitle = exports.SmallDestructivePrimary = exports.SmallContentPrimary = exports.SmallClickableScreenCover = exports.ModalThatHidesWithStatefulComponens = exports.MiddleScrollable = exports.MediumTitleContentAction = exports.LargeWithSelectComponent = exports.LargeTitleContentPrimary = exports.LargeModalWithMoreNestedModals = exports.FluidTop = exports.FluidTitleContentPrimary = exports.FluidMiddle = exports.FluidBottom = exports.DefaultContent = exports.BottomScrollable = exports.AlignmentMiddle = exports.AlignmentBottom = void 0;
|
|
6
|
+
exports.default = exports.TopScrollable = exports.SmallTitleContentAction = exports.SmallLongTitle = exports.SmallDestructivePrimary = exports.SmallContentPrimary = exports.SmallClickableScreenCover = exports.RTL = exports.ModalThatHidesWithStatefulComponens = exports.MiddleScrollable = exports.MediumTitleContentAction = exports.LargeWithSelectComponent = exports.LargeTitleContentPrimary = exports.LargeModalWithMoreNestedModals = exports.FluidTop = exports.FluidTitleContentPrimary = exports.FluidMiddle = exports.FluidBottom = exports.DefaultContent = exports.BottomScrollable = exports.AlignmentMiddle = exports.AlignmentBottom = void 0;
|
|
7
7
|
|
|
8
8
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
|
9
9
|
|
|
@@ -659,4 +659,22 @@ FluidBottom.args = {
|
|
|
659
659
|
fluid: true,
|
|
660
660
|
position: 'bottom'
|
|
661
661
|
};
|
|
662
|
-
FluidBottom.storyName = 'Fluid (Bottom)';
|
|
662
|
+
FluidBottom.storyName = 'Fluid (Bottom)';
|
|
663
|
+
|
|
664
|
+
const RTL = args => {
|
|
665
|
+
(0, _react.useEffect)(() => {
|
|
666
|
+
document.body.dir = 'rtl';
|
|
667
|
+
return () => {
|
|
668
|
+
document.body.dir = 'ltr';
|
|
669
|
+
};
|
|
670
|
+
}, []);
|
|
671
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
672
|
+
dir: "rtl"
|
|
673
|
+
}, /*#__PURE__*/_react.default.createElement(SmallTitleContentAction, args));
|
|
674
|
+
};
|
|
675
|
+
|
|
676
|
+
exports.RTL = RTL;
|
|
677
|
+
RTL.args = {
|
|
678
|
+
small: true,
|
|
679
|
+
onClose
|
|
680
|
+
};
|
|
@@ -15,11 +15,11 @@ export const CloseButton = _ref => {
|
|
|
15
15
|
return /*#__PURE__*/React.createElement("button", {
|
|
16
16
|
"data-test": "dhis2-modal-close-button",
|
|
17
17
|
onClick: createClickHandler(onClick),
|
|
18
|
-
className: _JSXStyle.dynamic([["
|
|
18
|
+
className: _JSXStyle.dynamic([["80232614", [colors.grey700, colors.grey200, colors.grey900, colors.grey200, theme.focus, colors.grey300]]])
|
|
19
19
|
}, /*#__PURE__*/React.createElement(IconCross16, null), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
20
|
-
id: "
|
|
20
|
+
id: "80232614",
|
|
21
21
|
dynamic: [colors.grey700, colors.grey200, colors.grey900, colors.grey200, theme.focus, colors.grey300]
|
|
22
|
-
}, ["button.__jsx-style-dynamic-selector{background-color:transparent;color:".concat(colors.grey700, ";border:none;outline:none;padding:4px 4px 0px;border-radius:3px;position:absolute;top:0px;
|
|
22
|
+
}, ["button.__jsx-style-dynamic-selector{background-color:transparent;color:".concat(colors.grey700, ";border:none;outline:none;padding:4px 4px 0px;border-radius:3px;position:absolute;top:0px;inset-inline-end:0px;}"), "button.__jsx-style-dynamic-selector:hover{background-color:".concat(colors.grey200, ";color:").concat(colors.grey900, ";}"), "button.__jsx-style-dynamic-selector:focus{background-color:".concat(colors.grey200, ";outline:3px solid ").concat(theme.focus, ";}"), "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "button.__jsx-style-dynamic-selector:active{background-color:".concat(colors.grey300, ";}")]));
|
|
23
23
|
};
|
|
24
24
|
CloseButton.propTypes = {
|
|
25
25
|
onClick: PropTypes.func
|
|
@@ -5,7 +5,7 @@ import { FlyoutMenu, MenuDivider, MenuItem, MenuSectionHeader } from '@dhis2-ui/
|
|
|
5
5
|
import { SingleSelect, SingleSelectOption } from '@dhis2-ui/select';
|
|
6
6
|
import { Tooltip } from '@dhis2-ui/tooltip';
|
|
7
7
|
import { sharedPropTypes } from '@dhis2/ui-constants';
|
|
8
|
-
import React, { useState } from 'react';
|
|
8
|
+
import React, { useEffect, useState } from 'react';
|
|
9
9
|
import { ModalActions, ModalContent, ModalTitle } from '../index.js';
|
|
10
10
|
import { Modal } from './modal.js';
|
|
11
11
|
const description = "\n_**Note**: For performance reasons, only one representative example is shown here. For more (interactive) examples, see individual stories in the Canvas tab._\n\nA modal focuses user attention on a single task or piece of information inside a container. A modal blocks the rest of the application until it is dismissed.\n\n#### Usage\n\nA modal should be used to focus user attention on a single task or piece of information. Modals take over the entire screen and should be used sparingly to avoid interrupting a user's flow too often.\n\nUse a modal in the following cases:\n\n- to collect short, focussed user input that is blocking progress\n- to present critical information that a user needs to acknowledge before continuing\n- to ask the user to confirm a destructive action that cannot be undone\n\nDo not use a modal in the following cases:\n\n- to display unrelated or non-critical information; use an alert bar or a notice box instead\n- to display complex, workflows that span multiple screens; navigate to a new, full page in the app instead\n\n#### Children\n\nModals should be used with children `<ModalTitle>` (optional), `<ModalContent>` (required), and `<ModalActions>` (recommended)\n\nSee more about modal usage, including alignment and sizing, at [Design System: Modals](https://github.com/dhis2/design-system/blob/master/molecules/modal.md#usage).\n\n```js\nimport { Modal } from '@dhis2/ui'\n```\n";
|
|
@@ -576,4 +576,19 @@ FluidBottom.args = {
|
|
|
576
576
|
fluid: true,
|
|
577
577
|
position: 'bottom'
|
|
578
578
|
};
|
|
579
|
-
FluidBottom.storyName = 'Fluid (Bottom)';
|
|
579
|
+
FluidBottom.storyName = 'Fluid (Bottom)';
|
|
580
|
+
export const RTL = args => {
|
|
581
|
+
useEffect(() => {
|
|
582
|
+
document.body.dir = 'rtl';
|
|
583
|
+
return () => {
|
|
584
|
+
document.body.dir = 'ltr';
|
|
585
|
+
};
|
|
586
|
+
}, []);
|
|
587
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
588
|
+
dir: "rtl"
|
|
589
|
+
}, /*#__PURE__*/React.createElement(SmallTitleContentAction, args));
|
|
590
|
+
};
|
|
591
|
+
RTL.args = {
|
|
592
|
+
small: true,
|
|
593
|
+
onClose
|
|
594
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/modal",
|
|
3
|
-
"version": "9.1
|
|
3
|
+
"version": "9.3.0-alpha.1",
|
|
4
4
|
"description": "UI Modal",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -33,12 +33,12 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@dhis2/prop-types": "^3.1.2",
|
|
36
|
-
"@dhis2-ui/card": "9.1
|
|
37
|
-
"@dhis2-ui/center": "9.1
|
|
38
|
-
"@dhis2-ui/layer": "9.1
|
|
39
|
-
"@dhis2-ui/portal": "9.1
|
|
40
|
-
"@dhis2/ui-constants": "9.1
|
|
41
|
-
"@dhis2/ui-icons": "9.1
|
|
36
|
+
"@dhis2-ui/card": "9.3.0-alpha.1",
|
|
37
|
+
"@dhis2-ui/center": "9.3.0-alpha.1",
|
|
38
|
+
"@dhis2-ui/layer": "9.3.0-alpha.1",
|
|
39
|
+
"@dhis2-ui/portal": "9.3.0-alpha.1",
|
|
40
|
+
"@dhis2/ui-constants": "9.3.0-alpha.1",
|
|
41
|
+
"@dhis2/ui-icons": "9.3.0-alpha.1",
|
|
42
42
|
"classnames": "^2.3.1",
|
|
43
43
|
"prop-types": "^15.7.2"
|
|
44
44
|
},
|