Conform class names of mx_AppTileBody for a widget and PiP widget t…

…o our naming policy (#11002) * Rename classes of appTileBodyClass Include mx_AppTileBody_fadeInSpinner in mx_AppTileBody, the class name applied by default * Apply a common CSS declaration to mx_AppTileBody * Strictify style rule specificity to avoid visual regressions - mx_AppTileBody--* * Run prettier * Change --normal to --large * Edit and add comments When you add, edit, or remove style rules from mx_appTileBody without causing a visual regression, it is imperative to keep in mind which selector should be worked on. The comments should help developers who are not familiar with the style codebase to avoid a regression. * Rename classes of appTileBodyClass Include mx_AppTileBody_fadeInSpinner in mx_AppTileBody, the class name applied by default * Apply a common CSS declaration to mx_AppTileBody * Strictify style rule specificity to avoid visual regressions - mx_AppTileBody--* * Run prettier * Change --normal to --large * Edit and add comments When you add, edit, or remove style rules from mx_appTileBody without causing a visual regression, it is imperative to keep in mind which selector should be worked on. The comments should help developers who are not familiar with the style codebase to avoid a regression. * Update a Jest snapshot * Update a Jest snapshot
matrix-org · Jun 16, 2023 · 2972219 · 2972219
1 parent 77da949
commit 2972219
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 49 deletions.
diff --git a/res/css/views/rooms/_AppsDrawer.pcss b/res/css/views/rooms/_AppsDrawer.pcss
@@ -254,20 +254,13 @@ limitations under the License.
     }
 }
 
-.mx_AppTileBody,
-.mx_AppTileBody_mini {
-    width: 100%;
-    overflow: hidden;
+/* Rules added to this selector style appTileBody generally */
+.mx_AppTileBody {
+    /* Apply to every variant of appTileBody */
     border-radius: 8px;
-    height: var(--AppTileBody-height);
-
-    iframe {
-        border: none;
-        width: 100%;
-        height: 100%;
-    }
 
     /* const loadingElement */
+    /* Note the loading spinner and the message next to it are not always included in mx_AppTileBody--loading */
     .mx_AppTileBody_fadeInSpinner {
         /* place spinner and the message at the center of mx_AppTileBody */
         height: 100%;
@@ -279,49 +272,63 @@ limitations under the License.
         animation-delay: 500ms;
         animation-name: mx_AppTileBody_fadeInSpinnerAnimation;
     }
-}
-
-.mx_AppTileBody {
-    --AppTileBody-height: 100%;
-
-    background-color: $widget-body-bg-color;
 
-    iframe {
+    &.mx_AppTileBody--large,
+    &.mx_AppTileBody--mini {
+        width: 100%;
         overflow: hidden;
-        padding: 0;
-        margin: 0;
-        display: block;
+        height: var(--AppTileBody-height);
+
+        iframe {
+            border: none;
+            width: 100%;
+            height: 100%;
+        }
     }
-}
 
-.mx_AppTileBody_mini {
-    --AppTileBody-height: var(--AppTile_mini-height);
-}
+    &.mx_AppTileBody--large {
+        --AppTileBody-height: 100%;
 
-.mx_AppTile .mx_AppTileBody,
-.mx_AppTileFullWidth .mx_AppTileBody,
-.mx_AppTile_mini .mx_AppTileBody_mini {
-    height: inherit;
-    flex: 1;
-}
+        background-color: $widget-body-bg-color;
 
-.mx_AppTile_loading {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    height: 100%;
+        iframe {
+            overflow: hidden;
+            padding: 0;
+            margin: 0;
+            display: block;
+        }
+    }
 
-    /* match bg of border so that the cut corners have the right fill */
-    background-color: $widget-body-bg-color !important;
-    border-radius: 8px;
+    &.mx_AppTileBody--mini {
+        --AppTileBody-height: var(--AppTile_mini-height);
+    }
+
+    &.mx_AppTileBody--loading {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        height: 100%;
+
+        /* match bg of border so that the cut corners have the right fill */
+        background-color: $widget-body-bg-color !important;
 
-    iframe {
-        display: none;
+        iframe {
+            display: none;
+        }
     }
 }
 
+/* appTileBody is embedded to PersistedElement outside of mx_AppTile,
+   so rules to style appTileBody generally should not be included here. */
+.mx_AppTile .mx_AppTileBody--large,
+.mx_AppTileFullWidth .mx_AppTileBody--large,
+.mx_AppTile_mini .mx_AppTileBody--mini {
+    height: inherit;
+    flex: 1;
+}
+
 @keyframes mx_AppTileBody_fadeInSpinnerAnimation {
     from {
         opacity: 0;

diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx
@@ -596,9 +596,10 @@ export default class AppTile extends React.Component<IProps, IState> {
             "microphone; camera; encrypted-media; autoplay; display-capture; clipboard-write; " + "clipboard-read;";
 
         const appTileBodyClass = classNames({
-            mx_AppTileBody: !this.props.miniMode,
-            mx_AppTileBody_mini: this.props.miniMode,
-            mx_AppTile_loading: this.state.loading,
+            "mx_AppTileBody": true,
+            "mx_AppTileBody--large": !this.props.miniMode,
+            "mx_AppTileBody--mini": this.props.miniMode,
+            "mx_AppTileBody--loading": this.state.loading,
         });
         const appTileBodyStyles: CSSProperties = {};
         if (this.props.pointerEvents) {

diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
@@ -43,7 +43,7 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
         id="1"
       >
         <div
-          class="mx_AppTileBody mx_AppTile_loading"
+          class="mx_AppTileBody mx_AppTileBody--large mx_AppTileBody--loading"
         >
           <div
             class="mx_AppTileBody_fadeInSpinner"
@@ -230,7 +230,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
       </span>
     </div>
     <div
-      class="mx_AppTileBody"
+      class="mx_AppTileBody mx_AppTileBody--large"
     >
       <div
         class="mx_AppPermission"
@@ -383,7 +383,7 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
             </span>
           </div>
           <div
-            class="mx_AppTileBody mx_AppTile_loading"
+            class="mx_AppTileBody mx_AppTileBody--large mx_AppTileBody--loading"
           >
             <div
               class="mx_AppTileBody_fadeInSpinner"