Skip to content

Commit d372da2

Browse files
matiassfmatiassf
authored
Combobox single selection - Error Text style fix (#3106)
* Fixed combobox single selection css error * Fixed tests
1 parent ccbca06 commit d372da2

File tree

8 files changed

+529
-5
lines changed

8 files changed

+529
-5
lines changed

‎components/combobox/__docs__/__snapshots__/storybook-stories.storyshot

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4089,6 +4089,87 @@ exports[`DOM snapshots SLDSCombobox Inline Single Selection 1`] = `
40894089
</div>
40904090
`;
40914091

4092+
exports[`DOM snapshots SLDSCombobox Inline Single Selection Invalid 1`] = `
4093+
<div
4094+
className="slds-p-around_medium"
4095+
>
4096+
<div
4097+
className="slds-form-element"
4098+
>
4099+
<label
4100+
className="slds-form-element__label"
4101+
htmlFor="combobox-inline-single-invalid"
4102+
>
4103+
<abbr
4104+
className="slds-required"
4105+
title="required"
4106+
>
4107+
*
4108+
</abbr>
4109+
Search
4110+
</label>
4111+
<div
4112+
className="slds-form-element__control"
4113+
>
4114+
<div
4115+
className="slds-combobox_container"
4116+
>
4117+
<div
4118+
aria-expanded={false}
4119+
aria-haspopup="listbox"
4120+
className="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click ignore-react-onclickoutside slds-has-error"
4121+
role="combobox"
4122+
>
4123+
<div
4124+
className="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right"
4125+
role="none"
4126+
>
4127+
<input
4128+
aria-activedescendant={null}
4129+
aria-autocomplete="list"
4130+
aria-describedby="combobox-inline-single-error"
4131+
autoComplete="off"
4132+
className="slds-input slds-combobox__input"
4133+
disabled={false}
4134+
id="combobox-inline-single-invalid"
4135+
onBlur={[Function]}
4136+
onChange={[Function]}
4137+
onClick={[Function]}
4138+
onFocus={[Function]}
4139+
onKeyDown={[Function]}
4140+
placeholder="Search Salesforce"
4141+
readOnly={false}
4142+
required={true}
4143+
role="textbox"
4144+
type="text"
4145+
value=""
4146+
/>
4147+
<svg
4148+
aria-hidden={true}
4149+
className="slds-input__icon slds-icon-text-default"
4150+
>
4151+
<use
4152+
href="/assets/icons/utility-sprite/svg/symbols.svg#search"
4153+
/>
4154+
</svg>
4155+
</div>
4156+
</div>
4157+
</div>
4158+
<div
4159+
className="slds-has-error"
4160+
>
4161+
<div
4162+
className="slds-form-element__help"
4163+
id="combobox-inline-single-error"
4164+
>
4165+
This field is invalid
4166+
</div>
4167+
</div>
4168+
</div>
4169+
</div>
4170+
</div>
4171+
`;
4172+
40924173
exports[`DOM snapshots SLDSCombobox Inline Single Selection Predefined Options Only 1`] = `
40934174
<div
40944175
className="slds-p-around_medium"
@@ -7327,6 +7408,87 @@ exports[`DOM snapshots SLDSCombobox Snapshot Inline Single Selection 1`] = `
73277408
</div>
73287409
`;
73297410

7411+
exports[`DOM snapshots SLDSCombobox Snapshot Inline Single Selection Invalid 1`] = `
7412+
<div
7413+
className="slds-p-around_medium"
7414+
>
7415+
<div
7416+
className="slds-form-element"
7417+
>
7418+
<label
7419+
className="slds-form-element__label"
7420+
htmlFor="combobox-inline-single-invalid"
7421+
>
7422+
<abbr
7423+
className="slds-required"
7424+
title="required"
7425+
>
7426+
*
7427+
</abbr>
7428+
Search
7429+
</label>
7430+
<div
7431+
className="slds-form-element__control"
7432+
>
7433+
<div
7434+
className="slds-combobox_container"
7435+
>
7436+
<div
7437+
aria-expanded={false}
7438+
aria-haspopup="listbox"
7439+
className="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click ignore-react-onclickoutside slds-has-error"
7440+
role="combobox"
7441+
>
7442+
<div
7443+
className="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right"
7444+
role="none"
7445+
>
7446+
<input
7447+
aria-activedescendant={null}
7448+
aria-autocomplete="list"
7449+
aria-describedby="combobox-inline-single-error"
7450+
autoComplete="off"
7451+
className="slds-input slds-combobox__input"
7452+
disabled={false}
7453+
id="combobox-inline-single-invalid"
7454+
onBlur={[Function]}
7455+
onChange={[Function]}
7456+
onClick={[Function]}
7457+
onFocus={[Function]}
7458+
onKeyDown={[Function]}
7459+
placeholder="Search Salesforce"
7460+
readOnly={false}
7461+
required={true}
7462+
role="textbox"
7463+
type="text"
7464+
value=""
7465+
/>
7466+
<svg
7467+
aria-hidden={true}
7468+
className="slds-input__icon slds-icon-text-default"
7469+
>
7470+
<use
7471+
href="/assets/icons/utility-sprite/svg/symbols.svg#search"
7472+
/>
7473+
</svg>
7474+
</div>
7475+
</div>
7476+
</div>
7477+
<div
7478+
className="slds-has-error"
7479+
>
7480+
<div
7481+
className="slds-form-element__help"
7482+
id="combobox-inline-single-error"
7483+
>
7484+
This field is invalid
7485+
</div>
7486+
</div>
7487+
</div>
7488+
</div>
7489+
</div>
7490+
`;
7491+
73307492
exports[`DOM snapshots SLDSCombobox Snapshot Inline Single Selection Selected 1`] = `
73317493
<div
73327494
className="slds-p-around_medium"

‎components/combobox/__docs__/storybook-stories.jsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import BaseWithInput from '../__examples__/base-with-input';
2020
import Dialog from '../__examples__/dialog.jsx';
2121
import InlineSingle from '../__examples__/inline-single';
2222
import InlineSinglePredefinedOnly from '../__examples__/inline-single-predefined-options-only';
23+
import InlineSingleInvalid from '../__examples__/inline-single-invalid';
2324
import InlineSingleWithCustomOpenState from '../__examples__/inline-single-with-custom-open-state';
2425
import InlineSingleEntityCombobox from '../__examples__/inline-single-entity-combobox';
2526
import InlineSingleSearchAddEntities from '../__examples__/inline-single-search-add-entities';
@@ -48,6 +49,7 @@ import SnapshotInlineMultipleOpenLoading from '../__examples__/snapshot/inline-m
4849
import SnapshotInlineMultipleSelection from '../__examples__/snapshot/inline-multiple-selection';
4950
import SnapshotInlineMultipleSelectionSelected from '../__examples__/snapshot/inline-multiple-selection-selected';
5051
import SnapshotInlineSingleEntityCombobox from '../__examples__/snapshot/inline-single-entity-combobox';
52+
import SnapshotInlineSingleInvalid from '../__examples__/snapshot/inline-single-invalid';
5153
import SnapshotInlineSingleSelection from '../__examples__/snapshot/inline-single-selection';
5254
import SnapshotInlineSingleSelectionSelected from '../__examples__/snapshot/inline-single-selection-selected';
5355
import SnapshotInlineSingleSearchAddEntitiesOpen from '../__examples__/snapshot/inline-single-search-add-entities-open';
@@ -89,6 +91,9 @@ storiesOf(COMBOBOX, module)
8991
.add('Inline Single Selection Predefined Options Only', () => (
9092
<InlineSinglePredefinedOnly action={action} />
9193
))
94+
.add('Inline Single Selection Invalid', () => (
95+
<InlineSingleInvalid action={action} />
96+
))
9297
.add('Inline Single Selection With Custom Open State', () => (
9398
<InlineSingleWithCustomOpenState action={action} />
9499
))
@@ -161,6 +166,9 @@ storiesOf(COMBOBOX, module)
161166
<SnapshotBaseOpenMenuInheritWidthOf action={action} />
162167
))
163168
.add('Snapshot Dialog Open', () => <SnapshotDialogOpen action={action} />)
169+
.add('Snapshot Inline Single Selection Invalid', () => (
170+
<SnapshotInlineSingleInvalid action={action} />
171+
))
164172
.add('Snapshot Inline Single Selection', () => (
165173
<SnapshotInlineSingleSelection action={action} />
166174
))

