Merge pull request #444 from mashmatrix/allow-node-in-label

use children for label content in checkbox/radio cmp

Author: stomita

.circleci/config.yml

@@ -2,11 +2,11 @@ version: 2.1
 
 defaults: &defaults
   docker:
-    - image: cimg/node:16.14.2-browsers
+    - image: cimg/node:20.12.1-browsers
   working_directory: ~/project
 
 orbs:
-  browser-tools: circleci/browser-tools@1.4.6
+  browser-tools: circleci/browser-tools@1.4.8
 
 jobs:
   install:

src/scripts/Checkbox.tsx

@@ -32,6 +32,7 @@ export const Checkbox: FC<CheckboxProps> = (props) => {
     cols,
     elementRef,
     inputRef,
+    children,
     ...rprops
   } = props;
   const { grouped } = useContext(CheckboxGroupContext);
@@ -41,7 +42,7 @@ export const Checkbox: FC<CheckboxProps> = (props) => {
     <label className={checkClassNames}>
       <input ref={inputRef} type='checkbox' {...rprops} />
       <span className='slds-checkbox_faux' />
-      <span className='slds-form-element__label'>{label}</span>
+      <span className='slds-form-element__label'>{label || children}</span>
     </label>
   );
   return grouped ? (

src/scripts/Radio.tsx

@@ -23,6 +23,7 @@ export const Radio: FC<RadioProps> = ({
   value,
   inputRef,
   onChange: onChange_,
+  children,
   ...props
 }) => {
   const { name: grpName, onValueChange } = useContext(RadioGroupContext);
@@ -46,7 +47,7 @@ export const Radio: FC<RadioProps> = ({
         {...props}
       />
       <span className='slds-radio_faux' />
-      <span className='slds-form-element__label'>{label}</span>
+      <span className='slds-form-element__label'>{label || children}</span>
     </label>
   );
 };