@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1 lines • 7.84 kB
JavaScript
var SLDS;!function(){"use strict";var e,t,n,r={1594:function(e){e.exports=React},1930:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return B},getElement:function(){return N}});var r=n(1594),o=n.n(r),l=n(5671),i=n(6547),u=(n(3212),n(5619),n(806)),a=n(9623),s=n(1412),c=n(7412),d=n.n(c),f=n(9825),p=n(6955),m=function(e){return o().createElement("ul",{className:"slds-button-group-row"},e.children)};m.propTypes={children:d().node};var h=function(e){return o().createElement("li",{className:"slds-button-group-item"},e.children)};h.propTypes={children:d().node};var b=[{id:"default",label:"Default",element:o().createElement(m,null,o().createElement(h,null,o().createElement(f.$n,{isNeutral:!0},"Refresh")),o().createElement(h,null,o().createElement(f.$n,{isNeutral:!0},"Edit")),o().createElement(h,null,o().createElement(f.$n,{isBrand:!0},"Save")))}],v=[{id:"buttons-icons",label:"Row of button icons",element:o().createElement(m,null,o().createElement(h,null,o().createElement("div",{className:"slds-dropdown-trigger slds-dropdown-trigger_clicked"},o().createElement(p.A,{hasDropdown:!0,theme:"neutral",assistiveText:"More options",title:"More Options"}))),o().createElement(h,null,o().createElement("div",{className:"slds-dropdown-trigger slds-dropdown-trigger_clicked"},o().createElement(p.A,{hasDropdown:!0,theme:"neutral",symbol:"table",assistiveText:"More options",title:"More Options"}))),o().createElement(h,null,o().createElement(p.A,{symbol:"edit",theme:"neutral"})),o().createElement(h,null,o().createElement(p.A,{symbol:"refresh",theme:"neutral"})),o().createElement(h,null,o().createElement(a.e2,null,o().createElement(p.A,{symbol:"chart",theme:"neutral"}),o().createElement(p.A,{symbol:"filter",theme:"neutral"}))))}],O=l.XB.a,E=l.XB.code,g=l.XB.h2,w=l.XB.h3,y=l.XB.h4,A=l.XB.p,N=function(){return(0,r.createElement)(l.Ay,{},(0,r.createElement)("div",{className:"doc lead"},"Button groups are used to bunch together buttons with similar actions"),(0,r.createElement)(i.A,{exampleOnly:!0},(0,u.NO)(a.xP,"with-overflow-open")),g({id:"About-Button-Groups"},"About Button Groups"),A({},"Buttons in a group are surrounded by a parent with the ",E({},".slds-button-group")," class, unless they are in a list (in which case they use ",E({},".slds-button-group-list"),". If the last button is an icon, like the down triangle, use the ",E({},".slds-button_icon-border-filled")," class when accompanying a ",E({},".slds-button_neutral")," group."),A({},"If the last button in a group needs to be wrapped in another element (for example, a drop-down trigger), add the ",E({},".slds-button_last")," class to the wrapper element to create proper spacing and borders."),w({id:"Accessibility"},"Accessibility"),A({},"Unless you are using the list version, include the Aria role ",E({},'role="group"')," so that assistive technologies are alerted to the grouping."),g({id:"Base"},"Base"),(0,r.createElement)(i.A,null,(0,u.NO)(a.Ay)),w({id:"States"},"States"),y({id:"Disabled"},"Disabled"),(0,r.createElement)(i.A,null,(0,u.NO)(a.xP,"disabled")),y({id:"With-Overflow-Menu"},"With Overflow Menu"),(0,r.createElement)(i.A,null,(0,u.NO)(a.xP,"with-overflow")),y({id:"With-Overflow-Menu-Open"},"With Overflow Menu – Open"),(0,r.createElement)(i.A,null,(0,u.NO)(a.xP,"with-overflow-open")),y({id:"With-Overflow-Menu-Disabled"},"With Overflow Menu – Disabled"),(0,r.createElement)(i.A,null,(0,u.NO)(a.xP,"with-overflow-disabled")),w({id:"Examples"},"Examples"),y({id:"Inverse"},"Inverse"),(0,r.createElement)(i.A,null,(0,u.NO)(a.K1,"inverse")),y({id:"Inverse-Disabled"},"Inverse - Disabled"),(0,r.createElement)(i.A,null,(0,u.NO)(a.K1,"inverse-disabled")),y({id:"Inverse-With-Overflow-Menu"},"Inverse - With Overflow Menu"),(0,r.createElement)(i.A,null,(0,u.NO)(a.K1,"inverse-overflow")),y({id:"Inverse-With-Disabled-Overflow-Menu"},"Inverse - With Disabled Overflow Menu"),(0,r.createElement)(i.A,null,(0,u.NO)(a.K1,"inverse-overflow-disabled")),w({id:"Button-Icon-Group"},"Button Icon Group"),(0,r.createElement)(i.A,null,(0,u.NO)(a.K1,"button-group-icon")),y({id:"Disabled-2"},"Disabled"),(0,r.createElement)(i.A,null,(0,u.NO)(a.K1,"button-group-icon-disabled")),y({id:"Selected"},"Selected"),(0,r.createElement)(i.A,null,(0,u.NO)(a.K1,"button-group-icon-selected")),w({id:"Brand-Button"},"Brand Button"),y({id:"With-Overflow-Menu-2"},"With Overflow Menu"),(0,r.createElement)(i.A,null,(0,u.NO)(a.K1,"brand-with-overflow")),w({id:"With-Style-Encapsulation"},"With Style Encapsulation"),(0,r.createElement)(i.A,null,(0,u.NO)(a.K1,"style-encapsulated-button-group")),y({id:"FirstLast"},"First/Last"),(0,r.createElement)(i.A,null,(0,u.NO)(a.K1,"style-encapsulated-button-group-2-button")),y({id:"Button-Icon-Group-2"},"Button Icon Group"),(0,r.createElement)(i.A,null,(0,u.NO)(a.K1,"style-encapsulated-button-icon-group")),y({id:"Button-Icon-Group-FirstLast"},"Button Icon Group – First/Last"),(0,r.createElement)(i.A,null,(0,u.NO)(a.K1,"style-encapsulated-button-icon-group-2-button")),g({id:"List"},"List"),(0,r.createElement)(i.A,null,(0,u.NO)(s.Ay)),w({id:"Examples-2"},"Examples"),A({},"See the ",O({href:"#Examples"},"Base examples")," for various use cases such as ",O({href:"#Inverse"},"inverse"),"."),g({id:"Row"},"Row"),(0,r.createElement)(i.A,null,(0,u.NO)(b)),w({id:"Of-Button-Icons"},"Of Button Icons"),(0,r.createElement)(i.A,null,(0,u.NO)(v,"buttons-icons")))},B=function(){return(0,l.Qr)(N())}},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM}},o={};function l(e){var t=o[e];if(void 0!==t)return t.exports;var n=o[e]={id:e,exports:{}};return r[e](n,n.exports,l),n.exports}l.m=r,l.amdO={},e=[],l.O=function(t,n,r,o){if(!n){var i=1/0;for(c=0;c<e.length;c++){n=e[c][0],r=e[c][1],o=e[c][2];for(var u=!0,a=0;a<n.length;a++)(!1&o||i>=o)&&Object.keys(l.O).every(function(e){return l.O[e](n[a])})?n.splice(a--,1):(u=!1,o<i&&(i=o));if(u){e.splice(c--,1);var s=r();void 0!==s&&(t=s)}}return t}o=o||0;for(var c=e.length;c>0&&e[c-1][2]>o;c--)e[c]=e[c-1];e[c]=[n,r,o]},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},l.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var o=Object.create(null);l.r(o);var i={};t=t||[null,n({}),n([]),n(n)];for(var u=2&r&&e;("object"==typeof u||"function"==typeof u)&&!~t.indexOf(u);u=n(u))Object.getOwnPropertyNames(u).forEach(function(t){i[t]=function(){return e[t]}});return i.default=function(){return e},l.d(o,i),o},l.d=function(e,t){for(var n in t)l.o(t,n)&&!l.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},l.e=function(){return Promise.resolve()},l.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.j=6560,function(){var e={6560:0};l.O.j=function(t){return 0===e[t]};var t=function(t,n){var r,o,i=n[0],u=n[1],a=n[2],s=0;if(i.some(function(t){return 0!==e[t]})){for(r in u)l.o(u,r)&&(l.m[r]=u[r]);if(a)var c=a(l)}for(t&&t(n);s<i.length;s++)o=i[s],l.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return l.O(c)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),l.nc=void 0;var i=l.O(void 0,[3540],function(){return l(1930)});i=l.O(i),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/button-groups/docs.mdx.js"]=i}();