Skip to content

Commit

Permalink
fix(modal/popover): overflowing surface
Browse files Browse the repository at this point in the history
  • Loading branch information
@Leotheluck @dpellier
Leotheluck authored and dpellier committed Mar 15, 2024
1 parent 6d979aa commit f33385c
Show file tree
Hide file tree
Showing 8 changed files with 153 additions and 139 deletions.
11 changes: 4 additions & 7 deletions packages/components/src/modal/src/components/osds-modal/osds-modal.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ describe('e2e:osds-modal', () => {
el = await page.find('osds-modal');

await page.evaluate(() => {
const modalElement = document.querySelector('osds-modal')?.shadowRoot?.querySelector('.wrapper') as HTMLDialogElement;
const modalElement = document.querySelector('osds-modal')?.shadowRoot?.querySelector('.popup') as HTMLElement;
modalElement.style.setProperty('animation', 'none');
});
}
Expand All @@ -46,19 +46,16 @@ describe('e2e:osds-modal', () => {
expect(closeIcon).toBeNull();
});

it('should set display styling to none when clicked', async() => {
it('should set masked to true when clicked', async() => {
await setup({ attributes: { dismissible: true } });

const closeIcon = await page.find('osds-modal >>> osds-icon[name="close"]');
expect(closeIcon).not.toBeNull();
await closeIcon.click();
await page.waitForChanges();

const display = await page.evaluate(() => {
const modal = document.querySelector('osds-modal');
return modal ? window.getComputedStyle(modal).display : null;
});
expect(display).toBe('none');
const masked = await el.getProperty('masked');
expect(masked).toBe(true);
});
});

Expand Down
66 changes: 35 additions & 31 deletions packages/components/src/modal/src/components/osds-modal/osds-modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,41 +22,45 @@

:host {
display: flex;
position: fixed;
top: 0;
left: 0;
align-items: center;
justify-content: center;
z-index: 9999;

.backdrop {
position: absolute;
opacity: 0.75;
}
.dialog {
.wrapper {
display: flex;
position: fixed;
top: 0;
left: 0;
overflow-y: scroll;

.wrapper {
position: fixed;
z-index: 1;
outline: none;
border: none;
overflow: hidden;
animation: modal-appear 0.2s ease-in-out;
.backdrop {
position: fixed;
top: 0;
left: 0;
z-index: -1;
}

.header {
display: flex;
align-items: center;
justify-content: flex-end;
overflow: hidden;
}
.popup {
overflow: visible;
animation: modal-appear 0.2s ease-in-out;

.header {
display: flex;
align-items: center;
justify-content: flex-end;
overflow: hidden;
}

.content {
max-height: 50vh;
overflow-y: auto;
.content {
.slot {
display: flex;
flex-direction: column;
}

.actions {
display: flex;
align-items: center;
justify-content: flex-end;
.actions {
display: flex;
align-items: center;
justify-content: flex-end;
}
}
}
}
}
Expand All @@ -71,4 +75,4 @@
@include osds-modal-theme-color;
@include osds-modal-theme-size;
@include osds-modal-theme-typography;
}
}
52 changes: 29 additions & 23 deletions packages/components/src/modal/src/components/osds-modal/osds-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,36 +99,42 @@ export class OsdsModal implements OdsModalAttribute, OdsModalMethod, OdsModalEve

return (
<Host masked={masked}>
<div class="backdrop"></div>

<dialog
class="wrapper"
class="dialog"
tabindex={-1}
ref={(el?: HTMLElement | null): void => {
this.modal = el as HTMLDialogElement;
}}>
<div class="header">
{dismissible && (
<osds-button onClick={(): Promise<void> => this.close()} color={color} circle variant={ODS_BUTTON_VARIANT.ghost}>
<osds-icon ariaName={ODS_ICON_NAME.CLOSE + ' icon'} name={ODS_ICON_NAME.CLOSE} size={ODS_ICON_SIZE.sm} color={color}></osds-icon>
</osds-button>
)}
</div>

<div class="content">
{headline && headline.length > 0 && (
<div class="headline">
<osds-text level={ODS_TEXT_LEVEL.heading} size={ODS_THEME_TYPOGRAPHY_SIZE._400} color={ODS_THEME_COLOR_INTENT.primary}>
{headline}
</osds-text>
</div>
)}
<div class="wrapper">
<div class="backdrop"></div>

<div class="slot">
<slot></slot>
</div>
<div class="popup">
<div class="header">
{dismissible && (
<osds-button onClick={(): Promise<void> => this.close()} color={color} circle variant={ODS_BUTTON_VARIANT.ghost}>
<osds-icon ariaName={ODS_ICON_NAME.CLOSE + ' icon'} name={ODS_ICON_NAME.CLOSE} size={ODS_ICON_SIZE.sm} color={color}></osds-icon>
</osds-button>
)}
</div>

<div class="actions">
<slot name="actions"></slot>
<div class="content" tabindex={-1}>
{headline && headline.length > 0 && (
<div class="headline">
<osds-text level={ODS_TEXT_LEVEL.heading} size={ODS_THEME_TYPOGRAPHY_SIZE._400} color={ODS_THEME_COLOR_INTENT.primary}>
{headline}
</osds-text>
</div>
)}

<div class="slot">
<slot></slot>
</div>

<div class="actions">
<slot name="actions"></slot>
</div>
</div>
</div>
</div>
</dialog>
Expand Down
33 changes: 23 additions & 10 deletions packages/components/src/modal/src/components/osds-modal/styles/osds-modal.color.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,13 @@
background-color: '100'
)) using($colors) {
@include osds-modal-on-selected-host {
.wrapper {
.header {
background-color: map_get($colors, background-color);
.dialog {
.wrapper {
.popup {
.header {
background-color: map_get($colors, background-color);
}
}
}
}
}
Expand All @@ -22,15 +26,24 @@
:host {
border-color: transparent;

.backdrop {
background-color: var(--ods-color-primary-500);
}
.dialog {
border-color: transparent;
background: none;

.wrapper {
background: #fff;
.wrapper {
// Doesn't work with most browsers
&::backdrop {
background: none;
}

&::backdrop {
opacity: 0;
.backdrop {
opacity: 0.75;
background-color: var(--ods-color-primary-500);
}

.popup {
background-color: var(--ods-color-default-000);
}
}
}
}
Expand Down
80 changes: 42 additions & 38 deletions packages/components/src/modal/src/components/osds-modal/styles/osds-modal.size.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,45 +3,49 @@

// Main CSS mixin for sizes
@mixin osds-modal-theme-size() {
:host {
width: 100%;
height: 100%;

* {
box-sizing: border-box;
}

.backdrop {
width: 100%;
height: 100%;
}

.wrapper {
border-radius: var(--ods-size-04);
padding: 0;
width: 100%;
max-width: 512px;

.header {
padding: 0 calc(var(--ods-size-04) / 2);
width: 100%;
height: calc(var(--ods-size-09) + var(--ods-size-05));
}

.content {
padding: var(--ods-size-06) var(--ods-size-08) var(--ods-size-08);
width: 100%;

.headline {
margin-bottom: var(--ods-size-04);
:host {
* {
box-sizing: border-box;
}

.actions {
gap: var(--ods-size-04);
margin-top: var(--ods-size-07);
width: 100%;
.dialog {
.wrapper {
padding: var(--ods-size-09) 0;
width: 100%;
height: 100%;

.backdrop {
width: 100%;
height: 100%;
}

.popup {
margin: auto;
border-radius: var(--ods-size-04);
padding: 0;
width: 70%;
min-width: 50%;
max-width: clamp(36rem, 70%, 70%);
height: fit-content;

.header {
border-top-left-radius: var(--ods-size-04);
border-top-right-radius: var(--ods-size-04);
padding: 0 calc(var(--ods-size-04) / 2);
width: 100%;
height: calc(var(--ods-size-09) + var(--ods-size-05));
}

.content {
padding: var(--ods-size-06) var(--ods-size-08) var(--ods-size-08);

.actions {
gap: var(--ods-size-04);
margin-top: var(--ods-size-07);
}
}
}
}
}
}
}
}
}
}
45 changes: 17 additions & 28 deletions packages/components/src/modal/src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@
<div>
<osds-button id="modal-trigger-1" inline slot="actions" color="info">Modal 1</osds-button>
<osds-button id="modal-trigger-2" inline slot="actions" color="success">Modal 2</osds-button>
<osds-button id="modal-trigger-3" inline slot="actions" color="warning">Modal 3</osds-button>
<osds-button id="modal-trigger-3" inline slot="actions" color="error">Modal 3</osds-button>
<osds-button id="modal-trigger-4" inline slot="actions" color="warning">Modal 4</osds-button>

</div>
<script>
Expand All @@ -34,6 +35,9 @@
document.querySelector('#modal-trigger-3').addEventListener(('click'), () => {
document.querySelector('#modal-3').open();
});
document.querySelector('#modal-trigger-4').addEventListener(('click'), () => {
document.querySelector('#modal-4').open();
});
</script>

<osds-modal
Expand Down Expand Up @@ -65,38 +69,23 @@
</osds-modal>
<osds-modal
id="modal-3"
color="warning"
color="success"
headline="On Vous Héberge ?"
dismissible="true"
masked="true"
>
<div style="display: flex; flex-direction: column; gap: 10px;">
<osds-text color="text">
OVHcloud, anciennement OVH, est une entreprise française. Elle pratique initialement de l'hébergement de serveur, et est un fournisseur d'accès à Internet (FAI), puis opérateur de télécommunications pour les entreprises. Elle se développe, à la fin des années 2010, dans le cloud computing (informatique en nuage).
</osds-text>
<osds-select class="w-20" id="select7">
<span slot="placeholder"><i>Select</i> something</span>
<osds-select-group>Group title</osds-select-group>
<osds-select-option value="1">This is the <strong>Value 1</strong></osds-select-option>
<osds-select-option value="2">A value way toooooooooooooooooooo long for a select</osds-select-option>
<osds-select-option value="3">Value 3</osds-select-option>
</osds-select>
<osds-input inline type="text" value="On Vous Héberge ?" clearable></osds-input>
<osds-text color="text">
OVHcloud, anciennement OVH, est une entreprise française. Elle pratique initialement de l'hébergement de serveur, et est un fournisseur d'accès à Internet (FAI), puis opérateur de télécommunications pour les entreprises. Elle se développe, à la fin des années 2010, dans le cloud computing (informatique en nuage).
</osds-text>
<osds-input inline type="text" value="On Vous Héberge ?" clearable></osds-input>
<osds-text color="text">
OVHcloud, anciennement OVH, est une entreprise française. Elle pratique initialement de l'hébergement de serveur, et est un fournisseur d'accès à Internet (FAI), puis opérateur de télécommunications pour les entreprises. Elle se développe, à la fin des années 2010, dans le cloud computing (informatique en nuage).
</osds-text>
<osds-input inline type="text" value="On Vous Héberge ?" clearable></osds-input>
<osds-text color="text">
OVHcloud, anciennement OVH, est une entreprise française. Elle pratique initialement de l'hébergement de serveur, et est un fournisseur d'accès à Internet (FAI), puis opérateur de télécommunications pour les entreprises. Elle se développe, à la fin des années 2010, dans le cloud computing (informatique en nuage).
</osds-text>
<osds-input inline type="text" value="On Vous Héberge ?" clearable></osds-input>
</div>
<osds-text color="text">
OVHcloud, anciennement OVH, est une entreprise française. Elle pratique initialement de l'hébergement de serveur, et est un fournisseur d'accès à Internet (FAI), puis opérateur de télécommunications pour les entreprises. Elle se développe, à la fin des années 2010, dans le cloud computing (informatique en nuage).
</osds-text>
<osds-select class="w-20" id="select7">
<span slot="placeholder"><i>Select</i> Country</span>
<osds-select-group>Group title</osds-select-group>
<osds-select-option value="1">hezh <strong>Value 1</strong></osds-select-option>
<osds-select-option value="2">A value 2 way toooooooooooooooooooo long for a select but</osds-select-option>
<osds-select-option value="3">Value 3</osds-select-option>
</osds-select>
<osds-button slot="actions" color="default" href="https://www.ovh.com/fr/" target="_blank">En savoir plus</osds-button>
<osds-button slot="actions" color="warning" href="https://www.ovh.com/fr/" target="_blank">On m'héberge</osds-button>
<osds-button slot="actions" color="success" href="https://www.ovh.com/fr/" target="_blank">On m'héberge</osds-button>
</osds-modal>
</body>

Expand Down
Loading

0 comments on commit f33385c

Please sign in to comment.