Skip to content

Commit

Permalink
fix(Modal): default content overflows off screen and provided a scree…
Browse files Browse the repository at this point in the history 
…n contained Modal example
  • Loading branch information
@N00nDay
N00nDay committed Nov 3, 2023
1 parent 40a826a commit 6184deb
Show file tree
Hide file tree
Showing 7 changed files with 158 additions and 61 deletions.
4 changes: 3 additions & 1 deletion src/lib/components/modal/Body.svelte
View file
Expand Up @@ -6,8 +6,10 @@
import { exclude } from '../../utils/exclude';
const forwardEvents = forwardEventsBuilder(get_current_component());
// const defaultClass =
// 'first:rounded-t-md last:rounded-b-md px-4 py-5 sm:px-6 flex-grow overflow-y-auto stwui-modal-content-body';
const defaultClass =
'first:rounded-t-md last:rounded-b-md px-4 py-5 sm:px-6 flex-grow overflow-y-auto stwui-modal-content-body';
'first:rounded-t-md last:rounded-b-md px-4 py-5 sm:px-6 flex-grow stwui-modal-content-body';
$: finalClass = twMerge(defaultClass, $$props.class);
</script>

Expand Down
4 changes: 3 additions & 1 deletion src/lib/components/modal/Content.svelte
View file
Expand Up @@ -11,8 +11,10 @@
export let bordered = true;
export let elevation: 'none' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
// const defaultClass =
// 'bg-surface text-content rounded-md mx-auto max-w-xl transform overflow-hidden rounded-md pointer-events-auto max-h-full flex flex-col stwui-modal-content';
const defaultClass =
'bg-surface text-content rounded-md mx-auto max-w-xl transform overflow-hidden rounded-md pointer-events-auto max-h-full flex flex-col stwui-modal-content';
'bg-surface text-content rounded-md mx-auto max-w-xl transform overflow-hidden rounded-md pointer-events-auto flex flex-col stwui-modal-content';
$: finalClass = twMerge(defaultClass, $$props.class);
setContext('card-divided', divided);
Expand Down
4 changes: 3 additions & 1 deletion src/lib/components/modal/Footer.svelte
View file
Expand Up @@ -9,8 +9,10 @@
const divided: boolean = getContext('card-divided');
// const defaultClass =
// 'px-4 py-5 sm:px-6 h-16 first:rounded-t-md last:rounded-b-md border border-l-0 border-b-0 border-r-0 stwui-modal-footer';
const defaultClass =
'px-4 py-5 sm:px-6 h-16 first:rounded-t-md last:rounded-b-md border border-l-0 border-b-0 border-r-0 stwui-modal-footer';
'px-4 py-5 sm:px-6 first:rounded-t-md last:rounded-b-md border border-l-0 border-b-0 border-r-0 stwui-modal-footer';
$: finalClass = twMerge(defaultClass, $$props.class);
</script>

Expand Down
5 changes: 3 additions & 2 deletions src/lib/components/modal/Header.svelte
View file
Expand Up @@ -9,8 +9,9 @@
const divided: boolean = getContext('card-divided');
const defaultClass =
'first:rounded-t-md last:rounded-b-md px-4 py-5 sm:px-6 h-16 stwui-modal-header';
// const defaultClass =
// 'first:rounded-t-md last:rounded-b-md px-4 py-5 sm:px-6 h-16 stwui-modal-header';
const defaultClass = 'first:rounded-t-md last:rounded-b-md px-4 py-5 sm:px-6 stwui-modal-header';
const extrasClass = 'flex flex-row items-center justify-between';
const dividedClass = 'border-b border-border last:border-b-none';
$: finalClass = twMerge(
Expand Down
8 changes: 4 additions & 4 deletions src/lib/components/modal/Modal.svelte
View file
Expand Up @@ -19,7 +19,7 @@
}
}
const defaultClass = 'fixed inset-0 p-4 sm:p-6 md:p-20 stwui-modal';
const defaultClass = 'fixed inset-0 p-4 sm:p-6 md:p-20 overflow-y-auto stwui-modal';
$: finalClass = twMerge(defaultClass, $$props.class);
</script>

