Skip to content

Commit

Permalink
Revert "feat(modal): add custom modal with scrolling content variant" (…
Browse files Browse the repository at this point in the history 
…#1840)

This reverts commit aa33dae.

Co-authored-by: Julian Skinner <[email protected]>
  • Loading branch information
@ju-Skinner @kajabi-bot
ju-Skinner and kajabi-bot authored Nov 13, 2023
1 parent 2ecf456 commit 11dde9c
Show file tree
Hide file tree
Showing 5 changed files with 0 additions and 282 deletions.
Binary file removed packages/sage-assets/lib/images/system/dot.png
View file
Binary file not shown.
117 changes: 0 additions & 117 deletions packages/sage-assets/lib/stylesheets/components/_modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -347,120 +347,3 @@ $-modal-inner-size: sage-container(md);
transition: none;
}
}


$-modal-fixed-fullscreen-top-spacing: 8rem;
$-modal-fixed-fullscreen-column-top-spacing: rem(60px);
$-modal-fixed-fullscreen-column-height: rem(74px);
$-modal-fixed-column-offset: 14rem;
$-modal-fixed-fullscreen-column-scroll-height: rem(140px);

$-modal-scrollable-cols-sidebar-width: 36%;
$-modal-scrollable-cols-preview-width: 919px;
$-modal-scrollable-cols-preview-visible-breakpoint: 1359px;
$-modal-scrollable-cols-mobile-fixed-column-padding-top: rem(32px);

$-modal-scrollable-cols-xsmall-mobile-fixed-column-padding-top: rem(90px);

.modal-scrollable-cols__modal {
.sage-modal__header {
position: relative;
z-index: 2;
margin: 0;
padding: rem(12px) 0;
border-start-start-radius: sage-spacing(sm);
border-start-end-radius: sage-spacing(sm);
box-shadow: sage-shadow(md);
}

.sage-modal__header-text {
padding: sage-spacing(2xs) sage-spacing(md);

/* stylelint-disable max-nesting-depth */
> {
.sage-card__row {
display: flex;
justify-content: space-between;
}
}
/* stylelint-enable max-nesting-depth */
}

.sage-modal__content {
margin: 0;
}

.modal-scrollable-cols__fixed-column {
display: flex;
flex-direction: column;
overflow: hidden;
height: calc(100vh - #{$-modal-fixed-column-offset});
background-color: #fff;
}

.modal-scrollable-cols__fixed-column-scroll {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: scroll;
height: 100%;
padding: sage-spacing(sm);
}
}

.modal-scrollable-cols__sidebar {
z-index: 2;
flex-grow: 0;
flex-basis: $-modal-scrollable-cols-sidebar-width;
overflow-y: auto;
position: relative;
background-color: sage-color(white);
border-block-start: sage-border(default);
border-inline-end: sage-border(default);
box-shadow: 6px 0 7px -6px rgba(sage-color(black), 0.16);

&.modal-scrollable-cols__fixed-column {
border-end-start-radius: sage-spacing(sm);
}
}

.modal-scrollable-cols__preview {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAALklEQVR4AdXPsQoAAASEYbz/syqLuomyi0n56rZ/OQYQtCC0dBCqeW0MO/zgdQLEyQ2Rj7XXawAAAABJRU5ErkJggg==");

&.modal-scrollable-cols__fixed-column {
border-end-end-radius: sage-spacing(sm);
}

.modal-scrollable-cols__fixed-column-scroll {
padding: sage-spacing(xl);
}
}

// TODO: update to use image and not icon
.modal-scrollable-cols-header-text {
min-width: 0;
padding-left: sage-spacing(sm);
border-left: sage-border();

@media (max-width: sage-breakpoint(sm-max)) {
padding-left: sage-spacing(xs);
}

h1 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

img {
max-width: 40px;
}
}

.modal-scrollable-cols-header-content {
width: 100%;
}

.modal-scrollable-cols-header-actions {
flex-shrink: 0;
}
85 changes: 0 additions & 85 deletions packages/sage-react/lib/Modal/Modal.story.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { Icon } from '../Icon';
import { SageTokens, SageClassnames } from '../configs';
import { disableArgs, selectArgs } from '../story-support/helpers';
import { Modal } from './Modal';
import { ModalScrollableCols } from './ModalScrollableCols';

const DefaultBody = ({ onExit }) => (
<>
Expand Down Expand Up @@ -275,87 +274,3 @@ export const ModalWithCustomSize = (args) => {
</>
);
};

export const ModalWithScrollingColumns = (args) => {
const [active, setActive] = useState(false);
const [isClosing, setIsClosing] = useState(false);

const onExit = () => {
setIsClosing(true);
setTimeout(() => {
setActive(false);
setIsClosing(false);
}, 1000);
};

return (
<>
<Button
color={Button.COLORS.PRIMARY}
onClick={() => setActive(true)}
>
Take An Action
</Button>
<ModalScrollableCols
{...args}
active={active}
headerActions={(
<>
<Button.Group gap={Button.Group.GAP_OPTIONS.MD}>
<Button
color={Button.COLORS.SECONDARY}
icon={SageTokens.ICONS.PREVIEW_ON}
onClick={onExit}
>
Preview
</Button>
<Button
color={Button.COLORS.SECONDARY}
iconOnly={true}
icon={SageTokens.ICONS.REMOVE}
onClick={onExit}
subtle={true}
>
Menu
</Button>
</Button.Group>
</>
)}
form={(
<>
<p>form side</p>
<p>form side</p>
<p>form side</p>
<p>form side</p>
<p>form side</p>
<p>form side</p>
<p>form side</p>
<p>form side</p>
<p>form side</p>
<p>form side</p>
<p>form side</p>
</>
)}
// headerImage="" - find way to add asset
preview={(
<>
<p>preview side</p>
<p>preview side</p>
<p>preview side</p>
<p>preview side</p>
<p>preview side</p>
<p>preview side</p>
<p>preview side</p>
<p>preview side</p>
<p>preview side</p>
<p>preview side</p>
<p>preview side</p>
</>
)}
isClosing={isClosing}
onExit={onExit}
title="My Modal"
/>
</>
);
};
80 changes: 0 additions & 80 deletions packages/sage-react/lib/Modal/ModalScrollableCols.jsx
View file

This file was deleted.

Binary file removed packages/sage-react/public/dot.png
View file
Binary file not shown.

0 comments on commit 11dde9c

Please sign in to comment.