Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: groups inputs to display danger when on error #4502

Merged
merged 1 commit into from
Dec 2, 2024
Merged

fix: groups inputs to display danger when on error #4502

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/early-geese-exist.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@ultraviolet/form": patch
"@ultraviolet/ui": patch
---

Fix `<RadioGroup />`, `<ToggleGroup />`, `<CheckboxGroup />` and `<SelectableCardGroup />` to have children in error state when parent is in error
4 changes: 4 additions & 0 deletions packages/form/src/components/RadioGroupField/__tests__/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,6 +314,7 @@ exports[`RadioField > should render correctly checked 1`] = `
aria-disabled="false"
class="emotion-14 emotion-15"
data-checked="false"
data-error="false"
>
<input
aria-disabled="false"
Expand Down Expand Up @@ -364,6 +365,7 @@ exports[`RadioField > should render correctly checked 1`] = `
aria-disabled="false"
class="emotion-14 emotion-15"
data-checked="true"
data-error="false"
>
<input
aria-disabled="false"
Expand Down Expand Up @@ -730,6 +732,7 @@ exports[`RadioField > should trigger events correctly 1`] = `
aria-disabled="false"
class="emotion-14 emotion-15"
data-checked="true"
data-error="false"
>
<input
aria-disabled="false"
Expand Down Expand Up @@ -780,6 +783,7 @@ exports[`RadioField > should trigger events correctly 1`] = `
aria-disabled="false"
class="emotion-14 emotion-15"
data-checked="false"
data-error="false"
>
<input
aria-disabled="false"
Expand Down
9 changes: 9 additions & 0 deletions .../form/src/components/SelectableCardGroupField/__tests__/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -375,6 +375,7 @@ exports[`SelectableCardField > should render correctly 1`] = `
class="emotion-10 emotion-11"
data-checked="false"
data-disabled="false"
data-error="false"
data-has-label="true"
data-image="none"
data-type="radio"
Expand All @@ -388,6 +389,7 @@ exports[`SelectableCardField > should render correctly 1`] = `
aria-disabled="false"
class="emotion-14 emotion-15 emotion-16"
data-checked="false"
data-error="false"
>
<input
aria-disabled="false"
Expand Down Expand Up @@ -437,6 +439,7 @@ exports[`SelectableCardField > should render correctly 1`] = `
class="emotion-10 emotion-11"
data-checked="false"
data-disabled="false"
data-error="false"
data-has-label="true"
data-image="none"
data-type="radio"
Expand All @@ -450,6 +453,7 @@ exports[`SelectableCardField > should render correctly 1`] = `
aria-disabled="false"
class="emotion-14 emotion-15 emotion-16"
data-checked="false"
data-error="false"
>
<input
aria-disabled="false"
Expand Down Expand Up @@ -1004,6 +1008,7 @@ exports[`SelectableCardField > should render correctly checked as a checkbox 1`]
class="emotion-10 emotion-11"
data-checked="true"
data-disabled="false"
data-error="false"
data-has-label="true"
data-image="none"
data-testid="checked"
Expand Down Expand Up @@ -1454,6 +1459,7 @@ exports[`SelectableCardField > should render correctly checked as radiofield 1`]
class="emotion-10 emotion-11"
data-checked="true"
data-disabled="false"
data-error="false"
data-has-label="true"
data-image="none"
data-testid="checked"
Expand All @@ -1468,6 +1474,7 @@ exports[`SelectableCardField > should render correctly checked as radiofield 1`]
aria-disabled="false"
class="emotion-14 emotion-15 emotion-16"
data-checked="true"
data-error="false"
>
<input
aria-disabled="false"
Expand Down Expand Up @@ -2023,6 +2030,7 @@ exports[`SelectableCardField > should trigger events correctly 1`] = `
class="emotion-10 emotion-11"
data-checked="false"
data-disabled="false"
data-error="false"
data-has-label="true"
data-image="none"
data-type="checkbox"
Expand Down Expand Up @@ -2091,6 +2099,7 @@ exports[`SelectableCardField > should trigger events correctly 1`] = `
class="emotion-10 emotion-11"
data-checked="false"
data-disabled="false"
data-error="false"
data-has-label="true"
data-image="none"
data-type="checkbox"
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/Checkbox/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -452,7 +452,7 @@ export const Checkbox = forwardRef(
</Text>
) : null}

