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

Salesforce Lightning Design System

var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/prompt/docs.mdx.js"]=function(e){function t(t){for(var o,r,i=t[0],l=t[1],d=t[2],u=0,m=[];u<i.length;u++)r=i[u],Object.prototype.hasOwnProperty.call(s,r)&&s[r]&&m.push(s[r][0]),s[r]=0;for(o in l)Object.prototype.hasOwnProperty.call(l,o)&&(e[o]=l[o]);for(c&&c(t);m.length;)m.shift()();return n.push.apply(n,d||[]),a()}function a(){for(var e,t=0;t<n.length;t++){for(var a=n[t],o=!0,i=1;i<a.length;i++){var l=a[i];0!==s[l]&&(o=!1)}o&&(n.splice(t--,1),e=r(r.s=a[0]))}return e}var o={},s={60:0},n=[];function r(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,r),a.l=!0,a.exports}r.m=e,r.c=o,r.d=function(e,t,a){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(r.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(a,o,function(t){return e[t]}.bind(null,o));return a},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],l=i.push.bind(i);i.push=t,i=i.slice();for(var d=0;d<i.length;d++)t(i[d]);var c=l;return n.push([804,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},804:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return y})),a.d(t,"getContents",(function(){return g}));var o=a(0),s=a.n(o),n=a(4),r=a(21),i=s.a.createElement("div",{className:"demo-only",style:{height:"24rem"}},s.a.createElement(r.a,null,s.a.createElement(r.b,{tabIndex:"0",role:"alertdialog","aria-labelledby":"prompt-heading-id","aria-describedby":"prompt-message-wrapper",className:"slds-modal_prompt",closeButton:!1},s.a.createElement(r.e,{className:"slds-theme_error slds-theme_alert-texture"},s.a.createElement("h1",{className:"slds-text-heading_medium",id:"prompt-heading-id"},"Service unavailable")),s.a.createElement(r.c,{className:"slds-p-around_medium",id:"prompt-message-wrapper"},s.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Cillum sunt ad dolore quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.")),s.a.createElement(r.d,{className:"slds-theme_default"},s.a.createElement("button",{className:"slds-button slds-button_neutral"},"Got It"))))),l=a(2),d=(a(1),n.c.a),c=n.c.code,u=n.c.h2,m=n.c.h3,h=n.c.h4,p=n.c.li,f=n.c.p,b=n.c.ul,y=function(){return Object(o.createElement)(n.b,{},Object(o.createElement)("div",{className:"doc lead"},"Prompt notice grabs the user’s attention & alerts them of system-related issues/updates."),Object(o.createElement)(l.a,{exampleOnly:!0},i),u({id:"About-Prompt"},"About Prompt"),f({},"A prompt uses the ",d({href:"/components/modals"},"base modal component")," and then adds the class ",c({},".slds-modal_prompt")," to the overall ",c({},".slds-modal"),". The utilities > themes > colors class is placed on the ",c({},".slds-modal__head")," to create the color of the header. In the example, we illustrate using ",c({},".slds-theme_error"),". The class ",c({},".slds-theme_alert-texture")," should be applied to create the striped gradient. The ",c({},".slds-modal__footer")," receives the class ",c({},".slds-theme_default"),"."),m({id:"Implementation-Guidelines"},"Implementation Guidelines"),h({id:"Markup"},"Markup"),f({},"Expected markup is the same as Modals (/components/modals), but with the following differences):"),b({},p({},"Modal has ",c({},'role="alertdialog"')),p({},"Modal has an ",c({},"aria-describedby")," attribute that matches the id of the modal message container."),p({},"Modal message container container should have ",c({},'tabindex="0"'))),h({id:"Keyboard-Interaction"},"Keyboard Interaction"),f({},"Expected keyboard interaction is the ",d({href:"/components/modals"},"same as Modals"),", with the addition of:"),b({},p({},"Modal message container should take initial focus")),m({id:"Accessibility"},"Accessibility"),f({},"Prompt notifications are similar to modals, in that they are a focus trap, but they should take a slightly different ",c({},"role")," of ",c({},"alertdialog")," to indicate their severity. Like modals they should be labelled by their headings, but additionally they should be described by the message details of the prompt."),f({},"The element containing the prompt message should be the target focus of the browser when it is displayed, which is why we add ",c({},'tabindex="0"')," to ",c({},"slds-modal__container"),"."),f({},"There is no requirement for a close button, as the confirmation button should be used to dismiss the prompt, along with the usual Esc key dismissal."),u({id:"Base"},"Base"),Object(o.createElement)(l.a,null,i))},g=function(){return Object(n.a)(y())}}});