Skip to content

Commit 09977a2

Browse files
committed
fix(ui-form-field): should not change layout when only screenreader-only message is present
INSTUI-4673
1 parent 350a05c commit 09977a2

File tree

1 file changed

+11
-3
lines changed
  • packages/ui-form-field/src/FormFieldLayout

1 file changed

+11
-3
lines changed

packages/ui-form-field/src/FormFieldLayout/styles.ts

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,10 +75,16 @@ const generateStyle = (
7575
props: FormFieldLayoutProps,
7676
styleProps: FormFieldStyleProps
7777
): FormFieldLayoutStyle => {
78-
const { inline, layout, vAlign, labelAlign, margin } = props
78+
const { inline, layout, vAlign, labelAlign, margin, messages } = props
7979
const { hasMessages, hasVisibleLabel, hasNewErrorMsgAndIsGroup } = styleProps
8080
const cssMargin = mapSpacingToShorthand(margin, componentTheme.spacing)
8181
const isInlineLayout = layout === 'inline'
82+
83+
const hasNonEmptyMessages = messages?.reduce(
84+
(acc, message) => acc || message.type !== 'screenreader-only',
85+
false
86+
)
87+
8288
// This is quite ugly, we should simplify it
8389
const gridTemplateAreas = generateGridLayout(
8490
isInlineLayout,
@@ -150,7 +156,7 @@ const generateStyle = (
150156
)
151157
},
152158
columnGap: '0.375rem',
153-
rowGap: '0.75rem',
159+
rowGap: hasNonEmptyMessages ? '0.75rem' : '0',
154160
width: '100%',
155161
...(inline && {
156162
display: 'inline-grid',
@@ -162,7 +168,9 @@ const generateStyle = (
162168
...labelStyles,
163169
// NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
164170
'&:is(label)': labelStyles,
165-
'&:-webkit-any(label)': labelStyles
171+
'&:-webkit-any(label)': labelStyles,
172+
173+
paddingBottom: hasNonEmptyMessages ? '0' : '0.75rem'
166174
},
167175
formFieldChildren: {
168176
label: 'formFieldLayout__children',

0 commit comments

Comments
 (0)