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 + +``` #### Events | Event Option | Event Name | -|-------------------|---------------------| +| ----------------- | ------------------- | | eventBeforeShown | 'modal-beingshown' | | eventAfterShown | 'modal-shown' | | eventBeforeHidden | 'modal-beinghidden' | @@ -77,7 +97,7 @@ modalInstance.show(); ##### Example - Preventing modals from being closed in a certain condition ```javascript -document.addEventListener('modal-beinghidden', function (evt) { +document.addEventListener('modal-beinghidden', function(evt) { if (myApplication.shouldModalKeptOpen(evt.target)) { evt.preventDefault(); } @@ -87,7 +107,7 @@ document.addEventListener('modal-beinghidden', function (evt) { ##### Example - Notifying events of all modals being closed to an analytics library ```javascript -document.addEventListener('modal-hidden', function (evt) { +document.addEventListener('modal-hidden', function(evt) { myAnalyticsLibrary.send({ action: 'Modal hidden', id: evt.target.id, diff --git a/src/components/modal/modal.config.js b/src/components/modal/modal.config.js index 6143c55e8d68..feaaa766bd51 100644 --- a/src/components/modal/modal.config.js +++ b/src/components/modal/modal.config.js @@ -44,5 +44,18 @@ module.exports = { classCloseButton: 'bx--btn--tertiary', }, }, + { + name: 'input', + label: 'Input Modal', + context: { + idSuffix: Math.random() + .toString(36) + .substr(2), + hasInput: true, + hasFooter: true, + classPrimaryButton: 'bx--btn--primary', + classCloseButton: 'bx--btn--secondary', + }, + }, ], }; diff --git a/src/components/modal/modal.hbs b/src/components/modal/modal.hbs index 3024f72e2a57..9b3aa5ff5287 100644 --- a/src/components/modal/modal.hbs +++ b/src/components/modal/modal.hbs @@ -15,16 +15,23 @@
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae - tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. - Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum.

+ {{#if hasInput}} +
+ + +
+ {{else}} +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae + tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. + Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum.

+ {{/if}}
{{#if hasFooter}} {{/if}} diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js index 5a97e97e35be..b12b13e9817a 100644 --- a/src/components/modal/modal.js +++ b/src/components/modal/modal.js @@ -166,6 +166,8 @@ class Modal extends mixin(createComponent, initComponentByLauncher, eventedShowH * @member Modal.options * @type {Object} * @property {string} selectorInit The CSS class to find modal dialogs. + * @property {string} [selectorModalClose] The selector to find elements that close the modal. + * @property {string} [selectorPrimaryFocus] The CSS selector to determine the element to put focus when modal gets open. * @property {string} attribInitTarget The attribute name in the launcher buttons to find target modal dialogs. * @property {string[]} [selectorsFloatingMenu] * The CSS selectors of floating menus.