diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx index 248c2190b..ef3e3e065 100644 --- a/src/components/Checkbox/Checkbox.stories.tsx +++ b/src/components/Checkbox/Checkbox.stories.tsx @@ -46,3 +46,31 @@ export const Disabled = () => <> {renderDisabledCheckboxes('light', 1.6)} {renderDisabledCheckboxes('light', 2)} + +const VerticalCheckboxGroup = styled.div` + text-transform: capitalize; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + & + & { + margin-top: 3.2rem; + } +`; + +export const WithTooltip = () => <> + +

Primary

+ Checkbox label + Checked label with tooltip + Disabled label with tooltip + Disabled checked label with tooltip +
+ +

Light

+ Checkbox label + Checked label with tooltip + Disabled label with tooltip + Disabled checked label with tooltip +
+; diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 55dbe89b5..0b8ccbf7a 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -2,6 +2,8 @@ import { LabelHTMLAttributes, PropsWithChildren } from "react"; import { checkboxLabelStyles, checkboxInputStyles, CheckboxVariant, CheckboxSize } from "./sharedCheckboxStyles"; import styled from "styled-components"; import { InputHTMLAttributes } from "react"; +import { mergeProps } from 'react-aria'; +import { useLabelTooltip } from '../Tooltip'; const StyledLabel = styled.label<{ bold: boolean; variant: CheckboxVariant; isDisabled?: boolean; }>` ${checkboxLabelStyles} @@ -12,19 +14,35 @@ const StyledInput = styled.input<{ variant: CheckboxVariant; checkboxSize: Check ${checkboxInputStyles} `; +const LabelWithTooltipWrapper = styled.div` + display: inline-block; + position: relative; + font-size: 1.6rem; +`; + type CheckboxProps = PropsWithChildren< Omit, 'type'> & { variant?: CheckboxVariant; size?: CheckboxSize; bold?: boolean; labelProps?: LabelHTMLAttributes; + tooltipText?: string; }>; -export const Checkbox = ({ children, disabled, variant = 'primary', bold = false, size = 1.6, labelProps, ...props }: CheckboxProps) => { - return ( - - - {children} - - ); +export const Checkbox = ({ children, disabled, variant = 'primary', bold = false, size = 1.6, labelProps, tooltipText, ...props }: CheckboxProps) => { + const { triggerRef, triggerProps, labelDescription, tooltip } = useLabelTooltip(tooltipText); + + return tooltipText + ? + + + {children} + {labelDescription} + + {tooltip} + + : + + {children} + ; }; diff --git a/src/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap b/src/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap index 3669d188f..fef9c1890 100644 --- a/src/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap +++ b/src/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap @@ -3,10 +3,10 @@ exports[`Checkbox allows setting props on label 1`] = `