@pingux/astro 2.116.1-alpha.1 → 2.117.0-alpha.1

package/lib/cjs/components/Modal/Modal.js

@@ -106,7 +106,9 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, propsContentProps, dialogProps, modalProps, {
     ref: modalRef,
     "aria-modal": true
-  }), hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : (0, _react2.jsx)(_IconButton["default"], {
+  }), (0, _react2.jsx)(_Box["default"], {
+    variant: "modal.headingContainer"
+  }, hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : (0, _react2.jsx)(_IconButton["default"], {
     "aria-label": "Close modal window",
     "data-id": "icon-button__close-modal-window",
     variant: "modalCloseButton",
@@ -119,7 +121,7 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }))), title && (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({}, titleProps, {
     variant: "variants.modal.title",
     role: "heading"
-  }), title), children))));
+  }), title)), children))));
 });
 Modal.defaultProps = {
   role: 'dialog',

package/lib/cjs/components/Modal/Modal.mdx

@@ -28,7 +28,6 @@ Modals should:
 Modals should not:
 - Be nested inside or replaced by another modal.
 - Be overused as it disrupts the user’s workflow and requires a response.
-- Have content that requires scrolling. If the content length is exceedingly large or requires complex forms, use the [OverlayPanel](./?path=/docs/components-overlaypanel--default) component.
 - Be used for brief warnings and alerts, use the [Messages](./?path=/docs/components-messages--default) component instead.
 
 ### Required Components

package/lib/cjs/components/Modal/Modal.stories.d.ts

@@ -3,3 +3,4 @@ import { ModalProps } from '../../types';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 export declare const Default: StoryFn<ModalProps>;
+export declare const LargeContent: StoryFn<ModalProps>;

package/lib/cjs/components/Modal/Modal.stories.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.LargeContent = exports.Default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
@@ -112,7 +112,7 @@ var Default = function Default(args) {
     }, "Do you want to continue with this action that you\u2018re performing?"), (0, _react2.jsx)(_index.Box, {
       isRow: true,
       pt: "lg",
-      mr: "auto"
+      variant: "modal.buttonsContainer"
     }, (0, _react2.jsx)(_index.Button, {
       variant: "primary",
       onPress: state.close,
@@ -139,4 +139,73 @@ Default.parameters = {
       }]
     }
   }
-};
+};
+var LargeContent = function LargeContent(args) {
+  var state = (0, _hooks.useModalState)();
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
+      onPress: state.open,
+      "aria-label": "Open modal"
+    }, "Open Modal"), state.isOpen && (0, _react2.jsx)(_index.Modal, (0, _extends2["default"])({}, args, {
+      isOpen: state.isOpen,
+      onClose: state.close
+    }), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Excepteur sint occaecat cupidatat non proident."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Excepteur sint occaecat cupidatat non proident."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, {
+      pt: "lg"
+    }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      variant: "modal.buttonsContainer"
+    }, (0, _react2.jsx)(_index.Button, {
+      variant: "primary",
+      onPress: state.close,
+      mr: "md",
+      "aria-label": "Continue"
+    }, "Continue"), (0, _react2.jsx)(_index.Button, {
+      variant: "link",
+      onPress: state.close,
+      "aria-label": "Cancel"
+    }, "Cancel"))))
+  );
+};
+exports.LargeContent = LargeContent;

package/lib/cjs/components/Modal/Modal.styles.d.ts

