Skip to content

Commit ed53a6e

Browse files
ochosiochosi
committed
fix(CodeEditor): Account for focus loss fix
1 parent 4316acc commit ed53a6e

File tree

1 file changed

+102
-96
lines changed

1 file changed

+102
-96
lines changed

‎packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap‎

Lines changed: 102 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -6,124 +6,130 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
66
class="pf-v6-c-code-editor"
77
>
88
<div
9-
class="pf-v6-c-code-editor__header"
9+
class="pf-v6-c-code-editor__container"
10+
role="presentation"
11+
tabindex="0"
1012
>
1113
<div
12-
class="pf-v6-c-code-editor__header-content"
14+
class="pf-v6-c-code-editor__header"
1315
>
1416
<div
15-
class="pf-v6-c-code-editor__controls"
17+
class="pf-v6-c-code-editor__header-content"
1618
>
1719
<div
18-
style="display: contents;"
20+
class="pf-v6-c-code-editor__controls"
1921
>
20-
<button
21-
aria-label="Copy code to clipboard"
22-
class="pf-v6-c-button pf-m-plain"
23-
data-ouia-component-id="OUIA-Generated-Button-plain-1"
24-
data-ouia-component-type="PF6/Button"
25-
data-ouia-safe="true"
26-
type="button"
22+
<div
23+
style="display: contents;"
2724
>
28-
<span
29-
class="pf-v6-c-button__icon"
25+
<button
26+
aria-label="Copy code to clipboard"
27+
class="pf-v6-c-button pf-m-plain"
28+
data-ouia-component-id="OUIA-Generated-Button-plain-1"
29+
data-ouia-component-type="PF6/Button"
30+
data-ouia-safe="true"
31+
type="button"
3032
>
31-
<svg
32-
aria-hidden="true"
33-
class="pf-v6-svg"
34-
fill="currentColor"
35-
height="1em"
36-
role="img"
37-
viewBox="0 0 448 512"
38-
width="1em"
33+
<span
34+
class="pf-v6-c-button__icon"
3935
>
40-
<path
41-
d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
42-
/>
43-
</svg>
44-
</span>
45-
</button>
46-
</div>
47-
<div
48-
style="display: contents;"
49-
>
50-
<button
51-
aria-label="Upload code"
52-
class="pf-v6-c-button pf-m-plain"
53-
data-ouia-component-id="OUIA-Generated-Button-plain-2"
54-
data-ouia-component-type="PF6/Button"
55-
data-ouia-safe="true"
56-
type="button"
36+
<svg
37+
aria-hidden="true"
38+
class="pf-v6-svg"
39+
fill="currentColor"
40+
height="1em"
41+
role="img"
42+
viewBox="0 0 448 512"
43+
width="1em"
44+
>
45+
<path
46+
d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
47+
/>
48+
</svg>
49+
</span>
50+
</button>
51+
</div>
52+
<div
53+
style="display: contents;"
5754
>
58-
<span
59-
class="pf-v6-c-button__icon"
55+
<button
56+
aria-label="Upload code"
57+
class="pf-v6-c-button pf-m-plain"
58+
data-ouia-component-id="OUIA-Generated-Button-plain-2"
59+
data-ouia-component-type="PF6/Button"
60+
data-ouia-safe="true"
61+
type="button"
6062
>
61-
<svg
62-
aria-hidden="true"
63-
class="pf-v6-svg"
64-
fill="currentColor"
65-
height="1em"
66-
role="img"
67-
viewBox="0 0 512 512"
68-
width="1em"
63+
<span
64+
class="pf-v6-c-button__icon"
6965
>
70-
<path
71-
d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
72-
/>
73-
</svg>
74-
</span>
75-
</button>
76-
</div>
77-
<div
78-
style="display: contents;"
79-
>
80-
<button
81-
aria-label="Download code"
82-
class="pf-v6-c-button pf-m-plain"
83-
data-ouia-component-id="OUIA-Generated-Button-plain-3"
84-
data-ouia-component-type="PF6/Button"
85-
data-ouia-safe="true"
86-
type="button"
66+
<svg
67+
aria-hidden="true"
68+
class="pf-v6-svg"
69+
fill="currentColor"
70+
height="1em"
71+
role="img"
72+
viewBox="0 0 512 512"
73+
width="1em"
74+
>
75+
<path
76+
d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
77+
/>
78+
</svg>
79+
</span>
80+
</button>
81+
</div>
82+
<div
83+
style="display: contents;"
8784
>
88-
<span
89-
class="pf-v6-c-button__icon"
85+
<button
86+
aria-label="Download code"
87+
class="pf-v6-c-button pf-m-plain"
88+
data-ouia-component-id="OUIA-Generated-Button-plain-3"
89+
data-ouia-component-type="PF6/Button"
90+
data-ouia-safe="true"
91+
type="button"
9092
>
91-
<svg
92-
aria-hidden="true"
93-
class="pf-v6-svg"
94-
fill="currentColor"
95-
height="1em"
96-
role="img"
97-
viewBox="0 0 512 512"
98-
width="1em"
93+
<span
94+
class="pf-v6-c-button__icon"
9995
>
100-
<path
101-
d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
102-
/>
103-
</svg>
104-
</span>
105-
</button>
96+
<svg
97+
aria-hidden="true"
98+
class="pf-v6-svg"
99+
fill="currentColor"
100+
height="1em"
101+
role="img"
102+
viewBox="0 0 512 512"
103+
width="1em"
104+
>
105+
<path
106+
d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
107+
/>
108+
</svg>
109+
</span>
110+
</button>
111+
</div>
106112
</div>
107113
</div>
108114
</div>
109-
</div>
110-
<div
111-
class="pf-v6-c-code-editor__main"
112-
>
113-
<input
114-
hidden=""
115-
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
116-
tabindex="-1"
117-
type="file"
118-
/>
119115
<div
120-
class="pf-v6-c-code-editor__code"
121-
dir="ltr"
122-
tabindex="0"
116+
class="pf-v6-c-code-editor__main"
123117
>
124-
<div
125-
data-testid="mock-editor"
118+
<input
119+
hidden=""
120+
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
121+
tabindex="-1"
122+
type="file"
126123
/>
124+
<div
125+
class="pf-v6-c-code-editor__code"
126+
dir="ltr"
127+
tabindex="0"
128+
>
129+
<div
130+
data-testid="mock-editor"
131+
/>
132+
</div>
127133
</div>
128134
</div>
129135
</div>

0 commit comments

Comments
 (0)