Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[🚩esl-modal]: beta release version of esl-modal module #1969

Draft
wants to merge 39 commits into
base: main
Choose a base branch
from
Draft

[🚩esl-modal]: beta release version of esl-modal module #1969

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
8d55fb7
style(esl-modal): fix button focus
NastaLeo Jun 28, 2023
f1ac459
feat(esl-modal): beta version of `esl-modal` created and available fo…
NastaLeo Jun 28, 2023
52e5df7
docs(esl-modal): add modal examples
NastaLeo Jun 28, 2023
e7f0201
test(esl-modal): add test for esl-modal
NastaLeo Jun 28, 2023
6a3658b
style(esl-modal): resolve conflicts
NastaLeo Jun 29, 2023
832f5a9
style(esl-modal): apply suggestion from code review
NastaLeo Jul 1, 2023
800073c
test(esl-modal): update tests
NastaLeo Jul 1, 2023
267e1ff
style(esl-modal): fix `esl-modal` module imports
ala-n Jul 18, 2023
e0bdaa1
Merge branch 'epic/modal' into epic/esl-modal
ala-n Aug 7, 2023
df861d6
refactor(esl-modal): code cleanup wave 1
ala-n Aug 7, 2023
6682f0a
Merge branch 'main' of github.com:exadel-inc/esl into epic/esl-modal
ala-n Aug 9, 2023
d9a55ab
refactor(esl-modal): create modal-backdrop custom element
NastaLeo Aug 18, 2023
2291e27
refactor(esl-modal): add placeholder support
NastaLeo Aug 21, 2023
46554df
refactor(esl-modal): enhance placeholder appearance check
NastaLeo Sep 15, 2023
d4d769c
Merge branch 'main' of github.com:exadel-inc/esl into epic/esl-modal
ala-n Sep 20, 2023
9108f76
chore(esl-modal): fix merge issues & linting
ala-n Sep 20, 2023
df407ad
style(esl-modal): add modal esl-scroll support
ala-n Sep 20, 2023
97ef97b
refactor(esl-modal): Update registration process and refactor backdro…
ala-n Sep 20, 2023
ffcba14
feat(esl-modal): support stack of open modals
NastaLeo Sep 27, 2023
f44828c
test(esl-modal): provide tests for `ESLModalStack`
NastaLeo Sep 27, 2023
b94b196
test(esl-modal): provide tests for `ESLModalBackdrop`
NastaLeo Sep 27, 2023
b3647f4
refactor(esl-modal): add ESLModalStack modificators
NastaLeo Sep 27, 2023
c7c72f7
refactor(esl-modal): enhance aria-hidden changes
NastaLeo Sep 29, 2023
abd2d29
test(esl-modal): check accessibility
NastaLeo Sep 29, 2023
952a5d8
test(esl-modal): check placeholder
NastaLeo Oct 2, 2023
d9828aa
test(esl-modal): enhance placeholder verification
NastaLeo Oct 2, 2023
c9e1e28
Merge branch 'main' into epic/esl-modal
NastaLeo Oct 2, 2023
1827dc4
test(esl-modal): fix backdrop testing
NastaLeo Nov 8, 2023
cd78a24
style(esl-modal): inherit stack from EventTarget
NastaLeo Nov 8, 2023
e4e9e5a
style(esl-modal): split styles, change default scroll
NastaLeo Nov 20, 2023
ff2d97d
style(esl-modal): upgrade animation, support 2 types
NastaLeo Nov 21, 2023
b3d94fe
Merge branch 'main' of https://github.com/exadel-inc/esl into epic/es…
NastaLeo Nov 28, 2023
89b20ee
style(esl-modal): update animation time getter
NastaLeo Dec 4, 2023
eff2632
test(esl-modal): update tests with animation handling
NastaLeo Dec 14, 2023
ab9d949
docs(esl-modal): update documentation
NastaLeo Jan 4, 2024
dc4172a
Merge branch 'main-beta' of https://github.com/exadel-inc/esl into ep…
NastaLeo Jan 8, 2024
270de48
test(esl-modal): update tests
NastaLeo Jan 9, 2024
f316873
docs(esl-modal): enhance documentation
NastaLeo Jan 9, 2024
27aecdb
style(esl-modal): small update after toggleable changes
NastaLeo Jan 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions site/src/common/reboot.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,10 @@ button:focus {
background-color: transparent;
}

