feat: visually hide search if less than five elements

bpmn-io · Mar 28, 2022 · cf047c3 · cf047c3
1 parent 131be7c
commit cf047c3
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/src/append-menu/AppendMenu.js b/src/append-menu/AppendMenu.js
@@ -253,7 +253,7 @@ function AppendMenuComponent(props) {
     </div>
 
     <div class="cmd-change-menu__body">
-      <div class="cmd-change-menu__search">
+      <div class=${ clsx('cmd-change-menu__search', { hidden: props.entries.length < 5 }) }>
         <svg class="cmd-change-menu__search-icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path fill-rule="evenodd" clip-rule="evenodd" d="M9.0325 8.5H9.625L13.3675 12.25L12.25 13.3675L8.5 9.625V9.0325L8.2975 8.8225C7.4425 9.5575 6.3325 10 5.125 10C2.4325 10 0.25 7.8175 0.25 5.125C0.25 2.4325 2.4325 0.25 5.125 0.25C7.8175 0.25 10 2.4325 10 5.125C10 6.3325 9.5575 7.4425 8.8225 8.2975L9.0325 8.5ZM1.75 5.125C1.75 6.9925 3.2575 8.5 5.125 8.5C6.9925 8.5 8.5 6.9925 8.5 5.125C8.5 3.2575 6.9925 1.75 5.125 1.75C3.2575 1.75 1.75 3.2575 1.75 5.125Z" fill="#22242A"/>
         </svg>

diff --git a/src/change-menu/ChangeMenu.css b/src/change-menu/ChangeMenu.css
@@ -61,6 +61,12 @@
   overflow: hidden;
 }
 
+.cmd-change-menu__search.hidden {
+  position: absolute;
+  height: 0;
+  top: -1000px;
+}
+
 .cmd-change-menu__search input {
   width: 100%;
   box-sizing: border-box;

diff --git a/src/element-template-chooser/ElementTemplateChooser.js b/src/element-template-chooser/ElementTemplateChooser.js
@@ -203,7 +203,7 @@ function TemplateComponent(props) {
     </div>
 
     <div class="cmd-change-menu__body">
-      <div class="cmd-change-menu__search">
+      <div class=${ clsx('cmd-change-menu__search', { hidden: props.entries.length < 5 }) }>
         <svg class="cmd-change-menu__search-icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path fill-rule="evenodd" clip-rule="evenodd" d="M9.0325 8.5H9.625L13.3675 12.25L12.25 13.3675L8.5 9.625V9.0325L8.2975 8.8225C7.4425 9.5575 6.3325 10 5.125 10C2.4325 10 0.25 7.8175 0.25 5.125C0.25 2.4325 2.4325 0.25 5.125 0.25C7.8175 0.25 10 2.4325 10 5.125C10 6.3325 9.5575 7.4425 8.8225 8.2975L9.0325 8.5ZM1.75 5.125C1.75 6.9925 3.2575 8.5 5.125 8.5C6.9925 8.5 8.5 6.9925 8.5 5.125C8.5 3.2575 6.9925 1.75 5.125 1.75C3.2575 1.75 1.75 3.2575 1.75 5.125Z" fill="#22242A"/>
         </svg>

diff --git a/src/replace-menu/ReplaceMenu.js b/src/replace-menu/ReplaceMenu.js
@@ -275,7 +275,7 @@ function ReplaceMenuComponent(props) {
   </div>
 
   <div class="cmd-change-menu__body">
-    <div class="cmd-change-menu__search">
+    <div class=${ clsx('cmd-change-menu__search', { hidden: props.entries.length < 5 }) }>
       <svg class="cmd-change-menu__search-icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path fill-rule="evenodd" clip-rule="evenodd" d="M9.0325 8.5H9.625L13.3675 12.25L12.25 13.3675L8.5 9.625V9.0325L8.2975 8.8225C7.4425 9.5575 6.3325 10 5.125 10C2.4325 10 0.25 7.8175 0.25 5.125C0.25 2.4325 2.4325 0.25 5.125 0.25C7.8175 0.25 10 2.4325 10 5.125C10 6.3325 9.5575 7.4425 8.8225 8.2975L9.0325 8.5ZM1.75 5.125C1.75 6.9925 3.2575 8.5 5.125 8.5C6.9925 8.5 8.5 6.9925 8.5 5.125C8.5 3.2575 6.9925 1.75 5.125 1.75C3.2575 1.75 1.75 3.2575 1.75 5.125Z" fill="#22242A"/>
       </svg>