Change to accept tooltips in some components that do not use FormElement internally

Author: kosuke-k

src/scripts/CheckboxGroup.tsx

@@ -5,10 +5,12 @@ import React, {
   useContext,
   useMemo,
   useRef,
+  ReactNode,
 } from 'react';
 import classnames from 'classnames';
 import { FormElementProps } from './FormElement';
 import { FieldSetColumnContext } from './FieldSet';
+import { TooltipContent } from './TooltipContent';
 import { useEventCallback } from './hooks';
 import { createFC } from './common';
 import { Bivariant } from './typeUtils';
@@ -32,6 +34,8 @@ export type CheckboxGroupProps = {
   error?: FormElementProps['error'];
   name?: string;
   cols?: number;
+  tooltip?: ReactNode;
+  tooltipIcon?: string;
   elementRef?: Ref<HTMLFieldSetElement>;
   onValueChange?: Bivariant<(values: CheckboxValueType[]) => void>;
 } & FieldsetHTMLAttributes<HTMLFieldSetElement>;
@@ -51,6 +55,8 @@ export const CheckboxGroup = createFC<
       style,
       required,
       error,
+      tooltip,
+      tooltipIcon,
       elementRef,
       onValueChange,
       onChange: onChange_,
@@ -111,14 +117,19 @@ export const CheckboxGroup = createFC<
         {...rprops}
         onChange={onChange}
       >
-        <legend className='slds-form-element__label'>
-          {required ? (
-            <abbr className='slds-required' title='required'>
-              *
-            </abbr>
-          ) : undefined}
-          {label}
-        </legend>
+        <div className='slds-grid slds-grid_vertical-align-center'>
+          <legend className='slds-form-element__label'>
+            {required ? (
+              <abbr className='slds-required' title='required'>
+                *
+              </abbr>
+            ) : undefined}
+            {label}
+          </legend>
+          {tooltip ? (
+            <TooltipContent icon={tooltipIcon}>{tooltip}</TooltipContent>
+          ) : null}
+        </div>
         <div className='slds-form-element__control' ref={controlElRef}>
           <CheckboxGroupContext.Provider value={grpCtx}>
             {children}

src/scripts/RadioGroup.tsx

@@ -4,9 +4,11 @@ import React, {
   createContext,
   useContext,
   useMemo,
+  ReactNode,
 } from 'react';
 import classnames from 'classnames';
 import { FieldSetColumnContext } from './FieldSet';
+import { TooltipContent } from './TooltipContent';
 import { createFC } from './common';
 import { Bivariant } from './typeUtils';
 
@@ -32,6 +34,8 @@ export type RadioGroupProps = {
   error?: boolean | string | { message: string };
   name?: string;
   cols?: number;
+  tooltip?: ReactNode;
+  tooltipIcon?: string;
   elementRef?: Ref<HTMLFieldSetElement>;
   onValueChange?: Bivariant<(value: RadioValueType) => void>;
 } & HTMLAttributes<HTMLFieldSetElement>;
@@ -50,6 +54,8 @@ export const RadioGroup = createFC<RadioGroupProps, { isFormElement: boolean }>(
       style,
       children,
       name,
+      tooltip,
+      tooltipIcon,
       elementRef,
       onValueChange,
       ...rprops
@@ -89,14 +95,19 @@ export const RadioGroup = createFC<RadioGroupProps, { isFormElement: boolean }>(
         style={grpStyles}
         {...rprops}
       >
-        <legend className='slds-form-element__label'>
-          {required ? (
-            <abbr className='slds-required' title='required'>
-              *
-            </abbr>
-          ) : undefined}
-          {label}
-        </legend>
+        <div className='slds-grid slds-grid_vertical-align-center'>
+          <legend className='slds-form-element__label'>
+            {required ? (
+              <abbr className='slds-required' title='required'>
+                *
+              </abbr>
+            ) : undefined}
+            {label}
+          </legend>
+          {tooltip ? (
+            <TooltipContent icon={tooltipIcon}>{tooltip}</TooltipContent>
+          ) : null}
+        </div>
         <div className='slds-form-element__control'>
           <RadioGroupContext.Provider value={grpCtx}>
             {children}

stories/Checkbox.stories.tsx

@@ -176,3 +176,33 @@ export const Disabled: StoryObj<StoryProps> = {
     },
   },
 };
+
+/**
+ *
+ */
+export const WithTooltip: StoryObj<StoryProps> = {
+  render: ({ checkbox1, checkbox2, ...args }) => (
+    <CheckboxGroup {...args}>
+      <Checkbox {...checkbox1} />
+      <Checkbox {...checkbox2} />
+    </CheckboxGroup>
+  ),
+  name: 'With tooltip',
+  args: {
+    label: 'Checkbox Group Label',
+    tooltip: 'Tooltip Text',
+    checkbox1: {
+      label: 'Checkbox Label One',
+      value: '1',
+    },
+    checkbox2: {
+      label: 'Checkbox Label Two',
+      value: '2',
+    },
+  },
+  parameters: {
+    docs: {
+      storyDescription: 'Checkbox group with tooltip',
+    },
+  },
+};

stories/Radio.stories.tsx

@@ -136,3 +136,26 @@ export const Disabled: StoryObj<StoryProps> = {
     },
   },
 };
+
+/**
+ *
+ */
+export const WithTooltip: StoryObj<StoryProps> = {
+  render: (args) => (
+    <RadioGroup {...args}>
+      <Radio label='Radio Label One' value='1' />
+      <Radio label='Radio Label Two' value='2' />
+    </RadioGroup>
+  ),
+  args: {
+    label: 'Radio Group Label',
+    tooltip: 'Tooltip Text',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Radio Group control with tooltip',
+      },
+    },
+  },
+};