Skip to content

fix: Fixes borders, dark mode highlight, and actions padding style issues #57

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pan-kot merged 3 commits into from
Jan 7, 2025
Merged

fix: Fixes borders, dark mode highlight, and actions padding style issues #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0bf4279
fix: Fixes borders, dark mode highlight, and actions padding style is…
pan-kot Jan 6, 2025
3eea730
removes debugging code
pan-kot Jan 6, 2025
3e8b339
re-add background color to line numbers
pan-kot Jan 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions pages/code-view/simple.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,21 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0

import { SpaceBetween } from "@cloudscape-design/components";

import { CodeView } from "../../lib/components";
import { ScreenshotArea } from "../screenshot-area";

export default function CodeViewPage() {
return (
<ScreenshotArea>
<h1>Code View</h1>
<CodeView content={"Hello World"} />
<CodeView
content={`public class HelloWorld {\n public static void main(String[] args) {\n System.out.println("Hello, World!");\n }\n}`}
/>
<SpaceBetween size="s">
<CodeView content={"Hello World"} />
<CodeView
content={`public class HelloWorld {\n public static void main(String[] args) {\n System.out.println("Hello, World!");\n }\n}`}
/>
</SpaceBetween>
</ScreenshotArea>
);
}
6 changes: 3 additions & 3 deletions src/code-view/internal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@ export function InternalCodeView({
...props
}: InternalCodeViewProps) {
const baseProps = getBaseProps(props);
const preRef = useRef<HTMLPreElement>(null);
const darkMode = useCurrentMode(preRef) === "dark";
const containerRef = useRef<HTMLDivElement>(null);
const darkMode = useCurrentMode(containerRef) === "dark";

const regionProps = ariaLabel || ariaLabelledby ? { role: "region" } : {};

Expand All @@ -64,7 +64,7 @@ export function InternalCodeView({
dir="ltr"
ref={__internalRootRef}
>
<div className={styles["scroll-container"]}>
<div className={styles["scroll-container"]} ref={containerRef}>
<table
role="presentation"
className={clsx(
Expand Down
33 changes: 18 additions & 15 deletions src/code-view/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@ $color-background-code-view-dark: #282c34;

.root {
position: relative;
border-start-start-radius: cs.$border-radius-tiles;
border-start-end-radius: cs.$border-radius-tiles;
border-end-start-radius: cs.$border-radius-tiles;
border-end-end-radius: cs.$border-radius-tiles;

background-color: $color-background-code-view-light;
:global(.awsui-dark-mode) &,
:global(.awsui-polaris-dark-mode) & {
Expand All @@ -22,18 +27,15 @@ $color-background-code-view-dark: #282c34;
}

.code-table {
border-start-start-radius: cs.$border-radius-tiles;
border-start-end-radius: cs.$border-radius-tiles;
border-end-start-radius: cs.$border-radius-tiles;
border-end-end-radius: cs.$border-radius-tiles;
padding-block-start: cs.$space-static-xs;
padding-block-end: cs.$space-static-xs;
table-layout: auto;
width: 100%;
inline-size: 100%;
border-spacing: 0;

&-with-actions {
min-height: calc(2 * cs.$space-scaled-xs + cs.$space-scaled-xxl);
min-block-size: calc(2 * cs.$space-scaled-xs + cs.$space-scaled-xxl);
padding-inline-end: calc(2 * var(--space-static-xxxl-qj5g91, 40px));
}
}

Expand All @@ -42,15 +44,16 @@ $color-background-code-view-dark: #282c34;
}

.line-number {
border-right-color: cs.$color-border-divider-default;
background-color: $color-background-code-view-light;
border-inline-end-color: cs.$color-border-divider-default;
vertical-align: text-top;
position: sticky;
left: 0;
border-right-width: 1px;
border-right-style: solid;
padding-left: cs.$space-static-xs;
padding-right: cs.$space-static-xs;
inset-inline-start: 0;
border-inline-end-width: 1px;
border-inline-end-style: solid;
padding-inline-start: cs.$space-static-xs;
padding-inline-end: cs.$space-static-xs;

background-color: $color-background-code-view-light;
:global(.awsui-dark-mode) &,
:global(.awsui-polaris-dark-mode) & {
background-color: $color-background-code-view-dark;
Expand All @@ -63,8 +66,8 @@ $color-background-code-view-dark: #282c34;
}

.code-line {
padding-left: cs.$space-static-xs;
padding-right: cs.$space-static-xs;
padding-inline-start: cs.$space-static-xs;
padding-inline-end: cs.$space-static-xs;
&-wrap {
white-space: pre-wrap;
word-break: break-word;
Expand Down
Loading