Skip to content

Commit 61b333a

Browse files
author
Alexis Córdova
authored
fix(form-element): Position Inline Message Under Input in Horizontal/Compact Layout (#4713)
1 parent a49eacb commit 61b333a

File tree

7 files changed

+192
-10
lines changed

7 files changed

+192
-10
lines changed

‎ui/components/form-element/RELEASENOTES.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@
33
# Form Element Release Notes
44

55
<!-- ## [Unreleased] -->
6+
## 2.16.0
7+
8+
### Fixed
9+
10+
- Correctly position help text under the corresponding input when in horizontal layout.
611
## 2.14.0
712

813
### Fixed

‎ui/components/form-element/__tests__/snapshot.spec.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,10 @@ describe('Horizontal Form Element', () => {
236236
'deprecated-edit-horizontal'
237237
)
238238
));
239+
240+
it('renders a horizontal form element with an error', () =>
241+
matchesMarkup(getDisplayElementById(HorizontalExamples.states, 'form-element-horizontal-edit-error'))
242+
)
239243
});
240244

241245
describe('Compound Form Element', () => {

‎ui/components/form-element/docs.mdx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -346,6 +346,13 @@ When using `slds-form-element_horizontal`, you might find that the 33/66% distri
346346
</CodeView>
347347
</Example>
348348

349+
#### Error state
350+
When in the horizontal layout, error messages will appear underneath the related input.
351+
352+
<CodeView>
353+
{getDisplayElementById(HorizontalExamples.states, 'form-element-horizontal-edit-error')}
354+
</CodeView>
355+
349356
### Compound
350357

351358
A compound form is a grouping of several form elements described by a label/title. The compound form should be implemented as a `<fieldset>`, where the label/title is implemented as a `<legend>` element.

‎ui/components/form-element/horizontal/_index.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,4 +134,9 @@
134134
}
135135
}
136136
}
137+
138+
// Position the inline help text correctly when in horizontal/compact layout
139+
.slds-form-element__help {
140+
margin-left: 33%;
141+
}
137142
}

‎ui/components/form-element/horizontal/example.jsx

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,32 +10,49 @@ import { Textarea } from '../../textarea/base/example';
1010
import { Radio } from '../../radio-group/base/example';
1111
import { Checkbox } from '../../checkbox/base/example';
1212

13-
export default (
14-
<RecordDetail
15-
direction="horizontal"
16-
snapshot={Snapshot.ObjectFieldTypesHorizontal}
17-
isViewMode
18-
hasInlineEdit
19-
/>
20-
);
13+
export default [
14+
{
15+
id: 'form-element-horizontal-default',
16+
label: 'Form Element - Horizontal (Default)',
17+
context: 'Horizontal',
18+
element: (
19+
<RecordDetail
20+
direction="horizontal"
21+
snapshot={Snapshot.ObjectFieldTypesHorizontal}
22+
isViewMode
23+
hasInlineEdit
24+
/>
25+
)
26+
}
27+
]
2128

2229
export let states = [
2330
{
2431
id: 'edit-horizontal',
2532
label: 'Horizontal form layout - Edit Mode',
33+
context: 'Horizontal',
2634
element: (
2735
<RecordDetail
2836
direction="horizontal"
2937
snapshot={Snapshot.ObjectFieldTypesHorizontal}
3038
/>
3139
)
40+
},
41+
{
42+
id: 'form-element-horizontal-edit-error',
43+
label: 'Form Element - Horizontal form layout - (Edit Mode with Error)',
44+
context: 'Horizontal',
45+
element: (
46+
<RecordDetail direction="horizontal" snapshot={Snapshot.ObjectFieldTypesHorizontalWithError} />
47+
)
3248
}
3349
];
3450

