Skip to content

Commit ca8df7d

Browse files
greg-a-smithgreg-a-smith
authored
fix: Renamed popper CSS classes (#478)
* Renamed popper CSS classes. Small refactor to Popover and Popper. * Updated react-foco library to emit better markup
1 parent 59b441d commit ca8df7d

File tree

17 files changed

+1061
-843
lines changed

17 files changed

+1061
-843
lines changed

‎package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
"focus-trap-react": "^6.0.0",
5151
"keycode": "^2.2.0",
5252
"prop-types": "^15.7.1",
53-
"react-foco": "^1.2.0",
53+
"react-foco": "^1.3.0",
5454
"react-overlays": "^1.1.2",
5555
"react-popper": "^1.3.3",
5656
"shortid": "^2.2.14"

‎src/ComboboxInput/ComboboxInput.test.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,10 +56,8 @@ describe('<ComboboxInput />', () => {
5656
test('should allow props to be spread to the ComboboxInput component\'s Popover component', () => {
5757
const element = mount(<ComboboxInput menu={defaultMenu} popoverProps={{ 'data-sample': 'Sample' }} />);
5858

59-
element.find('.fd-combobox-control').simulate('click');
60-
6159
expect(
62-
element.find('div.fd-popper__body').getDOMNode().attributes['data-sample'].value
60+
element.find('div.fd-popover').getDOMNode().attributes['data-sample'].value
6361
).toBe('Sample');
6462
});
6563

‎src/ComboboxInput/__snapshots__/ComboboxInput.test.js.snap‎

Lines changed: 46 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -4,74 +4,82 @@ exports[`<ComboboxInput /> create combobox input 1`] = `
44
<div
55
className="fd-combobox-input"
66
>
7-
<span
8-
onFocus={[Function]}
9-
onMouseDown={[Function]}
10-
onTouchStart={[Function]}
7+
<div
8+
className="fd-popover"
119
>
1210
<div
13-
className="fd-popper__control fd-popover"
11+
onFocus={[Function]}
12+
onMouseDown={[Function]}
13+
onTouchStart={[Function]}
1414
>
1515
<div
16-
className="fd-combobox-control"
17-
onClick={[Function]}
16+
className="fd-popover__control"
1817
>
1918
<div
20-
className="fd-input-group fd-input-group--after"
19+
className="fd-combobox-control"
20+
onClick={[Function]}
2121
>
22-
<input
23-
className="fd-input"
24-
placeholder="Select Fruit"
25-
type="text"
26-
/>
27-
<span
28-
className="fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button"
22+
<div
23+
className="fd-input-group fd-input-group--after"
2924
>
30-
<button
31-
className=" fd-button--light sap-icon--navigation-down-arrow"
25+
<input
26+
className="fd-input"
27+
placeholder="Select Fruit"
28+
type="text"
3229
/>
33-
</span>
30+
<span
31+
className="fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button"
32+
>
33+
<button
34+
className=" fd-button--light sap-icon--navigation-down-arrow"
35+
/>
36+
</span>
37+
</div>
3438
</div>
3539
</div>
3640
</div>
37-
</span>
41+
</div>
3842
</div>
3943
`;
4044

4145
exports[`<ComboboxInput /> create combobox input 2`] = `
4246
<div
4347
className="fd-combobox-input blue"
4448
>
45-
<span
46-
onFocus={[Function]}
47-
onMouseDown={[Function]}
48-
onTouchStart={[Function]}
49+
<div
50+
className="fd-popover"
4951
>
5052
<div
51-
className="fd-popper__control fd-popover"
53+
onFocus={[Function]}
54+
onMouseDown={[Function]}
55+
onTouchStart={[Function]}
5256
>
5357
<div
54-
className="fd-combobox-control"
55-
onClick={[Function]}
58+
className="fd-popover__control"
5659
>
5760
<div
58-
className="fd-input-group fd-input-group--after fd-input-group--compact"
61+
className="fd-combobox-control"
62+
onClick={[Function]}
5963
>
60-
<input
61-
className="fd-input fd-input--compact"
62-
placeholder="Select Fruit"
63-
type="text"
64-
/>
65-
<span
66-
className="fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button"
64+
<div
65+
className="fd-input-group fd-input-group--after fd-input-group--compact"
6766
>
68-
<button
69-
className=" fd-button--light sap-icon--navigation-down-arrow"
67+
<input
68+
className="fd-input fd-input--compact"
69+
placeholder="Select Fruit"
70+
type="text"
7071
/>
71-
</span>
72+
<span
73+
className="fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button"
74+
>
75+
<button
76+
className=" fd-button--light sap-icon--navigation-down-arrow"
77+
/>
78+
</span>
79+
</div>
7280
</div>
7381
</div>
7482
</div>
75-
</span>
83+
</div>
7684
</div>
7785
`;

‎src/Dropdown/__snapshots__/Dropdown.test.js.snap‎

Lines changed: 78 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -4,114 +4,136 @@ exports[`<Dropdown /> create dropdown component 1`] = `
44
<div
55
className="fd-dropdown"
66
>
7-
<span
8-
onFocus={[Function]}
9-
onMouseDown={[Function]}
10-
onTouchStart={[Function]}
7+
<div
8+
className="fd-popover"
119
>
1210
<div
13-
className="fd-popper__control fd-popover"
11+
onFocus={[Function]}
12+
onMouseDown={[Function]}
13+
onTouchStart={[Function]}
1414
>
15-
<button
16-
className="fd-button fd-dropdown__control"
17-
onClick={[Function]}
15+
<div
16+
className="fd-popover__control"
1817
>
19-
Select
20-
</button>
18+
<button
19+
className="fd-button fd-dropdown__control"
20+
onClick={[Function]}
21+
>
22+
Select
23+
</button>
24+
</div>
2125
</div>
22-
</span>
26+
</div>
2327
</div>
2428
`;
2529

2630
exports[`<Dropdown /> create dropdown component 2`] = `
2731
<div
2832
className="fd-dropdown blue"
2933
>
30-
<span
31-
onFocus={[Function]}
32-
onMouseDown={[Function]}
33-
onTouchStart={[Function]}
34+
<div
35+
className="fd-popover"
3436
>
3537
<div
36-
className="fd-popper__control fd-popover"
38+
onFocus={[Function]}
39+
onMouseDown={[Function]}
40+
onTouchStart={[Function]}
3741
>
38-
<button
39-
className="fd-button fd-dropdown__control fd-button--compact"
40-
onClick={[Function]}
42+
<div
43+
className="fd-popover__control"
4144
>
42-
Select
43-
</button>
45+
<button
46+
className="fd-button fd-dropdown__control fd-button--compact"
47+
onClick={[Function]}
48+
>
49+
Select
50+
</button>
51+
</div>
4452
</div>
45-
</span>
53+
</div>
4654
</div>
4755
`;
4856

4957
exports[`<Dropdown /> create dropdown component 3`] = `
5058
<div
5159
className="fd-dropdown fd-dropdown--standard"
5260
>
53-
<span
54-
onFocus={[Function]}
55-
onMouseDown={[Function]}
56-
onTouchStart={[Function]}
61+
<div
62+
className="fd-popover"
5763
>
5864
<div
59-
className="fd-popper__control fd-popover"
65+
onFocus={[Function]}
66+
onMouseDown={[Function]}
67+
onTouchStart={[Function]}
6068
>
61-
<button
62-
className="fd-button fd-button--standard fd-dropdown__control"
63-
onClick={[Function]}
69+
<div
70+
className="fd-popover__control"
6471
>
65-
Select
66-
</button>
72+
<button
73+
className="fd-button fd-button--standard fd-dropdown__control"
74+
onClick={[Function]}
75+
>
76+
Select
77+
</button>
78+
</div>
6779
</div>
68-
</span>
80+
</div>
6981
</div>
7082
`;
7183

7284
exports[`<Dropdown /> create dropdown component 4`] = `
7385
<div
7486
className="fd-dropdown"
7587
>
76-
<span
77-
onFocus={[Function]}
78-
onMouseDown={[Function]}
79-
onTouchStart={[Function]}
88+
<div
89+
className="fd-popover"
90+
id="jhqD0557"
8091
>
8192
<div
82-
className="fd-popper__control fd-popover"
93+
onFocus={[Function]}
94+
onMouseDown={[Function]}
95+
onTouchStart={[Function]}
8396
>
84-
<button
85-
className="fd-button fd-dropdown__control sap-icon--filter"
86-
onClick={[Function]}
97+
<div
98+
className="fd-popover__control"
8799
>
88-
Select
89-
</button>
100+
<button
101+
className="fd-button fd-dropdown__control sap-icon--filter"
102+
onClick={[Function]}
103+
>
104+
Select
105+
</button>
106+
</div>
90107
</div>
91-
</span>
108+
</div>
92109
</div>
93110
`;
94111

95112
exports[`<Dropdown /> create dropdown component 5`] = `
96113
<div
97114
className="fd-dropdown"
98115
>
99-
<span
100-
onFocus={[Function]}
101-
onMouseDown={[Function]}
102-
onTouchStart={[Function]}
116+
<div
117+
className="fd-popover"
118+
id="jhqD0561"
103119
>
104120
<div
105-
className="fd-popper__control fd-popover"
121+
onFocus={[Function]}
122+
onMouseDown={[Function]}
123+
onTouchStart={[Function]}
106124
>
107-
<button
108-
className="fd-button fd-dropdown__control sap-icon--filter is-disabled"
109-
disabled={true}
110-
onClick={[Function]}
125+
<div
126+
className="fd-popover__control"
111127
>
112-
Select
113-
</button>
128+
<button
129+
className="fd-button fd-dropdown__control sap-icon--filter is-disabled"
130+
disabled={true}
131+
onClick={[Function]}
132+
>
133+
Select
134+
</button>
135+
</div>
114136
</div>
115-
</span>
137+
</div>
116138
</div>
117139
`;

‎src/LocalizationEditor/LocalizationEditor.test.js‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -90,10 +90,8 @@ describe('<LocalizationEditor />', () => {
9090
}} />
9191
);
9292

93-
element.find('.fd-popper__control > div').simulate('click');
94-
9593
expect(
96-
element.find('.fd-popper__body').getDOMNode().attributes['data-sample'].value
94+
element.find('.fd-popover').getDOMNode().attributes['data-sample'].value
9795
).toBe('Sample');
9896
});
9997