@@ -32,6 +32,8 @@ declare const _default: {
         pl: string;
         boxShadow: string;
         borderRadius: number;
+        maxHeight: string;
+        overflowY: string;
         '&.is-extra-small': {
             maxWidth: string;
             width: string;
@@ -53,6 +55,29 @@ declare const _default: {
             width: string;
         };
     };
+    headingContainer: {
+        position: string;
+        top: string;
+        mt: string;
+        mb: string;
+        mr: string;
+        pt: string;
+        pr: string;
+        pb: string;
+        background: string;
+    };
+    buttonsContainer: {
+        position: string;
+        bottom: string;
+        p: number;
+        mb: string;
+        pb: string;
+        pt: string;
+        background: string;
+        '& > button': {
+            flexGrow: number;
+        };
+    };
     title: {
         mr: string;
         fontWeight: number;

package/lib/cjs/components/Modal/Modal.styles.js

@@ -43,6 +43,9 @@ var content = {
   pl: 'lg',
   boxShadow: 'standard',
   borderRadius: 3,
+  maxHeight: 'calc(100vh - 80px)',
+  // 100% of the window minus 40px on top and bottom
+  overflowY: 'auto',
   '&.is-extra-small': {
     maxWidth: 'none',
     width: 'container.xs'
@@ -64,6 +67,29 @@ var content = {
     width: 'container.full'
   }
 };
+var headingContainer = {
+  position: 'sticky',
+  top: '-md',
+  mt: '-md',
+  mb: '-md',
+  mr: '-lg',
+  pt: 'md',
+  pr: 'lg',
+  pb: 'md',
+  background: 'white'
+};
+var buttonsContainer = {
+  position: 'sticky',
+  bottom: '-lg',
+  p: 0,
+  mb: '-lg',
+  pb: 'lg',
+  pt: 'lg',
+  background: 'white',
+  '& > button': {
+    flexGrow: 0
+  }
+};
 var title = _objectSpread(_objectSpread({}, _Text.text.title), {}, {
   mr: 'sm',
   fontWeight: 3
@@ -80,6 +106,8 @@ var _default = {
   closeIcon: closeIcon,
   container: container,
   content: content,
+  headingContainer: headingContainer,
+  buttonsContainer: buttonsContainer,
   title: title,
   modalCloseButton: modalCloseButton
 };

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts

@@ -306,6 +306,12 @@ declare const _default: {
         content: {
             bg: string;
         };
+        headingContainer: {
+            bg: string;
+        };
+        buttonsContainer: {
+            bg: string;
+        };
     };
     tab: {
         '&.is-selected': {

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -54,6 +54,12 @@ var tab = {
 var modal = {
   content: {
     bg: 'background.base'
+  },
+  headingContainer: {
+    bg: 'background.base'
+  },
+  buttonsContainer: {
+    bg: 'background.base'
   }
 };
 var _default = {

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -2230,8 +2230,8 @@ declare const _default: {
                 transform: string;
                 transition: string;
                 m: string[];
-                overflow: string;
                 maxHeight: string;
+                overflowY: string;
                 '&.is-open-no-transition': {
                     opacity: string;
                     transform: string;

package/lib/cjs/styles/themes/next-gen/variants/button.js

@@ -218,7 +218,7 @@ var baseIconButton = {
 };
 var modalCloseButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   position: 'absolute',
-  top: 22,
+  top: 23,
   right: 22
 });
 var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButton), secondary), {}, {

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -413,8 +413,8 @@ declare const _default: {
             transform: string;
             transition: string;
             m: string[];
-            overflow: string;
             maxHeight: string;
+            overflowY: string;
             '&.is-open-no-transition': {
                 opacity: string;
                 transform: string;

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -150,8 +150,8 @@ var modal = {
     transform: 'translate(0, -50px)',
     transition: 'opacity 300ms ease, transform 500ms ease-out',
     m: ['sm', 'sm', '1.75rem auto'],
-    overflow: 'hidden',
     maxHeight: 'calc(100vh - 3.5rem)',
+    overflowY: 'auto',
     '&.is-open-no-transition': {
       opacity: '100%',
       transform: 'none'

package/lib/components/Modal/Modal.js

@@ -95,7 +95,9 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   }, propsContentProps, dialogProps, modalProps, {
     ref: modalRef,
     "aria-modal": true
-  }), hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : ___EmotionJSX(IconButton, {
+  }), ___EmotionJSX(Box, {
+    variant: "modal.headingContainer"
+  }, hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : ___EmotionJSX(IconButton, {
     "aria-label": "Close modal window",
     "data-id": "icon-button__close-modal-window",
     variant: "modalCloseButton",
@@ -108,7 +110,7 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   }))), title && ___EmotionJSX(Text, _extends({}, titleProps, {
     variant: "variants.modal.title",
     role: "heading"
-  }), title), children))));
+  }), title)), children))));
 });
 Modal.defaultProps = {
   role: 'dialog',

package/lib/components/Modal/Modal.mdx

@@ -28,7 +28,6 @@ Modals should:
 Modals should not:
 - Be nested inside or replaced by another modal.
 - Be overused as it disrupts the user’s workflow and requires a response.
-- Have content that requires scrolling. If the content length is exceedingly large or requires complex forms, use the [OverlayPanel](./?path=/docs/components-overlaypanel--default) component.
 - Be used for brief warnings and alerts, use the [Messages](./?path=/docs/components-messages--default) component instead.
 
 ### Required Components

package/lib/components/Modal/Modal.stories.js

@@ -103,7 +103,7 @@ export var Default = function Default(args) {
     }, "Do you want to continue with this action that you\u2018re performing?"), ___EmotionJSX(Box, {
       isRow: true,
       pt: "lg",
-      mr: "auto"
+      variant: "modal.buttonsContainer"
     }, ___EmotionJSX(Button, {
       variant: "primary",
       onPress: state.close,
@@ -129,4 +129,72 @@ Default.parameters = {
       }]
     }
   }