‎components/combobox/__examples__/inline-single-invalid.jsx

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
/* eslint-disable no-console, react/prop-types */
2+
import React from 'react';
3+
import Combobox from '~/components/combobox';
4+
import Icon from '~/components/icon';
5+
import comboboxFilterAndLimit from '~/components/combobox/filter';
6+
import IconSettings from '~/components/icon-settings';
7+
8+
const accounts = [
9+
{
10+
id: '1',
11+
label: 'Acme',
12+
subTitle: 'Account • San Francisco',
13+
type: 'account',
14+
},
15+
{
16+
id: '2',
17+
label: 'Salesforce.com, Inc.',
18+
subTitle: 'Account • San Francisco',
19+
type: 'account',
20+
},
21+
{
22+
id: '3',
23+
label: "Paddy's Pub",
24+
subTitle: 'Account • Boston, MA',
25+
type: 'account',
26+
},
27+
{
28+
id: '4',
29+
label: 'Tyrell Corp',
30+
subTitle: 'Account • San Francisco, CA',
31+
type: 'account',
32+
},
33+
{
34+
id: '5',
35+
label: 'Paper St. Soap Company',
36+
subTitle: 'Account • Beloit, WI',
37+
type: 'account',
38+
},
39+
{
40+
id: '6',
41+
label: 'Nakatomi Investments',
42+
subTitle: 'Account • Chicago, IL',
43+
type: 'account',
44+
},
45+
{ id: '7', label: 'Acme Landscaping', type: 'account' },
46+
{
47+
id: '8',
48+
label: 'Acme Construction',
49+
subTitle: 'Account • Grand Marais, MN',
50+
type: 'account',
51+
},
52+
];
53+
54+
const accountsWithIcon = accounts.map((elem) => ({
55+
...elem,
56+
...{
57+
icon: (
58+
<Icon
59+
assistiveText={{ label: 'Account' }}
60+
category="standard"
61+
name={elem.type}
62+
/>
63+
),
64+
},
65+
}));
66+
67+
class Example extends React.Component {
68+
constructor(props) {
69+
super(props);
70+
71+
this.state = {
72+
inputValue: '',
73+
selection: [],
74+
};
75+
}
76+
77+
render() {
78+
return (
79+
<IconSettings iconPath="/assets/icons">
80+
<Combobox
81+
id="combobox-inline-single-invalid"
82+
aria-describedby="combobox-inline-single-error"
83+
events={{
84+
onChange: (event, { value }) => {
85+
if (this.props.action) {
86+
this.props.action('onChange')(event, value);
87+
} else if (console) {
88+
console.log('onChange', event, value);
89+
}
90+
this.setState({ inputValue: value });
91+
},
92+
onRequestRemoveSelectedOption: (event, data) => {
93+
this.setState({
94+
inputValue: '',
95+
selection: data.selection,
96+
});
97+
},
98+
onSubmit: (event, { value }) => {
99+
if (this.props.action) {
100+
this.props.action('onChange')(event, value);
101+
} else if (console) {
102+
console.log('onChange', event, value);
103+
}
104+
this.setState({
105+
inputValue: '',
106+
selection: [
107+
...this.state.selection,
108+
{
109+
label: value,
110+
icon: (
111+
<Icon
112+
assistiveText={{ label: 'Account' }}
113+
category="standard"
114+
name="account"
115+
/>
116+
),
117+
},
118+
],
119+
});
120+
},
121+
onSelect: (event, data) => {
122+
if (this.props.action) {
123+
this.props.action('onSelect')(
124+
event,
125+
...Object.keys(data).map((key) => data[key])
126+
);
127+
} else if (console) {
128+
console.log('onSelect', event, data);
129+
}
130+
this.setState({
131+
inputValue: '',
132+
selection: data.selection,
133+
});
134+
},
135+
}}
136+
labels={{
137+
label: 'Search',
138+
placeholder: 'Search Salesforce',
139+
}}
140+
options={comboboxFilterAndLimit({
141+
inputValue: this.state.inputValue,
142+
options: accountsWithIcon,
143+
selection: this.state.selection,
144+
})}
145+
selection={this.state.selection}
146+
value={
147+
this.state.selectedOption
148+
? this.state.selectedOption.label
149+
: this.state.inputValue
150+
}
151+
required
152+
errorText="This field is invalid"
153+
variant="inline-listbox"
154+
/>
155+
</IconSettings>
156+
);
157+
}
158+
}
159+
160+
Example.displayName = 'ComboboxExample';
161+
export default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime

0 commit comments

Comments
 (0)