IBX-414: Added ghost version of dropdown (#374)

ibexa · Mar 29, 2022 · c5ccb77 · c5ccb77
1 parent b55bf18
commit c5ccb77
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 2 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/core/dropdown.js b/src/bundle/Resources/public/js/scripts/core/dropdown.js
@@ -278,7 +278,7 @@
             const { width } = this.selectedItemsContainer.getBoundingClientRect();
 
             this.itemsContainer.style['max-height'] = `${this.getItemsContainerHeight()}px`;
-            this.itemsContainer.style.width = `${width}px`;
+            this.itemsContainer.style.minWidth = `${width}px`;
 
             return this.itemsContainer;
         }

diff --git a/src/bundle/Resources/public/scss/_dropdown.scss b/src/bundle/Resources/public/scss/_dropdown.scss
@@ -197,6 +197,7 @@
 
         &--selected {
             position: relative;
+            padding-right: calculateRem(36px);
 
             .ibexa-dropdown__item-check {
                 display: block;
@@ -299,7 +300,7 @@
         }
     }
 
-    &:not(&--is-disabled) {
+    &:not(&--is-disabled):not(&--ghost) {
         .ibexa-dropdown {
             &__selection-info {
                 &:not(.is-invalid):hover {
@@ -369,6 +370,34 @@
             }
         }
     }
+
+    &--ghost {
+        min-width: auto;
+
+        .ibexa-dropdown {
+            &__selection-info {
+                border: none;
+                padding: 0 calculateRem(16px);
+
+                &::before {
+                    display: none;
+                }
+
+                &:after {
+                    content: '';
+                    position: absolute;
+                    right: calculateRem(8px);
+                    width: 0;
+                    height: 0;
+                    border-style: solid;
+                    border-width: calculateRem(6px) calculateRem(3px) 0 calculateRem(3px);
+                    border-color: $ibexa-color-dark transparent transparent transparent;
+                    transform: translate(0, -50%);
+                    background: none;
+                }
+            }
+        }
+    }
 }
 
 .form-inline {

diff --git a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig
@@ -23,6 +23,7 @@
         {{ custom_init|default(false) ? "ibexa-dropdown--custom-init" }}
         {{ is_dynamic ? "ibexa-dropdown--dynamic" }}
         {{ is_small|default(false) ? "ibexa-dropdown--small" }}
+        {{ is_ghost|default(false) ? "ibexa-dropdown--ghost" }}
         {{ no_items and not is_dynamic or is_disabled ? "ibexa-dropdown--disabled" }}
         {{ class|default('') }}
     "