Skip to content

Commit

Permalink
feat(Modal): add height property to modal API (#2011)
Browse files Browse the repository at this point in the history 
- allow fixed (default), auto, and max
- add stories with doc.s
- change export for ModalContent to fix storybook
- update snapshots
- add EDS assert for prop misuse
  • Loading branch information
@booc0mtaco
booc0mtaco authored Jul 10, 2024
1 parent 421c91b commit 8d0c68f
Show file tree
Hide file tree
Showing 6 changed files with 408 additions and 153 deletions.
1 change: 1 addition & 0 deletions .storybook/preview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ export const parameters: Preview['parameters'] = {
...createInitialReleaseConfig('1.0'),
...createCurrentReleaseConfig('1.3'),
...createCurrentReleaseConfig('2.0'),
...createCurrentReleaseConfig('2.1'),
implementationExample: {
styles: {
backgroundColor: '#ffffff',
Expand Down
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) / 16 * 1rem));
}

@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) / 16 * 1rem));
}

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

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

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

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

@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) / 16 * 1rem));
}

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

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

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

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

/**
* 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);
}
Loading

0 comments on commit 8d0c68f

Please sign in to comment.