Skip to content

Commit

Permalink
feat(Modal): add height property to modal API
Browse files Browse the repository at this point in the history 
- allow fixed (default), auto, and max
- add stories with doc.s
- update snapshots
  • Loading branch information
@booc0mtaco
booc0mtaco committed Jul 9, 2024
1 parent 421c91b commit 73042c0
Show file tree
Hide file tree
Showing 4 changed files with 378 additions and 117 deletions.
254 changes: 153 additions & 101 deletions src/components/Modal/Modal.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,6 @@
width: 100%;
}

/**
* The inverted background of the modal to provide contrast with the actual modal.
*/
.modal__overlay {
&.modal__overlay--emphasis-high {
background-color: rgb(from var(--eds-theme-color-background-utility-overlay-high-emphasis) r g b / 0.8);
}

&.modal__overlay--emphasis-low {
background-color: rgb(from var(--eds-theme-color-background-utility-overlay-low-emphasis) r g b / 0.5);
}
}

/**
* The modal container which positions the modal in the center of the screen.
*/
Expand All @@ -48,6 +35,65 @@
z-index: 1050;
}

/**
* The content of the modal, which can wrap header, body, and footer.
*/
.modal__content {
position: relative;
overflow: hidden;

/**
* This transparent border is for Window High Contrast Mode, which removes all
* background colors but makes borders 100% opacity black. Without this, the
* modal would have no clear boundary.
*/
border: var(--eds-theme-form-border-width) transparent
var(--eds-theme-color-background-utility-container);

display: flex;
flex-direction: column;

background-color: var(--eds-theme-color-background-utility-container);
}

/**
* Header for the modal.
*/
.modal-header {
width: 100%;

padding: calc(var(--eds-size-3) / 16 * 1rem)
calc(var(--eds-size-4) / 16 * 1rem);
}

/**
* The body of the modal
*/
.modal-body {
flex: 1;
padding: 0 calc(var(--eds-size-4) / 16 * 1rem);
}

/**
* Footer for the modal.
*/
.modal-footer {
width: 100%;
z-index: 1000;

padding: calc(var(--eds-size-3) / 16 * 1rem)
calc(var(--eds-size-4) / 16 * 1rem);

background-color: var(--eds-theme-color-background-utility-container);
}

.modal-footer--sticky {
position: sticky;
bottom: 0;

box-shadow: var(--eds-box-shadow-xl);
}

/**
* Modal transition animations.
*/
Expand Down Expand Up @@ -81,61 +127,98 @@
opacity: 0;
}

/**
* The content of the modal, which can wrap header, body, and footer.
*/
.modal__content {
position: relative;
overflow: hidden;

/**
* This transparent border is for Window High Contrast Mode, which removes all
* background colors but makes borders 100% opacity black. Without this, the
* modal would have no clear boundary.
*/
border: var(--eds-theme-form-border-width) transparent var(--eds-theme-color-background-utility-container);

display: flex;
flex-direction: column;

background-color: var(--eds-theme-color-background-utility-container);
}

