@instructure/ui-form-field 10.24.3-snapshot-6 → 10.24.3-snapshot-7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/FormFieldLayout/styles.js +7 -3
  3. package/lib/FormFieldLayout/styles.js +7 -3
  4. package/package.json +14 -14
  5. package/src/FormFieldLayout/styles.ts +11 -3
  6. package/tsconfig.build.tsbuildinfo +1 -1
  7. package/types/FormFieldLayout/styles.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [10.24.3-snapshot-6](https://github.com/instructure/instructure-ui/compare/v10.24.2...v10.24.3-snapshot-6) (2025-08-19)
6
+ ## [10.24.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v10.24.2...v10.24.3-snapshot-7) (2025-08-19)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-form-field
8
+
9
+ ### Bug Fixes
10
+
11
+ * **ui-form-field:** should not change layout when only screenreader-only message is present ([09977a2](https://github.com/instructure/instructure-ui/commit/09977a2595ac3f9c00fc8152ed9cabcfe818338c))
9
12
 
10
13
 
11
14
 
package/es/FormFieldLayout/styles.js CHANGED
@@ -63,12 +63,15 @@ const generateStyle = (componentTheme, props, styleProps) => {
63
63
  layout = props.layout,
64
64
  vAlign = props.vAlign,
65
65
  labelAlign = props.labelAlign,
66
- margin = props.margin;
66
+ margin = props.margin,
67
+ messages = props.messages;
67
68
  const hasMessages = styleProps.hasMessages,
68
69
  hasVisibleLabel = styleProps.hasVisibleLabel,
69
70
  hasNewErrorMsgAndIsGroup = styleProps.hasNewErrorMsgAndIsGroup;
70
71
  const cssMargin = mapSpacingToShorthand(margin, componentTheme.spacing);
71
72
  const isInlineLayout = layout === 'inline';
73
+ const hasNonEmptyMessages = messages === null || messages === void 0 ? void 0 : messages.reduce((acc, message) => acc || message.type !== 'screenreader-only', false);
74
+
72
75
  // This is quite ugly, we should simplify it
73
76
  const gridTemplateAreas = generateGridLayout(isInlineLayout, hasNewErrorMsgAndIsGroup, hasVisibleLabel, hasMessages);
74
77
  let gridTemplateColumns = '100%'; // stacked layout
@@ -128,7 +131,7 @@ const generateStyle = (componentTheme, props, styleProps) => {
128
131
  gridTemplateAreas: generateGridLayout(false, hasNewErrorMsgAndIsGroup, hasVisibleLabel, hasMessages)
129
132
  },
130
133
  columnGap: '0.375rem',
131
- rowGap: '0.75rem',
134
+ rowGap: hasNonEmptyMessages ? '0.75rem' : '0',
132
135
  width: '100%',
133
136
  ...(inline && {
134
137
  display: 'inline-grid',
@@ -140,7 +143,8 @@ const generateStyle = (componentTheme, props, styleProps) => {
140
143
  ...labelStyles,
141
144
  // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
142
145
  '&:is(label)': labelStyles,
143
- '&:-webkit-any(label)': labelStyles
146
+ '&:-webkit-any(label)': labelStyles,
147
+ paddingBottom: hasNonEmptyMessages ? '0' : '0.75rem'
144
148
  },
145
149
  formFieldChildren: {
146
150
  label: 'formFieldLayout__children',
package/lib/FormFieldLayout/styles.js CHANGED
@@ -69,12 +69,15 @@ const generateStyle = (componentTheme, props, styleProps) => {
69
69
  layout = props.layout,
70
70
  vAlign = props.vAlign,
71
71
  labelAlign = props.labelAlign,
72
- margin = props.margin;
72
+ margin = props.margin,
73
+ messages = props.messages;
73
74
  const hasMessages = styleProps.hasMessages,
74
75
  hasVisibleLabel = styleProps.hasVisibleLabel,
75
76
  hasNewErrorMsgAndIsGroup = styleProps.hasNewErrorMsgAndIsGroup;
76
77
  const cssMargin = (0, _emotion.mapSpacingToShorthand)(margin, componentTheme.spacing);
77
78
  const isInlineLayout = layout === 'inline';
79
+ const hasNonEmptyMessages = messages === null || messages === void 0 ? void 0 : messages.reduce((acc, message) => acc || message.type !== 'screenreader-only', false);
80
+
78
81
  // This is quite ugly, we should simplify it
79
82
  const gridTemplateAreas = generateGridLayout(isInlineLayout, hasNewErrorMsgAndIsGroup, hasVisibleLabel, hasMessages);
80
83
  let gridTemplateColumns = '100%'; // stacked layout
@@ -134,7 +137,7 @@ const generateStyle = (componentTheme, props, styleProps) => {
134
137
  gridTemplateAreas: generateGridLayout(false, hasNewErrorMsgAndIsGroup, hasVisibleLabel, hasMessages)
135
138
  },
136
139
  columnGap: '0.375rem',
137
- rowGap: '0.75rem',
140
+ rowGap: hasNonEmptyMessages ? '0.75rem' : '0',
138
141
  width: '100%',
139
142
  ...(inline && {
140
143
  display: 'inline-grid',
@@ -146,7 +149,8 @@ const generateStyle = (componentTheme, props, styleProps) => {
146
149
  ...labelStyles,
147
150
  // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
148
151
  '&:is(label)': labelStyles,
149
- '&:-webkit-any(label)': labelStyles
152
+ '&:-webkit-any(label)': labelStyles,
153
+ paddingBottom: hasNonEmptyMessages ? '0' : '0.75rem'
150
154
  },
151
155
  formFieldChildren: {
152
156
  label: 'formFieldLayout__children',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-form-field",
3
- "version": "10.24.3-snapshot-6",
3
+ "version": "10.24.3-snapshot-7",
4
4
  "description": "Form layout components.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,25 +23,25 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-axe-check": "10.24.3-snapshot-6",
27
- "@instructure/ui-babel-preset": "10.24.3-snapshot-6",
28
- "@instructure/ui-themes": "10.24.3-snapshot-6",
26
+ "@instructure/ui-axe-check": "10.24.3-snapshot-7",
27
+ "@instructure/ui-babel-preset": "10.24.3-snapshot-7",
28
+ "@instructure/ui-themes": "10.24.3-snapshot-7",
29
29
  "@testing-library/jest-dom": "^6.6.3",
30
30
  "@testing-library/react": "^16.0.1",
31
31
  "vitest": "^3.2.2"
32
32
  },
33
33
  "dependencies": {
34
34
  "@babel/runtime": "^7.27.6",
35
- "@instructure/console": "10.24.3-snapshot-6",
36
- "@instructure/emotion": "10.24.3-snapshot-6",
37
- "@instructure/shared-types": "10.24.3-snapshot-6",
38
- "@instructure/ui-a11y-content": "10.24.3-snapshot-6",
39
- "@instructure/ui-a11y-utils": "10.24.3-snapshot-6",
40
- "@instructure/ui-grid": "10.24.3-snapshot-6",
41
- "@instructure/ui-icons": "10.24.3-snapshot-6",
42
- "@instructure/ui-react-utils": "10.24.3-snapshot-6",
43
- "@instructure/ui-utils": "10.24.3-snapshot-6",
44
- "@instructure/uid": "10.24.3-snapshot-6",
35
+ "@instructure/console": "10.24.3-snapshot-7",
36
+ "@instructure/emotion": "10.24.3-snapshot-7",
37
+ "@instructure/shared-types": "10.24.3-snapshot-7",
38
+ "@instructure/ui-a11y-content": "10.24.3-snapshot-7",
39
+ "@instructure/ui-a11y-utils": "10.24.3-snapshot-7",
40
+ "@instructure/ui-grid": "10.24.3-snapshot-7",
41
+ "@instructure/ui-icons": "10.24.3-snapshot-7",
42
+ "@instructure/ui-react-utils": "10.24.3-snapshot-7",
43
+ "@instructure/ui-utils": "10.24.3-snapshot-7",
44
+ "@instructure/uid": "10.24.3-snapshot-7",
45
45
  "prop-types": "^15.8.1"
46
46
  },
47
47
  "peerDependencies": {
package/src/FormFieldLayout/styles.ts CHANGED
@@ -75,10 +75,16 @@ const generateStyle = (
75
75
  props: FormFieldLayoutProps,
76
76
  styleProps: FormFieldStyleProps
77
77
  ): FormFieldLayoutStyle => {
78
- const { inline, layout, vAlign, labelAlign, margin } = props
78
+ const { inline, layout, vAlign, labelAlign, margin, messages } = props
79
79
  const { hasMessages, hasVisibleLabel, hasNewErrorMsgAndIsGroup } = styleProps
80
80
  const cssMargin = mapSpacingToShorthand(margin, componentTheme.spacing)
81
81
  const isInlineLayout = layout === 'inline'
82
+
83
+ const hasNonEmptyMessages = messages?.reduce(
84
+ (acc, message) => acc || message.type !== 'screenreader-only',
85
+ false
86
+ )
87
+
82
88
  // This is quite ugly, we should simplify it
83
89
  const gridTemplateAreas = generateGridLayout(
84
90
  isInlineLayout,
@@ -150,7 +156,7 @@ const generateStyle = (
150
156
  )
151
157
  },
152
158
  columnGap: '0.375rem',
153
- rowGap: '0.75rem',
159
+ rowGap: hasNonEmptyMessages ? '0.75rem' : '0',
154
160
  width: '100%',
155
161
  ...(inline && {
156
162
  display: 'inline-grid',
@@ -162,7 +168,9 @@ const generateStyle = (
162
168
  ...labelStyles,
163
169
  // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
164
170
  '&:is(label)': labelStyles,
165
- '&:-webkit-any(label)': labelStyles
171
+ '&:-webkit-any(label)': labelStyles,
172
+
173
+ paddingBottom: hasNonEmptyMessages ? '0' : '0.75rem'
166
174
  },
167
175
  formFieldChildren: {
168
176
  label: 'formFieldLayout__children',