Add tooltip to checkboxes

Author: P-Gill97

src/components/Checkbox/Checkbox.stories.tsx

@@ -46,3 +46,9 @@ export const Disabled = () => <>
   {renderDisabledCheckboxes('light', 1.6)}
   {renderDisabledCheckboxes('light', 2)}
 </>
+
+export const WithTooltip = () => <CheckboxGroup>
+  <Checkbox tooltipText="Tooltip text for checkbox goes here">Checkbox label</Checkbox>
+  <Checkbox disabled tooltipText="This option is unavailable">Disabled label with tooltip</Checkbox>
+  <Checkbox disabled defaultChecked tooltipText="This option is unavailable">Disabled checked label with tooltip</Checkbox>
+</CheckboxGroup>;

src/components/Checkbox/Checkbox.tsx

@@ -1,7 +1,10 @@
-import { LabelHTMLAttributes, PropsWithChildren } from "react";
+import React, { LabelHTMLAttributes, PropsWithChildren } from "react";
 import {  checkboxLabelStyles, checkboxInputStyles, CheckboxVariant, CheckboxSize } from "./sharedCheckboxStyles";
 import styled from "styled-components";
 import { InputHTMLAttributes } from "react";
+import {useTooltipTriggerState} from 'react-stately';
+import {useTooltipTrigger} from 'react-aria';
+import { CustomTooltip } from '../Tooltip';
 
 const StyledLabel = styled.label<{ bold: boolean; variant: CheckboxVariant; isDisabled?: boolean; }>`
   ${checkboxLabelStyles}
@@ -12,19 +15,38 @@ const StyledInput = styled.input<{ variant: CheckboxVariant; checkboxSize: Check
   ${checkboxInputStyles}
 `;
 
+const LabelWithTooltipWrapper = styled.div`
+  display: inline-block;
+  position: relative;
+`;
+
 type CheckboxProps = PropsWithChildren<
   Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
   variant?: CheckboxVariant;
   size?: CheckboxSize;
   bold?: boolean;
   labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
+  tooltipText?: string;
 }>;
 
-export const Checkbox = ({ children, disabled, variant = 'primary', bold = false, size = 1.6, labelProps, ...props }: CheckboxProps) => {
-  return (
-    <StyledLabel bold={bold} variant={variant} isDisabled={disabled} {...labelProps}>
-      <StyledInput {...props} type="checkbox" variant={variant} checkboxSize={size} isDisabled={disabled} disabled={disabled} />
-      {children}
-    </StyledLabel>
-  );
+export const Checkbox = ({ children, disabled, variant = 'primary', bold = false, size = 1.6, labelProps, tooltipText, ...props }: CheckboxProps) => {
+  const state = useTooltipTriggerState({delay: 0});
+  const ref = React.useRef(null);
+
+  const { triggerProps, tooltipProps } = useTooltipTrigger({delay: 0}, state, ref);
+
+  return tooltipText
+    ? <LabelWithTooltipWrapper>
+        <StyledLabel ref={ref} bold={bold} variant={variant} isDisabled={disabled} {...triggerProps} {...labelProps}>
+          <StyledInput {...props} type="checkbox" onFocus={() => state.open()} variant={variant} checkboxSize={size} isDisabled={disabled} disabled={disabled} />
+          {children}
+          {state.isOpen && (
+            <CustomTooltip state={state} {...tooltipProps} placement='right'>{tooltipText}</CustomTooltip>
+          )}
+        </StyledLabel>
+      </LabelWithTooltipWrapper>
+    : <StyledLabel bold={bold} variant={variant} isDisabled={disabled} {...labelProps}>
+        <StyledInput {...props} type="checkbox" variant={variant} checkboxSize={size} isDisabled={disabled} disabled={disabled} />
+        {children}
+      </StyledLabel>;
 };

src/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap

@@ -3,10 +3,10 @@
 exports[`Checkbox allows setting props on label 1`] = `
 <label
   aria-label="custom label"
-  className="sc-bczRLJ XfrOB"
+  className="sc-hKMtZM gNqItn"
 >
   <input
-    className="sc-gsnTZi dskNep"
+    className="sc-eCYdqJ gpoUA"
     type="checkbox"
   />
   Click Me
@@ -15,10 +15,10 @@ exports[`Checkbox allows setting props on label 1`] = `
 
 exports[`Checkbox handles disabled state 1`] = `
 <label
-  className="sc-bczRLJ jDFcYw"
+  className="sc-hKMtZM uiIZG"
 >
   <input
-    className="sc-gsnTZi dJvfbo"
+    className="sc-eCYdqJ fBIvaF"
     disabled={true}
     type="checkbox"
   />
@@ -28,10 +28,10 @@ exports[`Checkbox handles disabled state 1`] = `
 
 exports[`Checkbox handles options 1`] = `
 <label
-  className="sc-bczRLJ XfrOB"
+  className="sc-hKMtZM gNqItn"
 >
   <input
-    className="sc-gsnTZi dskNep"
+    className="sc-eCYdqJ gpoUA"
     type="checkbox"
   />
   Click Me
@@ -40,10 +40,10 @@ exports[`Checkbox handles options 1`] = `
 
 exports[`Checkbox matches snapshot 1`] = `
 <label
-  className="sc-bczRLJ fIuhsq"
+  className="sc-hKMtZM dHABFU"
 >
   <input
-    className="sc-gsnTZi ehAXiz"
+    className="sc-eCYdqJ glqLW"
     type="checkbox"
   />
   Click Me

src/components/Tree/__snapshots__/Tree.spec.tsx.snap

@@ -41,10 +41,10 @@ exports[`Tree matches snapshot 1`] = `
         style="display: contents;"
       >
         <label
-          class="sc-jSMfEi fnAjTL"
+          class="sc-ftvSup kBXYav"
         >
           <input
-            class="sc-gKXOVf bROlip"
+            class="sc-papXJ eMMRLt"
             slot="check"
             type="checkbox"
             value="one"