Skip to content

Modal and Flyout - Improve test coverage (showcase and integration) #2966

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

Merged
merged 5 commits into from
Jun 24, 2025
Merged

Modal and Flyout - Improve test coverage (showcase and integration) #2966

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a925809
Revert "`Modal`: remove click listener properly (#2902)"
didoo Jun 20, 2025
7c9aef3
Revert "`Modal`: fix issue with click outside to dismiss (#2846)"
didoo Jun 20, 2025
d0db203
updated showcase pages for `Modal` and `Flyout` components to add dif…
didoo Jun 20, 2025
65c1a1a
updated (and refactored) integration tests for `Modal` and `Flyout` t…
didoo Jun 20, 2025
3ce4919
Merge branch 'main' into modal-flyout-improve-test-coverage
didoo Jun 20, 2025
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
18 changes: 18 additions & 0 deletions showcase/app/controllers/components/flyout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ export default class FlyoutController extends Controller {
@tracked largeFlyoutActive = false;
@tracked dropdownInitiatedFlyoutActive = false;
@tracked dropdownInitiatedWithReturnedFocusFlyoutActive = false;
@tracked deactivateFlyoutOnCloseActive = false;
@tracked deactivateFlyoutOnDestroyActive = false;
@tracked deactivateFlyoutOnSubmitActive = false;
@tracked deactivateFlyoutOnSubmitValidationError = false;

@action
activateFlyout(Flyout) {
Expand All @@ -22,4 +26,18 @@ export default class FlyoutController extends Controller {
deactivateFlyout(Flyout) {
this[Flyout] = false;
}

@action
deactivateFlyoutOnSubmit(event) {
event.preventDefault(); // Prevent page reload
const formData = new FormData(event.target);
const value = formData.get('deactivate-flyout-on-submit__input');

if (!value) {
this.deactivateFlyoutOnSubmitValidationError = true;
} else {
this.deactivateFlyoutOnSubmitValidationError = false;
this.deactivateFlyoutOnSubmitActive = false;
}
}
}
18 changes: 18 additions & 0 deletions showcase/app/controllers/components/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ export default class ModalController extends Controller {
@tracked isDismissDisabled;
@tracked dropdownInitiatedModalActive = false;
@tracked dropdownInitiatedWithReturnedFocusModalActive = false;
@tracked deactivateModalOnCloseActive = false;
@tracked deactivateModalOnDestroyActive = false;
@tracked deactivateModalOnSubmitActive = false;
@tracked deactivateModalOnSubmitValidationError = false;

@action
activateModal(modal) {
Expand All @@ -39,6 +43,20 @@ export default class ModalController extends Controller {
}
}

@action
deactivateModalOnSubmit(event) {
event.preventDefault(); // Prevent page reload
const formData = new FormData(event.target);
const value = formData.get('deactivate-modal-on-submit__input');

if (!value) {
this.deactivateModalOnSubmitValidationError = true;
} else {
this.deactivateModalOnSubmitValidationError = false;
this.deactivateModalOnSubmitActive = false;
}
}

@action
resetIsDismissDisabled() {
this.isDismissDisabled = false;
Expand Down
133 changes: 119 additions & 14 deletions showcase/app/templates/components/flyout.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,17 +266,17 @@
<Hds::Flyout
id="dropdown-initiated-flyout"
@onClose={{fn this.deactivateFlyout "dropdownInitiatedFlyoutActive"}}
as |M|
as |F|
>
<M.Header>
<F.Header>
Flyout title
</M.Header>
<M.Body>
</F.Header>
<F.Body>
<p class="hds-typography-body-300 hds-foreground-primary">Flyout content</p>
</M.Body>
<M.Footer as |F|>
</F.Body>
<F.Footer as |F|>
<Hds::Button type="button" @text="Confirm" {{on "click" F.close}} />
</M.Footer>
</F.Footer>
</Hds::Flyout>
{{/if}}

Expand All @@ -297,17 +297,122 @@
id="dropdown-initiated-flyout-with-returned-focus"
@onClose={{fn this.deactivateFlyout "dropdownInitiatedWithReturnedFocusFlyoutActive"}}
@returnFocusTo="dropdown-initiated-flyout-with-returned-focus-toggle"
as |M|
as |F|
>
<M.Header>
<F.Header>
Flyout title
</M.Header>
<M.Body>
</F.Header>
<F.Body>
<p class="hds-typography-body-300 hds-foreground-primary">Flyout content</p>
</M.Body>
<M.Footer as |F|>
</F.Body>
<F.Footer as |F|>
<Hds::Button type="button" @text="Confirm" {{on "click" F.close}} />
</F.Footer>
</Hds::Flyout>
{{/if}}

<br />
<br />

<button type="button" {{on "click" (fn this.activateFlyout "deactivateFlyoutOnCloseActive")}}>Deactivated with
`onClose`</button>

{{#if this.deactivateFlyoutOnCloseActive}}
<Hds::Flyout
id="deactivate-flyout-on-close"
@onClose={{fn this.deactivateFlyout "deactivateFlyoutOnCloseActive"}}
as |F|
>
<F.Header>
Flyout title
</F.Header>
<F.Body>
<p class="hds-typography-body-300 hds-foreground-primary">Clicking the "confirm" button executes the
<code>F.close</code>
method.</p>
<p class="hds-typography-body-200 hds-foreground-primary" {{style margin-top="12px"}}>This is equivalent to a
manual dismiss (<code>Esc</code>
key, click outsite, click dismiss button) because they're all calling the same function, which invokes the
native
<code>close()</code>
method of the
<code>Dialog</code>
HTML element, who then will cause the
<code>willDestroyNode</code>
action to execute.</p>
</F.Body>
<F.Footer as |F|>
<Hds::Button type="button" @text="Confirm" {{on "click" F.close}} />
</M.Footer>
</F.Footer>
</Hds::Flyout>
{{/if}}

<button type="button" {{on "click" (fn this.activateFlyout "deactivateFlyoutOnDestroyActive")}}>Deactivated on destroy</button>

{{#if this.deactivateFlyoutOnDestroyActive}}
<Hds::Flyout
id="deactivate-flyout-on-destruction"
@onClose={{fn this.deactivateFlyout "deactivateFlyoutOnDestroyActive"}}
as |F|
>
<F.Header>
Flyout title
</F.Header>
<F.Body>
<p class="hds-typography-body-300 hds-foreground-primary">Clicking the "confirm" button will directly remove the
flyout from the DOM.</p>
<p class="hds-typography-body-200 hds-foreground-primary" {{style margin-top="12px"}}>This is not equivalent to
a manual dismiss (<code>Esc</code>
key, click outsite, click dismiss button) because it will trigger directly the
<code>willDestroyNode</code>
action.</p>
</F.Body>
<F.Footer>
<Hds::Button
type="button"
@text="Confirm"
{{on "click" (fn this.deactivateFlyout "deactivateFlyoutOnDestroyActive")}}
/>
</F.Footer>
</Hds::Flyout>
{{/if}}

<button type="button" {{on "click" (fn this.activateFlyout "deactivateFlyoutOnSubmitActive")}}>Deactivated on form
submit</button>

{{#if this.deactivateFlyoutOnSubmitActive}}
<Hds::Flyout
id="deactivate-flyout-on-submit"
@onClose={{fn this.deactivateFlyout "deactivateFlyoutOnSubmitActive"}}
as |F|
>
<F.Header>
Flyout title
</F.Header>
<F.Body>
<p class="hds-typography-body-300 hds-foreground-primary">Clicking the "confirm" button will submit the form and
the associated action will remove the flyout from the DOM.</p>
<p class="hds-typography-body-200 hds-foreground-primary" {{style margin="12px 0 32px"}}>This is not equivalent
to a manual dismiss (<code>Esc</code>
key, click outsite, click dismiss button) because it will trigger directly the
<code>willDestroyNode</code>
action.</p>
<form id="deactivate-flyout-on-submit__form" {{on "submit" this.deactivateFlyoutOnSubmit}}>
<Hds::Form::TextInput::Field name="deactivate-flyout-on-submit__input" as |F|>
<F.Label>Fill in this input</F.Label>
<F.HelperText>This is a fake input, used to emulate validation on submit</F.HelperText>
{{#if this.deactivateFlyoutOnSubmitValidationError}}
<F.Error>Fill in the input above</F.Error>
{{/if}}
</Hds::Form::TextInput::Field>
</form>
</F.Body>
<F.Footer as |F|>
<Hds::ButtonSet>
<Hds::Button type="submit" @text="Confirm" form="deactivate-flyout-on-submit__form" />
<Hds::Button type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
</Hds::ButtonSet>
</F.Footer>
</Hds::Flyout>
{{/if}}

Expand Down
104 changes: 104 additions & 0 deletions showcase/app/templates/components/modal.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -568,5 +568,109 @@
</Hds::Modal>
{{/if}}

<br />
<br />

<button type="button" {{on "click" (fn this.activateModal "deactivateModalOnCloseActive")}}>Deactivated with `onClose`</button>

{{#if this.deactivateModalOnCloseActive}}
<Hds::Modal
id="deactivate-modal-on-close"
@onClose={{fn this.deactivateModal "deactivateModalOnCloseActive"}}
as |M|
>
<M.Header>
Modal title
</M.Header>
<M.Body>
<p class="hds-typography-body-300 hds-foreground-primary">Clicking the "confirm" button executes the
<code>F.close</code>
method.</p>
<p class="hds-typography-body-200 hds-foreground-primary" {{style margin-top="12px"}}>This is equivalent to a
manual dismiss (<code>Esc</code>
key, click outsite, click dismiss button) because they're all calling the same function, which invokes the
native
<code>close()</code>
method of the
<code>Dialog</code>
HTML element, who then will cause the
<code>willDestroyNode</code>
action to execute.</p>
</M.Body>
<M.Footer as |F|>
<Hds::Button type="button" @text="Confirm" {{on "click" F.close}} />
</M.Footer>
</Hds::Modal>
{{/if}}

<button type="button" {{on "click" (fn this.activateModal "deactivateModalOnDestroyActive")}}>Deactivated on destroy</button>

{{#if this.deactivateModalOnDestroyActive}}
<Hds::Modal
id="deactivate-modal-on-destruction"
@onClose={{fn this.deactivateModal "deactivateModalOnDestroyActive"}}
as |M|
>
<M.Header>
Modal title
</M.Header>
<M.Body>
<p class="hds-typography-body-300 hds-foreground-primary">Clicking the "confirm" button will directly remove the
modal from the DOM.</p>
<p class="hds-typography-body-200 hds-foreground-primary" {{style margin-top="12px"}}>This is not equivalent to
a manual dismiss (<code>Esc</code>
key, click outsite, click dismiss button) because it will trigger directly the
<code>willDestroyNode</code>
action.</p>
</M.Body>
<M.Footer>
<Hds::Button
type="button"
@text="Confirm"
{{on "click" (fn this.deactivateModal "deactivateModalOnDestroyActive")}}
/>
</M.Footer>
</Hds::Modal>
{{/if}}

<button type="button" {{on "click" (fn this.activateModal "deactivateModalOnSubmitActive")}}>Deactivated on form
submit</button>

{{#if this.deactivateModalOnSubmitActive}}
<Hds::Modal
id="deactivate-modal-on-submit"
@onClose={{fn this.deactivateModal "deactivateModalOnSubmitActive"}}
as |M|
>
<M.Header>
Modal title
</M.Header>
<M.Body>
<p class="hds-typography-body-300 hds-foreground-primary">Clicking the "confirm" button will submit the form and
the associated action will remove the modal from the DOM.</p>
<p class="hds-typography-body-200 hds-foreground-primary" {{style margin="12px 0 32px"}}>This is not equivalent
to a manual dismiss (<code>Esc</code>
key, click outsite, click dismiss button) because it will trigger directly the
<code>willDestroyNode</code>
action.</p>
<form id="deactivate-modal-on-submit__form" {{on "submit" this.deactivateModalOnSubmit}}>
<Hds::Form::TextInput::Field name="deactivate-modal-on-submit__input" as |F|>
<F.Label>Fill in this input</F.Label>
<F.HelperText>This is a fake input, used to emulate validation on submit</F.HelperText>
{{#if this.deactivateModalOnSubmitValidationError}}
<F.Error>Fill in the input above</F.Error>
{{/if}}
</Hds::Form::TextInput::Field>
</form>
</M.Body>
<M.Footer as |F|>
<Hds::ButtonSet>
<Hds::Button type="submit" @text="Confirm" form="deactivate-modal-on-submit__form" />
<Hds::Button type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
</Hds::ButtonSet>
</M.Footer>
</Hds::Modal>
{{/if}}

</section>
{{! template-lint-enable no-autofocus-attribute }}
Loading