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

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,t,n,o={598:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return L},getElement:function(){return U}});var o=n(1594),c=n.n(o),i=n(5671),r=n(7412),a=n.n(r),s=n(942),l=n.n(s),u=n(806),d=n(538);function b(e){return b="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},b(e)}function h(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,f(o.key),o)}}function f(e){var t=function(e){if("object"!=b(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=b(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==b(t)?t:t+""}function p(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(p=function(){return!!e})()}function m(e){return m=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},m(e)}function k(e,t){return k=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},k(e,t)}var y=function(e){var t=e.isFocused,n=e.isDisabled,o=e.isChecked,i=e.tabIndex,r=e.iconAssistiveText,a=e.iconSize,s=e.iconSymbol,b=e.iconCurrentColor,h=e.onChange,f=e.onFocus,p=e.onBlur,m=u.Ay.uniqueId("example-unique-id-"),k={"slds-checkbox-button_is-focused":t,"slds-checkbox-button_is-checked":o,"slds-checkbox-button_is-disabled":n};return c().createElement("label",{className:l()("slds-checkbox-button",k),htmlFor:m},c().createElement("input",{className:"slds-assistive-text",type:"checkbox",id:m,value:m,disabled:n,defaultChecked:o,tabIndex:i,onChange:h,onFocus:f,onBlur:p}),c().createElement(d.eX,{symbol:s,size:a,useCurrentColor:b,assistiveText:r}))};y.defaultProps={iconAssistiveText:"Add product",iconSize:"x-small",iconSymbol:"add",iconCurrentColor:!0},y.propTypes={isDisabled:a().bool,isChecked:a().bool,tabIndex:a().number,iconAssistiveText:a().string,iconSize:a().string,iconSymbol:a().string,iconCurrentColor:a().bool};var x=function(e){function t(e){var n;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),(n=function(e,t,n){return t=m(t),function(e,t){if(t&&("object"==b(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(e,p()?Reflect.construct(t,n||[],m(e).constructor):t.apply(e,n))}(this,t,[e])).state={checked:!!n.props.isChecked,focused:!1},n.handleCheckboxChange=n.handleCheckboxChange.bind(n),n.handleFocus=n.handleFocus.bind(n),n.handleBlur=n.handleBlur.bind(n),n}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&k(e,t)}(t,e),n=t,(o=[{key:"handleCheckboxChange",value:function(){this.setState({checked:!this.state.checked})}},{key:"handleFocus",value:function(){this.state.focused||this.setState({focused:!0})}},{key:"handleBlur",value:function(){this.state.focused&&this.setState({focused:!1})}},{key:"render",value:function(){var e=this.props,t=e.iconChecked,n=e.iconUnchecked,o=e.isDisabled,i=e.tabIndex;return c().createElement(y,{onChange:this.handleCheckboxChange,iconSymbol:this.state.checked?t:n,isChecked:this.state.checked,isDisabled:o,isFocused:this.state.focused,onFocus:this.handleFocus,onBlur:this.handleBlur,tabIndex:i})}}])&&h(n.prototype,o),Object.defineProperty(n,"prototype",{writable:!1}),n;var n,o}(o.Component);x.defaultProps={iconChecked:"check",iconUnchecked:"add"},x.propTypes={iconChecked:a().string,iconUnchecked:a().string};var v=function(e){var t=e.disabled,n=e.checked,o=e.tabIndex,i=e.label,r=u.Ay.uniqueId("add-checkbox-");return c().createElement("div",{className:"slds-checkbox_add-button"},c().createElement("input",{className:"slds-assistive-text",type:"checkbox",id:r,value:r,disabled:t,defaultChecked:n,tabIndex:o}),c().createElement("label",{htmlFor:r,className:"slds-checkbox_faux"},c().createElement("span",{className:"slds-assistive-text"},i||"Add product")))},g=c().createElement(x,null),_=[{id:"checkbox-button-checked",label:"Checked",element:c().createElement(x,{isChecked:!0})},{id:"checkbox-button-disabled",label:"Disabled",element:c().createElement(x,{isDisabled:!0})},{id:"checkbox-button-checked-disabled",label:"Checked and Disabled",element:c().createElement(x,{isChecked:!0,isDisabled:!0})},{id:"checkbox-add-button-checked",label:"Deprecated - Checked",element:c().createElement(v,{checked:!0})},{id:"checkbox-add-button-disabled",label:"Deprecated - Disabled",element:c().createElement(v,{disabled:!0})},{id:"checkbox-add-button-checked-and-disabled",label:"Deprecated - Checked and Disabled",element:c().createElement(v,{checked:!0,disabled:!0})}],C=[{id:"checkbox-button-icon-symbol",label:"Different Icon",element:c().createElement(x,{iconUnchecked:"recycle_bin_empty",iconChecked:"recycle_bin_full"})},{id:"checkbox-button-checked-icon-symbol",label:"Different Icon - Checked",element:c().createElement(x,{iconUnchecked:"recycle_bin_empty",iconChecked:"recycle_bin_full",isChecked:!0})},{id:"checkbox-button-disabled-icon-symbol",label:"Different Icon - Disabled",element:c().createElement(x,{iconUnchecked:"recycle_bin_empty",isDisabled:!0})},{id:"checkbox-button-checked-disabled-icon-symbol",label:"Different Icon - Checked and Disabled",element:c().createElement(x,{iconChecked:"recycle_bin_full",isChecked:!0,isDisabled:!0})}],O=n(6547),S=n(9285),E=i.XB.a,w=i.XB.code,D=i.XB.h2,j=i.XB.h3,B=i.XB.li,T=i.XB.p,A=i.XB.table,P=i.XB.tbody,I=i.XB.td,N=i.XB.th,X=i.XB.thead,F=i.XB.tr,M=i.XB.ul,U=function(){return(0,o.createElement)(i.Ay,{},(0,o.createElement)("div",{className:"doc lead"},"A styled checkable input that communicates if an option is being added to a group"),(0,o.createElement)(O.A,{exampleOnly:!0},(0,u.NO)(g)),D({id:"About-Checkbox-Button"},"About Checkbox Button"),T({},"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."),T({},"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."),T({},"Use the add button if the component you’re building:"),M({},B({},"Exists without other multi-select elements (i.e. checkboxes)"),B({},"Allows users to select multiple entities"),B({},"Semantically fits the add/remove model")),D({id:"Structure-and-Implementation"},"Structure and Implementation"),T({},"The checkbox ",w({},"<input>")," is visually hidden with ",w({},".slds-assistive-text")," and a faux checkbox is created using the ",E({href:"/components/icons"},"icon blueprint")," which allows the display of an icon instead of the standard checkbox."),T({},"Click and tap events are captured by a ",w({},"<label>")," that encases the entire blueprint. The ",w({},"for")," attribute of your ",w({},"<label>")," must match the ",w({},"id")," attribute of your ",w({},"<input>"),"."),T({},"The states of the checkbox button are styled with the following classes:"),A({},X({},F({},N({},"Class"),N({},"State"),N({},"Description"))),P({},F({},I({},w({},".slds-checkbox-button_is-checked")),I({},"checked"),I({},"The checked state when the checkbox button has been selected")),F({},I({},w({},".slds-checkbox-button_is-disabled")),I({},"disabled"),I({},"The disabled state when the checkbox button has been disabled")),F({},I({},w({},".slds-checkbox-button_is-focused")),I({},"focused"),I({},"The focused state when the checkbox button has focus; important for accessibility")))),T({},"When implementing this blueprint, monitor the state of the checkbox ",w({},"<input>")," and apply the appropriate state class listed in the above chart based on the current state of the checkbox ",w({},"<input>"),"."),T({},"It is possible to change the icon used within the checkbox button, see ",E({href:"#different-icon"},"Different Icons")," for more details."),j({id:"Mobile"},"Mobile"),(0,o.createElement)(S.s9,{patternSpecificText:"checkbox buttons will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),(0,o.createElement)(O.A,{frameOnly:!0,frameTitle:"Example mobile styles for checkbox buttons"},(0,u.NO)(g)),D({id:"Base"},"Base"),(0,o.createElement)(O.A,null,(0,u.NO)(g)),D({id:"States"},"States"),j({id:"Checked"},"Checked"),(0,o.createElement)(O.A,null,(0,u.NO)(_,"checkbox-button-checked")),j({id:"Disabled"},"Disabled"),(0,o.createElement)(O.A,null,(0,u.NO)(_,"checkbox-button-disabled")),j({id:"Checked-and-Disabled"},"Checked and Disabled"),(0,o.createElement)(O.A,null,(0,u.NO)(_,"checkbox-button-checked-disabled")),D({id:"Examples"},"Examples"),j({id:"Different-Icon"},"Different Icon"),T({},"You may change the utility icon used by the checkbox button depending on the action you are communicating. Reference the ",E({href:"/icons/#utility"},"utility icon listing")," for all available options."),T({},"This example is using the ",w({},"recycle_bin_empty")," utility icon as its base state and the ",w({},"recycle_bin_full")," utility icon as its checked state."),(0,o.createElement)(O.A,null,(0,u.NO)(C,"checkbox-button-icon-symbol")),(0,o.createElement)(O.A,null,(0,u.NO)(C,"checkbox-button-checked-icon-symbol")))},L=function(){return(0,i.Qr)(U())}},1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM}},c={};function i(e){var t=c[e];if(void 0!==t)return t.exports;var n=c[e]={id:e,exports:{}};return o[e](n,n.exports,i),n.exports}i.m=o,i.amdO={},e=[],i.O=function(t,n,o,c){if(!n){var r=1/0;for(u=0;u<e.length;u++){n=e[u][0],o=e[u][1],c=e[u][2];for(var a=!0,s=0;s<n.length;s++)(!1&c||r>=c)&&Object.keys(i.O).every(function(e){return i.O[e](n[s])})?n.splice(s--,1):(a=!1,c<r&&(r=c));if(a){e.splice(u--,1);var l=o();void 0!==l&&(t=l)}}return t}c=c||0;for(var u=e.length;u>0&&e[u-1][2]>c;u--)e[u]=e[u-1];e[u]=[n,o,c]},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},i.t=function(e,o){if(1&o&&(e=this(e)),8&o)return e;if("object"==typeof e&&e){if(4&o&&e.__esModule)return e;if(16&o&&"function"==typeof e.then)return e}var c=Object.create(null);i.r(c);var r={};t=t||[null,n({}),n([]),n(n)];for(var a=2&o&&e;("object"==typeof a||"function"==typeof a)&&!~t.indexOf(a);a=n(a))Object.getOwnPropertyNames(a).forEach(function(t){r[t]=function(){return e[t]}});return r.default=function(){return e},i.d(c,r),c},i.d=function(e,t){for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},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=785,function(){var e={785:0};i.O.j=function(t){return 0===e[t]};var t=function(t,n){var o,c,r=n[0],a=n[1],s=n[2],l=0;if(r.some(function(t){return 0!==e[t]})){for(o in a)i.o(a,o)&&(i.m[o]=a[o]);if(s)var u=s(i)}for(t&&t(n);l<r.length;l++)c=r[l],i.o(e,c)&&e[c]&&e[c][0](),e[c]=0;return i.O(u)},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))}(),i.nc=void 0;var r=i.O(void 0,[3540],function(){return i(598)});r=i.O(r),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/checkbox-button/docs.mdx.js"]=r}();