Skip to content

Commit ed856c0

Browse files
akoremanakoreman
committed
Merge remote-tracking branch 'origin/line_wrap_upstream' into line_wrap
2 parents 7929a08 + ceecca6 commit ed856c0

File tree

5 files changed

+72
-113
lines changed

5 files changed

+72
-113
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,4 +153,4 @@
153153
"limit": "10kb"
154154
}
155155
]
156-
}
156+
}

‎src/code-view/__tests__/code-view.test.tsx‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,21 @@ describe("CodeView", () => {
2424
const wrapper = createWrapper()!.findCodeView()!;
2525
const content = wrapper.findContent();
2626
expect(content.getElement()).toHaveTextContent("# Hello World This is a markdown example.");
27+
expect(wrapper!.findContent()[0].getElement()).toHaveTextContent("Hello World");
28+
});
29+
30+
test("correctly renders multi line content", () => {
31+
const content = `# Hello World\n\nThis is a markdown example.`;
32+
33+
render(<CodeView content={content}></CodeView>);
34+
const wrapper = createWrapper()!.findCodeView();
35+
const contentElements = wrapper!.findContent();
36+
expect(contentElements.length).toEqual(3);
37+
const renderedContent = contentElements
38+
.map((element) => element.getElement().textContent)
39+
.join("")
40+
.trim();
41+
expect(renderedContent).toBe(content);
2742
});
2843

