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

Salesforce Lightning Design System

var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/checkbox-button/docs.mdx.js"]=function(e){function t(t){for(var n,a,l=t[0],s=t[1],r=t[2],d=0,h=[];d<l.length;d++)a=l[d],Object.prototype.hasOwnProperty.call(i,a)&&i[a]&&h.push(i[a][0]),i[a]=0;for(n in s)Object.prototype.hasOwnProperty.call(s,n)&&(e[n]=s[n]);for(b&&b(t);h.length;)h.shift()();return o.push.apply(o,r||[]),c()}function c(){for(var e,t=0;t<o.length;t++){for(var c=o[t],n=!0,l=1;l<c.length;l++){var s=c[l];0!==i[s]&&(n=!1)}n&&(o.splice(t--,1),e=a(a.s=c[0]))}return e}var n={},i={18:0},o=[];function a(t){if(n[t])return n[t].exports;var c=n[t]={i:t,l:!1,exports:{}};return e[t].call(c.exports,c,c.exports,a),c.l=!0,c.exports}a.m=e,a.c=n,a.d=function(e,t,c){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:c})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var c=Object.create(null);if(a.r(c),Object.defineProperty(c,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)a.d(c,n,function(t){return e[t]}.bind(null,n));return c},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/assets/scripts/bundle/";var l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],s=l.push.bind(l);l.push=t,l=l.slice();for(var r=0;r<l.length;r++)t(l[r]);var b=s;return o.push([797,0]),c()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},797:function(e,t,c){"use strict";c.r(t),c.d(t,"getElement",(function(){return E})),c.d(t,"getContents",(function(){return S}));var n=c(0),i=c.n(n),o=c(4),a=c(79),l=i.a.createElement(a.b,null),s=[{id:"checkbox-button-checked",label:"Checked",element:i.a.createElement(a.b,{isChecked:!0})},{id:"checkbox-button-disabled",label:"Disabled",element:i.a.createElement(a.b,{isDisabled:!0})},{id:"checkbox-button-checked-disabled",label:"Checked and Disabled",element:i.a.createElement(a.b,{isChecked:!0,isDisabled:!0})},{id:"checkbox-add-button-checked",label:"Deprecated - Checked",element:i.a.createElement(a.a,{checked:!0})},{id:"checkbox-add-button-disabled",label:"Deprecated - Disabled",element:i.a.createElement(a.a,{disabled:!0})},{id:"checkbox-add-button-checked-and-disabled",label:"Deprecated - Checked and Disabled",element:i.a.createElement(a.a,{checked:!0,disabled:!0})}],r=[{id:"checkbox-button-icon-symbol",label:"Different Icon",element:i.a.createElement(a.b,{iconUnchecked:"recycle_bin_empty",iconChecked:"recycle_bin_full"})},{id:"checkbox-button-checked-icon-symbol",label:"Different Icon - Checked",element:i.a.createElement(a.b,{iconUnchecked:"recycle_bin_empty",iconChecked:"recycle_bin_full",isChecked:!0})},{id:"checkbox-button-disabled-icon-symbol",label:"Different Icon - Disabled",element:i.a.createElement(a.b,{iconUnchecked:"recycle_bin_empty",isDisabled:!0})},{id:"checkbox-button-checked-disabled-icon-symbol",label:"Different Icon - Checked and Disabled",element:i.a.createElement(a.b,{iconChecked:"recycle_bin_full",isChecked:!0,isDisabled:!0})}],b=c(2),d=c(1),h=c(39),u=o.c.a,f=o.c.code,m=o.c.h2,p=o.c.h3,k=o.c.li,y=o.c.p,x=o.c.table,_=o.c.tbody,O=o.c.td,D=o.c.th,g=o.c.thead,j=o.c.tr,v=o.c.ul,E=function(){return Object(n.createElement)(o.b,{},Object(n.createElement)("div",{className:"doc lead"},"A styled checkable input that communicates if an option is being added to a group"),Object(n.createElement)(b.a,{exampleOnly:!0},Object(d.f)(l)),m({id:"About-Checkbox-Button"},"About Checkbox Button"),y({},"The checkbox button is similar to a checkbox in that it presents a user with a\nbinary choice for an item. However, the only action a user can take is to\nadd (or remove) an entity. When a user clicks the checkbox button, the entity is\nstored, similar to an ‘add to cart’ experience, until the user saves changes."),y({},"The checkbox button is useful for increasing clarity. Since the button only adds\nor removes entities, the user knows the action they will prompt upon click.\nThe checkbox button also provides a clear visual affordance and a large target to take this action."),y({},"Use the add button if the component you’re building:"),v({},k({},"Exists without other multi-select elements (i.e. checkboxes)"),k({},"Allows users to select multiple entities"),k({},"Semantically fits the add/remove model")),m({id:"Structure-and-Implementation"},"Structure and Implementation"),y({},"The checkbox ",f({},"<input>")," is visually hidden with ",f({},".slds-assistive-text")," and a faux checkbox is created using the ",u({href:"/components/icons"},"icon blueprint")," which allows the display of an icon instead of the standard checkbox."),y({},"Click and tap events are captured by a ",f({},"<label>")," that encases the entire blueprint. The ",f({},"for")," attribute of your ",f({},"<label>")," must match the ",f({},"id")," attribute of your ",f({},"<input>"),"."),y({},"The states of the checkbox button are styled with the following classes:"),x({},g({},j({},D({},"Class"),D({},"State"),D({},"Description"))),_({},j({},O({},f({},".slds-checkbox-button_is-checked")),O({},"checked"),O({},"The checked state when the checkbox button has been selected")),j({},O({},f({},".slds-checkbox-button_is-disabled")),O({},"disabled"),O({},"The disabled state when the checkbox button has been disabled")),j({},O({},f({},".slds-checkbox-button_is-focused")),O({},"focused"),O({},"The focused state when the checkbox button has focus; important for accessibility")))),y({},"When implementing this blueprint, monitor the state of the checkbox ",f({},"<input>")," and apply the appropriate state class listed in the above chart based on the current state of the checkbox ",f({},"<input>"),"."),y({},"It is possible to change the icon used within the checkbox button, see ",u({href:"#different-icon"},"Different Icons")," for more details."),p({id:"Mobile"},"Mobile"),Object(n.createElement)(h.a,{patternSpecificText:"checkbox buttons will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),Object(n.createElement)(b.a,{frameOnly:!0,frameTitle:"Example mobile styles for checkbox buttons"},Object(d.f)(l)),m({id:"Base"},"Base"),Object(n.createElement)(b.a,null,Object(d.f)(l)),m({id:"States"},"States"),p({id:"Checked"},"Checked"),Object(n.createElement)(b.a,null,Object(d.f)(s,"checkbox-button-checked")),p({id:"Disabled"},"Disabled"),Object(n.createElement)(b.a,null,Object(d.f)(s,"checkbox-button-disabled")),p({id:"Checked-and-Disabled"},"Checked and Disabled"),Object(n.createElement)(b.a,null,Object(d.f)(s,"checkbox-button-checked-disabled")),m({id:"Examples"},"Examples"),p({id:"Different-Icon"},"Different Icon"),y({},"You may change the utility icon used by the checkbox button depending on the action you are communicating. Reference the ",u({href:"/icons/#utility"},"utility icon listing")," for all available options."),y({},"This example is using the ",f({},"recycle_bin_empty")," utility icon as its base state and the ",f({},"recycle_bin_full")," utility icon as its checked state."),Object(n.createElement)(b.a,null,Object(d.f)(r,"checkbox-button-icon-symbol")),Object(n.createElement)(b.a,null,Object(d.f)(r,"checkbox-button-checked-icon-symbol")))},S=function(){return Object(o.a)(E())}}});