Merge pull request #37 from kawwong/help-dialog

Design Review - Help Dialog Styling
2019-02-07 11:16:31 -08:00 · 2019-02-07 11:16:31 -08:00 · 7309e48648
--- a/src/devpanel/components/App.css
+++ b/src/devpanel/components/App.css
@ -13,6 +13,7 @@
    flex-direction: column;
    height: 100%;
    justify-content: center;
+    position: relative;
    width: 100%;
  }

@ -39,6 +40,5 @@
@media only screen and (min-width: 1084px) {
  .modal {
    max-width: 1024px;
-    width: 80%;
  }
 }
--- a/src/devpanel/components/HelpDialog/HelpDialog.css
+++ b/src/devpanel/components/HelpDialog/HelpDialog.css
@ -7,15 +7,23 @@
    width: 100%;
  }

+  .help-dialog--cancel {
+    background: none;
+    border: none;
+    font-size: 20px;
+    margin: 8px;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
  .help-dialog--close {
    background-color: var(--color-blue);
    border: none;
-    border-radius: 4px;
+    border-radius: 2px;
    color: var(--color-white);
    font-size: 14px;
-    font-weight: 600;
-    padding: 10px 0;
-    width: 100%;
+    padding: 12px 36px;
  }

  .help-dialog--close:active,
@ -29,6 +37,7 @@
    align-content: center;
    display: flex;
    justify-content: center;
+    min-width: 320px;
    padding: 16px;
    width: 100%;
  }
@ -38,35 +47,32 @@
    display: flex;
    flex-direction: column;
    justify-content: center;
-    width: calc(100% - 16px);
+    margin: 0 28px;
+    width: 100%;
  }

  .help-dialog--heading {
+    font-weight: 600;
    text-align: center;
  }

-  .help-dialog--vocab-item {
+  .help-dialog--item {
    line-height: 18px;
    margin-bottom: 20px;
    font-size: 14px;
  }

+  .help-dialog--learn-more {
+    color: var(--color-blue);
+  }
+
  .help-dialog--vocab-title {
-    font-weight: 500;
+    font-weight: 600;
  }
 }

@media only screen and (min-width: 640px) {
  .help-dialog--action {
-    flex-direction: row;
-    margin: 16px 0 8px;
-  }
-
-  .help-dialog--content {
-    max-width: 800px;
-  }
-
-  .help-dialog--learn-more {
-    margin: 0 8px 0 0;
+    align-items: flex-end;
  }
 }
--- a/src/devpanel/components/HelpDialog/HelpDialog.js
+++ b/src/devpanel/components/HelpDialog/HelpDialog.js
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { func } from 'prop-types';

 import './HelpDialog.css';
