Skip to content

Commit

Permalink
[PLAY-1647] Remove react modal from drawer (#3891)
Browse files Browse the repository at this point in the history
**What does this PR do?** A clear and concise description with your
runway ticket url.
Runway https://runway.powerhrg.com/backlog_items/PLAY-1647

Background: The drawer kit is currently in draft mode. Its similar to
the dialog kit, and i used a lot of the same code to make the drawer
kit.

This story removes `react-modal` from the drawer kit. It didn't do as
much as i thought it did and we can get away with just using a `div`

**How to test?** Steps to confirm the desired behavior:
1. Go to
https://pr3891.playbook.beta.px.powerapp.cloud/kits/drawer/react
2. click all the examples
  • Loading branch information
markdoeswork authored Nov 15, 2024
1 parent a5ce686 commit 2b39849
Show file tree
Hide file tree
Showing 3 changed files with 187 additions and 238 deletions.
263 changes: 88 additions & 175 deletions playbook/app/pb_kits/playbook/pb_drawer/_drawer.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,54 +7,76 @@
@import "../tokens/animation-curves";
@import "../tokens/positioning";

$gutter: $space_lg;
$xsmall: 64px;
$small: 200px;
$medium: 250px;
$large: 300px;
$xlarge: 365px;
$animation-duration: 0.4s;
$z-index: $z_7;

// Drawer animations
// Drawer animations for fading in and out from the center
@keyframes modalFadeIn {
@keyframes modalFadeInLeft {
from {
transform: translate3d(0, -100%, 0);
opacity: 0;
transform: translateX(-100%);
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
transform: translateX(0);
}
}

@keyframes modalFadeOut {
@keyframes modalFadeOutLeft {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
transform: translateX(0);
}
to {
transform: translate3d(0, -50%, 0);
opacity: 0;
transform: translateX(-100%);
}
}

// Drawer animations for fading in and out from the right side
@keyframes modalFadeInRight {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}

@keyframes overlayFade {
@keyframes modalFadeOutRight {
from {
opacity: 0;
transform: translateY(0);
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}

@keyframes modalFadeIn {
from {
transform: translateY(-100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes overlayFadeOut {
@keyframes modalFadeOut {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-100%);
}
}

body.ReactModal__Body--open {
transition: margin-left 0.3s ease-in-out, margin-right 0.3s ease-in-out;
body.PBDrawer__Body--open {
transition: margin-left $animation-duration ease-in, margin-right $animation-duration ease-in;
}

body.PBDrawer__Body--close {
transition: margin-left $animation-duration ease-out, margin-right $animation-duration ease-out;
}

.pb_drawer_lg_left.pb_drawer {
Expand All @@ -66,28 +88,21 @@ body.ReactModal__Body--open {
}

.pb_drawer.pb_drawer_after_open {
transform: translateX(0); /* Slide in */
transform: translate3d(0, 0, 0);
}

// Drawer Styles
.pb_drawer {

// Local Variables
$gutter: $space_lg;
$xsmall: 64px;
$small: 200px;
$medium: 250px;
$large: 300px;
$xlarge: 365px;
$animation-duration: .2s;
$z-index: 100;
$opacity_visible: 1;
$opacity_hidden: 0;
will-change: transform;
backface-visibility: hidden;

.drawer {
position: sticky;
will-change: transform;
backface-visibility: hidden;
top: 0;
background-color: $white;
z-index: $z_8;
z-index: $z_9;
}

// @include pb_card;
Expand All @@ -97,41 +112,31 @@ body.ReactModal__Body--open {
max-height: calc(100vh - #{$gutter * 2});
max-width: calc(100vw - #{$gutter * 2});
overflow: auto;
animation-name: modalFadeIn;
animation-duration: $animation-duration;
outline: none;
animation-timing-function: $easeInOutQuint;
transition: transform 0.3s ease-in-out;

&.drawer_border_full {
box-shadow: none;
border: 2px solid #f3f7fb;
}

&.drawer_border_right {
border-right: 2px solid #f3f7fb;
}

&.drawer_border_left {
border-left: 2px solid #f3f7fb;
// General _before_close styles
&[class*="_before_close"] {
animation-name: modalFadeOut;
animation-duration: $animation-duration;
}

&[class*="_left"] {
animation-name: modalFadeInLeft;
&[class*="_before_close"] {
animation-name: modalFadeOutLeft;
animation-duration: $animation-duration;
opacity: $opacity_hidden;
}
}

&[class*="_left"][class*="_before_close"] {
animation-name: modalFadeOutLeft;
animation-duration: $animation-duration;
}

&[class*="_right"] {
animation-name: modalFadeInRight;
&[class*="_before_close"] {
animation-name: modalFadeOutRight;
animation-duration: $animation-duration;
opacity: $opacity_hidden;
}
}

&[class*="_right"][class*="_before_close"] {
animation-name: modalFadeOutRight;
animation-duration: $animation-duration;
}

&[class*="_xs_"] {
Expand Down Expand Up @@ -164,17 +169,23 @@ body.ReactModal__Body--open {
}

&_after_open {
opacity: $opacity_visible;
}

&.no-background {
background-color: transparent;
&.drawer_border_full {
box-shadow: none;
border: 2px solid #f3f7fb;
}

&[class*="_before_close"] {
animation-name: modalFadeOut;
animation-duration: $animation-duration;
opacity: $opacity_hidden;
&.drawer_border_right {
border-right: 2px solid #f3f7fb;
}

&.drawer_border_left {
border-left: 2px solid #f3f7fb;
}

&.no-background {
background-color: transparent;
}

&_close_icon {
Expand All @@ -196,12 +207,10 @@ body.ReactModal__Body--open {
animation-duration: $animation-duration;

&_after_open {
opacity: $opacity_visible;
}
&_before_close {
animation-name: overlayFadeOut;
animation-duration: $animation-duration;
opacity: $opacity_hidden;
}
&[class*="full_height"] {
&[class*="_left"]{
Expand Down Expand Up @@ -258,12 +267,12 @@ body.ReactModal__Body--open {
&[class*="_xl_"] {
width: $xlarge;
.dialog_footer {
width: $xlarge;
width: $xlarge;
}
}
}
}
}
}

&_no_overlay {
position: fixed;
Expand All @@ -280,20 +289,18 @@ body.ReactModal__Body--open {
overflow: none; /* Ensure body remains scrollable */
pointer-events: none; /* Allow interaction inside the drawer itself */

body.ReactModal__Body--open {
body.PBDrawer--open {
overflow: none; /* Ensure body remains scrollable */
pointer-events: none; /* Allow interaction inside the drawer itself */
}

&_after_open {
opacity: $opacity_visible;
overflow: none; /* Ensure body remains scrollable */
pointer-events: none; /* Allow interaction inside the drawer itself */
}
&_before_close {
animation-name: overlayFadeOut;
animation-duration: $animation-duration;
opacity: $opacity_hidden;
}
&[class*="full_height"] {
&[class*="_left"]{
Expand Down Expand Up @@ -350,116 +357,22 @@ body.ReactModal__Body--open {
&[class*="_xl_"] {
width: $xlarge;
.dialog_footer {
width: $xlarge;
}
}
}
}
}

[class*="drawer_body"] {
padding: $space_sm;
}

[class*="drawer_header"] {
padding: $space_sm;
}

[class*="drawer_footer"] {
padding: $space_sm;
}

//styles specific to rails version of kit
// rails version has own wrapper because of the way the overlay functions for the HTML drawer used to create this
.pb_drawer_wrapper_rails {
$medium: 500px;
$large: 800px;
$xlarge: 1150px;

&[class*="full_height"] {
&[class*="_left"]{
.pb_drawer_rails {
margin: unset !important;
margin-right: auto !important;
}
}

&[class*="_center"]{
justify-content: center;
}

&[class*="_right"]{
.pb_drawer_rails {
margin: unset !important;
margin-left: auto !important;
}
}

.pb_drawer {
height: 100% !important;
max-height: 100% !important;
max-width: 100%;
// This empty div only has height when drawer is full height.
// Fix for drawer body content disappearing behind sticky footer
.drawer-pseudo-footer {
height: $space_xl * 2;
}
.drawer_footer {
position:fixed;
bottom: 0;
background-color: $white;
max-width: 100%;
}
&[class*="_sm"] {
width: $medium;
.drawer_footer {
width: $medium;
}
}
&[class*="_md"] {
width: $large;
.drawer_footer {
width: $large;
}
}
&[class*="_lg"] {
width: $xlarge;
.drawer_footer {
width: $xlarge;
width: $xlarge;
}
}
}
}
}

// Fixes for stylesheets in nitro that were conflicting with our kit. DO NOT REMOVE.
// Conflicts were only apparent in nitro, not in playbook local env
.pb_drawer_rails {
position: fixed !important;
top: 0 !important;
padding: unset !important;
margin: auto;

[class*="drawer_body"] {
padding: $space_sm;
}

// Overlay for rails kit
drawer::backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba($bg_dark, $opacity_4);
animation-name: overlayFade;
animation-duration: 0.2s;
[class*="drawer_header"] {
padding: $space_sm;
}

.drawer-button-class {
background-color: unset;
border: none;
cursor: pointer;
[class*="drawer_footer"] {
padding: $space_sm;
}
}
}
Loading

0 comments on commit 2b39849

Please sign in to comment.