feat: Style selects inside input-groups

cozy · May 6, 2021 · a1128a3 · a1128a3
1 parent 8291faa
commit a1128a3
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 2 deletions.
diff --git a/docs/forms.html b/docs/forms.html
@@ -117,6 +117,26 @@ <h2>Material inputs</h2>
               autocomplete="off"
             />
             <label for="lightFloatingInputSelect">Input with a select</label>
+            <select
+              class="form-select form-select-end w-min-content flex-grow-0"
+              id="lightInputGroupSelect"
+              aria-label="Options"
+            >
+              <option value="foo" selected>Foo</option>
+              <option value="bar">Bar</option>
+              <option value="baz">Baz</option>
+            </select>
+            <span class="select-arrow"></span>
+          </div>
+          <div class="input-group form-floating mb-3">
+            <input
+              type="text"
+              class="form-control"
+              id="lightFloatingInputDropdown"
+              placeholder="something"
+              autocomplete="off"
+            />
+            <label for="lightFloatingInputDropdown">Input with a dropdown</label>
             <button class="btn btn-outline-info dropdown-toggle" type="button">Dropdown</button>
             <ul class="dropdown-menu dropdown-menu-end end-0">
               <li><a class="dropdown-item" href="#">Action</a></li>
@@ -227,6 +247,26 @@ <h2>Material inputs</h2>
               autocomplete="off"
             />
             <label for="invertedFloatingInputSelect">Input with a select</label>
+            <select
+              class="form-select form-select-end w-min-content flex-grow-0"
+              id="invertedInputGroupSelect"
+              aria-label="Options"
+            >
+              <option value="foo" selected>Foo</option>
+              <option value="bar">Bar</option>
+              <option value="baz">Baz</option>
+            </select>
+            <span class="select-arrow"></span>
+          </div>
+          <div class="input-group form-floating mb-3">
+            <input
+              type="text"
+              class="form-control"
+              id="invertedFloatingInputDropdown"
+              placeholder="something"
+              autocomplete="off"
+            />
+            <label for="invertedFloatingInputDropdown">Input with a dropdown</label>
             <button class="btn btn-outline-info dropdown-toggle" type="button">Dropdown</button>
             <ul class="dropdown-menu dropdown-menu-end end-0">
               <li><a class="dropdown-item" href="#">Action</a></li>
@@ -337,6 +377,26 @@ <h2>Material inputs</h2>
               autocomplete="off"
             />
             <label for="darkFloatingInputSelect">Input with a select</label>
+            <select
+              class="form-select form-select-end w-min-content flex-grow-0"
+              id="darkInputGroupSelect"
+              aria-label="Options"
+            >
+              <option value="foo" selected>Foo</option>
+              <option value="bar">Bar</option>
+              <option value="baz">Baz</option>
+            </select>
+            <span class="select-arrow"></span>
+          </div>
+          <div class="input-group form-floating mb-3">
+            <input
+              type="text"
+              class="form-control"
+              id="darkFloatingInputDropdown"
+              placeholder="something"
+              autocomplete="off"
+            />
+            <label for="darkFloatingInputDropdown">Input with a dropdown</label>
             <button class="btn btn-outline-info dropdown-toggle" type="button">Dropdown</button>
             <ul class="dropdown-menu dropdown-menu-end end-0">
               <li><a class="dropdown-item" href="#">Action</a></li>

diff --git a/postcss-cozy-vars/index.js b/postcss-cozy-vars/index.js
@@ -14,8 +14,9 @@ module.exports = (opts = {}) => {
       "background-image": (decl) => {
         if (decl.parent.selector.match(/\.form-switch/)) {
           decl.parent.remove();
-        }
-        if (decl.parent.selector.match(/:checked\[type=/)) {
+        } else if (decl.parent.selector.match(/:checked\[type=/)) {
+          decl.remove();
+        } else if (decl.parent.selector.match(/\.form-select/)) {
           decl.remove();
         }
       },

diff --git a/screenshots/reference/docs_Forms_0_document_0_reference.png b/screenshots/reference/docs_Forms_0_document_0_reference.png
diff --git a/src/cozy/_forms.scss b/src/cozy/_forms.scss
@@ -106,3 +106,33 @@
   font-weight: $font-weight-normal;
   border-radius: $border-radius;
 }
+
+.input-group .form-select:hover {
+  border-color: var(--primaryColor);
+}
+
+.form-select-end {
+  border-top-right-radius: $border-radius if($enable-important-utilities, !important, null);
+  border-bottom-right-radius: $border-radius if($enable-important-utilities, !important, null);
+}
+
+.select-arrow {
+  position: relative;
+  z-index: 3;
+  width: 0;
+
+  &::after {
+    position: absolute;
+    right: $form-select-padding-x;
+    display: block;
+    mask: escape-svg($form-select-indicator);
+    mask-position-y: center;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+    width: .875rem;
+    height: 100%;
+    pointer-events: none;
+    content: "";
+    background-color: var(--primaryTextColor);
+  }
+}