@@ -183,7 +181,7 @@ describe('<LocalizationEditor />', () => {
183181
menu={defaultMenuArray} />
184182
);
185183

186-
element.find('.fd-popper__control > div').simulate('click');
184+
element.find('.fd-popover__control > div').simulate('click');
187185

188186
expect(
189187
element.find('nav > ul').getDOMNode().attributes['data-sample'].value
@@ -202,7 +200,7 @@ describe('<LocalizationEditor />', () => {
202200
menu={menu} />
203201
);
204202

205-
element.find('.fd-popper__control > div').simulate('click');
203+
element.find('.fd-popover__control > div').simulate('click');
206204

207205
const listItems = element.find('nav > ul > li');
208206

@@ -231,7 +229,7 @@ describe('<LocalizationEditor />', () => {
231229
textarea />
232230
);
233231

234-
element.find('.fd-popper__control > div').simulate('click');
232+
element.find('.fd-popover__control > div').simulate('click');
235233

236234
const listItems = element.find('nav ul li textarea');
237235

@@ -259,7 +257,7 @@ describe('<LocalizationEditor />', () => {
259257
menu={menu} />
260258
);
261259

262-
element.find('.fd-popper__control > div').simulate('click');
260+
element.find('.fd-popover__control > div').simulate('click');
263261

264262
const listItems = element.find('nav ul li input');
265263

0 commit comments

Comments
 (0)