/**
* The large modal size used for the lg/default modal.
*/
.modal__content--lg {
@media all and (min-width: $eds-bp-xs) {
width: 100%;
height: 100%;
}

@media all and (min-width: $eds-bp-sm) {
max-height: 40rem;
max-width: 50rem;
}

@media all and (min-width: $eds-bp-md) {
max-height: 40rem;
max-width: 50rem;
&.modal__content--height-fixed {
@media all and (min-width: $eds-bp-xs) {
width: 100%;
height: 100%;
max-height: calc(100vh - (var(--eds-size-12) * 1px));
}

@media all and (min-width: $eds-bp-sm) {
max-height: 40rem;
max-width: 50rem;
}

@media all and (min-width: $eds-bp-md) {
max-height: 40rem;
max-width: 50rem;
}

@media all and (min-width: $eds-bp-lg) {
max-height: 40rem;
max-width: 60rem;
}

@media all and (min-width: $eds-bp-xl) {
max-height: 40rem;
max-width: 60rem;
}
}

@media all and (min-width: $eds-bp-lg) {
max-height: 40rem;
max-width: 60rem;
&.modal__content--height-auto {
@media all and (min-width: $eds-bp-xs) {
width: 100%;
height: auto;
max-height: calc(100vh - (var(--eds-size-12) * 1px));
}

@media all and (min-width: $eds-bp-sm) {
max-width: 50rem;
max-height: calc(100vh - (var(--eds-size-12) * 1px));
}

@media all and (min-width: $eds-bp-md) {
max-width: 50rem;
max-height: calc(100vh - (var(--eds-size-12) * 1px));
}

@media all and (min-width: $eds-bp-lg) {
max-width: 60rem;
max-height: calc(100vh - (var(--eds-size-12) * 1px));
}

@media all and (min-width: $eds-bp-xl) {
max-width: 60rem;
max-height: calc(100vh - (var(--eds-size-12) * 1px));
}
}

@media all and (min-width: $eds-bp-xl) {
max-height: 40rem;
max-width: 60rem;
--modal-horizontal-padding: calc(var(--eds-size-8) / 16 * 1rem);
&.modal__content--height-max {
@media all and (min-width: $eds-bp-xs) {
width: 100%;
height: calc(100vh - (var(--eds-size-12) * 1px));
}

@media all and (min-width: $eds-bp-sm) {
max-width: 50rem;
height: calc(100vh - (var(--eds-size-12) * 1px));
}

@media all and (min-width: $eds-bp-md) {
max-width: 50rem;
height: calc(100vh - (var(--eds-size-12) * 1px));
}

@media all and (min-width: $eds-bp-lg) {
max-width: 60rem;
height: calc(100vh - (var(--eds-size-12) * 1px));
}

@media all and (min-width: $eds-bp-xl) {
max-width: 60rem;
height: calc(100vh - (var(--eds-size-12) * 1px));
}
}
}

/**
* The small modal size used for the modal.
*/
.modal__content--sm {
.modal__content--sm {
@media all and (min-width: $eds-bp-xs) {
max-height: 30rem;
max-width: 35rem;
Expand All @@ -154,11 +237,9 @@
@media all and (min-width: $eds-bp-xl) {
max-height: 30rem;
max-width: 35rem;
--modal-horizontal-padding: calc(var(--eds-size-8) / 16 * 1rem);
}
}


/**
* Allows scrolling of the modal content except for sticky footer.
* This functionality is our intended scroll behavior but consuming teams can
Expand All @@ -177,54 +258,25 @@
right: 0;
}

/*------------------------------------*\
# MODAL BODY
\*------------------------------------*/

/**
* The body of the modal
*/
.modal-body {
flex: 1;
padding: 0 calc(var(--eds-size-4) / 16 * 1rem);
}

/*------------------------------------*\
# MODAL FOOTER
\*------------------------------------*/

/**
* Footer for the modal.
*/
.modal-footer {
width: 100%;
z-index: 1000;

padding: calc(var(--eds-size-3) / 16 * 1rem) calc(var(--eds-size-4) / 16 * 1rem);

background-color: var(--eds-theme-color-background-utility-container);
}

.modal-footer--sticky {
position: sticky;
bottom: 0;

box-shadow: var(--eds-box-shadow-xl);
.modal-sub-title {
color: var(--eds-theme-color-text-utility-default-secondary);
}

/*------------------------------------*\
# MODAL HEADER
\*------------------------------------*/

/**
* Header for the modal.
* The inverted background of the modal to provide contrast with the actual modal.
*/
.modal-header {
width: 100%;
.modal__overlay {
&.modal__overlay--emphasis-high {
background-color: rgb(
from var(--eds-theme-color-background-utility-overlay-high-emphasis) r g b /
0.8
);
}

padding: calc(var(--eds-size-3) / 16 * 1rem) calc(var(--eds-size-4) / 16 * 1rem);
&.modal__overlay--emphasis-low {
background-color: rgb(
from var(--eds-theme-color-background-utility-overlay-low-emphasis) r g b /
0.5
);
}
}

.modal-sub-title {
color: var(--eds-theme-color-text-utility-default-secondary);
}
32 changes: 32 additions & 0 deletions src/components/Modal/Modal.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,14 @@ export default {
type: 'boolean',
description: 'Whether or not the modal is visible.',
},
height: {
control: {
type: 'select',
},
description:
'Determine how the height of the modal container is calculated',
options: ['fixed', 'auto', 'max'],
},
hideCloseButton: {
description:
'Hides the close button in the top right of the modal. **Default is `false`**.',
Expand Down Expand Up @@ -274,6 +282,30 @@ export const Large: Story = {
},
};

/**
* Large modals can have height set to auto, which will allow the modal's height to vary based on the contents of the modal container.
*
* This can be as large as the viewport allows, or as short as the content specifies.
*/
export const LargeAuto: Story = {
...Large,
args: {
...Large.args,
height: 'auto',
},
};

/**
* Large modals can have height set to max, which will take up the maxiumum vertical height allowed in the viewport.
*/
export const LargeMax: Story = {
...Large,
args: {
...Large.args,
height: 'max',
},
};

/**
* `Modal` also allows for `small`.
*/
Expand Down
Loading

0 comments on commit 73042c0

Please sign in to comment.