diff --git a/packages/components/src/components/Checkbox/Checkbox.tsx b/packages/components/src/components/Checkbox/Checkbox.tsx index c50e0093..c39fa19d 100644 --- a/packages/components/src/components/Checkbox/Checkbox.tsx +++ b/packages/components/src/components/Checkbox/Checkbox.tsx @@ -57,7 +57,7 @@ export const Checkbox: FC = ({ ...containerStyle, borderLeftWidth: spacing.vadsSpace2xs, borderColor: theme.vadsColorFormsBorderError, - paddingLeft: spacing.vadsSpaceLg, + paddingLeft: spacing.vadsSpaceMd, } } @@ -73,7 +73,7 @@ export const Checkbox: FC = ({ const tileStyle: ViewStyle = { ...pressableBaseStyle, borderWidth: 2, - borderRadius: spacing.vadsSpace2xs, + borderRadius: 4, padding: spacing.vadsSpaceSm, paddingRight: spacing.vadsSpaceMd, borderColor: checked diff --git a/packages/components/src/components/CheckboxGroup/CheckboxGroup.stories.tsx b/packages/components/src/components/CheckboxGroup/CheckboxGroup.stories.tsx index b5fa03ba..e2924171 100644 --- a/packages/components/src/components/CheckboxGroup/CheckboxGroup.stories.tsx +++ b/packages/components/src/components/CheckboxGroup/CheckboxGroup.stories.tsx @@ -54,11 +54,15 @@ const statefulComponentRenderer = (props: CheckboxGroupProps) => { } const items = [ - { text: 'Option 1' }, + { text: 'Option 1', description: 'Description for option 1' }, { text: 'Option 2', a11yLabel: 'Accessibility override for option 2', value: '2', + description: { + text: 'Description for option 2', + a11yLabel: 'Accessibility override for description', + }, }, { text: 'Option 3' }, { text: 'Option 4' }, diff --git a/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx b/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx index d600d6a0..8e11c933 100644 --- a/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx +++ b/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx @@ -5,11 +5,17 @@ import React, { FC, Fragment } from 'react' import { Checkbox } from '../Checkbox/Checkbox' import { ComponentWrapper } from '../../wrapper' import { Error, Header, Hint } from '../shared/FormText' -import { FormElementProps, TextWithA11y } from '../../types' +import { + FormElementProps, + StringOrTextWithA11y, + TextWithA11y, +} from '../../types' import { Spacer } from '../Spacer/Spacer' import { useTheme } from '../../utils' type TextWithA11yAndValue = TextWithA11y & { + /** Description for checkbox item */ + description?: StringOrTextWithA11y /** Value or ID for checkbox item if different than checkbox label */ value?: string | number /** Optional TestID */ @@ -115,7 +121,7 @@ export const CheckboxGroup: FC = ({ ...containerStyle, borderLeftWidth: spacing.vadsSpace2xs, borderColor: theme.vadsColorFormsBorderError, - paddingLeft: spacing.vadsSpaceLg, + paddingLeft: spacing.vadsSpaceMd, } } @@ -139,6 +145,7 @@ export const CheckboxGroup: FC = ({ handleCheckboxChange(value)} testID={isObject ? item.testID : undefined}