Expand All @@ -46,10 +46,10 @@
in:scale={{ start: 0.9, duration: 250, delay: 150 }}
out:scale={{ start: 0.95, duration: 150 }}
>
<slot name="content" />
<slot />
<button
class="h-0 w-0 border-none outline-none ring-0 focus:border-none focus:outline-none focus:ring-0"
class="h-0 w-0 border-none outline-none ring-0 focus:border-none focus:outline-none focus:ring-0 p-0 m-0 absolute"
/>
<slot name="content" />
<slot />
</div>
</div>
80 changes: 70 additions & 10 deletions src/routes/modal/+page.svelte
View file
Expand Up @@ -3,16 +3,14 @@
import {
example,
exampleLC,
exampleLCC,
props,
slots,
backdropProps,
contentSlots,
headerSlots,
coverSlots,
bodySlots,
footerSlots,
actionSlots,
actionsSlots,
labelSlots,
iconProps,
usage,
Expand All @@ -23,6 +21,7 @@
let open = false;
let openLC = false;
let openLCC = false;
function openModal() {
open = true;
Expand All @@ -39,6 +38,14 @@
function closeLCModal() {
openLC = false;
}
function openLCCModal() {
openLCC = true;
}
function closeLCCModal() {
openLCC = false;
}
</script>

<h4 class="text-content pb-2">Usage</h4>
Expand All @@ -59,6 +66,13 @@
<CodeBlock slot="code" language="svelte" code={exampleLC} />
</ExampleContainer>

<ExampleContainer title="Long Content Screen Contained">
<div slot="preview" class="w-full block m-auto gap-2 text-center">
<Button type="primary" on:click={openLCCModal}>Open Modal</Button>
</div>
<CodeBlock slot="code" language="svelte" code={exampleLCC} />
</ExampleContainer>

<Portal>
{#if open}
<Modal handleClose={closeModal}>
Expand Down Expand Up @@ -113,7 +127,59 @@
semper viverra nam. Condimentum id venenatis a condimentum vitae sapien pellentesque
habitant morbi. Pellentesque diam volutpat commodo sed egestas egestas fringilla.
</Modal.Content.Body>
<Modal.Content.Footer slot="footer">Footer</Modal.Content.Footer>
<Modal.Content.Footer slot="footer">
<Button type="primary">Footer Button</Button>
</Modal.Content.Footer>
</Modal.Content>
</Modal>
{/if}
</Portal>

<Portal>
{#if openLCC}
<Modal handleClose={closeLCCModal}>
<Modal.Content slot="content" class="max-h-full">
<Modal.Content.Header slot="header" class="h-16">Modal</Modal.Content.Header>
<Modal.Content.Body slot="body" class="overflow-y-auto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Risus commodo viverra maecenas accumsan lacus vel
facilisis volutpat. Donec enim diam vulputate ut pharetra sit. Non quam lacus suspendisse
faucibus interdum posuere lorem ipsum dolor. Convallis posuere morbi leo urna molestie at
elementum eu. Feugiat sed lectus vestibulum mattis. A pellentesque sit amet porttitor eget
dolor morbi non. Ut placerat orci nulla pellentesque dignissim enim sit amet. Tincidunt
praesent semper feugiat nibh sed pulvinar proin. Molestie ac feugiat sed lectus vestibulum
mattis ullamcorper velit. Euismod nisi porta lorem mollis aliquam ut porttitor leo.
Volutpat sed cras ornare arcu dui vivamus. Laoreet id donec ultrices tincidunt arcu non
sodales. Nunc sed blandit libero volutpat sed cras ornare arcu. Non nisi est sit amet
facilisis magna etiam. Fusce id velit ut tortor. Phasellus vestibulum lorem sed risus.
Molestie at elementum eu facilisis sed odio morbi quis. Convallis tellus id interdum
velit. Accumsan in nisl nisi scelerisque eu. Arcu dictum varius duis at. In hendrerit
gravida rutrum quisque non. Turpis egestas sed tempus urna et. In nulla posuere
sollicitudin aliquam ultrices sagittis orci. Nulla facilisi cras fermentum odio eu.
Adipiscing bibendum est ultricies integer quis auctor. At imperdiet dui accumsan sit amet
nulla facilisi morbi. Facilisi etiam dignissim diam quis enim. Aliquet enim tortor at
auctor urna. Nunc faucibus a pellentesque sit amet porttitor eget. Elementum pulvinar
etiam non quam lacus suspendisse. Ipsum a arcu cursus vitae congue mauris rhoncus aenean.
Elit sed vulputate mi sit. Tincidunt nunc pulvinar sapien et ligula. Tristique magna sit
amet purus gravida quis blandit. Volutpat sed cras ornare arcu dui vivamus arcu. Felis
imperdiet proin fermentum leo vel orci porta non. Iaculis urna id volutpat lacus. Vitae
elementum curabitur vitae nunc sed velit dignissim. Commodo sed egestas egestas fringilla
phasellus faucibus scelerisque eleifend. Maecenas accumsan lacus vel facilisis volutpat
est. Dignissim cras tincidunt lobortis feugiat. Ac tincidunt vitae semper quis. Varius
morbi enim nunc faucibus a pellentesque sit. Pharetra diam sit amet nisl. In tellus
integer feugiat scelerisque varius morbi enim. Sit amet nisl purus in mollis. Eget felis
eget nunc lobortis mattis aliquam faucibus. Posuere sollicitudin aliquam ultrices sagittis
orci. Condimentum id venenatis a condimentum. Mauris augue neque gravida in fermentum et
sollicitudin. Iaculis urna id volutpat lacus laoreet non curabitur gravida arcu. Eu sem
integer vitae justo eget magna fermentum iaculis eu. Mattis rhoncus urna neque viverra.
Vel quam elementum pulvinar etiam non quam lacus. Quis varius quam quisque id. Tortor
dignissim convallis aenean et tortor at. Luctus accumsan tortor posuere ac ut consequat
semper viverra nam. Condimentum id venenatis a condimentum vitae sapien pellentesque
habitant morbi. Pellentesque diam volutpat commodo sed egestas egestas fringilla.
</Modal.Content.Body>
<Modal.Content.Footer slot="footer" class="h-24">
<Button type="primary">Footer Button</Button>
</Modal.Content.Footer>
</Modal.Content>
</Modal>
{/if}
Expand All @@ -131,16 +197,10 @@

<SlotsTable component="Modal.Content.Header" slots={headerSlots} />

<SlotsTable component="Modal.Content.Cover" slots={coverSlots} />

<SlotsTable component="Modal.Content.Body" slots={bodySlots} />

<SlotsTable component="Modal.Content.Footer" slots={footerSlots} />

<SlotsTable component="Modal.Content.Actions" slots={actionsSlots} />

<SlotsTable component="Modal.Content.Actions.Action" slots={actionSlots} />

<PropsTable component="Modal.Content.Actions.Action.Icon" props={iconProps} />

<SlotsTable component="Modal.Content.Actions.Action.Label" slots={labelSlots} />
Expand Down
114 changes: 72 additions & 42 deletions src/routes/modal/examples.ts
View file
Expand Up @@ -82,11 +82,6 @@ export const contentSlots: Slot[] = [
id: '5',
slot: 'footer',
component: '<Modal.Content.Footer slot="footer" />'
},
{
id: '6',
slot: 'actions',
component: '<Modal.Content.Actions slot="actions" />'
}
];

Expand All @@ -103,19 +98,6 @@ export const headerSlots: Slot[] = [
}
];

export const coverSlots: Slot[] = [
{
id: '1',
slot: 'default',
component: ''
},
{
id: '2',
slot: 'default',
component: '<Card.Cover.Overlay />'
}
];

export const bodySlots: Slot[] = [
{
id: '1',
Expand All @@ -132,27 +114,6 @@ export const footerSlots: Slot[] = [
}
];

export const actionsSlots: Slot[] = [
{
id: '1',
slot: 'default',
component: '<Card.Actions.Action />'
}
];

export const actionSlots: Slot[] = [
{
id: '1',
slot: 'icon',
component: '<Card.Actions.Action.Icon slot="icon" />'
},
{
id: '2',
slot: 'label',
component: '<Card.Actions.Action.Label slot="label" />'
}
];

export const labelSlots: Slot[] = [
{
id: '1',
Expand Down Expand Up @@ -251,7 +212,7 @@ import Modal from 'stwui/modal'; // for tree shaking

export const example = `
<script lang="ts">
import { Modal, Portal, Card } from 'stwui';
import { Modal, Portal } from 'stwui';
let open = false;
Expand Down Expand Up @@ -279,7 +240,7 @@ export const example = `

export const exampleLC = `
<script lang="ts">
import { Modal, Portal, Card } from 'stwui';
import { Modal, Portal } from 'stwui';
let open = false;
Expand Down Expand Up @@ -336,7 +297,76 @@ export const exampleLC = `
semper viverra nam. Condimentum id venenatis a condimentum vitae sapien pellentesque
habitant morbi. Pellentesque diam volutpat commodo sed egestas egestas fringilla.
</Modal.Content.Body>
<Modal.Content.Footer slot="footer">Footer</Modal.Content.Footer>
<Modal.Content.Footer slot="footer">
<Button type="primary">Footer Button</Button>
</Modal.Content.Footer>
</Modal.Content>
</Modal>
{/if}
</Portal>`;

export const exampleLCC = `
<script lang="ts">
import { Modal, Portal } from 'stwui';
let open = false;
function openModal() {
open = true;
}
function closeModal() {
open = false;
}
</script>
<Button type="primary" on:click={openModal}>Open Modal</Button>
<Portal>
{#if open}
<Modal handleClose={closeModal}>
<Modal.Content slot="content" class="max-h-full">
<Modal.Content.Header slot="header" class="h-16">Modal</Modal.Content.Header>
<Modal.Content.Body slot="body" class="overflow-y-auto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Risus commodo viverra maecenas accumsan lacus vel
facilisis volutpat. Donec enim diam vulputate ut pharetra sit. Non quam lacus suspendisse
faucibus interdum posuere lorem ipsum dolor. Convallis posuere morbi leo urna molestie at
elementum eu. Feugiat sed lectus vestibulum mattis. A pellentesque sit amet porttitor eget
dolor morbi non. Ut placerat orci nulla pellentesque dignissim enim sit amet. Tincidunt
praesent semper feugiat nibh sed pulvinar proin. Molestie ac feugiat sed lectus vestibulum
mattis ullamcorper velit. Euismod nisi porta lorem mollis aliquam ut porttitor leo.
Volutpat sed cras ornare arcu dui vivamus. Laoreet id donec ultrices tincidunt arcu non
sodales. Nunc sed blandit libero volutpat sed cras ornare arcu. Non nisi est sit amet
facilisis magna etiam. Fusce id velit ut tortor. Phasellus vestibulum lorem sed risus.
Molestie at elementum eu facilisis sed odio morbi quis. Convallis tellus id interdum
velit. Accumsan in nisl nisi scelerisque eu. Arcu dictum varius duis at. In hendrerit
gravida rutrum quisque non. Turpis egestas sed tempus urna et. In nulla posuere
sollicitudin aliquam ultrices sagittis orci. Nulla facilisi cras fermentum odio eu.
Adipiscing bibendum est ultricies integer quis auctor. At imperdiet dui accumsan sit amet
nulla facilisi morbi. Facilisi etiam dignissim diam quis enim. Aliquet enim tortor at
auctor urna. Nunc faucibus a pellentesque sit amet porttitor eget. Elementum pulvinar
etiam non quam lacus suspendisse. Ipsum a arcu cursus vitae congue mauris rhoncus aenean.
Elit sed vulputate mi sit. Tincidunt nunc pulvinar sapien et ligula. Tristique magna sit
amet purus gravida quis blandit. Volutpat sed cras ornare arcu dui vivamus arcu. Felis
imperdiet proin fermentum leo vel orci porta non. Iaculis urna id volutpat lacus. Vitae
elementum curabitur vitae nunc sed velit dignissim. Commodo sed egestas egestas fringilla
phasellus faucibus scelerisque eleifend. Maecenas accumsan lacus vel facilisis volutpat
est. Dignissim cras tincidunt lobortis feugiat. Ac tincidunt vitae semper quis. Varius
morbi enim nunc faucibus a pellentesque sit. Pharetra diam sit amet nisl. In tellus
integer feugiat scelerisque varius morbi enim. Sit amet nisl purus in mollis. Eget felis
eget nunc lobortis mattis aliquam faucibus. Posuere sollicitudin aliquam ultrices sagittis
orci. Condimentum id venenatis a condimentum. Mauris augue neque gravida in fermentum et
sollicitudin. Iaculis urna id volutpat lacus laoreet non curabitur gravida arcu. Eu sem
integer vitae justo eget magna fermentum iaculis eu. Mattis rhoncus urna neque viverra.
Vel quam elementum pulvinar etiam non quam lacus. Quis varius quam quisque id. Tortor
dignissim convallis aenean et tortor at. Luctus accumsan tortor posuere ac ut consequat
semper viverra nam. Condimentum id venenatis a condimentum vitae sapien pellentesque
habitant morbi. Pellentesque diam volutpat commodo sed egestas egestas fringilla.
</Modal.Content.Body>
<Modal.Content.Footer slot="footer" class="h-24">
<Button type="primary">Footer Button</Button>
</Modal.Content.Footer>
</Modal.Content>
</Modal>
{/if}
Expand Down

1 comment on commit 6184deb

@vercel
Copy link

@vercel vercel bot commented on 6184deb Nov 4, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

stwui – ./

stwui-git-main-n00nday.vercel.app
stwui-n00nday.vercel.app
stwui.vercel.app

Please sign in to comment.