feat(server): add label to dropdown component

GoogleChrome · Oct 29, 2019 · ec95bc8 · ec95bc8
1 parent 9ea0d49
commit ec95bc8
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 58 deletions.
diff --git a/packages/server/src/ui/components/dropdown.css b/packages/server/src/ui/components/dropdown.css
@@ -5,11 +5,24 @@
  */
 
 .dropdown {
+  border-bottom: 1px solid var(--strong-border-color);
+  padding-bottom: calc(var(--base-spacing) / 2);
+
+  font-family: var(--base-font-family);
+  font-size: var(--base-font-size);
+  font-weight: var(--medium-font-weight);
+}
+
+.dropdown__label {
+  color: var(--secondary-text-color);
+  margin-right: calc(var(--base-spacing) / 2);
+}
+
+.dropdown select {
   position: relative;
   background: none;
   border: none;
   border-radius: 0;
-  border-bottom: 1px solid var(--strong-border-color);
   -webkit-appearance: none;
 
   padding-right: 20px;

diff --git a/packages/server/src/ui/components/dropdown.jsx b/packages/server/src/ui/components/dropdown.jsx
@@ -4,30 +4,36 @@
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
 
-import {h} from 'preact';
+import {h, Fragment} from 'preact';
 import clsx from 'clsx';
 import './dropdown.css';
 
-/** @param {{options: Array<{value: string, label: string}>, value: string, setValue(v: string): void, className?: string, title?: string}} props */
+/** @param {{options: Array<{value: string, label: string}>, value: string, setValue(v: string): void, className?: string, title?: string, label?: string}} props */
 export const Dropdown = props => {
-  const {options, value, setValue, className, title} = props;
+  const {options, value, setValue, className, title, label} = props;
   return (
-    <div className={className} style={{position: 'relative'}} data-tooltip={title}>
-      <select
-        className={clsx('dropdown')}
-        onChange={evt => {
-          if (!(evt.target instanceof HTMLSelectElement)) return;
-          setValue(evt.target.value);
-        }}
-      >
-        {options.map(option => {
-          return (
-            <option key={option.value} value={option.value} selected={option.value === value}>
-              {option.label}
-            </option>
-          );
-        })}
-      </select>
+    <div
+      className={clsx('dropdown', className)}
+      style={{position: 'relative'}}
+      data-tooltip={title}
+    >
+      <label>
+        {label ? <span className="dropdown__label">{label}</span> : <Fragment />}
+        <select
+          onChange={evt => {
+            if (!(evt.target instanceof HTMLSelectElement)) return;
+            setValue(evt.target.value);
+          }}
+        >
+          {options.map(option => {
+            return (
+              <option key={option.value} value={option.value} selected={option.value === value}>
+                {option.label}
+              </option>
+            );
+          })}
+        </select>
+      </label>
       <div className="dropdown__chevron" />
     </div>
   );

diff --git a/packages/server/src/ui/routes/build-view/build-view-options.jsx b/packages/server/src/ui/routes/build-view/build-view-options.jsx
@@ -6,13 +6,12 @@
 
 import {h} from 'preact';
 import './build-view-options.css';
-import {Dropdown} from '../../components/dropdown';
 import {LhrViewerLink} from '../../components/lhr-viewer-link';
 
 // @ts-ignore
 const LOGO_SVG_URL = require('../../logo.svg');
 
-/** @param {{compareLhr: LH.Result, baseLhr?: LH.Result, percentAbsoluteDeltaThreshold: number, setPercentAbsoluteDeltaThreshold: (x: number) => void}} props */
+/** @param {{compareLhr: LH.Result, baseLhr?: LH.Result}} props */
 export const BuildViewOptions = props => {
   return (
     <div className="build-view__options">
@@ -28,21 +27,6 @@ export const BuildViewOptions = props => {
           <img src={LOGO_SVG_URL} alt="Open Compare Report" />
         </div>
       </LhrViewerLink>
-      <Dropdown
-        className="build-view-options__dropdown"
-        title="Set minimum delta threshold (% change)"
-        value={props.percentAbsoluteDeltaThreshold.toString()}
-        setValue={value => {
-          props.setPercentAbsoluteDeltaThreshold(Number(value));
-        }}
-        options={[
-          {value: '0', label: '0%'},
-          {value: '0.05', label: '5%'},
-          {value: '0.1', label: '10%'},
-          {value: '0.15', label: '15%'},
-          {value: '0.25', label: '25%'},
-        ]}
-      />
     </div>
   );
 };
diff --git a/packages/server/src/ui/routes/build-view/build-view.css b/packages/server/src/ui/routes/build-view/build-view.css
@@ -25,12 +25,17 @@
   align-items: center;
 }
 
-.build-view__url-dropdown {
+.build-view__dropdowns {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+
+  margin-top: calc(var(--base-spacing) / 2);
   margin-bottom: var(--base-spacing);
 }
 
-.build-view__url-dropdown select {
-  height: calc(var(--header-font-size) + var(--base-spacing));
+.build-view__dropdowns .dropdown {
+  margin-right: var(--base-spacing);
 }
 
 .build-view__legend-and-options {

diff --git a/packages/server/src/ui/routes/build-view/build-view.jsx b/packages/server/src/ui/routes/build-view/build-view.jsx
@@ -88,22 +88,37 @@ function computeAuditGroups(lhr, baseLhr, options) {
 /** @typedef {{id: string, audits: Array<LH.AuditResult>, group: {id: string, title: string}}} IntermediateAuditGroupDef */
 /** @typedef {{id: string, pairs: Array<LHCI.AuditPair>, group: {id: string, title: string}}} AuditGroupDef */
 
-/** @param {{selectedUrl: string, build: LHCI.ServerCommand.Build | null, lhr?: LH.Result, baseLhr?: LH.Result, urls: Array<string>}} props */
+/** @param {{selectedUrl: string, build: LHCI.ServerCommand.Build | null, lhr?: LH.Result, baseLhr?: LH.Result, urls: Array<string>, percentAbsoluteDeltaThreshold: number, setPercentAbsoluteDeltaThreshold: (x: number) => void}} props */
 const BuildViewScoreAndUrl = props => {
   return (
     <div className="build-view__scores-and-url">
       <div className="container">
-        <Dropdown
-          title="Comparison URL"
-          className="build-view__url-dropdown"
-          value={props.selectedUrl}
-          setValue={url => {
-            const to = new URL(window.location.href);
-            to.searchParams.set('compareUrl', url);
-            route(`${to.pathname}${to.search}`);
-          }}
-          options={props.urls.map(url => ({value: url, label: url}))}
-        />
+        <div className="build-view__dropdowns">
+          <Dropdown
+            label="URL"
+            value={props.selectedUrl}
+            setValue={url => {
+              const to = new URL(window.location.href);
+              to.searchParams.set('compareUrl', url);
+              route(`${to.pathname}${to.search}`);
+            }}
+            options={props.urls.map(url => ({value: url, label: url}))}
+          />
+          <Dropdown
+            label="Threshold"
+            value={props.percentAbsoluteDeltaThreshold.toString()}
+            setValue={value => {
+              props.setPercentAbsoluteDeltaThreshold(Number(value));
+            }}
+            options={[
+              {value: '0', label: '0%'},
+              {value: '0.05', label: '5%'},
+              {value: '0.1', label: '10%'},
+              {value: '0.15', label: '15%'},
+              {value: '0.25', label: '25%'},
+            ]}
+          />
+        </div>
         <BuildScoreComparison {...props} />
       </div>
     </div>
@@ -235,6 +250,8 @@ const BuildView_ = props => {
             baseLhr={baseLhr}
             selectedUrl={selectedUrl}
             urls={availableUrls}
+            percentAbsoluteDeltaThreshold={percentAbsoluteDeltaThreshold}
+            setPercentAbsoluteDeltaThreshold={setDiffThreshold}
           />
         )}
         <div className="container">
@@ -251,12 +268,7 @@ const BuildView_ = props => {
               ) : (
                 <div className="build-view__legend-and-options">
                   <BuildViewLegend />
-                  <BuildViewOptions
-                    compareLhr={lhr}
-                    baseLhr={baseLhr}
-                    percentAbsoluteDeltaThreshold={percentAbsoluteDeltaThreshold}
-                    setPercentAbsoluteDeltaThreshold={setDiffThreshold}
-                  />
+                  <BuildViewOptions compareLhr={lhr} baseLhr={baseLhr} />
                 </div>
               )}
               <AuditGroups

diff --git a/packages/server/src/ui/routes/project-dashboard/project-graphs.jsx b/packages/server/src/ui/routes/project-dashboard/project-graphs.jsx
@@ -40,6 +40,7 @@ const Legend = props => {
         );
       })}
       <Dropdown
+        label="Branch"
         options={branches.map(branch => ({value: branch, label: branch}))}
         value={props.branch}
         setValue={value => {

diff --git a/...d-test-js-project-dashboard-render-the-dashboard-should-look-correct-1-snap.png b/...d-test-js-project-dashboard-render-the-dashboard-should-look-correct-1-snap.png