@salesforce-ux/design-system/__internal/chunked/docs/ui/components/modals/docs.mdx.js

Salesforce Lightning Design System

var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/modals/docs.mdx.js"]=function(e){function t(t){for(var o,s,l=t[0],r=t[1],c=t[2],h=0,u=[];h<l.length;h++)s=l[h],Object.prototype.hasOwnProperty.call(i,s)&&i[s]&&u.push(i[s][0]),i[s]=0;for(o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);for(d&&d(t);u.length;)u.shift()();return n.push.apply(n,c||[]),a()}function a(){for(var e,t=0;t<n.length;t++){for(var a=n[t],o=!0,l=1;l<a.length;l++){var r=a[l];0!==i[r]&&(o=!1)}o&&(n.splice(t--,1),e=s(s.s=a[0]))}return e}var o={},i={49:0},n=[];function s(t){if(o[t])return o[t].exports;var a=o[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,s),a.l=!0,a.exports}s.m=e,s.c=o,s.d=function(e,t,a){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(s.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)s.d(a,o,function(t){return e[t]}.bind(null,o));return a},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],r=l.push.bind(l);l.push=t,l=l.slice();for(var c=0;c<l.length;c++)t(l[c]);var d=r;return n.push([715,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},715:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return w})),a.d(t,"getContents",(function(){return O}));var o=a(0),i=a(4),n=a(21),s=a(2),l=a(27),r=a(40),c=a(1),d=a(39),h=i.c.a,u=i.c.code,m=i.c.h2,f=i.c.h3,p=i.c.h4,b=i.c.li,g=i.c.p,y=i.c.ul,w=function(){return Object(o.createElement)(i.b,{},Object(o.createElement)("div",{className:"doc lead"},"Modals are used to display content in a layer above the app. This paradigm is used in cases such as the creation or editing of a record, as well as various types of messaging and wizards."),Object(o.createElement)(s.a,{exampleOnly:!0,isViewport:!0,demoStyles:Object(c.e)(n.g)},Object(c.f)(n.g)),m({id:"About-Modals"},"About Modals"),g({},"Default modals are used in the vast majority of cases. They are as wide as 50% of the viewport, but include a minimum and maximum width to avoid going too narrow or too wide."),g({},"Modals always have an equal amount of space at the top and bottom to account for the height of the close button."),g({},"Modals grow according to how much content is within, but once the modal full height (including the previously mentioned space on top and bottom), the content area will begin to scroll. (This scrolling is currently not available in Salesforce1 Mobile.)"),g({},"Modals can have a tagline in the header, simply by adding a paragraph after the heading."),g({},"By default, the content area of the modal does not have spacing. This allows for content such as Tables to be full-width to the modal. To get spacing when you need it, apply a padding utility (",u({},".slds-p-around_medium"),")."),g({},"Modal headers can also have taglines, if you need to provide additional context. This tagline can also contain links, or the whole thing could be a link in and of itself."),g({},"Large modals call for large amounts of content. The height follows the same behavior and styles of other modals. The width changes to 90% of the viewport, and uses a wider minimum width and no maximum width."),g({},"These are modals that require a linearly directional paradigm of navigation (“Next” and “Back”, etc.) — the actionable buttons in the modal footer live on the left and right, rather than all on the right. These can either be within a large or default modal, depending on the use case."),g({},"If you're using a Modal for a system alert that the user must acknowledge, consider using a ",h({href:"/components/prompt"},"Prompt"),"."),g({},"To display the modal close button correctly, don’t use the ",u({},"slds-button_icon-inverse")," class for your close button markup."),f({id:"Accessibility"},"Accessibility"),g({},"Modals, by definition, trap focus. This means that if a user presses Tab or Shift+Tab while their keyboard focus is in the modal, their focus should stay in and cycle through the modal’s content. Focus shouldn’t return to the underlying page until the user presses the Esc key, presses an explicit “Cancel” or “Close” button in the modal, or performs another action that closes the modal."),p({id:"Expected-markup"},"Expected markup"),y({},b({},"Modal has ",u({},'role="dialog"')),b({},"When the modal is open, everything behind it has HTML attribute ",u({},'aria-hidden="true"'),", so assistive technology won't read out the underlying page. The best way to do this is to give the modal and the page separate wrapper elements and toggle ",u({},'aria-hidden="true"'),"/",u({},'aria-hidden="false"')," on the main page's wrapper depending on whether or not the modal is open."),b({},"Modal contains an HTML heading. This is an ",u({},"h1")," tag by default but should update according to the surrounding DOM structure. While a semantic heading tag is preferable, if necessary applying ",u({},"role=”heading”")," and ",u({},"aria-level")," to a more generic element is acceptable. Modal heading element has ",u({},'tabindex="-1"')," and this makes it programmatically focusable using Javascript."),b({},"Modal has an ",u({},"aria-labelledby")," attribute whose value is the id of the modal’s heading"),b({},"Modal has an optional ",u({},"aria-describedby")," attribute whose value is the id of the modal's content. This should not be used for all modals, but in instances where the modal is being used as an analog to a javascript ",u({},"confirm()")," or ",u({},"alert()")," dialog to deliver a short prompt that can be responded to with a confirm/cancel button set (eg: ",h({href:"/components/prompt/"},"Prompt"),")."),b({},"Buttons which close the modal should have the same accessible text per ",h({href:"https://www.w3.org/WAI/WCAG21/Understanding/consistent-identification.html"},"WCAG guidelines"),".")),p({id:"Expected-keyboard-interactions"},"Expected keyboard interactions"),y({},b({},"Esc key closes the modal and moves focus to whatever triggered the modal to open"),b({},"Tab key at bottom of modal cycles focus back to first focusable element at top of modal"),b({},"Shift+Tab keys at top of modal cycle focus back to last focusable element at bottom of modal"),b({},"Enter key submits modal’s form data, if applicable")),p({id:"Focus-guidelines"},"Focus guidelines"),y({},b({},"Focus for modals must follow the guidelines described in the ",h({href:"/accessibility/guidelines/global-focus/#dialogs"},"Accessibility Guidelines for Dialogs"),". Pay special attention to where focus is set when the modal opens."),b({},"If no interactive element exists to set focus when the modal opens, add the appropriate ",u({},"tabindex"),' attribute to the header to allow for programmatic focus (see "Footless" example, below).')),f({id:"Mobile"},"Mobile"),Object(o.createElement)(d.a,{patternSpecificText:"modals will have buttons of increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),Object(o.createElement)(s.a,{frameOnly:!0,frameStyles:{height:"640px"},frameTitle:"Example mobile styles for modals"},Object(c.f)(n.g)),m({id:"Base"},"Base"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(c.e)(n.g)},Object(c.f)(n.g)),m({id:"Layout"},"Layout"),f({id:"Taglines"},"Taglines"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(c.e)(n.h,"taglines")},Object(c.f)(n.h,"taglines")),f({id:"Headless"},"Headless"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(c.e)(n.h,"headless")},Object(c.f)(n.h,"headless")),f({id:"Footless"},"Footless"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(c.e)(n.h,"footless")},Object(c.f)(n.h,"footless")),f({id:"Directional"},"Directional"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(c.e)(n.h,"directional")},Object(c.f)(n.h,"directional")),m({id:"Sizes"},"Sizes"),f({id:"Small"},"Small"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(c.e)(n.h,"small")},Object(c.f)(n.h,"small")),f({id:"Medium"},"Medium"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(c.e)(n.h,"medium")},Object(c.f)(n.h,"medium")),f({id:"Large"},"Large"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(c.e)(n.h,"large")},Object(c.f)(n.h,"large")),f({id:"Full"},"Full"),g({},"Use the ",u({},"slds-modal_full")," class to give a full screen appearance in small form factors that fall within the ",u({},"$mq-small")," token value. Form factors outside of ",u({},"$mq-small")," will take on the appearance of the large modal."),Object(o.createElement)(s.a,{frameOnly:!0,frameStyles:{height:"640px"},frameTitle:"Example mobile styles for full example"},Object(c.f)(n.h,"full")),Object(o.createElement)(l.a,{toggleCode:!1},Object(o.createElement)(n.f,{size:"full"})),m({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(o.createElement)(r.a,{name:"modals",type:"component"}))},O=function(){return Object(i.a)(w())}}});