feat(web-ts-results): make dropdown independent

Author: nakrovati

webdriver-ts-results/src/App.css

@@ -1,105 +1,43 @@
 :root {
-  box-sizing: border-box;
+  --border-color: #ccc;
 }
 *,
-*::before,
-*::after {
-  box-sizing: inherit;
+::before,
+::after {
+  box-sizing: border-box;
 }
+
 body {
   font-family: Helvetica, Arial, sans-serif;
   font-size: 14px;
   margin: 10px;
 }
+
 a,
 a:active,
 a:hover {
   text-decoration: none;
 }
+
 button,
 select {
   font-size: 14px;
 }
-.selectBar {
+
   background-color: #fafafa;
-  border-top: 1px solid #ccc;
-  border-bottom: 1px solid #ccc;
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
 }
 select {
-  border: 1px solid #ccc;
+  border: 1px solid var(--border-color);
   border-radius: 4px;
   height: 29px;
   background: #fff;
 }
-.header-row {
-  margin: 20px 0;
-}
-.dropdown-container > .shutter,
-.dropdown-container > .dropdown-menu {
-  display: none;
-}
-.open > .shutter,
-.open > .dropdown-menu {
-  display: block;
-}
-.dropdown-menu > .section {
-  position: relative;
-}
-.open > .dropdown-menu {
-  z-index: 1000;
-  position: absolute;
-  background: #fff;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: 4px 4px 5px 5px rgba(0, 0, 0, 0.2);
-  padding: 10px;
-}
-.dropdown,
-.dropdown:focus {
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  padding: 5px 10px;
-  outline: none;
-  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0);
-  transition: all 0.5s;
-}
-.dropdown.open {
-  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
-}
-
-.dropdown > .caret {
-  width: 10px;
-  height: 5px;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 5px solid #ccc;
-  display: inline-block;
-}
-
-.shutter {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 999;
-  display: none;
-}
 
 input + label {
   margin-left: 5px;
 }
