From e9b2c93c75b892eb95e4bc17722883260e99bf3d Mon Sep 17 00:00:00 2001 From: Khang Date: Mon, 31 Oct 2022 19:13:06 +0700 Subject: [PATCH] feat: add combobox, listbox components --- docs/docs.css | 7 ++- docs/index.html.ejs | 128 +++++++++++++++++++++++++++++++++++++++++--- gui/_combobox.scss | 37 +++++++++++++ gui/_listbox.scss | 34 ++++++++++++ gui/_select.scss | 2 +- gui/_treeview.scss | 2 - gui/index.scss | 13 +++-- 7 files changed, 208 insertions(+), 15 deletions(-) create mode 100644 gui/_combobox.scss create mode 100644 gui/_listbox.scss diff --git a/docs/docs.css b/docs/docs.css index 956ef20..044e36a 100644 --- 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 index 74b4a7b..c7078d3 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -70,15 +70,17 @@
  • Button
  • CheckBox
  • Collapse
    • +
  • ComboBox
  • Dropdown
    • -
  • GroupBox
    • +
  • GroupBox
    • +
  • ListBox
  • Menu
  • OptionButton
    • -
  • ProgressBar
    • +
  • ProgressBar
  • Scrollbar
  • Slider
  • Tabs
    • -
  • TextBox
    • +
  • TextBox
  • TreeView
  • @@ -402,6 +404,56 @@ import "7.css/dist/gui/tabs.css" +
    +

    Combobox

    +
    +
    + A combo box 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. + + +
    + +

    + To render a combo box, use a text input, a button, + a parent ul, and children li together, + wrapped inside a container element with the combobox class. + For accessibility, follow the minimum requirements as below: +

    + +
      +
    • Add a role="combobox" attribute to the text input
      • +
    • Add a role="listbox" attribute to the ul
      • +
    • Add a role="option" attribute to each li
      • +
    • + Specify the relationship between the list box and the text box by combining + the id of the listbox with the aria-owns attribute + on the text input +
      • +
    + + <%- example(` +
    + + +
      +
    • Facebook
      • +
    • Amazon
      • +
    • Apple
      • +
    • Netflix
      • +
    • Google
      • +
    +
    + `) %> + +

    + For more options of the list box, see the ListBox section. +

    +
    +
    @@ -450,7 +502,7 @@ import "7.css/dist/gui/tabs.css"
    -

    GroupBox

    +

    GroupBox

    A group box is a special control you can use to organize a set of @@ -513,6 +565,70 @@ import "7.css/dist/gui/tabs.css"
    +
    +

    ListBox

    +
    +
    + With a list box, users can select from a set of values presented in a list that is always visible. + + +
    + +

    + There are 2 ways you can render a list box. The simple one is using the select + element with a multiple attribute specified. +

    + + <%- example(` + + `) %> + +

    + The complex one is using a combination of the ul/li elements + with the role attributes. +

    + + <%- example(` +
      +
    • Facebook
      • +
    • Amazon
      • +
    • Apple
      • +
    • Netflix
      • +
    • Google
      • +
    + `) %> + +

    + The latter offers more flexibility over using a mere select element. + Choose the one that is more appropriate depending on your context or use case. +

    + +

    + To add a drop shadow to the list box, use the has-shadow class. + To add a hovering style on the list box items (using role attribute only), + use the has-hover class. +

    + + <%- example(` +
      +
    • Facebook
      • +
    • Amazon
      • +
    • Apple
      • +
    • Netflix
      • +
    • Google
      • +
    + `) %> +
    +
    @@ -682,7 +798,7 @@ import "7.css/dist/gui/tabs.css"
    -

    ProgressBar

    +

    ProgressBar

    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"
    -

    TextBox

    +

    TextBox

    A text box (also referred to as an edit control) is a diff --git a/gui/_combobox.scss b/gui/_combobox.scss new file mode 100644 index 0000000..e37763d --- /dev/null +++ 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 new file mode 100644 index 0000000..3c6ea18 --- /dev/null +++ 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 index e306dcf..2651c3a 100644 --- 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 index 98962ea..53f8540 100644 --- 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 index b003e33..310e045 100644 --- 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";