Do not set height classes in ModalDialog when size is 'custom'

hypothesis · Jan 31, 2024 · 18e70c9 · 18e70c9
1 parent 97130ff
commit 18e70c9
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/src/components/feedback/ModalDialog.tsx b/src/components/feedback/ModalDialog.tsx
@@ -86,14 +86,14 @@ export default function ModalDialog({
         classes={classnames(
           // Column-flex layout to constrain content to max-height
           'flex flex-col',
-          'max-w-[90vw] max-h-[90vh]',
+          size !== 'custom' && 'max-w-[90vw] max-h-[90vh]',
           // Overlay sets up a flex layout centered on both axes. For taller
           // viewports, remove this modal container from the flex flow with
           // fixed positioning and position it 10vh from the top of the
           // viewport. This feels more balanced on taller screens. Ensure an
           // equal 10vh gap at the bottom of the screen by adjusting max-height
           // to `80vh`.
-          'tall:fixed tall:max-h-[80vh] tall:top-[10vh]',
+          size !== 'custom' && 'tall:fixed tall:max-h-[80vh] tall:top-[10vh]',
           {
             // Max-width rules will ensure actual width never exceeds 90vw
             'w-[30rem]': size === 'sm',

diff --git a/src/pattern-library/components/patterns/feedback/DialogPage.tsx b/src/pattern-library/components/patterns/feedback/DialogPage.tsx
@@ -836,10 +836,13 @@ export default function DialogPage() {
             <Library.Info>
               <Library.InfoItem label="description">
                 Set the relative width of the modal element. Set to {`'custom'`}{' '}
-                to customize width via <code>classes</code>.
+                to customize dimensions via <code>classes</code>.
+                <br />
+                Note that setting {`'custom'`} value will disable both
+                horizontal and vertical automatic sizing.
               </Library.InfoItem>
               <Library.InfoItem label="type">
-                <code>{`'sm' | 'md' | 'lg' | 'custom'`}]</code>
+                <code>{`'sm' | 'md' | 'lg' | 'custom'`}</code>
               </Library.InfoItem>
               <Library.InfoItem label="default">
                 <code>{`'md'`}</code>
@@ -860,7 +863,7 @@ export default function DialogPage() {
               <ModalDialog_
                 buttons={<DialogButtons />}
                 onClose={() => {}}
-                title="Medium-width modal"
+                title="Medium-size modal"
                 size="md"
               >
                 <LoremIpsum size="md" />
@@ -881,9 +884,9 @@ export default function DialogPage() {
             <Library.Demo title="size='custom'" withSource>
               <ModalDialog_
                 buttons={<DialogButtons />}
-                classes="w-[40em]"
+                classes="w-[40em] h-[80vh] top-[10vh]"
                 onClose={() => {}}
-                title="Custom-width modal"
+                title="Custom-size modal"
                 size="custom"
               >
                 <LoremIpsum size="md" />