Skip to content

Commit

Permalink
fix: Fixes borders, dark mode highlight, and actions padding style is…
Browse files Browse the repository at this point in the history
…sues (#57)

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

* removes debugging code

* re-add background color to line numbers
  • Loading branch information
pan-kot authored Jan 6, 2025
1 parent f3e1063 commit 3401aa5
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 22 deletions.
13 changes: 9 additions & 4 deletions pages/code-view/simple.page.tsx
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
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
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

0 comments on commit 3401aa5

Please sign in to comment.