copy update

mozilla · Aug 7, 2012 · 4383ecd · 4383ecd
1 parent 6a451a3
commit 4383ecd
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 12 deletions.
diff --git a/_posts/2012-07-07-xtag-timedate.html b/_posts/2012-07-07-xtag-timedate.html
@@ -2,8 +2,33 @@
 title: "Time/Date Picker"
 layout: xtag
 root: "../"
-description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec quam quis purus posuere pellentesque vel ac diam. Aenean sed purus id magna congue accumsan ac et ante."
-use_it: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec quam quis purus posuere pellentesque vel ac diam. Aenean sed purus id magna congue accumsan ac et ante."
-dont_use_it: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec quam quis purus posuere pellentesque vel ac diam. Aenean sed purus id magna congue accumsan ac et ante."
-code_example: "&lt;x-tag&gt;&lt;/x-tag&gt;"
+description: "A picker allows the users to quickly choose the time, date or other information such as locations from a predefined set of values. It also ensures the data is entered in the correct format."
+use_it: "When you want the user to pick a time, date or other information from a set of values."
 ---
+
+<div class="tips">
+  <h2>Dont's</h2>
+  <ul>
+    <li>- don’t use a picker for action items. Consider dropdown menu or select list instead.</li>
+  </ul>
+</div>
+
+{% include browser.html %}
+
+<h2>Code Example</h2>
+<code>
+  <pre>
+&lt;x-list&gt;
+&lt;/x-list&gt;
+  </pre>
+</code>
+
+<h2>Try It!</h2>
+<div class="sample-run-js">
+  <x-accordion id="list_demo" class="style">
+  </x-accordion>
+</div>
+
+<p>
+  Related: <a href="{{ page.root }}xtag-dropdown/">Dropdown Menu</a>, <a href="{{ page.root }}xtag-selectlist/">Select List</a>
+</p>
diff --git a/_posts/2012-07-08-xtag-dropdown.html b/_posts/2012-07-08-xtag-dropdown.html
@@ -2,8 +2,38 @@
 title: "Dropdown Menu"
 layout: xtag
 root: "../"
-description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec quam quis purus posuere pellentesque vel ac diam. Aenean sed purus id magna congue accumsan ac et ante."
-use_it: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec quam quis purus posuere pellentesque vel ac diam. Aenean sed purus id magna congue accumsan ac et ante."
-dont_use_it: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec quam quis purus posuere pellentesque vel ac diam. Aenean sed purus id magna congue accumsan ac et ante."
-code_example: "&lt;x-tag&gt;&lt;/x-tag&gt;"
+description: "A dropdown menu presents a list of options related to the current activity. It is opened when the user touches the dropdown icon. It can include text, image, or both."
+use_it: "When the user has to choose one item from a list."
 ---
+
+<div class="tips">
+  <h2>Do's</h2>
+  <ul>
+    <li>- concise wording. Ex: say "camera" instead of "use camera"</li>
+  </ul>
+
+  <h2>Dont's</h2>
+  <ul>
+    <li>- don’t use it when you have along list (more than 5 items). Use select list instead.</li>
+  </ul>
+</div>
+
+{% include browser.html %}
+
+<h2>Code Example</h2>
+<code>
+  <pre>
+&lt;x-list&gt;
+&lt;/x-list&gt;
+  </pre>
+</code>
+
+<h2>Try It!</h2>
+<div class="sample-run-js">
+  <x-accordion id="list_demo" class="style">
+  </x-accordion>
+</div>
+
+<p>
+  Related: <a href="{{ page.root }}xtag-timedate/">Time/Date Picker</a>, <a href="{{ page.root }}xtag-selectlist/">Select List</a>
+</p>
diff --git a/_posts/2012-07-09-xtag-indexscroller.html b/_posts/2012-07-09-xtag-indexscroller.html
@@ -2,8 +2,33 @@
 title: "Index Scroller"
 layout: xtag
 root: "../"
-description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec quam quis purus posuere pellentesque vel ac diam. Aenean sed purus id magna congue accumsan ac et ante."
-use_it: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec quam quis purus posuere pellentesque vel ac diam. Aenean sed purus id magna congue accumsan ac et ante."
-dont_use_it: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec quam quis purus posuere pellentesque vel ac diam. Aenean sed purus id magna congue accumsan ac et ante."
-code_example: "&lt;x-tag&gt;&lt;/x-tag&gt;"
+description: "An index scroller behaves like a normal scrollable list with information overlay. The overlay label does not appear by default and is triggered by fast swipe. The scrollbar is always present and when overlay label appears, it is attached to the label. The user can drag the scrollbar to quickly jump through categories. This element works for an alphabetical or chronological list."
+use_it: "When you have a long list that can be sorted alphabetically or chronologically or by some other ordered category."
 ---
+
+<div class="tips">
+  <h2>Dont's</h2>
+  <ul>
+    <li>- use it when displaying the date or alphabets do not help the current task.</li>
+  </ul>
+</div>
+
+{% include browser.html %}
+
+<h2>Code Example</h2>
+<code>
+  <pre>
+&lt;x-list&gt;
+&lt;/x-list&gt;
+  </pre>
+</code>
+
+<h2>Try It!</h2>
+<div class="sample-run-js">
+  <x-accordion id="list_demo" class="style">
+  </x-accordion>
+</div>
+
+<p>
+  Related: <a href="{{ page.root }}xtag-list/">Plain List</a>, <a href="{{ page.root }}xtag-search/">Search</a>
+</p>