@openedx/paragon 22.16.1 → 22.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "22.16.1",
+  "version": "22.17.0",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/Form/_index.scss

@@ -265,8 +265,8 @@ $select-icon-padding: .5625rem !default;
   }
 
   .form-control:focus ~ &,
-  // select.form-control ~ &,
-  .form-control.has-value ~ & {
+  .form-control.has-value ~ &,
+  .form-control:is(:-webkit-autofill, :autofill) ~ & {
     .pgn__form-control-floating-label-text {
       background-color: $input-bg;
     }

package/src/Modal/ModalDialog.tsx

@@ -53,7 +53,7 @@ interface Props {
   /** Specifies the z-index of the modal */
   zIndex?: number;
   /** Specifies whether overflow is visible in the modal */
-  isOverflowVisible?: boolean;
+  isOverflowVisible: boolean;
 }
 
 function ModalDialog({
@@ -70,7 +70,7 @@ function ModalDialog({
   isFullscreenOnMobile = false,
   isBlocking = false,
   zIndex,
-  isOverflowVisible = true,
+  isOverflowVisible,
 }: Props) {
   const isMobile = useMediaQuery({ query: '(max-width: 767.98px)' });
   const showFullScreen = (isFullscreenOnMobile && isMobile);
@@ -163,7 +163,7 @@ ModalDialog.propTypes = {
    */
   zIndex: PropTypes.number,
   /** Specifies whether overflow is visible in the modal */
-  isOverflowVisible: PropTypes.bool,
+  isOverflowVisible: PropTypes.bool.isRequired,
 };
 
 ModalDialog.Header = ModalDialogHeader;

package/src/Modal/README.md

@@ -145,4 +145,4 @@ class ModalWrapper extends React.Component {
   }
   onClose={() => {}}
 />
-```
+```

package/src/Modal/alert-modal.mdx

@@ -36,6 +36,7 @@ This is the alert style `ModalDialog` composition. `AlertModal` passes all of it
             <Button variant="danger">Submit</Button>
           </ActionRow>
         )}
+        isOverflowVisible={false}
       >
         <p>
           I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever.
@@ -67,6 +68,7 @@ const [isOpen, open, close] = useToggle(false);
             <Button variant="primary">Delete</Button>
           </ActionRow>
         )}
+        isOverflowVisible={false}
       >
         <p>
           Are your sure you want to delete this file? You can't undo this action.
@@ -95,6 +97,7 @@ const [isOpen, open, close] = useToggle(false);
             <Button variant="danger">Acknowledge errror</Button>
           </ActionRow>
         )}
+        isOverflowVisible={false}
       >
         <p>
           An unknown error has occured.
@@ -123,6 +126,7 @@ const [isOpen, open, close] = useToggle(false);
             <Button variant="success">Confirm</Button>
           </ActionRow>
         )}
+        isOverflowVisible={false}
       >
         <p>
           All good!

package/src/Modal/fullscreen-modal.mdx

@@ -38,6 +38,7 @@ The fullscreen `ModalDialog` composition. `FullscreenModal` passes all of its pr
             <Button>Submit</Button>
           </ActionRow>
         )}
+        isOverflowVisible={false}
       >
         <Container size="md">
           <p>

package/src/Modal/marketing-modal.mdx

@@ -50,6 +50,7 @@ The ``MarketingModal`` is a preconfigured `ModalDialog` that accepts an image an
             <Button>Submit</Button>
           </ActionRow>
         )}
+        isOverflowVisible={false}
       >
         <p>
           I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.

package/src/Modal/modal-dialog.mdx

@@ -44,6 +44,7 @@ label for the dialog element.
         variant={modalVariant}
         hasCloseButton
         isFullscreenOnMobile
+        isOverflowVisible={false}
       >
         <ModalDialog.Header>
           <ModalDialog.Title>
@@ -114,6 +115,7 @@ label for the dialog element.
         size={modalSize}
         variant={modalVariant}
         hasCloseButton
+        isOverflowVisible={false}
       >
         <ModalDialog.Hero>
           <ModalDialog.Hero.Background

package/src/Modal/standard-modal.mdx

@@ -38,6 +38,7 @@ The standard `ModalDialog` composition. `StandardModal` passes all of its props
             <Button>Submit</Button>
           </ActionRow>
         )}
+        isOverflowVisible={false}
       >
         <p>
           I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.

package/src/Modal/tests/AlertModal.test.jsx

@@ -42,6 +42,7 @@ describe('<AlertModal />', () => {
         isOpen={isOpen}
         onClose={closeFn}
         footerNode={<p>footer</p>}
+        isOverflowVisible={false}
       >
         <Body />
       </AlertModal>,
@@ -60,6 +61,7 @@ describe('<AlertModal />', () => {
           onClose={closeFn}
           icon={Info}
           footerNode={<p>footer</p>}
+          isOverflowVisible={false}
         >
           <Body />
         </AlertModal>,
@@ -77,6 +79,7 @@ describe('<AlertModal />', () => {
           onClose={closeFn}
           icon={Info}
           footerNode={<p>footer</p>}
+          isOverflowVisible={false}
         >
           <Body />
         </AlertModal>,
@@ -94,6 +97,7 @@ describe('<AlertModal />', () => {
           onClose={closeFn}
           icon={Info}
           footerNode={<p>footer</p>}
+          isOverflowVisible={false}
         >
           <Body />
         </AlertModal>,

package/src/Modal/tests/ModalDialog.test.tsx

@@ -14,6 +14,7 @@ describe('ModalDialog', () => {
         size="md"
         variant="default"
         hasCloseButton
+        isOverflowVisible={false}
       >
         <ModalDialog.Header>
           <ModalDialog.Title>The title</ModalDialog.Title>
@@ -42,6 +43,7 @@ describe('ModalDialog', () => {
       <ModalDialog
         title="My dialog"
         onClose={onClose}
+        isOverflowVisible={false}
       >
         <ModalDialog.Header><ModalDialog.Title>The title</ModalDialog.Title></ModalDialog.Header>
         <ModalDialog.Body><p>The hidden content</p></ModalDialog.Body>
@@ -64,6 +66,7 @@ describe('ModalDialog with Hero', () => {
         size="md"
         variant="default"
         hasCloseButton
+        isOverflowVisible={false}
       >
         <ModalDialog.Hero>
           <ModalDialog.Hero.Background backgroundSrc="imageurl" />