Skip to content

Commit

Permalink
fix(Modal): Fixed bottom padding on the Modal header (#1175)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chris-cedrone-cengage @silvalaura
chris-cedrone-cengage authored and silvalaura committed Jan 22, 2024
1 parent dc443a9 commit dfbee0b
Show file tree
Hide file tree
Showing 4 changed files with 114 additions and 69 deletions.
5 changes: 5 additions & 0 deletions .changeset/fix-modalPadding.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'react-magma-dom': patch
---

fix(Modal): Fixed bottom padding on the Modal header.
82 changes: 44 additions & 38 deletions packages/react-magma-dom/src/components/Modal/Modal.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { DatePicker } from '../DatePicker';
import { ButtonGroup, ButtonGroupAlignment } from '../ButtonGroup';
import { Container } from '../Container';
import { NativeSelect } from '../NativeSelect';
import { Paragraph } from '../Paragraph';
import { Spacer } from '../Spacer';
import { Combobox } from '../Combobox';
import {
Expand Down Expand Up @@ -40,7 +41,7 @@ export const Default = () => {
}}
isOpen={showModal}
>
<p>This is a modal, doing modal things.</p>
<Paragraph noTopMargin>This is a modal, doing modal things.</Paragraph>
<ButtonGroup alignment={ButtonGroupAlignment.right}>
<Button color={ButtonColor.secondary}>Cancel</Button>
<Button>Save</Button>
Expand Down Expand Up @@ -70,45 +71,45 @@ export const LongContentWithScrolling = () => {
return (
<>
<Modal header="Modal Title" onClose={onModalClose} isOpen={showModal}>
<p>This is a modal, doing modal things.</p>
<p>
<Paragraph noTopMargin>This is a modal, doing modal things.</Paragraph>
<Paragraph>
This is <a href="/">linked text</a> in the modal
</p>
<p>
</Paragraph>
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>This is a modal, doing modal things.</p>
<p>
</Paragraph>
<Paragraph>This is a modal, doing modal things.</Paragraph>
<Paragraph>
This is <a href="/"> some more linked text</a> in the modal
</p>
<p>
</Paragraph>
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>This is a modal, doing modal things.</p>
<p>
</Paragraph>
<Paragraph>This is a modal, doing modal things.</Paragraph>
<Paragraph>
<Button>This is a button</Button>
</p>
<p>
</Paragraph>
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</Paragraph>
</Modal>
<Button onClick={onModalShow} ref={buttonRef}>
Show Modal
Expand Down Expand Up @@ -184,10 +185,10 @@ export const ModalContentUpdate = () => {
<div id="attachToMe">
{page === 1 && (
<>
<p>Page one</p>
<p>
<Paragraph noTopMargin>Page one</Paragraph>
<Paragraph>
This is <a href="/">linked text</a> in the modal
</p>
</Paragraph>
<Toggle
checked={!goToNextPageEnabled}
id="goToNextPageEnabled"
Expand All @@ -202,6 +203,7 @@ export const ModalContentUpdate = () => {
/>

{showHidden && <Button>Hidden Button</Button>}
<Spacer size={10} />
<Button disabled={!goToNextPageEnabled} onClick={goToPage2}>
Go to Page 2
</Button>
Expand All @@ -210,11 +212,11 @@ export const ModalContentUpdate = () => {

{page === 2 && (
<>
<p>Page two</p>
<p>
<Paragraph noTopMargin>Page two</Paragraph>
<Paragraph>
<Button color={ButtonColor.secondary}>Random button 1</Button>{' '}
<Button color={ButtonColor.secondary}>Random button 2</Button>
</p>
</Paragraph>
<Button onClick={goToPage1}>Go to Page 1</Button>
</>
)}
Expand Down Expand Up @@ -248,11 +250,13 @@ export const NoHeaderOrFocusableContent = () => {
onClose={onModalNoFocusClose}
isOpen={showModalNoFocus}
>
<p>This modal has no header and nothing focusable.</p>
<p>
<Paragraph noTopMargin>
This modal has no header and nothing focusable.
</Paragraph>
<Paragraph>
Consider the usability implications before implementing a modal like
this. A modal should have something actionable inside it.
</p>
</Paragraph>
</Modal>
<Button onClick={onModalNoFocusShow} ref={buttonRef}>
Show Modal with nothing focusable
Expand All @@ -276,16 +280,16 @@ export const ModalInAModal = () => {
}}
isOpen={showModal}
>
<p>This is a modal, doing modal things.</p>
<p>
<Paragraph noTopMargin>This is a modal, doing modal things.</Paragraph>
<Paragraph>
This is <a href="/">linked text</a> in the modal
</p>
<p>
</Paragraph>
<Paragraph>
<Button>This is a button</Button>
</p>
<p>
</Paragraph>
<Paragraph>
This is <a href="/"> some more linked text</a> in the modal
</p>
</Paragraph>
<Combobox
id="comboboxId3"
isMulti
Expand All @@ -311,9 +315,9 @@ export const ModalInAModal = () => {
]}
isClearable
/>
<p>
<Paragraph>
<Button onClick={() => setShowModal2(true)}>Show Modal 2</Button>
</p>
</Paragraph>
</Modal>
<Button onClick={() => setShowModal(true)} ref={buttonRef}>
Show Modal
Expand All @@ -324,7 +328,7 @@ export const ModalInAModal = () => {
onClose={() => setShowModal2(false)}
isOpen={showModal2}
>
<p>This is modal 2</p>
<Paragraph noTopMargin>This is modal 2</Paragraph>
<NativeSelect fieldId="">
<option>1</option>
<option>2</option>
Expand Down Expand Up @@ -418,10 +422,12 @@ export const Inverse = () => {
isOpen={showModal}
isInverse
>
<p>This is an inverse modal, doing modal things.</p>
<p>
<Paragraph noTopMargin>
This is an inverse modal, doing modal things.
</Paragraph>
<Paragraph>
<Button isInverse>This is a button</Button>
</p>
</Paragraph>
</Modal>
<Container isInverse style={{ padding: '12px' }}>
<Button onClick={() => setShowModal(true)} ref={buttonRef} isInverse>
Expand Down
15 changes: 13 additions & 2 deletions packages/react-magma-dom/src/components/Modal/Modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,17 @@ const ModalContent = styled.div<ModalProps & { isExiting?: boolean }>`
}
`;

const ModalHeader = styled.div<{ theme?: ThemeInterface }>`
padding: ${props => props.theme.spaceScale.spacing05}
${props => props.theme.spaceScale.spacing05} 0
${props => props.theme.spaceScale.spacing05};
@media (min-width: ${props => props.theme.breakpoints.small}px) {
padding: ${props => props.theme.spaceScale.spacing06}
${props => props.theme.spaceScale.spacing06} 0
${props => props.theme.spaceScale.spacing06};
}
`;

const ModalWrapper = styled.div<{ theme?: ThemeInterface }>`
padding: ${props => props.theme.spaceScale.spacing05};
@media (min-width: ${props => props.theme.breakpoints.small}px) {
Expand Down Expand Up @@ -366,7 +377,7 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
theme={theme}
>
{header && (
<ModalWrapper theme={theme}>
<ModalHeader theme={theme}>
{header && (
<H1
id={headingId}
Expand All @@ -380,7 +391,7 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
{header}
</H1>
)}
</ModalWrapper>
</ModalHeader>
)}
<ModalWrapper ref={bodyRef} theme={theme}>
{children}
Expand Down
Loading

0 comments on commit dfbee0b

Please sign in to comment.