@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1 lines • 12.1 kB
JavaScript
var SLDS;!function(){"use strict";var e,t,l,n={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},3195:function(e,t,l){l.r(t),l.d(t,{getContents:function(){return S},getElement:function(){return A}});var n=l(1594),a=l.n(n),i=l(5671),o=l(6547),r=(l(3212),l(5619),l(8342)),s=l(806),c=l(9285),d=l(8347),u=l(3106),m=a().createElement(u.ab,null),p=[{id:"error",label:"Error",element:a().createElement(u.ab,{className:"slds-has-error"},a().createElement("span",{className:"slds-pill__icon_container"},a().createElement("span",{className:"slds-icon_container",title:"Error"},a().createElement(d.A,{className:"slds-icon slds-icon-text-error",sprite:"utility",symbol:"error"}),a().createElement("span",{className:"slds-assistive-text"},"Warning"))))},{id:"truncated",label:"Truncated",demoStyles:"width: 220px;",storybookStyles:!0,element:a().createElement(u.Bm,null,a().createElement(u.ab,{label:"Pill label that is longer than the area that contains it"}))},{id:"pill-truncated-tooltip",label:"Truncated Pill as Tooltip",demoStyles:"width: 220px;",storybookStyles:!0,element:a().createElement(u.dC,null)},{id:"linked-pill-truncated-tooltip",label:"Truncated Linked Pill as Tooltip",demoStyles:"width: 220px;",storybookStyles:!0,element:a().createElement(u.aq,null)}],h=[{id:"icon",label:"With icon",element:a().createElement(u.ab,null,a().createElement("span",{className:"slds-pill__icon_container"},a().createElement("span",{className:"slds-icon_container slds-icon-standard-account",title:"Account"},a().createElement(d.A,{className:"slds-icon",sprite:"standard",symbol:"account"}),a().createElement("span",{className:"slds-assistive-text"},"Account"))))},{id:"avatar",label:"With avatar",element:a().createElement(u.ab,null,a().createElement("span",{className:"slds-pill__icon_container"},a().createElement("span",{className:"slds-avatar slds-avatar_circle",title:"User avatar"},a().createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"}))))},{id:"container",label:"Pill with Container",element:a().createElement(u.Bm,null,a().createElement(u.ab,null),a().createElement(u.ab,null),a().createElement(u.ab,null))},{id:"container-bare",label:"Pill with Bare Container - Deprecated",element:a().createElement(u.Bm,{variant:"container-bare"},a().createElement(u.ab,null),a().createElement(u.ab,null),a().createElement(u.ab,null))}],b=l(2937),f=l(8522),E=[{id:"default",label:"Default",element:a().createElement(u.Bm,{type:"listbox",id:"listbox-pill-default"},a().createElement(u.IK,{id:"listbox-pill-default"},a().createElement(u.j9,null,a().createElement(u.$P,{tabIndex:"0"})),a().createElement(u.j9,null,a().createElement(u.$P,null))))}],v=[{id:"listbox-pill-with-icon",label:"With icon",element:a().createElement(u.Bm,{type:"listbox",id:"listbox-pill-with-icon"},a().createElement(u.IK,{id:"listbox-pill-with-icon"},a().createElement(u.j9,null,a().createElement(u.$P,{tabIndex:"0"},a().createElement(f.b$,{containerClassName:"slds-pill__icon_container",title:"Account",assistiveText:"Account"}))),a().createElement(u.j9,null,a().createElement(u.$P,null,a().createElement(f.b$,{containerClassName:"slds-pill__icon_container",symbol:"case",title:"Case",assistiveText:"Case"})))))},{id:"listbox-pill-with-avatar",label:"With avatar",element:a().createElement(u.Bm,{type:"listbox",id:"listbox-pill-with-avatar"},a().createElement(u.IK,{id:"listbox-pill-with-avatar"},a().createElement(u.j9,null,a().createElement(u.$P,{tabIndex:"0"},a().createElement(b.eu,{className:"slds-avatar_x-small slds-pill__icon_container"},a().createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"})))),a().createElement(u.j9,null,a().createElement(u.$P,null,a().createElement(b.eu,{className:"slds-avatar_x-small slds-pill__icon_container"},a().createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"}))))))},{id:"listbox-pill-bare",label:"Bare",element:a().createElement(u.Bm,{type:"listbox",id:"listbox-pills-bare"},a().createElement(u.IK,{id:"listbox-pills-bare"},a().createElement(u.j9,null,a().createElement(u.$P,{className:"slds-pill_bare",tabIndex:"0"})),a().createElement(u.j9,null,a().createElement(u.$P,{className:"slds-pill_bare"}))))},{id:"listbox-pill-group",label:"Grouped",element:a().createElement("div",null,a().createElement("div",{className:"slds-combobox_container"}),a().createElement(u.Bm,{variant:"listbox-group"},a().createElement(u.IK,null,a().createElement(u.j9,null,a().createElement(u.$P,{tabIndex:"0"})),a().createElement(u.j9,null,a().createElement(u.$P,null)))))}],y=i.XB.a,x=i.XB.code,_=i.XB.h2,w=i.XB.h3,g=i.XB.h4,O=i.XB.li,P=i.XB.p,N=i.XB.strong,k=i.XB.ul,A=function(){return(0,n.createElement)(i.Ay,{},(0,n.createElement)("div",{className:"lead doc"},"A pill represents an object that can be viewed with or without an icon."),(0,n.createElement)(o.A,{exampleOnly:!0},(0,s.NO)(h,"icon")),_({id:"About-Pills"},"About Pills"),P({},"To create a pill, apply the ",x({},".slds-pill")," class on a ",x({},"<span>"),"."),P({},"Depending on your context, you will either need a base pill (linked or unlinked), or a pill option inside of a listbox. Note that a linked pill should not be used as a pill option inside of a listbox."),P({},"For linked pills, a modifier class of ",x({},"slds-pill_link")," needs to be added to the existing ",x({},"<span>")," with the class name of ",x({},"slds-pill"),". You need an ",x({},"<a>")," inside of the span with the ",x({},"slds-pill_link")," class. The ",x({},"<a>")," will get the class name of ",x({},"slds-pill__action"),". This will treat the interactions differently from an unlinked pill option inside of a listbox."),P({},"For both linked and unlinked pills, a ",x({},"<span>")," with the class name of ",x({},"slds-pill__label")," should contain the string of text describing the pill object."),P({},"Additionally, a pill can have an icon or image that sits to the left-hand side of the ",x({},".slds-pill__label"),". That icon or image should receive the class ",x({},".slds-pill__icon_container"),"."),P({},'You may also want the functionality to remove the pill as a selection. An "X" icon is normally used and will sit to the right-hand side of the ',x({},".slds-pill__label"),". That icon should receive the class ",x({},".slds-pill__remove"),"."),P({},"A ",x({},".slds-pill_container")," can be used as a visual container for multiple pill(s)."),w({id:"Mobile"},"Mobile"),(0,n.createElement)(c.s9,{patternSpecificText:"pills will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),(0,n.createElement)(o.A,{frameOnly:!0,frameTitle:"Example mobile styles for pills"},(0,s.NO)(h,"icon")),_({id:"Base"},"Base"),(0,n.createElement)(o.A,null,(0,s.NO)(m)),w({id:"Examples"},"Examples"),g({id:"With-Icon"},"With Icon"),(0,n.createElement)(o.A,null,(0,s.NO)(h,"icon")),g({id:"With-Avatar"},"With Avatar"),(0,n.createElement)(o.A,null,(0,s.NO)(h,"avatar")),g({id:"Pill-with-Container"},"Pill with Container"),(0,n.createElement)(o.A,null,(0,s.NO)(h,"container")),w({id:"States"},"States"),g({id:"Error"},"Error"),(0,n.createElement)(o.A,null,(0,s.NO)(p,"error")),g({id:"Truncated"},"Truncated"),P({},"The pills component will respect the width of its parent and truncate if necessary."),(0,n.createElement)(o.A,{demoStyles:"width: 220px;"},(0,s.NO)(p,"truncated")),P({},"Showing the full text of a truncated pill as a tooltip."),(0,n.createElement)(o.A,{demoStyles:"width: 220px; padding-top:48px;"},(0,s.NO)(p,"pill-truncated-tooltip")),_({id:"Listbox-Of-Pill-Options"},"Listbox Of Pill Options"),(0,n.createElement)(o.A,null,(0,s.NO)(E)),P({},"A Listbox of Pills is a way to display a list of selected options when performing user input, usually from a multi-select ",y({href:"/components/combobox"},"Combobox"),", ",y({href:"/components/lookups"},"Lookup")," or ",y({href:"/components/picklist"},"Picklist"),"."),P({},"Note that we can use a linked or unlinked pill as a pill item inside of a listbox"),w({id:"Accessibility"},"Accessibility"),P({},N({},"Interaction requirements")),k({},O({},"Only 1 focused Pill per set of Pills"),O({},"The remove button is a focusable element and can be clickable.")),P({},N({},"Keyboard navigation")),k({},O({},"The first ",x({},"pill")," in the list will be take user focus initially, when tabbed to"),O({},x({},"Right")," arrow key will move focus to the next pill in the list"),O({},x({},"Left")," arrow key will move focus to the previous pill in the list"),O({},x({},"Left")," arrow key when on the first ",x({},"pill")," should cycle user focus to the last ",x({},"pill")),O({},x({},"Right")," arrow key when on the last ",x({},"pill")," should cycle user focus to the first ",x({},"pill")),O({},"On removing of the pill, the focus should then be placed on the nearest ",x({},"pill"),k({},O({},"When on the last ",x({},"pill"),", place user focus on the previous ",x({},"pill")),O({},"When on the first ",x({},"pill"),", place user focus on the next ",x({},"pill")),O({},"When on the only ",x({},"pill"),", place user focus on the ",x({},"listbox")," or any ",x({},"input")," element the ",x({},"pill")," might be associated with")))),w({id:"Examples-2"},"Examples"),g({id:"With-Icon-2"},"With Icon"),(0,n.createElement)(o.A,null,(0,s.NO)(v,"listbox-pill-with-icon")),g({id:"With-Avatar-2"},"With Avatar"),(0,n.createElement)(o.A,null,(0,s.NO)(v,"listbox-pill-with-avatar")),w({id:"Layout"},"Layout"),g({id:"Bare"},"Bare"),(0,n.createElement)(o.A,null,(0,s.NO)(v,"listbox-pill-bare")),_({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,n.createElement)(r.A,{name:"pills",type:"component"}))},S=function(){return(0,i.Qr)(A())}},5206:function(e){e.exports=ReactDOM}},a={};function i(e){var t=a[e];if(void 0!==t)return t.exports;var l=a[e]={id:e,exports:{}};return n[e](l,l.exports,i),l.exports}i.m=n,i.amdO={},e=[],i.O=function(t,l,n,a){if(!l){var o=1/0;for(d=0;d<e.length;d++){l=e[d][0],n=e[d][1],a=e[d][2];for(var r=!0,s=0;s<l.length;s++)(!1&a||o>=a)&&Object.keys(i.O).every(function(e){return i.O[e](l[s])})?l.splice(s--,1):(r=!1,a<o&&(o=a));if(r){e.splice(d--,1);var c=n();void 0!==c&&(t=c)}}return t}a=a||0;for(var d=e.length;d>0&&e[d-1][2]>a;d--)e[d]=e[d-1];e[d]=[l,n,a]},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,{a:t}),t},l=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},i.t=function(e,n){if(1&n&&(e=this(e)),8&n)return e;if("object"==typeof e&&e){if(4&n&&e.__esModule)return e;if(16&n&&"function"==typeof e.then)return e}var a=Object.create(null);i.r(a);var o={};t=t||[null,l({}),l([]),l(l)];for(var r=2&n&&e;("object"==typeof r||"function"==typeof r)&&!~t.indexOf(r);r=l(r))Object.getOwnPropertyNames(r).forEach(function(t){o[t]=function(){return e[t]}});return o.default=function(){return e},i.d(a,o),a},i.d=function(e,t){for(var l in t)i.o(t,l)&&!i.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},i.e=function(){return Promise.resolve()},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.j=4053,function(){var e={4053:0};i.O.j=function(t){return 0===e[t]};var t=function(t,l){var n,a,o=l[0],r=l[1],s=l[2],c=0;if(o.some(function(t){return 0!==e[t]})){for(n in r)i.o(r,n)&&(i.m[n]=r[n]);if(s)var d=s(i)}for(t&&t(l);c<o.length;c++)a=o[c],i.o(e,a)&&e[a]&&e[a][0](),e[a]=0;return i.O(d)},l=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))}(),i.nc=void 0;var o=i.O(void 0,[3540],function(){return i(3195)});o=i.O(o),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/pills/docs.mdx.js"]=o}();