2944
test("correctly renders copy button slot", () => {
@@ -68,13 +83,13 @@ describe("CodeView", () => {
6883
></CodeView>,
6984
);
7085
const wrapper = createWrapper().findCodeView()!;
71-
expect(wrapper!.findContent().getElement().innerHTML).toContain("tokenized");
86+
expect(wrapper!.findContent()[0].getElement().innerHTML).toContain("tokenized");
7287
});
7388

7489
test("correctly tokenizes content if highlight is set to language rules", () => {
7590
render(<CodeView content={'const hello: string = "world";'} highlight={typescriptHighlightRules}></CodeView>);
7691
const wrapper = createWrapper().findCodeView()!;
77-
const element = wrapper!.findContent().getElement();
92+
const element = wrapper!.findContent()[0].getElement();
7893

7994
// Check that the content is tokenized following typescript rules.
8095
expect(getByText(element, "const")).toHaveClass("ace_type");
@@ -86,21 +101,21 @@ describe("CodeView", () => {
86101
test("sets nowrap class to line if linesWrapping undefined", () => {
87102
render(<CodeView content={"Hello World"}></CodeView>);
88103
const wrapper = createWrapper().findCodeView()!;
89-
const element = wrapper!.findContent().getElement();
104+
const element = wrapper!.findContent()[0].getElement();
90105
expect(element.outerHTML).toContain("code-line-nowrap");
91106
});
92107

93108
test("sets nowrap class to line if linesWrapping false", () => {
94109
render(<CodeView lineWrapping={false} content={"Hello World"}></CodeView>);
95110
const wrapper = createWrapper().findCodeView()!;
96-
const element = wrapper!.findContent().getElement();
111+
const element = wrapper!.findContent()[0].getElement();
97112
expect(element.outerHTML).toContain("code-line-nowrap");
98113
});
99114

100115
test("sets wrap class to line if linesWrapping true", () => {
101116
render(<CodeView lineWrapping={true} content={"Hello World"}></CodeView>);
102117
const wrapper = createWrapper().findCodeView()!;
103-
const element = wrapper!.findContent().getElement();
118+
const element = wrapper!.findContent()[0].getElement();
104119
expect(element.outerHTML).toContain("code-line-wrap");
105120
});
106121
});

‎src/code-view/internal.tsx‎

Lines changed: 41 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -63,60 +63,48 @@ export function InternalCodeView({
6363
ref={__internalRootRef}
6464
>
6565
<div className={styles["scroll-container"]}>
66-
<div className={clsx(lineNumbers && styles["root-with-numbers"], actions && styles["root-with-actions"])}>
67-
<pre
68-
ref={preRef}
69-
className={clsx(
70-
darkMode ? ACE_CLASSES.dark : ACE_CLASSES.light,
71-
styles.code,
72-
lineNumbers && styles["code-with-line-numbers"],
73-
actions && styles["code-with-actions"],
74-
)}
75-
>
76-
<table
77-
role="presentation"
78-
className={clsx(
79-
styles["code-table"],
80-
actions && styles["code-table-with-actions"],
81-
lineWrapping && styles["code-table-with-line-wrapping"],
82-
)}
83-
>
84-
<colgroup>
85-
<col style={{ width: 1 } /* shrink to fit content */} />
86-
<col style={{ width: "auto" }} />
87-
</colgroup>
88-
<tbody>
89-
{Children.map(code.props.children, (child, index) => {
90-
return (
91-
<tr key={index}>
92-
{lineNumbers && (
93-
<td className={clsx(styles["line-number"], styles.unselectable)} aria-hidden={true}>
94-
<Box variant="code" color="text-status-inactive" fontSize="body-m">
95-
{index + 1}
96-
</Box>
97-
</td>
98-
)}
99-
<td className={styles["code-line"]}>
100-
<Box variant="code" fontSize="body-m">
101-
<span
102-
className={clsx(
103-
code.props.className,
104-
lineWrapping ? styles["code-line-wrap"] : styles["code-line-nowrap"],
105-
)}
106-
>
107-
{child}
108-
</span>
109-
</Box>
110-
</td>
111-
</tr>
112-
);
113-
})}
114-
</tbody>
115-
</table>
116-
</pre>
117-
</div>
118-
{actions && <div className={styles.actions}>{actions}</div>}
66+
<table
67+
role="presentation"
68+
className={clsx(
69+
styles["code-table"],
70+
actions && styles["code-table-with-actions"],
71+
lineWrapping && styles["code-table-with-line-wrapping"],
72+
)}
73+
>
74+
<colgroup>
75+
<col style={{ width: 1 } /* shrink to fit content */} />
76+
<col style={{ width: "auto" }} />
77+
</colgroup>
78+
<tbody>
79+
{Children.map(code.props.children, (child, index) => {
80+
return (
81+
<tr key={index}>
82+
{lineNumbers && (
83+
<td className={clsx(styles["line-number"], styles.unselectable)} aria-hidden={true}>
84+
<Box variant="code" color="text-status-inactive" fontSize="body-m">
85+
{index + 1}
86+
</Box>
87+
</td>
88+
)}
89+
<td className={styles["code-line"]}>
90+
<Box variant="code" fontSize="body-m">
91+
<span
92+
className={clsx(
93+
code.props.className,
94+
lineWrapping ? styles["code-line-wrap"] : styles["code-line-nowrap"],
95+
)}
96+
>
97+
{child}
98+
</span>
99+
</Box>
100+
</td>
101+
</tr>
102+
);
103+
})}
104+
</tbody>
105+
</table>
119106
</div>
107+
{actions && <div className={styles.actions}>{actions}</div>}
120108
</div>
121109
);
122110
}

‎src/code-view/styles.scss‎

Lines changed: 8 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -8,45 +8,23 @@
88
SPDX-License-Identifier: Apache-2.0
99
*/
1010

11+
/*
12+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
13+
SPDX-License-Identifier: Apache-2.0
14+
*/
15+
1116
@use "../../node_modules/@cloudscape-design/design-tokens/index.scss" as cs;
1217

1318
$color-background-code-view-light: #f8f8f8;
1419
$color-background-code-view-dark: #282c34;
1520

1621
.root {
1722
position: relative;
18-
&-with-numbers {
19-
display: flex;
20-
align-items: stretch;
21-
}
22-
}
23-
24-
.code {
25-
background-color: $color-background-code-view-light;
26-
display: flex;
27-
border-start-start-radius: cs.$border-radius-tiles;
28-
border-start-end-radius: cs.$border-radius-tiles;
29-
border-end-start-radius: cs.$border-radius-tiles;
30-
border-end-end-radius: cs.$border-radius-tiles;
31-
padding-block: cs.$space-static-xs;
32-
padding-inline: cs.$space-static-xs;
33-
margin-block: 0;
34-
margin-inline: 0;
35-
overflow: auto;
3623
:global(.awsui-dark-mode) &,
3724
:global(.awsui-polaris-dark-mode) & {
3825
background-color: $color-background-code-view-dark;
3926
}
40-
&-with-line-numbers {
41-
border-start-start-radius: 0;
42-
border-end-start-radius: 0;
43-
flex: 1;
44-
}
45-
&-with-actions {
46-
min-block-size: cs.$space-scaled-xxl;
47-
padding-inline-end: calc(2 * cs.$space-static-xxxl);
48-
align-items: center;
49-
}
27+
background-color: $color-background-code-view-light;
5028
}
5129

5230
.scroll-container {
@@ -58,8 +36,8 @@ $color-background-code-view-dark: #282c34;
5836
border-start-end-radius: cs.$border-radius-tiles;
5937
border-end-start-radius: cs.$border-radius-tiles;
6038
border-end-end-radius: cs.$border-radius-tiles;
61-
padding-block-start: cs.$space-static-xs;
62-
padding-block-end: cs.$space-static-xs;
39+
padding-top: cs.$space-static-xs;
40+
padding-bottom: cs.$space-static-xs;
6341
table-layout: auto;
6442
width: 100%;
6543
border-spacing: 0;
@@ -105,28 +83,6 @@ $color-background-code-view-dark: #282c34;
10583
}
10684
}
10785

108-
.line-numbers {
109-
border-start-start-radius: cs.$border-radius-tiles;
110-
border-end-start-radius: cs.$border-radius-tiles;
111-
background-color: $color-background-code-view-light;
112-
padding-block: cs.$space-static-xs;
113-
padding-inline: cs.$space-static-xs;
114-
display: flex;
115-
flex-direction: column;
116-
align-items: flex-end;
117-
border-inline-end-width: 1px;
118-
border-inline-end-style: solid;
119-
border-inline-end-color: cs.$color-border-divider-default;
120-
justify-content: center;
121-
:global(.awsui-dark-mode) &,
122-
:global(.awsui-polaris-dark-mode) & {
123-
background-color: $color-background-code-view-dark;
124-
}
125-
&-with-actions {
126-
min-block-size: cs.$space-scaled-xxl;
127-
}
128-
}
129-
13086
.actions {
13187
position: absolute;
13288
inset-block-start: cs.$space-scaled-xs;

‎src/test-utils/dom/code-view/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import styles from "../../../code-view/styles.selectors.js";
77
export default class CodeViewWrapper extends ComponentWrapper {
88
static rootSelector: string = styles.root;
99

10-
findContent(): ElementWrapper {
11-
return this.find("tbody")!;
10+
findContent() {
11+
return this.findAllByClassName(styles["code-line"])!;
1212
}
1313

1414
findActions(): ElementWrapper | null {

0 commit comments

Comments
 (0)