button:focus-visible {
outline: 2px dashed #1fc2ff;
}

button {
border-radius: 0;
}
Expand Down
3 changes: 3 additions & 0 deletions site/src/localdev.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import {
ESLNoteIgnore,
ESLFootnotes,
ESLTooltip,
ESLModal,
ESLAnimate,
ESLAnimateMixin,
ESLRelatedTarget,
Expand Down Expand Up @@ -104,6 +105,8 @@ ESLNote.register();
ESLNoteIgnore.register();
ESLTooltip.register();

ESLModal.register();

ESLAnimate.register();
ESLAnimateMixin.register();

Expand Down
317 changes: 317 additions & 0 deletions site/views/examples/modal.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,317 @@
---
layout: content
title: Modal window
seoTitle: Accordion UI examples based on ESL web components
name: Modal window
tags: [examples, beta]
---
{% import 'lorem.njk' as lorem %}
{% set imageSrcBase = '/assets/' | url %}

<section class="row">
<div class="col-12">
<h2>Modal moves to body</h2>
</div>

<div class="col-6 mb-2">
<h4>Default example (zoom animation)</h4>
<esl-trigger target="#modal-1" class="btn btn-sec-blue">Open modal</esl-trigger>
<esl-modal id="modal-1" class="esl-scrollable-content" animation-class="esl-modal-zoom">
<div class="esl-modal-container">
<esl-image mode="save-ratio" lazy
data-alt="Alt Text Test"
data-src="nature/forest+clouds.jpg"
data-src-base="{{ imageSrcBase }}"></esl-image>
<p>{{ lorem.paragraphs(3) }}
<button type="button"
class="close-btn"
aria-label="close"
title="close"
data-modal-close></button>
</div>
<esl-scrollbar target="::parent"></esl-scrollbar>
</esl-modal>
</div>

<div class="col-6 mb-2">
<h4>Example with pseudo scroll lock strategy</h4>
<esl-trigger target="#modal-2" class="btn btn-sec-blue">Open modal</esl-trigger>
<esl-modal id="modal-2" scroll-lock-strategy="pseudo">
<div class="esl-modal-container">
<div class="img-container img-container-16-9 img-container-loaded">
<esl-media group="demo-media"
media-type="youtube"
media-id="hqc8EbfR5BE"
load-condition="(min-width: 320px)"
load-cls-target="::parent(section)"
load-cls-accepted="show-video"
load-cls-declined="hide-video"
ready-class="video-ready"
ready-class-target="::parent"
controls
tabindex="0">
</esl-media>
</div>
<p>{{ lorem.paragraphs(1) }}</p>
<button type="button"
class="close-btn"
aria-label="close"
title="close"
data-modal-close></button>

</div>
</esl-modal>
</div>

<div class="col-6 mb-2">
<h4>Example with native scroll lock strategy and without backdrop</h4>
<esl-trigger target="#modal-3" class="btn btn-sec-blue">Open modal</esl-trigger>
<esl-modal id="modal-3" scroll-lock-strategy="native" no-backdrop>
<div class="esl-modal-container">
<div class="esl-d-tabs">
<esl-tabs class="esl-d-tab-control">
<esl-a11y-group targets="::find(esl-tab)" activate-selected></esl-a11y-group>

<ul class="esl-d-tab-list esl-tab-container" role="tablist">
<li class="esl-d-tab-item">
<esl-tab class="h5"
target="::parent(.esl-d-tabs)::find(.tab-1)">
Tab #1 Lorem ipsum
</esl-tab>
</li>
<li class="esl-d-tab-item">
<esl-tab class="h5"
target="::parent(.esl-d-tabs)::find(.tab-2)">
Tab #2 Lorem ipsum
</esl-tab>
</li>
<li class="esl-d-tab-item">
<esl-tab class="h5"
target="::parent(.esl-d-tabs)::find(.tab-3)">
Tab #3 Lorem ipsum
</esl-tab>
</li>
</ul>
</esl-tabs>

<esl-panel-group class="esl-d-tab-group"
mode="tabs"
mode-cls-target="::parent">
{% set testText = lorem.paragraphs(2) %}
<esl-panel class="esl-d-tab-panel tab-1" tabindex="0">
<div class="esl-d-tab-body">
{{ testText }}
</div>
</esl-panel>
<esl-panel open class="esl-d-tab-panel tab-2" tabindex="0">
<div class="esl-d-tab-body">
{{ testText }}
</div>
</esl-panel>
<esl-panel class="esl-d-tab-panel tab-3" tabindex="0">
<div class="esl-d-tab-body">
{{ lorem.paragraphs(3) }}
</div>
</esl-panel>
</esl-panel-group>
</div>
<button type="button"
class="close-btn"
aria-label="close"
title="close"
data-modal-close></button>
</div>
</esl-modal>
</div>

<div class="col-6 mb-2">
<h4>Example without backdrop</h4>
<esl-trigger target="#modal-4" class="btn btn-sec-blue">Open modal</esl-trigger>
<esl-modal id="modal-4" no-backdrop>
<div class="esl-modal-container">
<p>{{ lorem.paragraphs(7) }}</p>
<button type="button"
class="close-btn"
aria-label="close"
title="close"
data-modal-close></button>

</div>
</esl-modal>
</div>

<div class="col-6 mb-2">
<h4>Example with nested modal</h4>
<esl-trigger target="#modal-nestd-sampl" class="btn btn-sec-blue">Open modal</esl-trigger>
<esl-modal id="modal-nestd-sampl">
<div class="esl-modal-container">
<p>{{ lorem.paragraphs(3) }}</p>
<esl-trigger target="#modal-nestd-sampl-inner" class="btn btn-sec-blue">Open modal</esl-trigger>
<p>{{ lorem.paragraphs(3) }}</p>
<esl-modal id="modal-nestd-sampl-inner">
<div class="esl-modal-container">
<p>{{ lorem.paragraphs(7) }}</p>
<button type="button"
class="close-btn"
aria-label="close"
title="close"
data-modal-close></button>
</div>
</esl-modal>

<button type="button"
class="close-btn"
aria-label="close"
title="close"
data-modal-close></button>
</div>
</esl-modal>
</div>
</section>

<section class="row">
<div class="col-12">
<h2>Modal doesn't moves to body</h2>
</div>

<div class="col-6 mb-2">
<h4>Default example</h4>
<esl-trigger target="#modal-5" class="btn btn-sec-blue">Open modal</esl-trigger>
<esl-modal id="modal-5" class="esl-scrollable-content" inject-to-body="false">
<div class="esl-modal-container">
<esl-image mode="save-ratio" lazy
data-alt="Alt Text Test"
data-src="nature/forest+clouds.jpg"
data-src-base="{{ imageSrcBase }}"></esl-image>
<p>{{ lorem.paragraphs(3) }}</p>
<button type="button"
class="close-btn"
aria-label="close"
title="close"
data-modal-close></button>

</div>
<esl-scrollbar target="::parent"></esl-scrollbar>
</esl-modal>
</div>

<div class="col-6 mb-2">
<h4>Example with pseudo scroll lock strategy (zoom animation)</h4>
<esl-trigger target="#modal-6" class="btn btn-sec-blue">Open modal</esl-trigger>
<esl-modal id="modal-6" animation-class="esl-modal-zoom" inject-to-body="false" scroll-lock-strategy="pseudo">
<div class="esl-modal-container">
<div class="img-container img-container-16-9 img-container-loaded">
<esl-media group="demo-media"
media-type="youtube"
media-id="hqc8EbfR5BE"
load-condition="(min-width: 320px)"
load-cls-target="::parent(section)"
load-cls-accepted="show-video"
load-cls-declined="hide-video"
ready-class="video-ready"
ready-class-target="::parent"
controls
tabindex="0">
</esl-media>
</div>
<p>{{ lorem.paragraphs(1) }}</p>
<button type="button"
class="close-btn"
aria-label="close"
title="close"
data-modal-close></button>

</div>
</esl-modal>
</div>

<div class="col-6 mb-2">
<h4>Example with native scroll lock strategy and without backdrop</h4>
<esl-trigger target="#modal-7" class="btn btn-sec-blue">Open modal</esl-trigger>
<esl-modal id="modal-7" scroll-lock-strategy="native" inject-to-body="false" no-backdrop>
<div class="esl-modal-container">
<div class="esl-d-tabs">
<esl-tabs class="esl-d-tab-control">
<esl-a11y-group targets="::find(esl-tab)" activate-selected></esl-a11y-group>

<ul class="esl-d-tab-list esl-tab-container" role="tablist">
<li class="esl-d-tab-item">
<esl-tab class="h5"
target="::parent(.esl-d-tabs)::find(.tab-1)">
Tab #1 Lorem ipsum
</esl-tab>
</li>
<li class="esl-d-tab-item">
<esl-tab class="h5"
target="::parent(.esl-d-tabs)::find(.tab-2)">
Tab #2 Lorem ipsum
</esl-tab>
</li>
<li class="esl-d-tab-item">
<esl-tab class="h5"
target="::parent(.esl-d-tabs)::find(.tab-3)">
Tab #3 Lorem ipsum
</esl-tab>
</li>
</ul>
</esl-tabs>

<esl-panel-group class="esl-d-tab-group"
mode="tabs"
mode-cls-target="::parent">
{% set testText = lorem.paragraphs(2) %}
<esl-panel class="esl-d-tab-panel tab-1" tabindex="0">
<div class="esl-d-tab-body">
{{ testText }}
</div>
</esl-panel>
<esl-panel open class="esl-d-tab-panel tab-2" tabindex="0">
<div class="esl-d-tab-body">
{{ testText }}
</div>
</esl-panel>
<esl-panel class="esl-d-tab-panel tab-3" tabindex="0">
<div class="esl-d-tab-body">
{{ lorem.paragraphs(3) }}
</div>
</esl-panel>
</esl-panel-group>
</div>
<button type="button"
class="close-btn"
aria-label="close"
title="close"
data-modal-close></button>

</div>
</esl-modal>
</div>

<div class="col-6 mb-2">
<h4>Example without backdrop</h4>
<esl-trigger target="#modal-8" class="btn btn-sec-blue">Open modal</esl-trigger>
<esl-modal id="modal-8" inject-to-body="false" no-backdrop>
<div class="esl-modal-container">
<p>{{ lorem.paragraphs(7) }}</p>
<button type="button"
class="close-btn"
aria-label="close"
title="close"
data-modal-close></button>
</div>
</esl-modal>
</div>
</section>

<section>
<div class="esl-d-accordion">
<esl-trigger class="esl-d-accordion-header h4 esl-d-accordion-header-arrow" target="::next">
Make page bigger :)
</esl-trigger>
<esl-panel class="esl-d-accordion-panel">
<div class="esl-d-accordion-body">
{{ lorem.paragraphs(10) }}
</div>
</esl-panel>
</div>
</section>
2 changes: 2 additions & 0 deletions src/modules/all.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,5 @@
@import './esl-animate/core.less';

@import './esl-share/core.less';

@import './esl-modal/core.less';
3 changes: 3 additions & 0 deletions src/modules/all.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@ export * from './esl-tooltip/core';
// Animate
export * from './esl-animate/core';

// Modal
export * from './esl-modal/core';

// Related Target Mixin
export * from './esl-related-target/core';

Expand Down
1 change: 1 addition & 0 deletions src/modules/esl-footnotes/core/esl-note.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ esl-note {
&::before {
content: '[';
}

&::after {
content: ']';
}
Expand Down
Loading
Loading