{error ? (
{error && typeof error !== 'boolean' ? (
<ErrorText variant="caption" as="span" sentiment="danger">
{error}
</ErrorText>
Expand Down
10 changes: 6 additions & 4 deletions packages/ui/src/components/CheckboxGroup/__tests__/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1504,11 +1504,12 @@ exports[`CheckboxGroup > renders correctly with error content 1`] = `
aria-disabled="false"
class="emotion-12 emotion-13 emotion-14"
data-checked="false"
data-error="false"
data-error="true"
>
<input
aria-checked="false"
aria-invalid="false"
aria-describedby=":ru:-hint"
aria-invalid="true"
class="emotion-15 emotion-16"
id=":ru:"
name="Checkbox.value-1"
Expand Down Expand Up @@ -1561,11 +1562,12 @@ exports[`CheckboxGroup > renders correctly with error content 1`] = `
aria-disabled="false"
class="emotion-12 emotion-13 emotion-14"
data-checked="false"
data-error="false"
data-error="true"
>
<input
aria-checked="false"
aria-invalid="false"
aria-describedby=":r11:-hint"
aria-invalid="true"
class="emotion-15 emotion-16"
id=":r11:"
name="Checkbox.value-2"
Expand Down
8 changes: 5 additions & 3 deletions packages/ui/src/components/CheckboxGroup/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { Text } from '../Text'
type CheckboxGroupContextType = {
groupName: string
groupValues: string[]
error: boolean
} & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange'>> &
Pick<InputHTMLAttributes<HTMLInputElement>, 'required'>

Expand Down Expand Up @@ -57,7 +58,7 @@ export const CheckboxGroupCheckbox = ({
)
}

const { groupName, onChange, groupValues } = context
const { groupName, onChange, groupValues, error: errorContext } = context

const checkboxName = `${groupName}.${name ?? ''}`
const checkboxValue = `${value}`
Expand All @@ -69,7 +70,7 @@ export const CheckboxGroupCheckbox = ({
onFocus={onFocus}
onBlur={onBlur}
disabled={disabled}
error={error}
error={error || errorContext}
name={checkboxName}
value={checkboxValue}
helper={helper}
Expand Down Expand Up @@ -128,8 +129,9 @@ export const CheckboxGroup = ({
groupValues: value ?? [],
onChange,
required,
error: !!error,
}),
[name, value, onChange, required],
[name, value, onChange, required, error],
)

return (
Expand Down
12 changes: 10 additions & 2 deletions packages/ui/src/components/RadioGroup/__tests__/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@ exports[`RadioGroup > renders correctly 1`] = `
aria-disabled="false"
class="emotion-14 emotion-15"
data-checked="true"
data-error="false"
>
<input
aria-disabled="false"
Expand Down Expand Up @@ -362,6 +363,7 @@ exports[`RadioGroup > renders correctly 1`] = `
aria-disabled="false"
class="emotion-14 emotion-15"
data-checked="false"
data-error="false"
>
<input
aria-disabled="false"
Expand Down Expand Up @@ -724,6 +726,7 @@ exports[`RadioGroup > renders correctly with direction row 1`] = `
aria-disabled="false"
class="emotion-14 emotion-15"
data-checked="true"
data-error="false"
>
<input
aria-disabled="false"
Expand Down Expand Up @@ -775,6 +778,7 @@ exports[`RadioGroup > renders correctly with direction row 1`] = `
aria-disabled="false"
class="emotion-14 emotion-15"
data-checked="false"
data-error="false"
>
<input
aria-disabled="false"
Expand Down Expand Up @@ -1149,10 +1153,11 @@ exports[`RadioGroup > renders correctly with error content 1`] = `
aria-disabled="false"
class="emotion-14 emotion-15"
data-checked="true"
data-error="true"
>
<input
aria-disabled="false"
aria-invalid="false"
aria-invalid="true"
checked=""
class="emotion-16 emotion-17"
id="radio-value-1"
Expand Down Expand Up @@ -1200,10 +1205,11 @@ exports[`RadioGroup > renders correctly with error content 1`] = `
aria-disabled="false"
class="emotion-14 emotion-15"
data-checked="false"
data-error="true"
>
<input
aria-disabled="false"
aria-invalid="false"
aria-invalid="true"
class="emotion-16 emotion-17"
id="radio-value-2"
name="radio"
Expand Down Expand Up @@ -1579,6 +1585,7 @@ exports[`RadioGroup > renders correctly with helper content 1`] = `
aria-disabled="false"
class="emotion-14 emotion-15"
data-checked="true"
data-error="false"
>
<input
aria-disabled="false"
Expand Down Expand Up @@ -1630,6 +1637,7 @@ exports[`RadioGroup > renders correctly with helper content 1`] = `
aria-disabled="false"
class="emotion-14 emotion-15"
data-checked="false"
data-error="false"
>
<input
aria-disabled="false"
Expand Down
8 changes: 5 additions & 3 deletions packages/ui/src/components/RadioGroup/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { Text } from '../Text'
type RadioGroupContextType = {
groupName: string
groupValue: string | number
error: boolean
} & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange'>> &
Pick<InputHTMLAttributes<HTMLInputElement>, 'required'>

Expand Down Expand Up @@ -53,7 +54,7 @@ const RadioGroupRadio = ({
throw new Error('RadioGroup.Radio can only be used inside a RadioGroup')
}

const { groupName, onChange, groupValue } = context
const { groupName, onChange, groupValue, error: errorContext } = context

return (
<Radio
Expand All @@ -62,7 +63,7 @@ const RadioGroupRadio = ({
onFocus={onFocus}
onBlur={onBlur}
disabled={disabled}
error={error}
error={error || errorContext}
name={groupName ?? name}
value={value}
label={label}
Expand Down Expand Up @@ -120,8 +121,9 @@ export const RadioGroup = ({
groupValue: value,
onChange,
required,
error: !!error,
}),
[name, value, onChange, required],
[name, value, onChange, required, error],
)

return (
Expand Down
Loading
Loading