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

fix(application-system): Fix radio and description field spacing #17256

Merged
merged 6 commits into from
Dec 18, 2024
Merged

fix(application-system): Fix radio and description field spacing #17256

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d8b7ad8
Adjust spacing for builder fields
norda-gunni Dec 16, 2024
ba68962
Add defaulting to descriptionformfield
norda-gunni Dec 16, 2024
86ba920
Add defaulting to radioformfield
norda-gunni Dec 16, 2024
b66beb7
Revert form type changes and add paddingBottom variable support to ra…
norda-gunni Dec 16, 2024
93f55f0
Minor cleanup
norda-gunni Dec 17, 2024
cebf9aa
Merge branch 'main' into sa-spacing-fix
kodiakhq[bot] Dec 18, 2024
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
8 changes: 5 additions & 3 deletions libs/application/ui-fields/src/lib/DescriptionFormField/DescriptionFormField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,13 @@ export const DescriptionFormField: FC<
> = ({ application, field, showFieldName }) => {
const { formatMessage, lang: locale } = useLocale()

const { space: paddingTop = 2, marginBottom, marginTop } = field

return (
<Box
paddingTop={field.space}
marginBottom={field.marginBottom}
marginTop={field.marginTop}
paddingTop={paddingTop}
marginBottom={marginBottom}
marginTop={marginTop}
>
{showFieldName && (
<Text variant={field.titleVariant}>
Expand Down
8 changes: 6 additions & 2 deletions libs/application/ui-fields/src/lib/RadioFormField/RadioFormField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,13 @@ export const RadioFormField: FC<React.PropsWithChildren<Props>> = ({
[options, application, locale],
)

const paddingTop = field.space ?? 2

return (
<Box
marginTop={marginTop}
marginBottom={marginBottom}
paddingTop={field.space}
paddingTop={paddingTop}
role="region"
aria-labelledby={id + 'title'}
>
Expand All @@ -80,7 +82,7 @@ export const RadioFormField: FC<React.PropsWithChildren<Props>> = ({
/>
)}

<Box marginTop={2}>
<Box>
<RadioController
largeButtons={largeButtons}
backgroundColor={backgroundColor}
Expand Down Expand Up @@ -114,6 +116,8 @@ export const RadioFormField: FC<React.PropsWithChildren<Props>> = ({
}))}
onSelect={field.onSelect}
hasIllustration={hasIllustration}
paddingBottom={0}
paddingTop={2}
/>
</Box>
</Box>
Expand Down
14 changes: 12 additions & 2 deletions libs/shared/form-fields/src/lib/RadioController/RadioController.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
InputError,
InputBackgroundColor,
TagVariant,
BoxProps,
} from '@island.is/island-ui/core'
import { TestSupport } from '@island.is/island-ui/utils'

Expand Down Expand Up @@ -39,6 +40,8 @@ interface Props {
backgroundColor?: InputBackgroundColor
onSelect?: (s: string) => void
hasIllustration?: boolean
paddingBottom?: BoxProps['paddingBottom']
paddingTop?: BoxProps['paddingTop']
}

export const RadioController: FC<React.PropsWithChildren<Props>> = ({
Expand All @@ -54,6 +57,8 @@ export const RadioController: FC<React.PropsWithChildren<Props>> = ({
split = '1/1',
smallScreenSplit = '1/1',
hasIllustration = false,
paddingBottom = 2,
paddingTop = 0,
}) => {
const { clearErrors, setValue } = useFormContext()

Expand All @@ -66,7 +71,8 @@ export const RadioController: FC<React.PropsWithChildren<Props>> = ({
{options.map((option, index) => (
<GridColumn
span={[smallScreenSplit, split]}
paddingBottom={2}
paddingBottom={paddingBottom}
paddingTop={paddingTop}
key={`option-${option.value}`}
>
<RadioButton
Expand Down Expand Up @@ -97,7 +103,11 @@ export const RadioController: FC<React.PropsWithChildren<Props>> = ({
))}

{error && (
<GridColumn span={['1/1', split]} paddingBottom={2}>
<GridColumn
span={['1/1', split]}
paddingBottom={paddingBottom}
paddingTop={paddingTop}
>
<InputError errorMessage={error} />
</GridColumn>
)}
Expand Down
Loading