Merge pull request #279 from FirefoxUX/staging

Version 0.6.8
FirefoxUX · Feb 28, 2018 · 270788f · 270788f
2 parents 21a1798 + dfca3eb
commit 270788f
Show file tree

Hide file tree

Showing 71 changed files with 2,754 additions and 572 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,19 @@
 # Photon Design System Releases
 
+## [[0.6.8] - 2018-02-27](https://github.com/firefoxux/photon/releases/tag/v0.6.8)
+
+### Fix
+
+- [#277](https://github.com/firefoxux/photonn/issues/277) Migrate Interactive Examples from designakt to firefoxux
+- [#274](https://github.com/firefoxux/photonn/issues/274) Edits to New Capitalization Page
+- [#273](https://github.com/firefoxux/photonn/issues/273) Old Firefox Logo 2
+- [#272](https://github.com/firefoxux/photonn/issues/272) Incorrect URL
+- [#264](https://github.com/firefoxux/photonn/issues/264) Micro buttons are tough to read as-is (without text shadow)
+- [#248](https://github.com/firefoxux/photonn/issues/248) Notification buttons look odd on wide displays; could be right-aligned
+- [#247](https://github.com/firefoxux/photonn/issues/247) Specify multi-line message bars
+- [#245](https://github.com/firefoxux/photonn/issues/245) Research: line height
+- [#224](https://github.com/firefoxux/photonn/issues/224) Document interaction around disabling checkboxes/radio buttons with nested elements
+
 ## [[0.6.7] - 2018-02-13](https://github.com/firefoxux/photon/releases/tag/v0.6.7)
 
 ### Fix

diff --git a/contents/components/checkboxes.html b/contents/components/checkboxes.html
@@ -54,6 +54,9 @@ <h3>Nested Group</h3>
     </div>
     <div class="fl-ns w-50-ns ph2">
       <p>Nest checkboxes to convey that some options are only available if the parent option is selected.</p>
+      <blockquote>
+        <p>See <a href="../patterns/nesting.html">Nesting</a> for more info on how to nest elements.</p>
+      </blockquote>
     </div>
   </div>
 </section>

diff --git a/contents/components/message-bars.html b/contents/components/message-bars.html
@@ -1,6 +1,6 @@
 <header>
   <h1>
-    Message bar
+    Message Bars
   </h1>
   <p>
      Message bars communicate specific information to a user. Display message bars at the top of the page or the section they apply to.
@@ -12,10 +12,10 @@ <h2>
     Usage
   </h2>
   <p>
-     Message bars contain concise and scannable text that is directly related to an action that has been completed or is about to be performed. They may include a single message or multiple messages. They should not be used to <strong>Dismiss</strong> or <strong>Cancel</strong>. It's <strong>required</strong> to have an icon always to precedes the message(s).
+     Message bars contain concise and scannable text that is directly related to an action that has been completed or is about to be performed. They may include a single message or multiple messages. They should not be used to <strong>Dismiss</strong> or <strong>Cancel</strong>. It is <strong>required</strong> to have an icon precede the message(s).
   </p>
   <p>
-    Common uses for message bars include: success messages, updates, warnings, and problems or errors.
+    Common use cases for message bars include: success messages, updates, warnings, problems and errors.
   </p>
 </section>
 
@@ -27,12 +27,12 @@ <h3>
     Generic
   </h3>
   <div class="cf nr2 nl2">
-    <div class="fl-ns w-50-ns ph2"> 
+    <div class="fl-ns w-50-ns ph2">
       <img class="w-100-ns" src="../images/message-bars/generic.svg" alt="generic message bar example">
     </div>
-    <div class="fl-ns w-50-ns ph2"> 
+    <div class="fl-ns w-50-ns ph2">
       <p>
-        Convey general information or actions that aren’t critical. Update users about a change or give them advice. Include lower priority information and should always be dismissible.
+        Convey general information or actions that aren’t critical. Update users about a change or give them advice. Include lower priority information and should be dismissible.
       </p>
     </div>
   </div>
@@ -43,7 +43,7 @@ <h3>
     <div class="fl-ns w-50-ns ph2">
       <img class="w-100-ns" src="../images/message-bars/success.svg" alt="success message bar example">
     </div>
-    <div class="fl-ns w-50-ns ph2"> 
+    <div class="fl-ns w-50-ns ph2">
       <p>
        Inform users when actions are successfully completed.
       </p>
@@ -53,21 +53,21 @@ <h3>
     Warning
   </h3>
   <div class="cf nr2 nl2">
-    <div class="fl-ns w-50-ns ph2"> 
+    <div class="fl-ns w-50-ns ph2">
      <img class="w-100-ns" src="../images/message-bars/warning.svg" alt="warning message bar example">
     </div>
-    <div class="fl-ns w-50-ns ph2"> 
+    <div class="fl-ns w-50-ns ph2">
       <p>
        Display exceptions or information the user needs to act on.
       </p>
     </div>
   </div>
   <h3>Error</h3>
   <div class="cf nr2 nl2">
-    <div class="fl-ns w-50-ns ph2"> 
+    <div class="fl-ns w-50-ns ph2">
       <img class="w-100-ns" src="../images/message-bars/error.svg" alt="error message bar example">
     </div>
-    <div class="fl-ns w-50-ns ph2"> 
+    <div class="fl-ns w-50-ns ph2">
       <p>
        Communicate problems that must be addressed before a user can complete a task.
       </p>
@@ -83,30 +83,49 @@ <h2>Style</h2>
 <section>
   <h2>Behavior</h2>
   <h3>
-    Dismissable
-  </h3> 
+    Dismissible
+  </h3>
   <div class="cf nr2 nl2">
     <div class="fl-ns w-50-ns ph2">
       <img class="w-100-ns" src="../images/message-bars/ghost-btn.svg" alt="Dismissable behavior">
     </div>
     <div class="fl-ns w-50-ns ph2">
       <p>
-        Unless they contain critical information, message bars should be dismissible by clicking or tapping the ghost button, placed always on the right corner.
+        Unless they contain critical information, message bars should be dismissible by clicking or tapping the ghost button, placed in the top right corner.
       </p>
     </div>
   </div>
   <h3>
-  Call to action
+    Call to Action
   </h3>
   <div class="cf nr2 nl2">
     <div class="fl-ns w-50-ns ph2">
-      <img class="w-100-ns" src="../images/message-bars/mb-action-example.jpg" alt="message bar in action">
+      <img class="w-100-ns" src="../images/message-bars/mb-action-example.svg" alt="message bar in action">
+    </div>
+    <div class="fl-ns w-50-ns ph2">
+      <p>
+        Add one or two <a href="buttons.html#micro">micro-buttons</a> to the message bar if users need to take an action after reading the message.
+      </p>
+      <% include ../includes/components/message-bars/behavior-tabs-structure.html %>
     </div>
-    <div class="fl-ns w-50-ns ph2"> 
+  </div>
+  <h3>
+    Message on Multiple Lines
+  </h3>
+  <div class="cf nr2 nl2">
+    <div class="fl-ns w-50-ns ph2">
+      <img class="w-100-ns" src="../images/message-bars/mb-multilines.svg" alt="message bar in action">
+    </div>
+    <div class="fl-ns w-50-ns ph2">
+      <p>
+        It is possible for the message to wrap to multiple lines. This is especially likely on mobile, or if displayed in a small container.
+      </p>
+      <p>
+        In this case the <a href="#icon">icon</a> and the <a href="dismissible">dismiss-button</a> remain aligned to the top.
+      </p>
       <p>
-        Add one or two <a href="buttons.html#micro">micro-buttons</a> in the message bar when you want users to take an action after reading the message. 
+        The <a href="#call-to-action">call-to-action-buttons</a> break into a new line below the message and are aligned to the start of the message.
       </p>
     </div>
   </div>
-  <% include ../includes/components/message-bars/behavior-tabs-structure.html %> 
 </section>
diff --git a/contents/copy/capitalization.html b/contents/copy/capitalization.html
@@ -9,26 +9,16 @@ <h1>Capitalization</h1>
 </header>
 
 <section>
-  <h2>
-    Capitalization Styles
-  </h2>
-  <h3>
-    Title Case
-  </h3>
+  <h2>Capitalization Styles</h2>
+  <h3>Title Case: Most Words Are Capitalized</h3>
   <% include ../includes/copy/capitalization/title-case.html %>
-  <h3>
-    Sentence Case
-  </h3>
+  <h3>Sentence Case: Most Words Are Lowercase</h3>
   <% include ../includes/copy/capitalization/sentence-case.html %>
-  <h3>
-    All Caps
-  </h3>
+  <h3>All Caps: Every Word Is Capitalized</h3>
   <% include ../includes/copy/capitalization/all-caps.html %>
 </section>
 
 <section>
-  <h2>
-    Platform-specific Styles
-  </h2>
+  <h2>Platform Styles</h2>
   <% include ../includes/copy/capitalization/platform-specifics.html %>
 </section>
diff --git a/contents/includes/components/message-bars/bh-mb-error.html b/contents/includes/components/message-bars/bh-mb-error.html
@@ -1,29 +1,23 @@
-<div class="cf nr2 nl2 mb3">
-  <div class="fl-ns w-50-ns ph2"> 
-    <img class="w-100-ns" src="../images/message-bars/btn-error.svg" alt="pairing example">
-  </div>
-  <div class="fl-ns w-50-ns ph2 mb3">
-    <table>
-      <thead>
-        <tr>
-          <th>State</th>
-          <th>Background</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>Default</td>
-          <td>Red 70 <code>#a4000f</code></td>
-        </tr>
-        <tr>
-          <td>Hover</td>
-          <td>Red 80 <code>#5a0002</code></td>
-        </tr>
-        <tr>
-          <td>Pressed</td>
-          <td>Red 90 <code>#3e0200</code></td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
+<img class="w-100-ns" src="../images/message-bars/btn-error.svg" alt="pairing example">
+<table>
+  <thead>
+    <tr>
+      <th>State</th>
+      <th>Background</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Default</td>
+      <td>Red 70 <code>#a4000f</code></td>
+    </tr>
+    <tr>
+      <td>Hover</td>
+      <td>Red 80 <code>#5a0002</code></td>
+    </tr>
+    <tr>
+      <td>Pressed</td>
+      <td>Red 90 <code>#3e0200</code></td>
+    </tr>
+  </tbody>
+</table>
diff --git a/contents/includes/components/message-bars/bh-mb-generic.html b/contents/includes/components/message-bars/bh-mb-generic.html
@@ -1,29 +1,23 @@
-<div class="cf nr2 nl2 mb3">
-  <div class="fl-ns w-50-ns ph2"> 
-    <img class="w-100-ns" src="../images/message-bars/btn-generic.svg" alt="pairing example">
-  </div>
-  <div class="fl-ns w-50-ns ph2 mb3">
-    <table>
-      <thead>
-        <tr>
-          <th>State</th>
-          <th>Background</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>Default</td>
-          <td>Grey 90 a10 <code>rgba(12, 12, 13, 0.1)</code></td>
-        </tr>
-        <tr>
-          <td>Hover</td>
-          <td>Grey 90 a20 <code>rgba(12, 12, 13, 0.2)</code></td>
-        </tr>
-        <tr>
-          <td>Pressed</td>
-          <td>Grey 90 a30<code>rgba(12, 12, 13, 0.3)</code></td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
+<img class="w-100-ns" src="../images/message-bars/btn-generic.svg" alt="pairing example">
+<table>
+  <thead>
+    <tr>
+      <th>State</th>
+      <th>Background</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Default</td>
+      <td>Grey 90 a10 <code>rgba(12, 12, 13, 0.1)</code></td>
+    </tr>
+    <tr>
+      <td>Hover</td>
+      <td>Grey 90 a20 <code>rgba(12, 12, 13, 0.2)</code></td>
+    </tr>
+    <tr>
+      <td>Pressed</td>
+      <td>Grey 90 a30<code>rgba(12, 12, 13, 0.3)</code></td>
+    </tr>
+  </tbody>
+</table>
diff --git a/contents/includes/components/message-bars/bh-mb-success.html b/contents/includes/components/message-bars/bh-mb-success.html
@@ -1,29 +1,23 @@
-<div class="cf nr2 nl2 mb3">
-  <div class="fl-ns w-50-ns ph2"> 
-    <img class="w-100-ns" src="../images/message-bars/btn-success.svg" alt="pairing example">
-  </div>
-  <div class="fl-ns w-50-ns ph2 mb3">
-    <table>
-      <thead>
-        <tr>
-          <th>State</th>
-          <th>Background</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>Default</td>
-          <td>Green 60 <code>#12bc00</code></td>
-        </tr>
-        <tr>
-          <td>Hover</td>
-          <td>Green 70 <code>#058b00</code></td>
-        </tr>
-        <tr>
-          <td>Pressed</td>
-          <td>Green 80 <code>#006504</code></td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
+<img class="w-100-ns" src="../images/message-bars/btn-success.svg" alt="pairing example">
+<table>
+  <thead>
+    <tr>
+      <th>State</th>
+      <th>Background</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Default</td>
+      <td>Green 60 <code>#12bc00</code></td>
+    </tr>
+    <tr>
+      <td>Hover</td>
+      <td>Green 70 <code>#058b00</code></td>
+    </tr>
+    <tr>
+      <td>Pressed</td>
+      <td>Green 80 <code>#006504</code></td>
+    </tr>
+  </tbody>
+</table>