@ -8,42 +8,49 @@ const componentLoadTimeDescription = ` is the amount of time it takes to load a
 const viewportLoadTimeDescription = `  is the amount of time it takes to load the components visible in the current viewport.`;

 const HelpDialog = (props) => (
-  <div className='help-dialog--container'>
-    <div className='help-dialog--content'>
-      <h2 className='help-dialog--heading'>Understanding Mezzurite Metrics</h2>
-      <ul className='help-dialog--vocab'>
-        <li className='help-dialog--vocab-item'>
-          <span className='help-dialog--vocab-title'>Application Load Time (ALT)</span>
-          {applicationLoadTimeDescription}
-        </li>
-        <li className='help-dialog--vocab-item'>
-          <span className='help-dialog--vocab-title'>Component Load Time (CLT)</span>
-          {componentLoadTimeDescription}
-        </li>
-        <li className='help-dialog--vocab-item'>
-          <span className='help-dialog--vocab-title'>Viewport Load Time (VLT)</span>
-          {viewportLoadTimeDescription}
-        </li>
-      </ul>
-      <div className='help-dialog--action'>
-        <a
-          aria-label='Learn more about Mezzurite'
-          className='help-dialog--learn-more'
-          href='https://github.com/Microsoft/Mezzurite#background'
-          target='_blank'
-        >
-          Learn More
-        </a>
-        <button
-          aria-label='Close'
-          className='help-dialog--close'
-          onClick={props.onCloseClick}
-        >
-          Close
-        </button>
+  <Fragment>
+    <button className='help-dialog--cancel' onClick={props.onCloseClick}>
+      <i className='ms-Icon ms-Icon--Cancel' title='Close' aria-label='Close' />
+    </button>
+    <div className='help-dialog--container'>
+      <div className='help-dialog--content'>
+        <h2 className='help-dialog--heading'>Understanding Mezzurite Metrics</h2>
+        <ul className='help-dialog--vocab'>
+          <li className='help-dialog--item'>
+            <span className='help-dialog--vocab-title'>Application Load Time (ALT)</span>
+            {applicationLoadTimeDescription}
+          </li>
+          <li className='help-dialog--item'>
+            <span className='help-dialog--vocab-title'>Component Load Time (CLT)</span>
+            {componentLoadTimeDescription}
+          </li>
+          <li className='help-dialog--item'>
+            <span className='help-dialog--vocab-title'>Viewport Load Time (VLT)</span>
+            {viewportLoadTimeDescription}
+          </li>
+          <li className='help-dialog--item'>
+            <a
+              aria-label='Learn more about Mezzurite'
+              className='help-dialog--learn-more'
+              href='https://github.com/Microsoft/Mezzurite#background'
+              target='_blank'
+            >
+              Learn More
+            </a>
+          </li>
+        </ul>
+        <div className='help-dialog--action'>
+          <button
+            aria-label='Close'
+            className='help-dialog--close'
+            onClick={props.onCloseClick}
+          >
+            Close
+          </button>
+        </div>
      </div>
    </div>
-  </div>
+  </Fragment>
 );

 HelpDialog.propTypes = {
--- a/src/devpanel/components/HelpDialog/snapshots/HelpDialog.test.js.snap
+++ b/src/devpanel/components/HelpDialog/snapshots/HelpDialog.test.js.snap
@ -1,138 +1,169 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`HelpDialog.js should render with an onCloseClick function 1`] = `
-<div
-  className="help-dialog--container"
->
-  <div
-    className="help-dialog--content"
+<React.Fragment>
+  <button
+    className="help-dialog--cancel"
+    onClick={[Function]}
+  >
+    <i
+      aria-label="Close"
+      className="ms-Icon ms-Icon--Cancel"
+      title="Close"
+    />
+  </button>
+  <div
+    className="help-dialog--container"
  >
-    <h2
-      className="help-dialog--heading"
-    >
-      Understanding Mezzurite Metrics
-    </h2>
-    <ul
-      className="help-dialog--vocab"
-    >
-      <li
-        className="help-dialog--vocab-item"
-      >
-        <span
-          className="help-dialog--vocab-title"
-        >
-          Application Load Time (ALT)
-        </span>
-         is the amount of time it takes to load the SPA framework. This is calculated using the navigation start time and the application framework load time.
-      </li>
-      <li
-        className="help-dialog--vocab-item"
-      >
-        <span
-          className="help-dialog--vocab-title"
-        >
-          Component Load Time (CLT)
-        </span>
-         is the amount of time it takes to load a single component. This is calculated by using the framework's component life cycle.
-      </li>
-      <li
-        className="help-dialog--vocab-item"
-      >
-        <span
-          className="help-dialog--vocab-title"
-        >
-          Viewport Load Time (VLT)
-        </span>
-          is the amount of time it takes to load the components visible in the current viewport.
-      </li>
-    </ul>
    <div
-      className="help-dialog--action"
+      className="help-dialog--content"
    >
-      <a
-        aria-label="Learn more about Mezzurite"
-        className="help-dialog--learn-more"
-        href="https://github.com/Microsoft/Mezzurite#background"
-        target="_blank"
+      <h2
+        className="help-dialog--heading"
      >
-        Learn More
-      </a>
-      <button
-        aria-label="Close"
-        className="help-dialog--close"
-        onClick={[Function]}
+        Understanding Mezzurite Metrics
+      </h2>
+      <ul
+        className="help-dialog--vocab"
      >
