@openedx/paragon 22.16.1 → 22.17.0
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.
- package/dist/Form/_index.scss +2 -2
- package/dist/Modal/ModalDialog.d.ts +2 -2
- package/dist/Modal/ModalDialog.js +2 -2
- package/dist/Modal/ModalDialog.js.map +1 -1
- package/dist/paragon.css +1 -1
- package/package.json +1 -1
- package/src/Form/_index.scss +2 -2
- package/src/Modal/ModalDialog.tsx +3 -3
- package/src/Modal/README.md +1 -1
- package/src/Modal/alert-modal.mdx +4 -0
- package/src/Modal/fullscreen-modal.mdx +1 -0
- package/src/Modal/marketing-modal.mdx +1 -0
- package/src/Modal/modal-dialog.mdx +2 -0
- package/src/Modal/standard-modal.mdx +1 -0
- package/src/Modal/tests/AlertModal.test.jsx +4 -0
- package/src/Modal/tests/ModalDialog.test.tsx +3 -0
package/dist/Form/_index.scss
CHANGED
|
@@ -265,8 +265,8 @@ $select-icon-padding: .5625rem !default;
|
|
|
265
265
|
}
|
|
266
266
|
|
|
267
267
|
.form-control:focus ~ &,
|
|
268
|
-
|
|
269
|
-
.form-control
|
|
268
|
+
.form-control.has-value ~ &,
|
|
269
|
+
.form-control:is(:-webkit-autofill, :autofill) ~ & {
|
|
270
270
|
.pgn__form-control-floating-label-text {
|
|
271
271
|
background-color: $input-bg;
|
|
272
272
|
}
|
|
@@ -33,7 +33,7 @@ interface Props {
|
|
|
33
33
|
/** Specifies the z-index of the modal */
|
|
34
34
|
zIndex?: number;
|
|
35
35
|
/** Specifies whether overflow is visible in the modal */
|
|
36
|
-
isOverflowVisible
|
|
36
|
+
isOverflowVisible: boolean;
|
|
37
37
|
}
|
|
38
38
|
declare function ModalDialog({ children, title, isOpen, onClose, size, variant, hasCloseButton, closeLabel, isFullscreenScroll, className, isFullscreenOnMobile, isBlocking, zIndex, isOverflowVisible, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
39
39
|
declare namespace ModalDialog {
|
|
@@ -93,7 +93,7 @@ declare namespace ModalDialog {
|
|
|
93
93
|
*/
|
|
94
94
|
zIndex: PropTypes.Requireable<number>;
|
|
95
95
|
/** Specifies whether overflow is visible in the modal */
|
|
96
|
-
isOverflowVisible: PropTypes.
|
|
96
|
+
isOverflowVisible: PropTypes.Validator<boolean>;
|
|
97
97
|
};
|
|
98
98
|
var Header: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("./ModalDialogHeader").Props>;
|
|
99
99
|
var Title: any;
|
|
@@ -33,7 +33,7 @@ function ModalDialog(_ref) {
|
|
|
33
33
|
isFullscreenOnMobile = false,
|
|
34
34
|
isBlocking = false,
|
|
35
35
|
zIndex,
|
|
36
|
-
isOverflowVisible
|
|
36
|
+
isOverflowVisible
|
|
37
37
|
} = _ref;
|
|
38
38
|
const isMobile = useMediaQuery({
|
|
39
39
|
query: '(max-width: 767.98px)'
|
|
@@ -119,7 +119,7 @@ ModalDialog.propTypes = {
|
|
|
119
119
|
*/
|
|
120
120
|
zIndex: PropTypes.number,
|
|
121
121
|
/** Specifies whether overflow is visible in the modal */
|
|
122
|
-
isOverflowVisible: PropTypes.bool
|
|
122
|
+
isOverflowVisible: PropTypes.bool.isRequired
|
|
123
123
|
};
|
|
124
124
|
ModalDialog.Header = ModalDialogHeader;
|
|
125
125
|
ModalDialog.Title = ModalDialogTitle;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalDialog.js","names":["React","PropTypes","classNames","useMediaQuery","ModalLayer","ModalCloseButton","ModalDialogHeader","ModalDialogTitle","ModalDialogFooter","ModalDialogBody","ModalDialogHero","Icon","IconButton","Close","MODAL_DIALOG_CLOSE_LABEL","ModalDialog","_ref","children","title","isOpen","onClose","size","variant","hasCloseButton","closeLabel","isFullscreenScroll","className","isFullscreenOnMobile","isBlocking","zIndex","isOverflowVisible","isMobile","query","showFullScreen","createElement","role","as","iconAs","invertColors","src","alt","propTypes","node","isRequired","string","func","bool","oneOf","number","Header","Title","Footer","CloseButton","Body","Hero"],"sources":["../../src/Modal/ModalDialog.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useMediaQuery } from 'react-responsive';\nimport ModalLayer from './ModalLayer';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalCloseButton from './ModalCloseButton';\nimport ModalDialogHeader from './ModalDialogHeader';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogTitle from './ModalDialogTitle';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogFooter from './ModalDialogFooter';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogBody from './ModalDialogBody';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogHero from './ModalDialogHero';\n\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\nimport { Close } from '../../icons';\n\nexport const MODAL_DIALOG_CLOSE_LABEL = 'Close';\n\ninterface Props {\n /** Specifies the content of the dialog */\n children: React.ReactNode;\n /** The aria-label of the dialog */\n title: string;\n /** A callback to close the modal dialog, e.g. when Escape is pressed */\n onClose: () => void;\n /** Is the modal dialog open or closed? */\n isOpen?: boolean;\n /** The close 'x' icon button in the top right of the dialog box */\n hasCloseButton?: boolean;\n /** Size determines the maximum width of the dialog box */\n size?: 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';\n /** The visual style of the dialog box */\n variant?: 'default' | 'warning' | 'danger' | 'success' | 'dark';\n /** The label supplied to the close icon button if one is rendered */\n closeLabel?: string;\n /** Specifies class name to append to the base element */\n className?: string;\n /**\n * Determines where a scrollbar should appear if a modal is too large for the\n * viewport. When false, the ``ModalDialog``. Body receives a scrollbar, when true\n * the browser window itself receives the scrollbar.\n */\n isFullscreenScroll?: boolean;\n /** To show full screen view on mobile screens */\n isFullscreenOnMobile?: boolean;\n /** Prevent clicking on the backdrop or pressing Esc to close the modal */\n isBlocking?: boolean;\n /** Specifies the z-index of the modal */\n zIndex?: number;\n /** Specifies whether overflow is visible in the modal */\n isOverflowVisible
|
|
1
|
+
{"version":3,"file":"ModalDialog.js","names":["React","PropTypes","classNames","useMediaQuery","ModalLayer","ModalCloseButton","ModalDialogHeader","ModalDialogTitle","ModalDialogFooter","ModalDialogBody","ModalDialogHero","Icon","IconButton","Close","MODAL_DIALOG_CLOSE_LABEL","ModalDialog","_ref","children","title","isOpen","onClose","size","variant","hasCloseButton","closeLabel","isFullscreenScroll","className","isFullscreenOnMobile","isBlocking","zIndex","isOverflowVisible","isMobile","query","showFullScreen","createElement","role","as","iconAs","invertColors","src","alt","propTypes","node","isRequired","string","func","bool","oneOf","number","Header","Title","Footer","CloseButton","Body","Hero"],"sources":["../../src/Modal/ModalDialog.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useMediaQuery } from 'react-responsive';\nimport ModalLayer from './ModalLayer';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalCloseButton from './ModalCloseButton';\nimport ModalDialogHeader from './ModalDialogHeader';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogTitle from './ModalDialogTitle';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogFooter from './ModalDialogFooter';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogBody from './ModalDialogBody';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogHero from './ModalDialogHero';\n\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\nimport { Close } from '../../icons';\n\nexport const MODAL_DIALOG_CLOSE_LABEL = 'Close';\n\ninterface Props {\n /** Specifies the content of the dialog */\n children: React.ReactNode;\n /** The aria-label of the dialog */\n title: string;\n /** A callback to close the modal dialog, e.g. when Escape is pressed */\n onClose: () => void;\n /** Is the modal dialog open or closed? */\n isOpen?: boolean;\n /** The close 'x' icon button in the top right of the dialog box */\n hasCloseButton?: boolean;\n /** Size determines the maximum width of the dialog box */\n size?: 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';\n /** The visual style of the dialog box */\n variant?: 'default' | 'warning' | 'danger' | 'success' | 'dark';\n /** The label supplied to the close icon button if one is rendered */\n closeLabel?: string;\n /** Specifies class name to append to the base element */\n className?: string;\n /**\n * Determines where a scrollbar should appear if a modal is too large for the\n * viewport. When false, the ``ModalDialog``. Body receives a scrollbar, when true\n * the browser window itself receives the scrollbar.\n */\n isFullscreenScroll?: boolean;\n /** To show full screen view on mobile screens */\n isFullscreenOnMobile?: boolean;\n /** Prevent clicking on the backdrop or pressing Esc to close the modal */\n isBlocking?: boolean;\n /** Specifies the z-index of the modal */\n zIndex?: number;\n /** Specifies whether overflow is visible in the modal */\n isOverflowVisible: boolean;\n}\n\nfunction ModalDialog({\n children,\n title,\n isOpen = false,\n onClose,\n size = 'md',\n variant = 'default',\n hasCloseButton = true,\n closeLabel = MODAL_DIALOG_CLOSE_LABEL,\n isFullscreenScroll = false,\n className,\n isFullscreenOnMobile = false,\n isBlocking = false,\n zIndex,\n isOverflowVisible,\n}: Props) {\n const isMobile = useMediaQuery({ query: '(max-width: 767.98px)' });\n const showFullScreen = (isFullscreenOnMobile && isMobile);\n return (\n <ModalLayer isOpen={isOpen} onClose={onClose} isBlocking={isBlocking} zIndex={zIndex}>\n <div\n role=\"dialog\"\n aria-label={title}\n className={classNames(\n 'pgn__modal',\n {\n [`pgn__modal-${showFullScreen ? 'fullscreen' : size}`]: size,\n [`pgn__modal-${variant}`]: variant,\n 'pgn__modal-scroll-fullscreen': isFullscreenScroll,\n 'pgn__modal-visible-overflow': isOverflowVisible,\n },\n className,\n )}\n >\n {hasCloseButton && (\n <div className=\"pgn__modal-close-container\">\n <ModalCloseButton\n as={IconButton}\n iconAs={Icon}\n invertColors={variant === 'dark'}\n src={Close}\n alt={closeLabel}\n />\n </div>\n )}\n {children}\n </div>\n </ModalLayer>\n );\n}\n\nModalDialog.propTypes = {\n /**\n * Specifies the content of the dialog\n */\n children: PropTypes.node.isRequired,\n /**\n * The aria-label of the dialog\n */\n title: PropTypes.string.isRequired,\n /**\n * A callback to close the modal dialog\n */\n onClose: PropTypes.func.isRequired,\n /**\n * Is the modal dialog open or closed\n */\n isOpen: PropTypes.bool,\n /**\n * The close 'x' icon button in the top right of the dialog box\n */\n hasCloseButton: PropTypes.bool,\n /**\n * Sizes determine the maximum width of the dialog box\n */\n size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'fullscreen']),\n /**\n * The visual style of the dialog box\n */\n variant: PropTypes.oneOf(['default', 'warning', 'danger', 'success', 'dark']),\n /**\n * The label supplied to the close icon button if one is rendered\n */\n closeLabel: PropTypes.string,\n /**\n * Specifies class name to append to the base element\n */\n className: PropTypes.string,\n /**\n * Determines where a scrollbar should appear if a modal is too large for the\n * viewport. When false, the ``ModalDialog``. Body receives a scrollbar, when true\n * the browser window itself receives the scrollbar.\n */\n isFullscreenScroll: PropTypes.bool,\n /**\n * To show full screen view on mobile screens\n */\n isFullscreenOnMobile: PropTypes.bool,\n /**\n * Prevent clicking on the backdrop or pressing Esc to close the modal\n */\n isBlocking: PropTypes.bool,\n /**\n * Specifies the z-index of the modal\n */\n zIndex: PropTypes.number,\n /** Specifies whether overflow is visible in the modal */\n isOverflowVisible: PropTypes.bool.isRequired,\n};\n\nModalDialog.Header = ModalDialogHeader;\nModalDialog.Title = ModalDialogTitle;\nModalDialog.Footer = ModalDialogFooter;\nModalDialog.CloseButton = ModalCloseButton;\nModalDialog.Body = ModalDialogBody;\nModalDialog.Hero = ModalDialogHero;\n\nexport default ModalDialog;\n"],"mappings":"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","ignoreList":[]}
|