3551
export let examples = [
3652
{
3753
id: 'horizontal-single-column',
3854
label: 'Horizontal form layout - 1 column - Read Only Mode',
55+
context: 'Horizontal',
3956
element: (
4057
<RecordDetail
4158
direction="horizontal"
@@ -47,6 +64,7 @@ export let examples = [
4764
{
4865
id: 'deprecated-view-horizontal',
4966
label: 'Deprecated - Horizontal form layout - View Mode',
67+
context: 'Horizontal',
5068
element: (
5169
<RecordDetail
5270
direction="horizontal"
@@ -60,6 +78,7 @@ export let examples = [
6078
{
6179
id: 'deprecated-edit-horizontal',
6280
label: 'Deprecated - Horizontal form layout - Edit Mode',
81+
context: 'Horizontal',
6382
element: (
6483
<RecordDetail
6584
direction="horizontal"
@@ -71,6 +90,7 @@ export let examples = [
7190
{
7291
id: 'simple-horizontal',
7392
label: 'Simple - Horizontal form layout',
93+
context: 'Horizontal',
7494
element: (
7595
<div className="slds-form">
7696
<FormElement

‎ui/components/form-element/index.stories.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import * as Base from './base/example';
1+
import * as BaseExamples from './base/example';
2+
import * as HorizontalExamples from './horizontal/example';
23
import { generateStories } from '../../shared/helpers';
34
import Docs from './docs.mdx';
45

5-
const examples = [Base];
6+
const examples = [BaseExamples, HorizontalExamples];
67

78
const patternName = 'Form Element';
89

‎ui/components/form-element/record-detail/snapshots.data.js

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -891,6 +891,146 @@ export const ObjectFieldTypesHorizontal = {
891891
]
892892
};
893893

894+
export const ObjectFieldTypesHorizontalWithError = {
895+
rows: [
896+
{
897+
fields: [
898+
{
899+
type: 'text',
900+
label: 'Assigned To',
901+
value: 'Jack Rogers',
902+
avatar: '/assets/images/avatar1.jpg',
903+
component: (
904+
<FormElement
905+
isHorizontal
906+
inputId="horizontal-form-element-id-01"
907+
labelContent="Assigned To"
908+
isEditing
909+
>
910+
<Input
911+
id="horizontal-form-element-id-01"
912+
readOnly
913+
defaultValue="Jack Rogers"
914+
/>
915+
</FormElement>
916+
)
917+
},
918+
{
919+
type: 'lookup',
920+
label: 'Team Name',
921+
value: 'Salesforce Lightning Design System',
922+
link: true,
923+
component: (
924+
<Combobox
925+
isHorizontal
926+
id="horizontal-combobox-id-01"
927+
label="Team Name"
928+
aria-controls="horizontal-listbox-id-01"
929+
isEditing
930+
autocomplete
931+
inputIconPosition="right"
932+
rightInputIcon={
933+
<ButtonIcon
934+
className="slds-input__icon slds-input__icon_right"
935+
symbol="clear"
936+
title="Clear the text input"
937+
assistiveText="Clear the text input"
938+
/>
939+
}
940+
results={
941+
<Listbox
942+
id="horizontal-listbox-id-01"
943+
snapshot={{}}
944+
type="entity"
945+
count={2}
946+
/>
947+
}
948+
resultsType="listbox"
949+
value="Salesforce Lightning Design System"
950+
/>
951+
)
952+
}
953+
]
954+
},
955+
{
956+
fields: [
957+
{
958+
type: 'text',
959+
label: 'Account Name',
960+
value: '',
961+
isRequired: true,
962+
component: (
963+
<FormElement
964+
isRequired
965+
isHorizontal
966+
labelContent="Account Name"
967+
inputId="horizontal-form-element-id-02"
968+
isEditing
969+
hasError
970+
errorId="horizontal-form-element-error-id-01"
971+
inlineMessage="Complete this field"
972+
>
973+
<Input id="horizontal-form-element-id-02" defaultValue="" />
974+
</FormElement>
975+
)
976+
},
977+
{
978+
type: 'date',
979+
label: 'SLA Expiration Date',
980+
value: '1/1/2018',
981+
component: (
982+
<FormElement
983+
isHorizontal
984+
isEditing
985+
formElementClassName="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open"
986+
labelContent="Date"
987+
inputId="horizontal-form-element-id-03"
988+
hasRightIcon
989+
>
990+
<Input
991+
id="horizontal-form-element-id-03"
992+
defaultValue="1/1/2018"
993+
/>
994+
<ButtonIcon
995+
className="slds-input__icon slds-input__icon_right"
996+
symbol="event"
997+
assistiveText="Select a date"
998+
title="Select a date"
999+
/>
1000+
</FormElement>
1001+
)
1002+
}
1003+
]
1004+
},
1005+
{
1006+
fields: [
1007+
{
1008+
type: 'textarea',
1009+
label: 'Description',
1010+
value: [
1011+
'Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.'
1012+
],
1013+
column: 1,
1014+
component: (
1015+
<FormElement
1016+
isHorizontal
1017+
labelContent="Description"
1018+
inputId="horizontal-form-element-id-14"
1019+
isEditing
1020+
column={1}
1021+
>
1022+
<Textarea
1023+
id="horizontal-form-element-id-14"
1024+
defaultValue="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."
1025+
/>
1026+
</FormElement>
1027+
)
1028+
}
1029+
]
1030+
}
1031+
]
1032+
};
1033+
8941034
export const ObjectFieldTypesSingleColumn = {
8951035
rows: [
8961036
{

0 commit comments

Comments
 (0)