-        Close
-      </button>
+        <li
+          className="help-dialog--item"
+        >
+          <span
+            className="help-dialog--vocab-title"
+          >
+            Application Load Time (ALT)
+          </span>
+           is the amount of time it takes to load the SPA framework. This is calculated using the navigation start time and the application framework load time.
+        </li>
+        <li
+          className="help-dialog--item"
+        >
+          <span
+            className="help-dialog--vocab-title"
+          >
+            Component Load Time (CLT)
+          </span>
+           is the amount of time it takes to load a single component. This is calculated by using the framework's component life cycle.
+        </li>
+        <li
+          className="help-dialog--item"
+        >
+          <span
+            className="help-dialog--vocab-title"
+          >
+            Viewport Load Time (VLT)
+          </span>
+            is the amount of time it takes to load the components visible in the current viewport.
+        </li>
+        <li
+          className="help-dialog--item"
+        >
+          <a
+            aria-label="Learn more about Mezzurite"
+            className="help-dialog--learn-more"
+            href="https://github.com/Microsoft/Mezzurite#background"
+            target="_blank"
+          >
+            Learn More
+          </a>
+        </li>
+      </ul>
+      <div
+        className="help-dialog--action"
+      >
+        <button
+          aria-label="Close"
+          className="help-dialog--close"
+          onClick={[Function]}
+        >
+          Close
+        </button>
+      </div>
    </div>
  </div>
-</div>
+</React.Fragment>
 `;

 exports[`HelpDialog.js should render without an onCloseClick function 1`] = `
-<div
-  className="help-dialog--container"
->
-  <div
-    className="help-dialog--content"
+<React.Fragment>
+  <button
+    className="help-dialog--cancel"
+  >
+    <i
+      aria-label="Close"
+      className="ms-Icon ms-Icon--Cancel"
+      title="Close"
+    />
+  </button>
+  <div
+    className="help-dialog--container"
  >
-    <h2
-      className="help-dialog--heading"
-    >
-      Understanding Mezzurite Metrics
-    </h2>
-    <ul
-      className="help-dialog--vocab"
-    >
-      <li
-        className="help-dialog--vocab-item"
-      >
-        <span
-          className="help-dialog--vocab-title"
-        >
-          Application Load Time (ALT)
-        </span>
-         is the amount of time it takes to load the SPA framework. This is calculated using the navigation start time and the application framework load time.
-      </li>
-      <li
-        className="help-dialog--vocab-item"
-      >
-        <span
-          className="help-dialog--vocab-title"
-        >
-          Component Load Time (CLT)
-        </span>
-         is the amount of time it takes to load a single component. This is calculated by using the framework's component life cycle.
-      </li>
-      <li
-        className="help-dialog--vocab-item"
-      >
-        <span
-          className="help-dialog--vocab-title"
-        >
-          Viewport Load Time (VLT)
-        </span>
-          is the amount of time it takes to load the components visible in the current viewport.
-      </li>
-    </ul>
    <div
-      className="help-dialog--action"
+      className="help-dialog--content"
    >
-      <a
-        aria-label="Learn more about Mezzurite"
-        className="help-dialog--learn-more"
-        href="https://github.com/Microsoft/Mezzurite#background"
-        target="_blank"
+      <h2
+        className="help-dialog--heading"
      >
-        Learn More
-      </a>
-      <button
-        aria-label="Close"
-        className="help-dialog--close"
+        Understanding Mezzurite Metrics
+      </h2>
+      <ul
+        className="help-dialog--vocab"
      >
-        Close
-      </button>
+        <li
+          className="help-dialog--item"
+        >
+          <span
+            className="help-dialog--vocab-title"
+          >
+            Application Load Time (ALT)
+          </span>
+           is the amount of time it takes to load the SPA framework. This is calculated using the navigation start time and the application framework load time.
+        </li>
+        <li
+          className="help-dialog--item"
+        >
+          <span
+            className="help-dialog--vocab-title"
+          >
+            Component Load Time (CLT)
+          </span>
+           is the amount of time it takes to load a single component. This is calculated by using the framework's component life cycle.
+        </li>
+        <li
+          className="help-dialog--item"
+        >
+          <span
+            className="help-dialog--vocab-title"
+          >
+            Viewport Load Time (VLT)
+          </span>
+            is the amount of time it takes to load the components visible in the current viewport.
+        </li>
+        <li
+          className="help-dialog--item"
+        >
+          <a
+            aria-label="Learn more about Mezzurite"
+            className="help-dialog--learn-more"
+            href="https://github.com/Microsoft/Mezzurite#background"
+            target="_blank"
+          >
+            Learn More
+          </a>
+        </li>
+      </ul>
+      <div
+        className="help-dialog--action"
+      >
+        <button
+          aria-label="Close"
+          className="help-dialog--close"
+        >
+          Close
+        </button>
+      </div>
    </div>
  </div>
-</div>
+</React.Fragment>
 `;