Update ribbon error banner to a div (#5187)

iterative · Jan 11, 2024 · a7c2490 · a7c2490
1 parent eb39666
commit a7c2490
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 44 deletions.
diff --git a/webview/src/plots/components/ribbon/Errors.tsx b/webview/src/plots/components/ribbon/Errors.tsx
@@ -23,14 +23,14 @@ export const Errors: React.FC = () => {
   }
 
   return (
-    <li className={styles.errors}>
+    <div className={styles.errors}>
       <button
         className={styles.errorsButton}
         onClick={() => dispatch(setShowErrorsModal(true))}
       >
         <Error className={styles.errorsIcon} width="16" height="16" />
         {errorsTotal === 1 ? 'Show error' : `Show ${errorsTotal} errors`}
       </button>
-    </li>
+    </div>
   )
 }
diff --git a/webview/src/plots/components/ribbon/Ribbon.tsx b/webview/src/plots/components/ribbon/Ribbon.tsx
@@ -24,7 +24,7 @@ export const Ribbon: React.FC = () => {
     rootMargin: '-5px',
     threshold: 0.95
   })
-  const measurementsRef = useRef<HTMLUListElement>()
+  const measurementsRef = useRef<HTMLDivElement>()
   const dispatch = useDispatch()
 
   const revisions = useSelector(
@@ -60,43 +60,45 @@ export const Ribbon: React.FC = () => {
   }, [changeRibbonHeight])
 
   return (
-    <ul
+    <div
       ref={node => {
         if (node) {
           measurementsRef.current = node
         }
         ref(node)
       }}
       data-testid="ribbon"
-      className={cx(styles.list, needsShadow && styles.withShadow)}
+      className={cx(styles.ribbon, needsShadow && styles.withShadow)}
     >
-      <li className={styles.buttonWrapper}>
-        <IconButton onClick={addPlot} icon={Add} text="Add Plot" />
-      </li>
-      <li className={styles.buttonWrapper}>
-        <IconButton
-          onClick={selectRevisions}
-          icon={ListFilter}
-          text={`${revisions.length} of ${MAX_NB_EXP}`}
-          appearance="secondary"
-        />
-      </li>
-      <li className={styles.buttonWrapper}>
-        <IconButton
-          onClick={refreshRevisions}
-          icon={Refresh}
-          text="Refresh All"
-          appearance="secondary"
-        />
-      </li>
-      {revisions.map(revision => (
-        <RibbonBlock
-          revision={revision}
-          key={revision.id}
-          onClear={() => removeRevision(revision.id)}
-        />
-      ))}
+      <ul className={styles.list}>
+        <li className={styles.buttonWrapper}>
+          <IconButton onClick={addPlot} icon={Add} text="Add Plot" />
+        </li>
+        <li className={styles.buttonWrapper}>
+          <IconButton
+            onClick={selectRevisions}
+            icon={ListFilter}
+            text={`${revisions.length} of ${MAX_NB_EXP}`}
+            appearance="secondary"
+          />
+        </li>
+        <li className={styles.buttonWrapper}>
+          <IconButton
+            onClick={refreshRevisions}
+            icon={Refresh}
+            text="Refresh All"
+            appearance="secondary"
+          />
+        </li>
+        {revisions.map(revision => (
+          <RibbonBlock
+            revision={revision}
+            key={revision.id}
+            onClear={() => removeRevision(revision.id)}
+          />
+        ))}
+      </ul>
       <Errors />
-    </ul>
+    </div>
   )
 }
diff --git a/webview/src/plots/components/ribbon/styles.module.scss b/webview/src/plots/components/ribbon/styles.module.scss
@@ -166,26 +166,30 @@
   }
 }
 
-.list {
-  display: flex;
+.ribbon {
   position: sticky;
-  align-items: center;
-  gap: 6px;
-  border-bottom: 1px solid $border-color;
-  padding: 10px 15px;
-  margin: 0;
-  flex-wrap: wrap;
-  top: 0;
-  width: 100%;
+  transition: box-shadow 0.25s;
   z-index: 100;
+  top: 0;
   background-color: $bg-color;
-  transition: box-shadow 0.25s;
+  border-bottom: 1px solid $border-color;
+  padding: 10px 15px;
 
   &.withShadow {
     box-shadow: 0 5px 8px -2px $shadow;
   }
 }
 
+.list {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
 .buttonWrapper {
   list-style: none;
 }
@@ -200,7 +204,7 @@
 }
 
 .errors {
-  margin: 5px 0 0;
+  margin: 10px 0 0;
   color: $error-color;
   border-top: 1px solid $error-color;
   border-bottom: 1px solid $error-color;