From b3f97b3e1effe020689698c579e651365d3378fd Mon Sep 17 00:00:00 2001 From: Xinyi Xu Date: Thu, 6 Apr 2023 21:42:41 -0700 Subject: [PATCH] fix(composer): update overlay css --- package-lock.json | 3 +- .../DataOverlayComponent.tsx | 2 +- .../DataOverlayComponentSnap.spec.tsx | 2 +- .../DataOverlayComponentSnap.spec.tsx.snap | 4 +- .../DataOverlayComponent/styles.scss | 100 +++++++++--------- 5 files changed, 57 insertions(+), 54 deletions(-) diff --git a/package-lock.json b/package-lock.json index 06e44c6c3..27ad4faf1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -71304,7 +71304,8 @@ }, "peerDependencies": { "react": "^17.0.2", - "react-dom": "^17.0.2" + "react-dom": "^17.0.2", + "react-intl": "^5" } }, "packages/scene-composer/node_modules/@aws-crypto/ie11-detection": { diff --git a/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayComponent.tsx b/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayComponent.tsx index 3b0a69006..abd03f6fb 100644 --- a/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayComponent.tsx +++ b/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayComponent.tsx @@ -18,7 +18,7 @@ export const DataOverlayComponent = ({ node, component }: DataOverlayComponentPr return ( { const { container } = render( , ); - expect(container.getElementsByClassName('html-wrapper').length).toBe(1); + expect(container.getElementsByClassName('tm-html-wrapper').length).toBe(1); expect(container).toMatchSnapshot(); }); diff --git a/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/__tests__/__snapshots__/DataOverlayComponentSnap.spec.tsx.snap b/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/__tests__/__snapshots__/DataOverlayComponentSnap.spec.tsx.snap index 5f47c2b6e..c4639987c 100644 --- a/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/__tests__/__snapshots__/DataOverlayComponentSnap.spec.tsx.snap +++ b/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/__tests__/__snapshots__/DataOverlayComponentSnap.spec.tsx.snap @@ -4,7 +4,7 @@ exports[`DataOverlayComponent should render the component correctly 1`] = `
@@ -22,7 +22,7 @@ exports[`DataOverlayComponent should render the component correctly with object
diff --git a/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/styles.scss b/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/styles.scss index 4d636f2cc..47e681c44 100644 --- a/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/styles.scss +++ b/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/styles.scss @@ -1,56 +1,58 @@ @use '@awsui/design-tokens/index.scss' as awsui; -// DataRow -.annotation-row { - white-space: nowrap -} - -// Rows -.panel-rows { - margin-left: 1em; - margin-right: 1em -} +.tm-html-wrapper { + // DataRow + .annotation-row { + white-space: nowrap + } -// Container -.container { - overflow: auto; - background-color: awsui.$color-background-container-header; - border: 1px solid awsui.$color-border-button-normal-disabled; - border-radius: 2px; - box-shadow: 0px 1px 4px -2px rgba(0, 28, 36, 0.5); -} -.panel-container { - width: 210px; - min-height: 2em; -} -.annotation-container { - padding-left: 12px; - padding-right: 12px; -} -.close-button { - float: right; - margin-top: 8px; - margin-right: 8px -} -.arrow { - height: 14px; - display: flex; - flex-direction: column; - align-items: center; + // Rows + .panel-rows { + margin-left: 1em; + margin-right: 1em + } - .arrow-outer { - width: 18px; - height: 18px; - position: absolute; - z-index: -1; - bottom: 5px; - transform: rotate(45deg); + // Container + .container { + overflow: auto; + background-color: awsui.$color-background-container-header; + border: 1px solid awsui.$color-border-button-normal-disabled; + border-radius: 2px; + box-shadow: 0px 1px 4px -2px rgba(0, 28, 36, 0.5); + } + .panel-container { + width: 210px; + min-height: 2em; } - .arrow-inner { - border: 0px; - bottom: 6.5px; - width: 20px; - height: 20px; - z-index: 1; + .annotation-container { + padding-left: 12px; + padding-right: 12px; + } + .close-button { + float: right; + margin-top: 8px; + margin-right: 8px + } + .arrow { + height: 14px; + display: flex; + flex-direction: column; + align-items: center; + + .arrow-outer { + width: 18px; + height: 18px; + position: absolute; + z-index: -1; + bottom: 5px; + transform: rotate(45deg); + } + .arrow-inner { + border: 0px; + bottom: 6.5px; + width: 20px; + height: 20px; + z-index: 1; + } } }