Skip to content

Commit 6896e17

Browse files
didoodidoo
committed
updated showcase page for Modal component to make sure there is no similar bug
1 parent d6a78a2 commit 6896e17

File tree

2 files changed

+136
-14
lines changed

2 files changed

+136
-14
lines changed

‎showcase/app/controllers/components/flyout.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ export default class FlyoutController extends Controller {
1212
@tracked largeFlyoutActive = false;
1313
@tracked dropdownInitiatedFlyoutActive = false;
1414
@tracked dropdownInitiatedWithReturnedFocusFlyoutActive = false;
15+
@tracked deactivateFlyoutOnCloseActive = false;
16+
@tracked deactivateFlyoutOnDestroyActive = false;
17+
@tracked deactivateFlyoutOnSubmitActive = false;
18+
@tracked deactivateFlyoutOnSubmitValidationError = false;
1519

1620
@action
1721
activateFlyout(Flyout) {
@@ -22,4 +26,19 @@ export default class FlyoutController extends Controller {
2226
deactivateFlyout(Flyout) {
2327
this[Flyout] = false;
2428
}
29+
30+
@action
31+
deactivateFlyoutOnSubmit(event) {
32+
event.preventDefault(); // Prevent page reload
33+
const formData = new FormData(event.target);
34+
const value = formData.get('deactivate-flyout-on-submit__input');
35+
console.log(event.target, formData, value);
36+
37+
if (!value) {
38+
this.deactivateFlyoutOnSubmitValidationError = true;
39+
} else {
40+
this.deactivateFlyoutOnSubmitValidationError = false;
41+
this.deactivateFlyoutOnSubmitActive = false;
42+
}
43+
}
2544
}

‎showcase/app/templates/components/flyout.hbs‎

Lines changed: 117 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -266,17 +266,17 @@
266266
<Hds::Flyout
267267
id="dropdown-initiated-flyout"
268268
@onClose={{fn this.deactivateFlyout "dropdownInitiatedFlyoutActive"}}
269-
as |M|
269+
as |F|
270270
>
271-
<M.Header>
271+
<F.Header>
272272
Flyout title
273-
</M.Header>
274-
<M.Body>
273+
</F.Header>
274+
<F.Body>
275275
<p class="hds-typography-body-300 hds-foreground-primary">Flyout content</p>
276-
</M.Body>
277-
<M.Footer as |F|>
276+
</F.Body>
277+
<F.Footer as |F|>
278278
<Hds::Button type="button" @text="Confirm" {{on "click" F.close}} />
279-
</M.Footer>
279+
</F.Footer>
280280
</Hds::Flyout>
281281
{{/if}}
282282

@@ -297,17 +297,120 @@
297297
id="dropdown-initiated-flyout-with-returned-focus"
298298
@onClose={{fn this.deactivateFlyout "dropdownInitiatedWithReturnedFocusFlyoutActive"}}
299299
@returnFocusTo="dropdown-initiated-flyout-with-returned-focus-toggle"
300-
as |M|
300+
as |F|
301301
>
302-
<M.Header>
302+
<F.Header>
303303
Flyout title
304-
</M.Header>
305-
<M.Body>
304+
</F.Header>
305+
<F.Body>
306306
<p class="hds-typography-body-300 hds-foreground-primary">Flyout content</p>
307-
</M.Body>
308-
<M.Footer as |F|>
307+
</F.Body>
308+
<F.Footer as |F|>
309+
<Hds::Button type="button" @text="Confirm" {{on "click" F.close}} />
310+
</F.Footer>
311+
</Hds::Flyout>
312+
{{/if}}
313+
314+
<br />
315+
<br />
316+
317+
<button type="button" {{on "click" (fn this.activateFlyout "deactivateFlyoutOnCloseActive")}}>Deactivated with `onClose`</button>
318+
319+
{{#if this.deactivateFlyoutOnCloseActive}}
320+
<Hds::Flyout
321+
id="deactivate-flyout-on-close"
322+
@onClose={{fn this.deactivateFlyout "deactivateFlyoutOnCloseActive"}}
323+
as |F|
324+
>
325+
<F.Header>
326+
Flyout title
327+
</F.Header>
328+
<F.Body>
329+
<p class="hds-typography-body-300 hds-foreground-primary">Clicking the "confirm" button executes the
330+
<code>F.close</code>
331+
method.</p>
332+
<p class="hds-typography-body-200 hds-foreground-primary" {{style margin-top="12px"}}>This is equivalent to a
333+
manual dismiss (<code>Esc</code>
334+
key, click outsite, click dismiss button) because they're all calling the same function, which invokes the
335+
native
336+
<code>close()</code>
337+
method of the
338+
<code>Dialog</code>
339+
HTML element, who then will cause the
340+
<code>willDestroyNode</code>
341+
action to execute.</p>
342+
</F.Body>
343+
<F.Footer as |F|>
309344
<Hds::Button type="button" @text="Confirm" {{on "click" F.close}} />
310-
</M.Footer>
345+
</F.Footer>
346+
</Hds::Flyout>
347+
{{/if}}
348+
349+
<button type="button" {{on "click" (fn this.activateFlyout "deactivateFlyoutOnDestroyActive")}}>Deactivated on destroy</button>
350+
351+
{{#if this.deactivateFlyoutOnDestroyActive}}
352+
<Hds::Flyout
353+
id="deactivate-flyout-on-destruction"
354+
@onClose={{fn this.deactivateFlyout "deactivateFlyoutOnDestroyActive"}}
355+
as |F|
356+
>
357+
<F.Header>
358+
Flyout title
359+
</F.Header>
360+
<F.Body>
361+
<p class="hds-typography-body-300 hds-foreground-primary">Clicking the "confirm" button will directly remove the
362+
flyout from the DOM.</p>
363+
<p class="hds-typography-body-200 hds-foreground-primary" {{style margin-top="12px"}}>This is not equivalent to
364+
a manual dismiss (<code>Esc</code>
365+
key, click outsite, click dismiss button) because it will trigger directly the
366+
<code>willDestroyNode</code>
367+
action.</p>
368+
</F.Body>
369+
<F.Footer>
370+
<Hds::Button
371+
type="button"
372+
@text="Confirm"
373+
{{on "click" (fn this.deactivateFlyout "deactivateFlyoutOnDestroyActive")}}
374+
/>
375+
</F.Footer>
376+
</Hds::Flyout>
377+
{{/if}}
378+
379+
<button type="button" {{on "click" (fn this.activateFlyout "deactivateFlyoutOnSubmitActive")}}>Deactivated on form
380+
submit</button>
381+
382+
{{#if this.deactivateFlyoutOnSubmitActive}}
383+
<Hds::Flyout id="deactivate-flyout-on-submit" @onClose={{fn this.deactivateFlyout "deactivateFlyoutOnSubmitActive"}} as |F|>
384+
<F.Header>
385+
Flyout title
386+
</F.Header>
387+
<F.Body>
388+
<p class="hds-typography-body-300 hds-foreground-primary">Clicking the "confirm" button will submit the form and
389+
the associated action will remove the flyout from the DOM.</p>
390+
<p class="hds-typography-body-200 hds-foreground-primary" {{style margin="12px 0 32px"}}>This is not equivalent to
391+
a manual dismiss (<code>Esc</code>
392+
key, click outsite, click dismiss button) because it will trigger directly the
393+
<code>willDestroyNode</code>
394+
action.</p>
395+
<form
396+
id="deactivate-flyout-on-submit__form"
397+
{{on "submit" this.deactivateFlyoutOnSubmit}}
398+
>
399+
<Hds::Form::TextInput::Field name="deactivate-flyout-on-submit__input" as |F|>
400+
<F.Label>Fill in this input</F.Label>
401+
<F.HelperText>This is a fake input, used to emulate validation on submit</F.HelperText>
402+
{{#if this.deactivateFlyoutOnSubmitValidationError}}
403+
<F.Error>Fill in the input above</F.Error>
404+
{{/if}}
405+
</Hds::Form::TextInput::Field>
406+
</form>
407+
</F.Body>
408+
<F.Footer as |F|>
409+
<Hds::ButtonSet>
410+
<Hds::Button type="submit" @text="Confirm" form="deactivate-flyout-on-submit__form" />
411+
<Hds::Button type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
412+
</Hds::ButtonSet>
413+
</F.Footer>
311414
</Hds::Flyout>
312415
{{/if}}
313416

0 commit comments

Comments
 (0)