Merge pull request #45 from khang-nd/combobox

feat: add combobox, listbox components
khang-nd · Oct 31, 2022 · d58e1a4 · d58e1a4 · vercel · Oct 31, 2022
2 parents b6088c7 + e9b2c93
commit d58e1a4
Show file tree

Hide file tree

Showing 7 changed files with 208 additions and 15 deletions.
diff --git a/docs/docs.css b/docs/docs.css
@@ -82,7 +82,8 @@ p {
   line-height: 1.5;
 }
 
-p code {
+p code,
+ul code {
   background: #e0e0e0;
   padding: 2px 3px;
 }
@@ -92,6 +93,10 @@ p code {
   margin-top: 24px;
 }
 
+.component li:not([role]) {
+  margin-bottom: 8px;
+}
+
 blockquote {
   margin: 0 0 20px;
   padding: 20px;

diff --git a/docs/index.html.ejs b/docs/index.html.ejs
@@ -70,15 +70,17 @@
             <li><a href="#button">Button</a></li>
             <li><a href="#checkbox">CheckBox</a></li>
             <li><a href="#collapse">Collapse</a></li>
+            <li><a href="#combobox">ComboBox</a></li>
             <li><a href="#dropdown">Dropdown</a></li>
-            <li><a href="#group-box">GroupBox</a></li>
+            <li><a href="#groupbox">GroupBox</a></li>
+            <li><a href="#listbox">ListBox</a></li>
             <li><a href="#menu">Menu</a></li>
             <li><a href="#radio">OptionButton</a></li>
-            <li><a href="#progress-bar">ProgressBar</a></li>
+            <li><a href="#progressbar">ProgressBar</a></li>
             <li><a href="#scrollbar">Scrollbar</a></li>
             <li><a href="#slider">Slider</a></li>
             <li><a href="#tabs">Tabs</a></li>
-            <li><a href="#text-box">TextBox</a></li>
+            <li><a href="#textbox">TextBox</a></li>
             <li><a href="#tree-view">TreeView</a></li>
             <li>
               <details open>
@@ -402,6 +404,56 @@ import "7.css/dist/gui/tabs.css"</pre>
       </div>
     </section>
 
+    <section class="component">
+      <h3 id="combobox">Combobox</h3>
+      <div>
+        <blockquote>
+          A <i>combo box</i> is a combination of a standard list box or a drop-down list
+          and an editable text box, thus allowing users to enter a value that isn't in the list.
+
+          <footer>
+            &mdash; <a href="https://docs.microsoft.com/en-us/windows/win32/uxguide/ctrl-drop">
+              Microsoft Windows User Experience - Combo Boxes</a>
+          </footer>
+        </blockquote>
+
+        <p>
+          To render a combo box, use a text <code>input</code>, a <code>button</code>,
+          a parent <code>ul</code>, and children <code>li</code> together,
+          wrapped inside a container element with the <code>combobox</code> class.
+          For accessibility, follow the minimum requirements as below:
+        </p>
+
+        <ul>
+          <li>Add a <code>role="combobox"</code> attribute to the text <code>input</code></li>
+          <li>Add a <code>role="listbox"</code> attribute to the <code>ul</code></li>
+          <li>Add a <code>role="option"</code> attribute to each <code>li</code></li>
+          <li>
+            Specify the relationship between the list box and the text box by combining
+            the <code>id</code> of the <code>listbox</code> with the <code>aria-owns</code> attribute
+            on the text <code>input</code>
+          </li>
+        </ul>
+
+        <%- example(`
+          <div class="combobox">
+            <input type="text" role="combobox" aria-owns="company" />
+            <button></button>
+            <ul role="listbox" id="company">
+              <li role="option">Facebook</li>
+              <li role="option">Amazon</li>
+              <li role="option">Apple</li>
+              <li role="option">Netflix</li>
+              <li role="option">Google</li>
+            </ul>
+          </div>
+        `) %>
+
+        <p>
+          For more options of the list box, see the <a href="#listbox">ListBox</a> section.
+        </p>
+    </section>
+
     <section class="component">
       <h3 id="dropdown">Dropdown</h3>
       <div>
@@ -450,7 +502,7 @@ import "7.css/dist/gui/tabs.css"</pre>
     </section>
 
     <section class="component">
-      <h3 id="group-box">GroupBox</h3>
+      <h3 id="groupbox">GroupBox</h3>
       <div>
         <blockquote>
           A <em>group box</em> is a special control you can use to organize a set of
@@ -513,6 +565,70 @@ import "7.css/dist/gui/tabs.css"</pre>
       </div>
     </section>
 
+    <section class="component">
+      <h3 id="listbox">ListBox</h3>
+      <div>
+        <blockquote>
+          With a <i>list box</i>, users can select from a set of values presented in a list that is always visible.
+
+          <footer>
+            &mdash; <a href="https://docs.microsoft.com/en-us/windows/win32/uxguide/ctrl-list-boxes">
+              Microsoft Windows User Experience - List Boxes</a>
+          </footer>
+        </blockquote>
+
+        <p>
+          There are 2 ways you can render a list box. The simple one is using the <code>select</code>
+          element with a <code>multiple</code> attribute specified.
+        </p>
+
+        <%- example(`
+          <select multiple>
+            <option>5 - Incredible!</option>
+            <option selected>4 - Great!</option>
+            <option>3 - Pretty good</option>
+            <option>2 - Not so great</option>
+            <option>1 - Unfortunate</option>
+           </select>
+        `) %>
+
+        <p>
+          The complex one is using a combination of the <code>ul</code>/<code>li</code> elements
+          with the <code>role</code> attributes.
+        </p>
+
+        <%- example(`
+          <ul role="listbox">
+            <li role="option">Facebook</li>
+            <li role="option" aria-selected="true">Amazon</li>
+            <li role="option">Apple</li>
+            <li role="option">Netflix</li>
+            <li role="option">Google</li>
+          </ul>
+        `) %>
+
+        <p>
+          The latter offers more flexibility over using a mere <code>select</code> element.
+          Choose the one that is more appropriate depending on your context or use case.
+        </p>
+
+        <p>
+          To add a drop shadow to the list box, use the <code>has-shadow</code> class.
+          To add a hovering style on the list box items (using <code>role</code> attribute only),
+          use the <code>has-hover</code> class.
+        </p>
+
+        <%- example(`
+          <ul role="listbox" class="has-shadow has-hover">
+            <li role="option">Facebook</li>
+            <li role="option">Amazon</li>
+            <li role="option">Apple</li>
+            <li role="option">Netflix</li>
+            <li role="option">Google</li>
+          </ul>
+        `) %>
+    </section>
+
     <section class="component">
       <h3 id="menu">Menu</h3>
       <div>
@@ -682,7 +798,7 @@ import "7.css/dist/gui/tabs.css"</pre>
     </section>
 
     <section class="component">
-      <h3 id="progress-bar">ProgressBar</h3>
+      <h3 id="progressbar">ProgressBar</h3>
       <div>
         <blockquote>
           A common control that displays the progress of a particular operation as a graphical bar.
@@ -944,7 +1060,7 @@ import "7.css/dist/gui/tabs.css"</pre>
     </section>
 
     <section class="component">
-      <h3 id="text-box">TextBox</h3>
+      <h3 id="textbox">TextBox</h3>
       <div>
         <blockquote>
           A <em>text box</em> (also referred to as an edit control) is a

diff --git a/gui/_combobox.scss b/gui/_combobox.scss
@@ -0,0 +1,37 @@
+:root {
+  --combobox-chevron-size: 4px;
+}
+
+.combobox {
+  position: relative;
+  display: inline-block;
+
+  input[type="text"] {
+    padding-right: 20px;
+    width: 100%;
+  }
+
+  button {
+    position: absolute;
+    right: 0;
+    padding: 0;
+    min-width: 16px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: calc(50% - var(--combobox-chevron-size) / 4);
+      left: calc(50% - var(--combobox-chevron-size));
+      border: var(--combobox-chevron-size) solid transparent;
+      border-top-color: #000;
+      border-radius: 2px;
+    }
+
+    &:focus {
+      box-shadow: none;
+      outline: none;
+    }
+  }
+}
diff --git a/gui/_listbox.scss b/gui/_listbox.scss
@@ -0,0 +1,34 @@
+[role="listbox"],
+select[multiple] {
+  background: #fff;
+  border: 1px solid #c0c1cd;
+  display: block;
+  font: var(--font);
+  overflow-y: scroll;
+
+  &.has-shadow {
+    box-shadow: 4px 4px 3px -2px #999;
+  }
+
+  &.has-hover {
+    li:hover {
+      background-color: #2a90ff;
+      color: #fff;
+    }
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  [role="option"],
+  option {
+    padding: 2px;
+
+    &[aria-selected],
+    &:focus {
+      background-color: #2a90ff;
+      color: #fff;
+    }
+  }
+}
diff --git a/gui/_select.scss b/gui/_select.scss
@@ -1,4 +1,4 @@
-select {
+select:not([multiple]) {
   font: var(--font);
   padding: 2px 3px;
   border: var(--button-border);

diff --git a/gui/_treeview.scss b/gui/_treeview.scss
@@ -1,5 +1,3 @@
-@import "_collapse.scss";
-
 :root {
   --treeview-square-size: 8px;
   --treeview-spacing: 20px;

diff --git a/gui/index.scss b/gui/index.scss
@@ -9,14 +9,17 @@
 @import "_balloon.scss";
 @import "_button.scss";
 @import "_checkbox.scss";
-@import "_radiobutton.scss";
-@import "_select.scss";
-@import "_textbox.scss";
+@import "_collapse.scss";
+@import "_combobox.scss";
 @import "_groupbox.scss";
+@import "_listbox.scss";
+@import "_menu.scss";
 @import "_progressbar.scss";
+@import "_radiobutton.scss";
+@import "_select.scss";
 @import "_slider.scss";
 @import "_tabs.scss";
+@import "_textbox.scss";
 @import "_treeview.scss";
-@import "_window.scss";
-@import "_menu.scss";
 @import "_typography.scss";
+@import "_window.scss";