diff --git a/src/components/modal/README.md b/src/components/modal/README.md index 99f927f289c7..b658caee1cf0 100644 --- a/src/components/modal/README.md +++ b/src/components/modal/README.md @@ -4,8 +4,8 @@ Use these modifiers with `.bx--modal` class. -| Name | Description | -|-------------------------|-------------------------------------------------------| +| Name | Description | +| ------------------ | ----------------------------------------- | | .bx--modal--danger | Selector for applying danger modal styles | ### JavaScript @@ -41,11 +41,11 @@ Modal.create(document.getElementById('my-modal')); #### Public Methods -| Name | Params | Description | -|-------------------|------------------|----------------------| -| release | | Deletes the instance | -| show | | Show the modal | -| hide | | Hide the modal | +| Name | Params | Description | +| ------- | ------ | -------------------- | +| release | | Deletes the instance | +| show | | Show the modal | +| hide | | Hide the modal | ##### Example - Showing modal @@ -57,18 +57,38 @@ modalInstance.show(); #### Options -| Option | Default Selector | Description | -|--------------------|----------------------|---------------------------------------------------------------------------------------------------------------------------------------| -| selectorInit | '[data-modal]' | The css selector for root modal component | -| selectorModalClose | '[data-modal-close]' | The selector to find elements that close the modal | -| classVisible | 'is-visible' | Class to toggle visibility of modal | -| attribInitTarget | 'data-modal-target' | The attribute on the launching element to target the modal | -| initEventNames | '['click']' | On specified events, if event matches the attribInitTarget, then initialize the component and run createdByLauncher if method exists | +| Option | Default Selector | Description | +| -------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | +| selectorInit | '[data-modal]' | The css selector for root modal component | +| selectorModalClose | '[data-modal-close]' | The selector to find elements that close the modal | +| selectorPrimaryFocus | '[data-modal-primary-focus]' | The CSS selector to determine the element to put focus when modal gets open | +| classVisible | 'is-visible' | Class to toggle visibility of modal | +| attribInitTarget | 'data-modal-target' | The attribute on the launching element to target the modal | +| initEventNames | '['click']' | On specified events, if event matches the attribInitTarget, then initialize the component and run createdByLauncher if method exists | + +##### Example - Putting focus on text box when modal gets open + +```html +
Modal heading
+ +