@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1 lines • 14.3 kB
JavaScript
var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/panels/docs.mdx.js"]=function(e){function t(t){for(var i,o,r=t[0],s=t[1],c=t[2],h=0,p=[];h<r.length;h++)o=r[h],Object.prototype.hasOwnProperty.call(a,o)&&a[o]&&p.push(a[o][0]),a[o]=0;for(i in s)Object.prototype.hasOwnProperty.call(s,i)&&(e[i]=s[i]);for(d&&d(t);p.length;)p.shift()();return l.push.apply(l,c||[]),n()}function n(){for(var e,t=0;t<l.length;t++){for(var n=l[t],i=!0,r=1;r<n.length;r++){var s=n[r];0!==a[s]&&(i=!1)}i&&(l.splice(t--,1),e=o(o.s=n[0]))}return e}var i={},a={52:0},l=[];function o(t){if(i[t])return i[t].exports;var n=i[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.m=e,o.c=i,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)o.d(n,i,function(t){return e[t]}.bind(null,i));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],s=r.push.bind(r);r.push=t,r=r.slice();for(var c=0;c<r.length;c++)t(r[c]);var d=s;return l.push([767,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},767:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return D})),n.d(t,"getContents",(function(){return H}));var i=n(0),a=n.n(i),l=n(4),o=n(2),r=n(27),s=n(1),c=n(15),d=n(14),h=n(64),p=n(42),m=(n(9),n(10)),u=(h.b,"\n background-color: #fafaf9;\n overflow: hidden;\n"),b=[{id:"with-centered-title",label:"With Centered Title",element:a.a.createElement(h.b,{hasCenterTitle:!0})},{id:"with-truncated-title",label:"With Truncated Title",element:a.a.createElement(h.b,{title:"Panel Header with a really, really long name"})},{id:"with-secondary-actions",label:"With Secondary Actions",demoStyles:"".concat(u," height: 240px;"),storybookStyles:!0,element:a.a.createElement(h.c,{size:"medium",title:"Panel Header",docked:"left",invoke:"toggle",headerActions:a.a.createElement(m.a,{position:"right",size:"small",isOpen:!0})},"A panel body accepts any layout or component")},{id:"with-drilled-in-left",label:"With Drilled-In State - Position Left",demoStyles:"".concat(u," height: 200px;"),storybookStyles:!0,element:a.a.createElement(h.c,{size:"medium",title:"Panel Header",docked:"left",invoke:"drill-in"},"A panel body accepts any layout or component")},{id:"with-drilled-in-left-secondary-actions",label:"With Drilled-In State & Secondary Actions - Position left",demoStyles:"".concat(u," height: 200px;"),storybookStyles:!0,element:a.a.createElement(h.c,{size:"medium",title:"Panel Header",docked:"left",invoke:"drill-in",headerActions:a.a.createElement(m.a,{size:"small",position:"right",isOpen:!0})},"A panel body accepts any layout or component")},{id:"with-drilled-in-right",label:"With Drilled-In State - Position Right",demoStyles:"".concat(u," height: 200px;"),storybookStyles:!0,element:a.a.createElement(h.c,{size:"medium",title:"Panel Header",docked:"right",invoke:"drill-in"},"A panel body accepts any layout or component")},{id:"drawer",label:"Open as a drawer",element:a.a.createElement(h.b,{drawer:!0})},{id:"deprecated-panel-header",label:"DEPRECATED - Panel Header",element:a.a.createElement(h.c,{size:"medium",docked:"left",headerSlot:a.a.createElement(h.a,null)},"A panel body accepts any layout or component")}],f=l.c.a,g=l.c.code,y=l.c.h2,v=l.c.h3,O=l.c.h4,j=l.c.li,w=l.c.ol,E=l.c.p,k=l.c.strong,S=l.c.table,_=l.c.tbody,P=l.c.td,x=l.c.th,A=l.c.thead,T=l.c.tr,z=l.c.ul,D=function(){return Object(i.createElement)(l.b,{},Object(i.createElement)("div",{className:"doc lead"},"A panel is typically used to provide supplemental information or form inputs that relate to your primary canvas."),Object(i.createElement)(o.a,{exampleOnly:!0,demoStyles:" background-color: #fafaf9; position: relative; height: 200px; overflow: hidden; "},Object(i.createElement)(h.c,{size:"medium",title:"Panel Header",docked:"left",invoke:"toggle"},"A panel body accepts any layout or component")),y({id:"About-Panel"},"About Panel"),E({},"A panel is docked to the left/right side of a viewport and is in the document flow of the canvas or main content."),E({},k({},"Use this component when:")),w({},j({},"The canvas content extends beyond the boundaries of the viewport, while panning and zooming is supported"),j({},"It is not important to see canvas content while completing the task in a Panel"),j({},"The task performed in a Panel is momentary")),E({},"Toggling visibility of a Panel will re-flow the main content."),E({},"The panel should take up 100% of the height of its parent container. In most cases, that would be the viewport or main stage of your application."),Object(i.createElement)(d.a,{type:"note",header:"Implementation Note"},Object(i.createElement)("p",null,"The panel blueprint does not have an opinion about your app's layout. It is up to you to add the panel to your project's structure while adhering to our guidelines. For example, the"," ",Object(i.createElement)("a",{href:"#Panel-Visibility"},"visibility section")," showcases a panel implemented within a demo container using a ",Object(i.createElement)("code",null,"flex")," layout.")),v({id:"Accessibility"},"Accessibility"),E({},"When managing the visibility of the panel, there are a few essential accessibility elements to make sure are in place:"),z({},j({},"When the panel is not visible, set its ",g({},"aria-hidden")," attribute to ",g({},"true"),", and when visible, set ",g({},"aria-hidden")," to ",g({},"false"),"."),j({},"If the panel's visibility is triggered by an element, the triggering element must be focusable with ",g({},"aria-controls")," set to the unique ID of the panel and ",g({},"aria-expanded")," set to either ",g({},"true")," or ",g({},"false")," depending on the visibility of the panel."),j({},"When toggling a panel open, place the user's focus inside the first focusable element within the panel that isn't the close button. If the close button is the only focusable element, place focus there. Return focus to the triggering element when the panel closes.")),y({id:"Base"},"Base"),Object(i.createElement)(c.a,{title:"Panel base"},Object(i.createElement)(o.a,{demoStyles:" background-color: #fafaf9; position: relative; height: 600px; overflow: hidden; "},Object(i.createElement)(h.c,{size:"medium",title:"Panel Header",docked:"left",invoke:"toggle"},"A panel body accepts any layout or component"))),y({id:"Header"},"Header"),E({},"The header is docked to the top of its panel. When the content of the panel body becomes overflowed, the body will provide scrolling while the header remains visible in place."),E({},"The header of a left/right docked panel has left-aligned text by default and one icon that dismisses the panel. The header title should truncate when it becomes too long for the panel width by using the ",g({},"slds-truncate")," class on the title."),Object(i.createElement)(c.a,{title:"Panel base - header"},Object(i.createElement)(o.a,{demoStyles:" background-color: #fafaf9; position: relative; height: 50px; overflow: hidden; "},Object(i.createElement)(h.c,{size:"medium",title:"Panel Header",docked:"left",invoke:"toggle"}))),v({id:"Centered-Text"},"Centered Text"),E({},"To center the header title, add the class ",g({},"slds-panel__header_align-center")," to the ",g({},"<div>")," with class ",g({},"slds-panel__header"),"."),Object(i.createElement)(c.a,{title:"Panel base - header"},Object(i.createElement)(o.a,{demoStyles:" background-color: #fafaf9; position: relative; height: 50px; overflow: hidden; "},Object(i.createElement)(h.c,{size:"medium",title:"Panel Header",docked:"left",invoke:"toggle",hasCenterTitle:!0}))),v({id:"Secondary-Actions"},"Secondary Actions"),E({},"Secondary actions provide a compact way to offer additional actions without the need for a dedicated action toolbar. Actions in the menu apply to the entire component."),Object(i.createElement)(d.a,{type:"a11y",header:"Accessibility Requirement"},Object(i.createElement)("p",null,"Secondary actions use the ",Object(i.createElement)("a",{href:"/components/menus/#Accessibility"},"menu component"),". All of the ",Object(i.createElement)("a",{href:"/components/menus/#Accessibility"},"accessibility guidelines")," for the menu component are pertinent within the context of secondary actions.")),Object(i.createElement)(o.a,{demoStyles:Object(s.e)(b,"with-secondary-actions")},Object(s.f)(b,"with-secondary-actions")),v({id:"Custom-Header"},"Custom Header"),E({},"If a panel header requires additional elements outside of a title and close button, The panel header needs to have the class ",g({},"slds-panel__header_custom")," added to ",g({},"slds-panel__header"),". This notifies the component that it has a custom layout in the header."),Object(i.createElement)(r.a,{toggleCode:!1},Object(i.createElement)("div",{className:"slds-panel__header slds-panel__header_custom"},"...")),E({},"The ",g({},"h2")," which contains the title of the panel requires the class ",g({},"slds-panel__header-title"),"."),y({id:"Invoked-via-Toggle"},"Invoked via Toggle"),Object(i.createElement)(d.a,{type:"a11y",header:"Accessibility Requirement"},Object(i.createElement)("p",null,"When toggling the visibility, author must manage user focus by placing the user inside the panel when it opens and returning them to the trigger when it closes.")),v({id:"Positioning"},"Positioning"),E({},"The ",g({},"slds-panel_docked")," element can be positioned on the left or right side of a viewport by adding the class ",g({},"slds-panel_docked-left")," or ",g({},"slds-panel_docked-right"),"."),O({id:"Left-side"},"Left side"),Object(i.createElement)(c.a,{title:"Panel base - left dock toggle"},Object(i.createElement)(o.a,{demoStyles:" background-color: #fafaf9; position: relative; height: 200px; overflow: hidden; "},Object(i.createElement)(h.c,{size:"medium",title:"Panel Header",docked:"left",invoke:"toggle"},"A panel body accepts any layout or component"))),O({id:"Right-side"},"Right side"),Object(i.createElement)(c.a,{title:"Panel base - right dock toggle"},Object(i.createElement)(o.a,{demoStyles:" background-color: #fafaf9; position: relative; height: 200px; overflow: hidden; "},Object(i.createElement)(h.c,{size:"medium",title:"Panel Header",docked:"right",invoke:"toggle"},"A panel body accepts any layout or component"))),y({id:"Drilled-In-State"},"Drilled-In State"),Object(i.createElement)(d.a,{type:"note",header:"Design Note"},Object(i.createElement)("p",null,"If the panel has been drilled into, then the panel displays an arrow facing to the left to indicate the direction the user drilled in from.")),Object(i.createElement)(d.a,{type:"a11y",header:"Accessibility Requirement"},Object(i.createElement)("p",null,"When the user drills in, the author must manage user focus by keeping the user inside the panel when it drills in and returning them to the drill-in trigger when it the user presses the back arrow.")),v({id:"Positioning-2"},"Positioning"),O({id:"Left-side-2"},"Left side"),Object(i.createElement)(o.a,{demoStyles:Object(s.e)(b,"with-drilled-in-left")},Object(s.f)(b,"with-drilled-in-left")),O({id:"Right-side-2"},"Right side"),Object(i.createElement)(o.a,{demoStyles:Object(s.e)(b,"with-drilled-in-right")},Object(s.f)(b,"with-drilled-in-right")),y({id:"Sizing"},"Sizing"),E({},"The panel width can be modified by applying a sizing class to the ",g({},"slds-panel")," element."),E({},"The panels come in 5 different sizes:"),S({},A({},T({},x({},"Width"),x({},"SLDS Class"))),_({},T({},P({},"240px"),P({},g({},"slds-size_small"))),T({},P({},"320px"),P({},g({},"slds-size_medium"))),T({},P({},"400px"),P({},g({},"slds-size_large"))),T({},P({},"640px"),P({},g({},"slds-size_x-large"))),T({},P({},"100%"),P({},g({},"slds-size_full"))))),y({id:"Panel-Visibility"},"Panel Visibility"),v({id:"Open-as-a-drawer"},"Open as a drawer"),E({},"A panel causes reflow by being in the flow of the layout rather than overlaid on top of the content. To achieve this, simply toggle the class ",g({},"slds-is-open")," to the ",g({},"slds-panel_docked")," element."),Object(i.createElement)(o.a,null,Object(i.createElement)(h.b,{drawer:!0})),y({id:"Panels-for-Filtering"},"Panels for Filtering"),E({},"Filtering lists or reports can be done by using a Filtering expressions inside of a Panel. Check out the ",f({href:"/components/expression/#filtering"},"Filtering expression")," component for different states and accessibility requirements."),Object(i.createElement)(d.a,{type:"a11y",header:"Accessibility Requirement"},Object(i.createElement)("p",null,"Make sure to use assistive text to improve the clarity of what you might be editing, for example, add"," ",Object(i.createElement)("code",null,'<span className="slds-assistive-text">Edit filter:</span>')," ","to the button element inside each filterable object.")),Object(i.createElement)(o.a,null,Object(i.createElement)(h.b,{size:"medium",title:"Filter",docked:"right",invoke:"toggle",icon:"filterList",iconTitle:"Toggle filter panel",drawer:!0},Object(i.createElement)(p.c,null,Object(i.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(i.createElement)(p.a,{type:"Show Me"},"All Products")),Object(i.createElement)("h3",{className:"slds-text-body_small slds-m-vertical_x-small"},"Matching all these filters"),Object(i.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(i.createElement)(p.a,{type:"Created Date",removable:!0},"equals THIS WEEK"),Object(i.createElement)(p.a,{type:"List Price",removable:!0},'greater than "500"')),Object(i.createElement)(p.d,null)))))},H=function(){return Object(l.a)(D())}}});