style(@dpc-sdp/ripple-ui-forms): design feedback

dpc-sdp · Dec 10, 2024 · 81d8bb7 · 81d8bb7
1 parent 641e5d5
commit 81d8bb7
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/packages/ripple-ui-forms/src/components/RplFormDropdown/MultiValueTagList.css b/packages/ripple-ui-forms/src/components/RplFormDropdown/MultiValueTagList.css
@@ -36,6 +36,10 @@
   white-space: nowrap;
   cursor: pointer;
 
+  &:active {
+    border-color: var(--rpl-clr-neutral-800);
+  }
+
   .rpl-icon {
     pointer-events: none;
   }

diff --git a/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.css b/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.css
@@ -53,7 +53,8 @@
   }
 
   &:hover,
-  &:focus {
+  &:focus,
+  &.rpl-u-focusable--force-on {
     border-color: var(--rpl-clr-dark);
   }
 
@@ -118,6 +119,7 @@
   top: 50%;
   right: calc(var(--rpl-sp-5) - var(--local-toogle-inset));
   margin-top: -8px;
+  transition: transform var(--rpl-motion-speed-7) linear;
 }
 
 .rpl-form-dropdown-menu {
@@ -200,6 +202,7 @@
   background: none;
   width: 100%;
   min-width: var(--rpl-sp-9);
+  color: inherit;
 }
 
 .rpl-form-dropdown-search__no-results {

diff --git a/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.vue b/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.vue
@@ -214,6 +214,10 @@ const handleSearchSubmit = () => {
     isMatchingSearchResult(processedOptions.value[0].label)
   ) {
     handleSelectOption(processedOptions.value[0])
+
+    if (multiSearch.value) {
+      searchValue.value = ''
+    }
   }
 }