Skip to content

Commit d7b3656

Browse files
Udhayakumar A BUdhayakumar A B
Udhayakumar A B
and
Udhayakumar A B
authored
@W-18055447 @W-18130362 fix: form error help text alignment (#5502) (#5523)
* fix: form error help text alignment * fix: form error help text alignment * fix: sass variable update * fix: vrt global header impact fix --------- Co-authored-by: Udhayakumar A B <[email protected]>
1 parent a7e602a commit d7b3656

File tree

3 files changed

+271
-20
lines changed

3 files changed

+271
-20
lines changed

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,3 +150,16 @@
150150
@include clearfix;
151151
}
152152
}
153+
154+
155+
.slds-form-element__control:has(.slds-form-element__control) {
156+
.slds-form-element__help {
157+
margin-left: 0;
158+
}
159+
160+
@include mq-medium-min {
161+
.slds-input-has-icon_left .slds-input__icon {
162+
left: $spacing-small;
163+
}
164+
}
165+
}

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

Lines changed: 253 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -979,25 +979,90 @@ export const ObjectFieldTypesHorizontalWithError = {
979979
label: 'SLA Expiration Date',
980980
value: '1/1/2018',
981981
component: (
982-
<FormElement
983-
isHorizontal
982+
<CompoundFormElement
983+
labelContent="Date and Time"
984+
isAddress
984985
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
986+
isRequired
987+
isHorizontal
988+
hasError
989989
>
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>
990+
<CompoundFormRow>
991+
<div className="slds-size_3-of-6">
992+
<FormElement
993+
isEditing
994+
labelContent="Date"
995+
inputId="horizontal-form-element-id-03"
996+
hasRightIcon
997+
hasError
998+
errorId="horizontal-form-element-error-id-04"
999+
inlineMessage="Complete this field"
1000+
>
1001+
<Input
1002+
id="horizontal-form-element-id-03"
1003+
/>
1004+
<ButtonIcon
1005+
className="slds-input__icon slds-input__icon_right"
1006+
symbol="event"
1007+
assistiveText="Select a date"
1008+
title="Select a date"
1009+
/>
1010+
</FormElement>
1011+
</div>
1012+
<div className="slds-size_3-of-6">
1013+
<Combobox
1014+
id="horizontal-combobox-id-03"
1015+
aria-controls="stacked-listbox-id-03"
1016+
autocomplete
1017+
label="Time"
1018+
placeholder="Select a time…"
1019+
inputIconPosition="right"
1020+
hasError={true}
1021+
rightInputIcon={
1022+
<UtilityIcon
1023+
symbol="clock"
1024+
className="slds-icon slds-icon_x-small slds-icon-text-default slds-icon-text-error"
1025+
containerClassName="slds-input__icon slds-input__icon_right"
1026+
assistiveText={false}
1027+
title={false}
1028+
/>
1029+
}
1030+
results={
1031+
<Listbox
1032+
className="slds-dropdown_fluid slds-dropdown_left"
1033+
id="stacked-listbox-id-03"
1034+
snapshot={{
1035+
option1: {
1036+
name: '7:00am'
1037+
},
1038+
option2: {
1039+
name: '8:00am'
1040+
},
1041+
option3: {
1042+
name: '9:00am'
1043+
},
1044+
option4: {
1045+
name: '10:00am'
1046+
},
1047+
option5: {
1048+
name: '11:00am'
1049+
},
1050+
option6: {
1051+
name: '12:00pm'
1052+
}
1053+
}}
1054+
type="plain"
1055+
count={6}
1056+
visualSelection
1057+
/>
1058+
}
1059+
resultsType="listbox"
1060+
hasInteractions
1061+
hasFocus={false}
1062+
/>
1063+
</div>
1064+
</CompoundFormRow>
1065+
</CompoundFormElement>
10011066
)
10021067
}
10031068
]
@@ -1027,6 +1092,177 @@ export const ObjectFieldTypesHorizontalWithError = {
10271092
)
10281093
}
10291094
]
1095+
},
1096+
{
1097+
fields: [
1098+
{
1099+
type: 'address',
1100+
label: 'Billing Address',
1101+
value: ['525 S. Lexington Ave', 'Burlington, NC 27215', 'USA'],
1102+
link: true,
1103+
isRequired: true,
1104+
hasTooltip: true,
1105+
component: (
1106+
<CompoundFormElement
1107+
labelContent="Billing Address"
1108+
isAddress
1109+
isEditing
1110+
isRequired
1111+
hasTooltip
1112+
isHorizontal
1113+
>
1114+
<CompoundFormRow>
1115+
<div className="slds-size_1-of-1">
1116+
<FormElement
1117+
labelContent="Billing Street"
1118+
inputId="horizontal-form-element-id-04"
1119+
>
1120+
<Textarea
1121+
id="horizontal-form-element-id-04"
1122+
defaultValue="525 S. Lexington Ave"
1123+
required
1124+
/>
1125+
</FormElement>
1126+
</div>
1127+
</CompoundFormRow>
1128+
<CompoundFormRow>
1129+
<div className="slds-size_3-of-6">
1130+
<FormElement
1131+
labelContent="Billing City"
1132+
inputId="horizontal-form-element-id-05"
1133+
hasError
1134+
errorId="horizontal-form-element-error-id-02"
1135+
inlineMessage="Complete this field"
1136+
>
1137+
<Input
1138+
id="horizontal-form-element-id-05"
1139+
required
1140+
/>
1141+
</FormElement>
1142+
</div>
1143+
<div className="slds-size_3-of-6">
1144+
<FormElement
1145+
labelContent="Billing State/Province"
1146+
inputId="horizontal-form-element-id-06"
1147+
hasError
1148+
errorId="horizontal-form-element-error-id-03"
1149+
inlineMessage="Complete this field"
1150+
>
1151+
<Input
1152+
id="horizontal-form-element-id-06"
1153+
required
1154+
/>
1155+
</FormElement>
1156+
</div>
1157+
</CompoundFormRow>
1158+
<CompoundFormRow>
1159+
<div className="slds-size_3-of-6">
1160+
<FormElement
1161+
labelContent="Billing Zip/Postal Code"
1162+
inputId="horizontal-form-element-id-07"
1163+
>
1164+
<Input
1165+
id="horizontal-form-element-id-07"
1166+
defaultValue="27215"
1167+
required
1168+
/>
1169+
</FormElement>
1170+
</div>
1171+
<div className="slds-size_3-of-6">
1172+
<FormElement
1173+
labelContent="Billing Country"
1174+
inputId="horizontal-form-element-id-08"
1175+
hasError
1176+
errorId="horizontal-form-element-error-id-04"
1177+
inlineMessage="Complete this field"
1178+
>
1179+
<Input
1180+
id="horizontal-form-element-id-08"
1181+
required
1182+
/>
1183+
</FormElement>
1184+
</div>
1185+
</CompoundFormRow>
1186+
</CompoundFormElement>
1187+
)
1188+
},
1189+
{
1190+
type: 'address',
1191+
label: 'Shipping Address',
1192+
value: ['312 Constitution Place', 'Austin, TX 78767', 'USA'],
1193+
link: true,
1194+
component: (
1195+
<CompoundFormElement
1196+
labelContent="Shipping Address"
1197+
isAddress
1198+
isEditing
1199+
isHorizontal
1200+
>
1201+
<CompoundFormRow>
1202+
<div className="slds-size_1-of-1">
1203+
<FormElement
1204+
labelContent="Shipping Street"
1205+
inputId="horizontal-form-element-id-09"
1206+
>
1207+
<Textarea
1208+
id="horizontal-form-element-id-09"
1209+
defaultValue="312 Constitution Place"
1210+
/>
1211+
</FormElement>
1212+
</div>
1213+
</CompoundFormRow>
1214+
<CompoundFormRow>
1215+
<div className="slds-size_4-of-6">
1216+
<FormElement
1217+
labelContent="Shipping City"
1218+
inputId="horizontal-form-element-id-10"
1219+
>
1220+
<Input
1221+
id="horizontal-form-element-id-10"
1222+
defaultValue="Austin"
1223+
/>
1224+
</FormElement>
1225+
</div>
1226+
<div className="slds-size_2-of-6">
1227+
<FormElement
1228+
labelContent="Shipping State/Province"
1229+
inputId="horizontal-form-element-id-11"
1230+
>
1231+
<Input
1232+
id="horizontal-form-element-id-11"
1233+
defaultValue="TX"
1234+
/>
1235+
</FormElement>
1236+
</div>
1237+
</CompoundFormRow>
1238+
<CompoundFormRow>
1239+
<div className="slds-size_4-of-6">
1240+
<FormElement
1241+
labelContent="Shipping Zip/Postal Code"
1242+
inputId="horizontal-form-element-id-12"
1243+
>
1244+
<Input
1245+
id="horizontal-form-element-id-12"
1246+
defaultValue="78767"
1247+
/>
1248+
</FormElement>
1249+
</div>
1250+
<div className="slds-size_2-of-6">
1251+
<FormElement
1252+
labelContent="Shipping Country"
1253+
inputId="horizontal-form-element-id-13"
1254+
>
1255+
<Input
1256+
id="horizontal-form-element-id-13"
1257+
defaultValue="USA"
1258+
/>
1259+
</FormElement>
1260+
</div>
1261+
</CompoundFormRow>
1262+
</CompoundFormElement>
1263+
)
1264+
}
1265+
]
10301266
}
10311267
]
10321268
};

‎ui/components/global-header/base/_index.scss‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,11 @@
5252
padding-left: ($spacing-large * 2);
5353
}
5454

55-
.slds-input__icon_left,
56-
.slds-input__icon--left {
57-
left: ($spacing-medium + $spacing-xx-small);
55+
&.slds-input-has-icon {
56+
.slds-input__icon_left,
57+
.slds-input__icon--left {
58+
left: ($spacing-medium + $spacing-xx-small);
59+
}
5860
}
5961

6062
.slds-icon {

0 commit comments

Comments
 (0)