+};
+export var LargeContent = function LargeContent(args) {
+  var state = useModalState();
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
+      onPress: state.open,
+      "aria-label": "Open modal"
+    }, "Open Modal"), state.isOpen && ___EmotionJSX(Modal, _extends({}, args, {
+      isOpen: state.isOpen,
+      onClose: state.close
+    }), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Eu fugiat nulla pariatur."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Excepteur sint occaecat cupidatat non proident."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Eu fugiat nulla pariatur."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Excepteur sint occaecat cupidatat non proident."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, {
+      pt: "lg"
+    }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), ___EmotionJSX(Box, {
+      isRow: true,
+      variant: "modal.buttonsContainer"
+    }, ___EmotionJSX(Button, {
+      variant: "primary",
+      onPress: state.close,
+      mr: "md",
+      "aria-label": "Continue"
+    }, "Continue"), ___EmotionJSX(Button, {
+      variant: "link",
+      onPress: state.close,
+      "aria-label": "Cancel"
+    }, "Cancel"))))
+  );
 };

package/lib/components/Modal/Modal.styles.js

@@ -36,6 +36,9 @@ var content = {
   pl: 'lg',
   boxShadow: 'standard',
   borderRadius: 3,
+  maxHeight: 'calc(100vh - 80px)',
+  // 100% of the window minus 40px on top and bottom
+  overflowY: 'auto',
   '&.is-extra-small': {
     maxWidth: 'none',
     width: 'container.xs'
@@ -57,6 +60,29 @@ var content = {
     width: 'container.full'
   }
 };
+var headingContainer = {
+  position: 'sticky',
+  top: '-md',
+  mt: '-md',
+  mb: '-md',
+  mr: '-lg',
+  pt: 'md',
+  pr: 'lg',
+  pb: 'md',
+  background: 'white'
+};
+var buttonsContainer = {
+  position: 'sticky',
+  bottom: '-lg',
+  p: 0,
+  mb: '-lg',
+  pb: 'lg',
+  pt: 'lg',
+  background: 'white',
+  '& > button': {
+    flexGrow: 0
+  }
+};
 var title = _objectSpread(_objectSpread({}, text.title), {}, {
   mr: 'sm',
   fontWeight: 3
@@ -72,6 +98,8 @@ export default {
   closeIcon: closeIcon,
   container: container,
   content: content,
+  headingContainer: headingContainer,
+  buttonsContainer: buttonsContainer,
   title: title,
   modalCloseButton: modalCloseButton
 };

package/lib/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -46,6 +46,12 @@ var tab = {
 var modal = {
   content: {
     bg: 'background.base'
+  },
+  headingContainer: {
+    bg: 'background.base'
+  },
+  buttonsContainer: {
+    bg: 'background.base'
   }
 };
 export default {

package/lib/styles/themes/next-gen/variants/button.js

@@ -211,7 +211,7 @@ var baseIconButton = {
 };
 var modalCloseButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   position: 'absolute',
-  top: 22,
+  top: 23,
   right: 22
 });
 var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButton), secondary), {}, {

package/lib/styles/themes/next-gen/variants/variants.js

@@ -141,8 +141,8 @@ var modal = {
     transform: 'translate(0, -50px)',
     transition: 'opacity 300ms ease, transform 500ms ease-out',
     m: ['sm', 'sm', '1.75rem auto'],
-    overflow: 'hidden',
     maxHeight: 'calc(100vh - 3.5rem)',
+    overflowY: 'auto',
     '&.is-open-no-transition': {
       opacity: '100%',
       transform: 'none'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.116.1-alpha.1",
+  "version": "2.117.0-alpha.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",