Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Modal): Fixed bottom padding on the Modal header #1175

Merged
merged 8 commits into from
Jan 5, 2024
Merged

fix(Modal): Fixed bottom padding on the Modal header #1175

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
dfb0646
fixing padding on Modal Header
chris-cedrone-cengage Jan 3, 2024
593f28e
changey-set
chris-cedrone-cengage Jan 3, 2024
99587e4
Changing changeset description
chris-cedrone-cengage Jan 3, 2024
3c32ad0
Changing examples on docs and storybook to use Paragraph component
chris-cedrone-cengage Jan 4, 2024
45fc96f
correcting prop name in Paragraph for docs
chris-cedrone-cengage Jan 4, 2024
f038b70
merging dev
chris-cedrone-cengage Jan 5, 2024
53d0e1a
tweaking examples for better aesthetics with new props
chris-cedrone-cengage Jan 5, 2024
451d8f8
more example tweaks
chris-cedrone-cengage Jan 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/fix-modalPadding.md
View file
Open in desktop
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.
81 changes: 43 additions & 38 deletions packages/react-magma-dom/src/components/Modal/Modal.stories.tsx
View file
Open in desktop
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 noMargins>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 noMargins>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 noMargins>Page one</Paragraph>
<Paragraph>
This is <a href="/">linked text</a> in the modal
</p>
</Paragraph>
<Toggle
checked={!goToNextPageEnabled}
id="goToNextPageEnabled"
Expand All @@ -210,11 +211,11 @@ export const ModalContentUpdate = () => {

{page === 2 && (
<>
<p>Page two</p>
<p>
<Paragraph>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 +249,13 @@ export const NoHeaderOrFocusableContent = () => {
onClose={onModalNoFocusClose}
isOpen={showModalNoFocus}
>
<p>This modal has no header and nothing focusable.</p>
<p>
<Paragraph noMargins>
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 +279,16 @@ export const ModalInAModal = () => {
}}
isOpen={showModal}
>
<p>This is a modal, doing modal things.</p>
<p>
<Paragraph noMargins>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 +314,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 +327,7 @@ export const ModalInAModal = () => {
onClose={() => setShowModal2(false)}
isOpen={showModal2}
>
<p>This is modal 2</p>
<Paragraph noMargins>This is modal 2</Paragraph>
<NativeSelect fieldId="">
<option>1</option>
<option>2</option>
Expand Down Expand Up @@ -418,10 +421,12 @@ export const Inverse = () => {
isOpen={showModal}
isInverse
>
<p>This is an inverse modal, doing modal things.</p>
<p>
<Paragraph noMargins>
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
Open in desktop
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
Loading