-
-.float-rt {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-}
-
-.grid {
-  column-count: 3;
-}
-
 .hspan {
   display: inline-block;
   width: 10px;
@@ -157,20 +95,24 @@ table.results th {
 td {
   text-align: center;
 }
+
 .rowCount {
   font-size: 10px;
 }
+
 .deviation {
   font-size: 8px;
   padding-left: 5px;
 }
-.deviation:before {
+.deviation::before {
   content: "± ";
 }
+
 .factor {
   font-size: 8px;
 }
-.sortKey {
+
+.sort-key {
   text-decoration: underline;
 }
 
@@ -190,44 +132,49 @@ dd {
   padding: 0;
   margin: 0;
 }
+
 .with-issues {
   background-color: #faa;
 }
 
-.textButton {
-  color: rgb(0, 0, 238);
+.button {
+  cursor: pointer;
+}
+
+.button__text {
+  color: #00e;
   font-size: inherit;
   border: none;
   background: none;
-  outline-style: none;
-  cursor: pointer;
 }
 
-.iconbutton {
-  border: 1px solid #ccc;
+.button__text:disabled {
+  color: #666;
+  font-weight: normal;
+}
+
+.button__icon {
+  border: 1px solid var(--border-color);
   border-radius: 4px;
-  padding: 2px 2px;
-  outline: none;
-  box-shadow: 0px 0px 2px 2px rgb(0 0 0 / 0%);
+  padding: 2px;
   width: 26px;
 }
-.iconbutton:active {
+
+.button__icon:active {
   border: 1px solid #888;
 }
+
 .header-row {
   display: flex;
 }
 .header-row > * {
   align-self: center;
 }
 
-button:disabled.textButton {
-  color: #666;
-  font-weight: normal;
-}
 .error {
   background-color: #f99;
 }
+
 .warning {
   background-color: #ff6;
 }

webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableRow.tsx

@@ -41,11 +41,9 @@ const BoxPlotTableRow = ({
     <tr key={benchmark.id} style={{ height: 400 }}>
       <th className="benchname">
         <button
-          className={
-            currentSortKey === benchmark.id
-              ? "sortKey textButton"
-              : "textButton"
-          }
+          className={`button button__text ${
+            currentSortKey === benchmark.id ? "sort-key" : ""
+          }`}
           onClick={handleSortByBenchmarkResults}
           aria-label="Sort by benchmark results (from best to worst)"
         >

webdriver-ts-results/src/components/BoxPlotTable/index.tsx

@@ -38,11 +38,9 @@ const BoxPlotTable = ({
           <tr>
             <th className="benchname">
               <button
-                className={
-                  currentSortKey === SORT_BY_NAME
-                    ? "sortKey textButton"
-                    : "textButton"
-                }
+                className={`button button__text ${
+                    currentSortKey === SORT_BY_NAME ? "sort-key" : ""
+                }`}
                 aria-label="Sort frameworks in ascending order (asc)"
                 onClick={handleSortByName}
               >

webdriver-ts-results/src/components/DropDown/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { BenchmarkType } from "../../../Common";
 import { useRootStore } from "../../../reducer";
-import DropDownContents from "../../DropDown/DropDownContents";
+import SelectorContentContainer from "../SelectorContentContainer";
 import BenchmarkSelectorList from "./BenchmarkSelectorList";
 
 interface Props {
@@ -26,19 +26,19 @@ const BenchmarkSelectorCategory = ({ label, benchmarkType }: Props) => {
   const selectBenchmark = useRootStore((state) => state.selectBenchmark);
 
   return (
-    <DropDownContents
+    <SelectorContentContainer
       isNoneSelected={isNoneSelected(benchmarkType)}
       areAllSelected={areAllSelected(benchmarkType)}
       selectNone={() => selectAllBenchmarks(benchmarkType, false)}
       selectAll={() => selectAllBenchmarks(benchmarkType, true)}
+      label={label}
     >
-      <h3>{label}</h3>
       <BenchmarkSelectorList
         isSelected={(benchmark) => selectedBenchmarks.has(benchmark)}
         select={(benchmark, add) => selectBenchmark(benchmark, add)}
         benchmarks={benchmarks}
       />
-    </DropDownContents>
+    </SelectorContentContainer>
   );
 };
 

webdriver-ts-results/src/components/selection/BenchmarkSelector/BenchmarkSelectorCategory.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import { BenchmarkType } from "../../../Common";
-import DropDown from "../../DropDown";
+import Dropdown from "../../ui/Dropdown";
 import BenchmarkSelectorCategory from "./BenchmarkSelectorCategory";
 
 const BenchmarkSelector = () => {
   console.log("BenchmarkSelector");
 
   return (
-    <DropDown label="Which benchmarks?" width="300px">
+    <Dropdown label="Which benchmarks?" width="300px">
       <BenchmarkSelectorCategory
         benchmarkType={BenchmarkType.CPU}
         label="Duration"
@@ -20,7 +20,7 @@ const BenchmarkSelector = () => {
         benchmarkType={BenchmarkType.MEM}
         label="Memory"
       />
-    </DropDown>
+    </Dropdown>
   );
 };
 

webdriver-ts-results/src/components/selection/BenchmarkSelector/index.tsx

@@ -81,21 +81,22 @@ const CopyPasteSelection = () => {
   return (
     <>
       <p>Copy/paste current selection</p>
-      <div className="hspan" />
-      <button
-        className="iconbutton"
-        onClick={copy}
-        aria-label="Copy selected frameworks and benchmarks"
-      >
-        <CopyIcon></CopyIcon>
-      </button>
-      <button
-        className="iconbutton"
-        onClick={handlePasteFromClipboard}
-        aria-label="Paste selected items (or use ctrl/cmd + v for firefox)"
-      >
-        <PasteIcon></PasteIcon>
-      </button>
+      <div>
+        <button
+          className="button__icon"
+          onClick={copy}
+          aria-label="Copy selected frameworks and benchmarks"
+        >
+          <CopyIcon></CopyIcon>
+        </button>
+        <button
+          className="button__icon"
+          onClick={handlePasteFromClipboard}
+          aria-label="Paste selected items (or use ctrl/cmd + v for firefox)"
+        >
+          <PasteIcon></PasteIcon>
+        </button>
+      </div>
     </>
   );
 };