Skip to content

Commit a53c929

Browse files
nicolethoennicolethoen
authored
fix(CodeEditor): only include pf-v6-c-code-editor__upload when hovering is active over an empty state (#11568)
* fix(CodeEditor): only include pf-v6-c-code-editor__upload when dragging is active over an empty state * remove hover styles after upload
1 parent 542f96d commit a53c929

File tree

3 files changed

+102
-115
lines changed

3 files changed

+102
-115
lines changed

‎packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -669,7 +669,7 @@ class CodeEditor extends Component<CodeEditorProps, CodeEditorState> {
669669
)}
670670
ref={this.ref}
671671
>
672-
{isUploadEnabled || providedEmptyState ? (
672+
{(isUploadEnabled || providedEmptyState) && !value ? (
673673
<div
674674
{...getRootProps({
675675
onClick: (event) => event.stopPropagation() // Prevents clicking TextArea from opening file dialog
@@ -678,10 +678,14 @@ class CodeEditor extends Component<CodeEditorProps, CodeEditorState> {
678678
>
679679
{editorHeader}
680680
<div className={css(styles.codeEditorMain, isDragActive && styles.modifiers.dragHover)}>
681-
<div className={css(styles.codeEditorUpload)}>
682-
<input {...getInputProps()} /* hidden, necessary for react-dropzone */ hidden />
683-
{(showEmptyState || providedEmptyState) && !value ? emptyState : editor}
684-
</div>
681+
{(showEmptyState || providedEmptyState) && !value ? (
682+
<div className={css(styles.codeEditorUpload)}>
683+
<input {...getInputProps()} /* hidden, necessary for react-dropzone */ hidden />
684+
{emptyState}
685+
</div>
686+
) : (
687+
editor
688+
)}
685689
</div>
686690
</div>
687691
) : (

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,9 @@ test('Matches snapshot with control buttons enabled', () => {
1414
expect(asFragment()).toMatchSnapshot();
1515
});
1616

17-
test(`Renders with default classes ${styles.codeEditor}, ${styles.codeEditorMain}, ${styles.codeEditorCode}`, () => {
17+
test(`Renders with default classes ${styles.codeEditor}, ${styles.codeEditorCode}`, () => {
1818
render(<CodeEditor />);
1919
expect(screen.getByTestId('mock-editor').parentElement).toHaveClass(styles.codeEditorCode);
20-
expect(screen.getByTestId('mock-editor').parentElement?.parentElement).toHaveClass(styles.codeEditorMain);
2120
expect(screen.getByTestId('mock-editor').parentElement?.parentElement?.parentElement).toHaveClass(styles.codeEditor);
2221
});
2322

@@ -33,9 +32,9 @@ test(`Renders with ${styles.modifiers.readOnly} when isReadOnly = true`, () => {
3332
);
3433
});
3534

36-
test(`Renders with ${styles.codeEditorUpload} when isUploadEnabled = true`, () => {
35+
test(`Renders with ${styles.codeEditorMain} when isUploadEnabled = true`, () => {
3736
render(<CodeEditor isUploadEnabled code="test" />);
38-
expect(screen.getByTestId('mock-editor').parentElement?.parentElement).toHaveClass(styles.codeEditorUpload);
37+
expect(screen.getByTestId('mock-editor').parentElement?.parentElement).toHaveClass(styles.codeEditorMain);
3938
});
4039

4140
test(`Renders with empty state when code = undefined`, () => {

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

Lines changed: 90 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -6,134 +6,118 @@ 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__container"
10-
role="presentation"
11-
tabindex="0"
9+
class="pf-v6-c-code-editor__header"
1210
>
1311
<div
14-
class="pf-v6-c-code-editor__header"
12+
class="pf-v6-c-code-editor__header-content"
1513
>
1614
<div
17-
class="pf-v6-c-code-editor__header-content"
15+
class="pf-v6-c-code-editor__controls"
1816
>
1917
<div
20-
class="pf-v6-c-code-editor__controls"
18+
style="display: contents;"
2119
>
22-
<div
23-
style="display: contents;"
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"
2427
>
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"
28+
<span
29+
class="pf-v6-c-button__icon"
3230
>
33-
<span
34-
class="pf-v6-c-button__icon"
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"
3539
>
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;"
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"
5457
>
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"
58+
<span
59+
class="pf-v6-c-button__icon"
6260
>
63-
<span
64-
class="pf-v6-c-button__icon"
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"
6569
>
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;"
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"
8487
>
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"
88+
<span
89+
class="pf-v6-c-button__icon"
9290
>
93-
<span
94-
class="pf-v6-c-button__icon"
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"
9599
>
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>
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>
112106
</div>
113107
</div>
114108
</div>
109+
</div>
110+
<div
111+
class="pf-v6-c-code-editor__main"
112+
>
115113
<div
116-
class="pf-v6-c-code-editor__main"
114+
class="pf-v6-c-code-editor__code"
115+
dir="ltr"
116+
tabindex="0"
117117
>
118118
<div
119-
class="pf-v6-c-code-editor__upload"
120-
>
121-
<input
122-
hidden=""
123-
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;"
124-
tabindex="-1"
125-
type="file"
126-
/>
127-
<div
128-
class="pf-v6-c-code-editor__code"
129-
dir="ltr"
130-
tabindex="0"
131-
>
132-
<div
133-
data-testid="mock-editor"
134-
/>
135-
</div>
136-
</div>
119+
data-testid="mock-editor"
120+
/>
137121
</div>
138122
</div>
139123
</div>

0 commit comments

Comments
 (0)