fix(composer): convert to inline overlay CSS

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

Hide file tree

Showing 14 changed files with 120 additions and 127 deletions.
diff --git a/...ages/scene-composer/src/components/panels/scene-components/DataOverlayComponentEditor.tsx b/...ages/scene-composer/src/components/panels/scene-components/DataOverlayComponentEditor.tsx
@@ -23,7 +23,6 @@ export const DataOverlayComponentEditor: React.FC<IDataOverlayComponentEditorPro
     (state) => state.getEditorConfig().valueDataBindingProvider,
   );
   const { formatMessage } = useIntl();
-  const subtype = component.subType;
 
   const onUpdateCallback = useCallback(
     (componentPartial: Partial<IDataOverlayComponentInternal>, replace?: boolean) => {

diff --git a/...s/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayContainer.tsx b/...s/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayContainer.tsx
@@ -8,7 +8,15 @@ import { sceneComposerIdContext } from '../../../common/sceneComposerIdContext';
 import useCallbackWhenNotPanning from '../../../hooks/useCallbackWhenNotPanning';
 
 import { DataOverlayRows } from './DataOverlayRows';
-import './styles.scss';
+import {
+  tmAnnotationContainer,
+  tmArrow,
+  tmArrowInner,
+  tmArrowOuter,
+  tmCloseButton,
+  tmContainer,
+  tmPanelContainer,
+} from './styles';
 
 export interface DataOverlayContainerProps {
   node: ISceneNodeInternal;
@@ -22,6 +30,7 @@ export const DataOverlayContainer = ({ component, node }: DataOverlayContainerPr
   const selectedSceneNodeRef = useStore(sceneComposerId)((state) => state.selectedSceneNodeRef);
   const setSelectedSceneNodeRef = useStore(sceneComposerId)((state) => state.setSelectedSceneNodeRef);
   const subType = component.subType;
+  const isAnnotation = component.subType === Component.DataOverlaySubType.TextAnnotation;
 
   const componentVisible = useViewOptionState(sceneComposerId).componentVisibilities[subType];
   const initialVisibilitySkipped = useRef(false);
@@ -67,22 +76,20 @@ export const DataOverlayContainer = ({ component, node }: DataOverlayContainerPr
         ref={containerRef}
         onPointerUp={onPointerUp}
         onPointerDown={onPointerDown}
-        className={`container ${
-          component.subType === Component.DataOverlaySubType.TextAnnotation ? 'annotation-container' : 'panel-container'
-        }`}
+        style={{ ...tmContainer, ...(isAnnotation ? tmAnnotationContainer : tmPanelContainer) }}
       >
-        {component.subType === Component.DataOverlaySubType.OverlayPanel && !componentVisible && (
-          <div className='close-button'>
+        {!isAnnotation && !componentVisible && (
+          <div style={tmCloseButton}>
             <Button iconName='close' variant='icon' iconAlign='right' onClick={onClickCloseButton} />
           </div>
         )}
         <DataOverlayRows component={component} />
       </div>
 
       {subType == Component.DataOverlaySubType.OverlayPanel && (
-        <div className='arrow'>
-          <div className='container arrow-outer' />
-          <div className='container arrow-outer arrow-inner' />
+        <div style={tmArrow}>
+          <div style={{ ...tmContainer, ...tmArrowOuter }} />
+          <div style={{ ...tmContainer, ...tmArrowOuter, ...tmArrowInner }} />
         </div>
       )}
     </>

diff --git a/...ges/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayDataRow.tsx b/...ges/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayDataRow.tsx
@@ -7,7 +7,8 @@ import { useStore } from '../../../store';
 import { dataBindingValuesProvider } from '../../../utils/dataBindingUtils';
 import { replaceBindingVariables } from '../../../utils/dataBindingVariableUtils';
 import { ReactMarkdownWrapper } from '../../wrappers/ReactMarkdownWrapper';
-import './styles.scss';
+
+import { tmAnnotationRow } from './styles';
 
 export interface DataOverlayDataRowProps {
   rowData: Component.DataOverlayRow;
@@ -24,6 +25,7 @@ export const DataOverlayDataRow = ({
   const dataInput = useStore(sceneComposerId)((state) => state.dataInput);
   const dataBindingTemplate = useStore(sceneComposerId)((state) => state.dataBindingTemplate);
   const isEditing = useStore(sceneComposerId)((state) => state.isEditing());
+  const isAnnotation = overlayType === Component.DataOverlaySubType.TextAnnotation;
 
   const [stringContent, setStringContent] = useState<string>('');
 
@@ -71,12 +73,7 @@ export const DataOverlayDataRow = ({
 
   switch (rowData.rowType) {
     case Component.DataOverlayRowType.Markdown: {
-      return (
-        <ReactMarkdownWrapper
-          className={overlayType === Component.DataOverlaySubType.TextAnnotation ? 'annotation-row' : 'panel-row'}
-          content={stringContent}
-        />
-      );
+      return <ReactMarkdownWrapper style={isAnnotation ? tmAnnotationRow : undefined} content={stringContent} />;
     }
     default:
       return <></>;

diff --git a/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayRows.tsx b/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayRows.tsx
@@ -4,19 +4,17 @@ import { Component } from '../../../models/SceneModels';
 import { IDataOverlayComponentInternal } from '../../../store/internalInterfaces';
 
 import { DataOverlayDataRow } from './DataOverlayDataRow';
-import './styles.scss';
+import { tmPanelRows } from './styles';
 
 export interface DataOverlayRowsProps {
   component: IDataOverlayComponentInternal;
 }
 
 export const DataOverlayRows = ({ component }: DataOverlayRowsProps): ReactElement => {
+  const isAnnotation = component.subType === Component.DataOverlaySubType.TextAnnotation;
+
   return (
-    <div
-      className={`${
-        component.subType === Component.DataOverlaySubType.TextAnnotation ? 'annotation-rows' : 'panel-rows'
-      }`}
-    >
+    <div style={!isAnnotation ? tmPanelRows : undefined}>
       {component.dataRows.map((row, index) => {
         return (
           <DataOverlayDataRow

diff --git a/...fiber/DataOverlayComponent/__tests__/__snapshots__/DataOverlayContainerSnap.spec.tsx.snap b/...fiber/DataOverlayComponent/__tests__/__snapshots__/DataOverlayContainerSnap.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`DataOverlayContainer should render with annotation invisible correctly
 exports[`DataOverlayContainer should render with annotation visible correctly 1`] = `
 <div>
   <div
-    class="container annotation-container"
+    style="overflow: auto; border-radius: 2px; box-shadow: 0px 1px 4px -2px rgba(0, 28, 36, 0.5); padding-left: 12px; padding-right: 12px;"
   >
     <div
       data-testid="rows"
@@ -21,7 +21,7 @@ exports[`DataOverlayContainer should render with panel invisible correctly 1`] =
 exports[`DataOverlayContainer should render with panel visible correctly 1`] = `
 <div>
   <div
-    class="container panel-container"
+    style="overflow: auto; border-radius: 2px; box-shadow: 0px 1px 4px -2px rgba(0, 28, 36, 0.5); padding-top: 12px; padding-bottom: 12px; width: 210px; min-height: 2em;"
   >
     <div
       data-testid="rows"
@@ -30,13 +30,13 @@ exports[`DataOverlayContainer should render with panel visible correctly 1`] = `
     </div>
   </div>
   <div
-    class="arrow"
+    style="height: 14px; display: flex; flex-direction: column; align-items: center;"
   >
     <div
-      class="container arrow-outer"
+      style="overflow: auto; border-radius: 2px; box-shadow: 0px 1px 4px -2px rgba(0, 28, 36, 0.5); width: 18px; height: 18px; position: absolute; z-index: -1; bottom: 5px; transform: rotate(45deg);"
     />
     <div
-      class="container arrow-outer arrow-inner"
+      style="overflow: auto; border: 0px; border-radius: 2px; box-shadow: 0px 1px 4px -2px rgba(0, 28, 36, 0.5); width: 20px; height: 20px; position: absolute; z-index: 1; bottom: 6.5px; transform: rotate(45deg);"
     />
   </div>
 </div>
@@ -45,10 +45,10 @@ exports[`DataOverlayContainer should render with panel visible correctly 1`] = `
 exports[`DataOverlayContainer should render with panel visible correctly when the overlay node is selected 1`] = `
 <div>
   <div
-    class="container panel-container"
+    style="overflow: auto; border-radius: 2px; box-shadow: 0px 1px 4px -2px rgba(0, 28, 36, 0.5); padding-top: 12px; padding-bottom: 12px; width: 210px; min-height: 2em;"
   >
     <div
-      class="close-button"
+      style="float: right; margin-top: 8px; margin-right: 8px;"
     >
       <div
         data-mocked="Button"
@@ -64,13 +64,13 @@ exports[`DataOverlayContainer should render with panel visible correctly when th
     </div>
   </div>
   <div
-    class="arrow"
+    style="height: 14px; display: flex; flex-direction: column; align-items: center;"
   >
     <div
-      class="container arrow-outer"
+      style="overflow: auto; border-radius: 2px; box-shadow: 0px 1px 4px -2px rgba(0, 28, 36, 0.5); width: 18px; height: 18px; position: absolute; z-index: -1; bottom: 5px; transform: rotate(45deg);"
     />
     <div
-      class="container arrow-outer arrow-inner"
+      style="overflow: auto; border: 0px; border-radius: 2px; box-shadow: 0px 1px 4px -2px rgba(0, 28, 36, 0.5); width: 20px; height: 20px; position: absolute; z-index: 1; bottom: 6.5px; transform: rotate(45deg);"
     />
   </div>
 </div>

diff --git a/...e-fiber/DataOverlayComponent/__tests__/__snapshots__/DataOverlayDataRowSnap.spec.tsx.snap b/...e-fiber/DataOverlayComponent/__tests__/__snapshots__/DataOverlayDataRowSnap.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`DataOverlayDataRow Markdown should render markdown row for overlay pane
   <div
     data-testid="ReactMarkdownWrapper"
   >
-    [{"className":"panel-row","content":"# content"},{}]
+    [{"content":"# content"},{}]
   </div>
 </div>
 `;
@@ -15,7 +15,7 @@ exports[`DataOverlayDataRow Markdown should render markdown row for text annotat
   <div
     data-testid="ReactMarkdownWrapper"
   >
-    [{"className":"annotation-row","content":"# content"},{}]
+    [{"style":{"whiteSpace":"nowrap"},"content":"# content"},{}]
   </div>
 </div>
 `;
@@ -25,7 +25,7 @@ exports[`DataOverlayDataRow Markdown should render markdown row with data bindin
   <div
     data-testid="ReactMarkdownWrapper"
   >
-    [{"className":"annotation-row","content":"# content \${binding-a}"},{}]
+    [{"style":{"whiteSpace":"nowrap"},"content":"# content \${binding-a}"},{}]
   </div>
 </div>
 `;
@@ -35,7 +35,7 @@ exports[`DataOverlayDataRow Markdown should render markdown row with data bindin
   <div
     data-testid="ReactMarkdownWrapper"
   >
-    [{"className":"annotation-row","content":"# content 22"},{}]
+    [{"style":{"whiteSpace":"nowrap"},"content":"# content 22"},{}]
   </div>
 </div>
 `;
diff --git a/...hree-fiber/DataOverlayComponent/__tests__/__snapshots__/DataOverlayRowsSnap.spec.tsx.snap b/...hree-fiber/DataOverlayComponent/__tests__/__snapshots__/DataOverlayRowsSnap.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`DataOverlayRows should render overlay panel correctly 1`] = `
 <div>
   <div
-    class="panel-rows"
+    style="margin-left: 1em; margin-right: 1em;"
   >
     <div
       data-testid="data-row"
@@ -21,9 +21,7 @@ exports[`DataOverlayRows should render overlay panel correctly 1`] = `
 
 exports[`DataOverlayRows should render text annotation correctly 1`] = `
 <div>
-  <div
-    class="annotation-rows"
-  >
+  <div>
     <div
       data-testid="data-row"
     >

diff --git a/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/styles.scss b/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/styles.scss
diff --git a/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/styles.ts b/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/styles.ts
@@ -0,0 +1,60 @@
+import { colorBackgroundContainerHeader, colorBorderButtonNormalDisabled } from '@awsui/design-tokens';
+import { CSSProperties } from 'react';
+
+// DataRow
+export const tmAnnotationRow: CSSProperties = {
+  whiteSpace: 'nowrap',
+};
+
+// Rows
+export const tmPanelRows: CSSProperties = {
+  marginLeft: '1em',
+  marginRight: '1em',
+};
+
+// Container
+export const tmContainer: CSSProperties = {
+  overflow: 'auto',
+  backgroundColor: colorBackgroundContainerHeader,
+  border: `1px solid ${colorBorderButtonNormalDisabled}`,
+  borderRadius: '2px',
+  boxShadow: '0px 1px 4px -2px rgba(0, 28, 36, 0.5)',
+};
+export const tmPanelContainer: CSSProperties = {
+  paddingTop: '12px',
+  paddingBottom: '12px',
+  width: '210px',
+  minHeight: '2em',
+};
+export const tmAnnotationContainer: CSSProperties = {
+  paddingLeft: '12px',
+  paddingRight: '12px',
+};
+export const tmCloseButton: CSSProperties = {
+  float: 'right',
+  marginTop: '8px',
+  marginRight: '8px',
+};
+
+// Overlay panel arrow
+export const tmArrow: CSSProperties = {
+  height: '14px',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+};
+export const tmArrowOuter: CSSProperties = {
+  width: '18px',
+  height: '18px',
+  position: 'absolute',
+  zIndex: -1,
+  bottom: '5px',
+  transform: 'rotate(45deg)',
+};
+export const tmArrowInner: CSSProperties = {
+  border: '0px',
+  bottom: '6.5px',
+  width: '20px',
+  height: '20px',
+  zIndex: '1',
+};
diff --git a/...omposer/src/components/three-fiber/SubModelComponent/__tests__/SubModelComponent.spec.tsx b/...omposer/src/components/three-fiber/SubModelComponent/__tests__/SubModelComponent.spec.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { Euler, Mesh, Vector3 } from 'three';
+import { Mesh, Vector3 } from 'three';
 
 import SubModelComponent from '..';
 import { ISceneNodeInternal, useEditorState } from '../../../../store';

diff --git a/packages/scene-composer/src/components/wrappers/ReactMarkdownWrapper.scss b/packages/scene-composer/src/components/wrappers/ReactMarkdownWrapper.scss