-
-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(design): update DaffModalComponent docs (#2832)
- Loading branch information
1 parent
3140fee
commit 2b96d4d
Showing
4 changed files
with
56 additions
and
53 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,33 @@ | ||
| <h1>Modal</h1> | ||
| <p>Modal is a dynamically rendered element that floats about the rest of a page's content. It can be especially useful for interstitials that require additional user feedback.</p> | ||
| <p>Modal is a dynamically rendered element that floats above the rest of a page's content. It can be especially useful for interstitials that require additional user feedback.</p> | ||
|
|
||
| <h2>Supported Content Types</h2> | ||
| <p>These components and directives help to structure the content in your modal.</p> | ||
| <p>The <code>DaffModalComponent</code> optionally transcludes:</p> | ||
| <ul> | ||
| <li><code>daff-modal-header</code>: component that places the <code><daffModalTitle></code> with styles to | ||
| handle the placement of an optional actionable icon.</li> | ||
| <li><code>daffModalTitle</code>: directive for modal title that can be applied to a heading element | ||
| (<code><h2></code>, <h3>, etc.)</li> | ||
| <li><code>daff-modal-content</code>: scrollable component to place the primary content in modal.</li> | ||
| <li><code>daff-modal-actions</code>: component to help place actionable components like buttons or links.</li> | ||
| </ul> | ||
|
|
||
| <h2>Usage</h2> | ||
| <h2>Basic Modal</h2> | ||
| <design-land-example-viewer-container example="basic-modal"></design-land-example-viewer-container> | ||
|
|
||
| <h2>Supported Content Types</h2> | ||
| <p>A modal includes minimally pre-styled components and directives to help structure the content in your modal.</p> | ||
|
|
||
| <h3>Header</h3> | ||
| <p>Header can be added to a modal by using <code><daff-modal-header></code>. The header includes a title and an optional close button.</p> | ||
|
|
||
| <h4>Title</h4> | ||
| Title can be added to the header by using the <code>daffModalTitle</code> directive. | ||
|
|
||
| <h4>Close Button</h4> | ||
| <p>The close button is shown by default but can be hidden by setting the <code>dismissible</code> property to <code>false</code> on the header.</p> | ||
|
|
||
| <h3>Content</h3> | ||
| <p>Content can be added to a modal by using <code><daff-modal-content></code>. It should only be used once. It's a wrapper container that can be used to place all additional components and text content within a modal. The content container allows for a ton of control and customization because it's minimally pre-styled and serves as a wrapping and spacing container that is scrollable.</p> | ||
|
|
||
| <h3>Actions</h3> | ||
| <p>Buttons can be added to a modal by using <code><daff-modal-actions></code>. This container will always be positioned at the bottom of a modal. The horizontal alignment of the actions is set to <code>end</code>.</p> | ||
|
|
||
| <h2>Dismissing a Modal</h2> | ||
| <p>A modal can be dismissed via the close button or the <code>ESC</code> key. The close button is shown by default but can be hidden by setting the <code>dismissible</code> property to <code>false</code> on <code><daff-modal-header></code>. Additionally, the <code>[daffModalClose]</code> directive can be added to a <code><button></code> HTML element.</p> | ||
|
|
||
| <h2>Accessibility</h2> | ||
| <p>Modal works with the ARIA <code>role="dialog"</code> and <code>aria-modal="true"</code> attributes to provide an accessible experience. <code>aria-labelledby</code> is assigned the <code>[daffModalTitle]</code> string. When a modal is opened, the first tabbable element within it will receive focus.</p> | ||
|
|
||
| <h3>Keyboard Interactions</h3> | ||
| <p>A modal can be closed by choosing one of the actions buttons, the close button in the header, or it can be dismissed by pressing the <code>ESC</code> key.</p> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,47 +1,32 @@ | ||
| # Modal Component | ||
| # Modal | ||
| Modal is a dynamically rendered element that floats above the rest of a page's content. It can be especially useful for interstitials that require additional user feedback. | ||
|
|
||
| The `DaffModalComponent` is a dynamically rendered component that floats above the rest of a page's content. It can be especially useful for interstitials that require additional user feedback. | ||
| ## Basic Modal | ||
| <design-land-example-viewer-container example="basic-modal"></design-land-example-viewer-container> | ||
|
|
||
| ## Usage | ||
| ## Supported Content Types | ||
| A modal includes minimally pre-styled components and directives to help structure the content in your modal. | ||
|
|
||
| `DaffModalComponent` relies on using the `entryComponents` of the particular Angular `@NgModule`. To use the features of the `DaffModalComponent`: | ||
| ### Header | ||
| Header can be added to a modal by using `<daff-modal-header>`. The header includes a title and an optional close button. | ||
|
|
||
| * Import the `DaffModalModule` as you would with any other `@daffodil/design` component | ||
| * Add the component that you want rendered inside the modal to your `@NgModule`'s `entryComponents` | ||
| #### Title | ||
| Title can be added to the header by using the `[daffModalTitle]` directive. | ||
|
|
||
| ```ts | ||
| my.module.ts | ||
| #### Close Button | ||
| The close button in the header is shown by default but can be hidden by setting the `dismissible` property to `false` on the header. | ||
|
|
||
| @NgModule({ | ||
| declarations: [ | ||
| MyModalContentComponent, | ||
| ], | ||
| imports: [ | ||
| DaffModalModule, | ||
| ], | ||
| entryComponents: [ | ||
| MyModalContentComponent | ||
| ] | ||
| }) | ||
| export class ModalModule { | ||
| } | ||
| ``` | ||
| ### Content | ||
| Content can be added to a modal by using `<daff-modal-content>`. It should only be used once. It's a wrapper container that can be used to place all additional components and text content within a modal. The content container allows for a ton of control and customization because it's minimally pre-styled and serves as a wrapping and spacing container that is scrollable. | ||
|
|
||
| Once your `@NgModule` has been configured, you can take advantage of the `DaffModalService` that is provided by the `DaffModalModule` to `open` and `close` the instance of the `DaffModalComponent`. | ||
| ### Actions | ||
| Buttons can be added to a modal by using `<daff-modal-actions>`. This container will always be positioned at the bottom of a modal. The horizontal alignment of the actions is set to `end`. | ||
|
|
||
| ```ts | ||
| my-other.component.ts | ||
| ## Dismissing a Modal | ||
| A modal can be dismissed via the close button or the `ESC` key. The close button is shown by default but can be hidden by setting the `dismissible` property to `false` on `<daff-modal-header>`. Additionally, the `[daffModalClose]` directive can be added to a `<button>` HTML element. | ||
|
|
||
| @Component({ | ||
| template: '<button (click)="showModal()"></button>' | ||
| }) | ||
| export class MyOtherComponent { | ||
| constructor(private modalService: DaffModalService) {} | ||
| ## Accessibility | ||
| Modal works with the ARIA `role="dialog"` and `aria-modal="true"` attributes to provide an accessible experience. `aria-labelledby` is assigned the `[daffModalTitle]` string. When a modal is opened, the first tabbable element within it will receive focus. | ||
|
|
||
| showModal() { | ||
| this.modalService.open(MyModalContentComponent); | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| > You will likely never render the `DaffModalComponent` directly like you would with other components due to its dynamic nature. | ||
| ### Keyboard Interactions | ||
| A modal can be closed by choosing one of the actions buttons, the close button in the header, or it can be dismissed by pressing the `ESC` key. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 3 additions & 2 deletions
5
libs/design/modal/examples/src/basic-modal/modal-content.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,10 @@ | ||
| <daff-modal-header> | ||
| <h5 daffModalTitle>Modal Title</h5> | ||
| <h5 daffModalTitle>Descriptive title of the modal</h5> | ||
| </daff-modal-header> | ||
| <daff-modal-content> | ||
| Modal content goes here. Components can be placed in here. The content is scrollable. | ||
| </daff-modal-content> | ||
| <daff-modal-actions> | ||
| <button daff-button>Save Changes</button> | ||
| <button daff-flat-button color="theme-contrast" daffModalClose>Cancel</button> | ||
| <button type="button" daff-button>Save Changes</button> | ||
| </daff-modal-actions> |