fix(composer): update overlay css

awslabs · Apr 7, 2023 · b3f97b3 · b3f97b3
1 parent f117e5e
commit b3f97b3
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 54 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/...s/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayComponent.tsx b/...s/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayComponent.tsx
@@ -18,7 +18,7 @@ export const DataOverlayComponent = ({ node, component }: DataOverlayComponentPr
   return (
     <group>
       <Html
-        className='html-wrapper'
+        className='tm-html-wrapper'
         // TODO: add position after finding proper way to always display overlay right above tag
         // position={position}
         style={{

diff --git a/...c/components/three-fiber/DataOverlayComponent/__tests__/DataOverlayComponentSnap.spec.tsx b/...c/components/three-fiber/DataOverlayComponent/__tests__/DataOverlayComponentSnap.spec.tsx
@@ -51,7 +51,7 @@ describe('DataOverlayComponent', () => {
     const { container } = render(
       <DataOverlayComponent node={mockNode as ISceneNodeInternal} component={mockComponent} />,
     );
-    expect(container.getElementsByClassName('html-wrapper').length).toBe(1);
+    expect(container.getElementsByClassName('tm-html-wrapper').length).toBe(1);
     expect(container).toMatchSnapshot();
   });
 

diff --git a/...fiber/DataOverlayComponent/__tests__/__snapshots__/DataOverlayComponentSnap.spec.tsx.snap b/...fiber/DataOverlayComponent/__tests__/__snapshots__/DataOverlayComponentSnap.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`DataOverlayComponent should render the component correctly 1`] = `
 <div>
   <group>
     <div
-      class="html-wrapper"
+      class="tm-html-wrapper"
       data-mocked="Html"
       style="transform: translate3d(-50%,-100%,0);"
     >
@@ -22,7 +22,7 @@ exports[`DataOverlayComponent should render the component correctly with object
 <div>
   <group>
     <div
-      class="html-wrapper"
+      class="tm-html-wrapper"
       data-mocked="Html"
       style="transform: translate3d(-50%,-100%,0);"
     >

diff --git 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;
+    }
   }
 }