fix: Dropdown ui fixes - hover and highlight color, keyboard navigation (#16718)

* fix: Dropdown UI fixes

* Version change - design system 1.0.23

* Dropdown keyboard navigation fixes

* Dropdown fixes - hover color and highlight

* design system version update for scroll issue in dropdown

* Bug fixes - property pane connections

* Dropdown font chipping fixed

* fix: version bump to fix onfocus keypress

* DS version updated to stable

* added yarn.lock for DS package version update

app/client/package.json

@@ -46,7 +46,7 @@
     "cypress-log-to-output": "^1.1.2",
     "dayjs": "^1.10.6",
     "deep-diff": "^1.0.2",
-    "design-system": "npm:@appsmithorg/design-system@1.0.24",
+    "design-system": "npm:@appsmithorg/design-system@1.0.25",
     "downloadjs": "^1.4.7",
     "draft-js": "^0.11.7",
     "emoji-mart": "^3.0.1",

app/client/src/ce/pages/workspace/WorkspaceInviteUsersForm.tsx

@@ -341,8 +341,10 @@ export const OptionWrapper = styled.div<{
       }
     }
   }
-  &:hover {
-    background-color: ${(props) => props.selectedHighlightBg || `initial`};
+  &:hover,
+  &.highlighted {
+    background-color: ${(props) =>
+      props.selectedHighlightBg || `var(--appsmith-color-black-200)`};
     &&& svg {
       rect {
         fill: ${(props) => props.theme.colors.textOnDarkBG};
@@ -626,12 +628,14 @@ function WorkspaceInviteUsersForm(props: any) {
 
   const renderOption = ({
     index,
+    isHighlighted,
     option,
     optionClickHandler,
   }: {
     index?: number;
     option: DropdownOption | DropdownOption[];
     optionClickHandler?: (dropdownOption: DropdownOption) => void;
+    isHighlighted?: boolean;
   }) => {
     let isSelected = false;
     if (props.isMultiSelect && Array.isArray(selected) && selected.length) {
@@ -660,7 +664,9 @@ function WorkspaceInviteUsersForm(props: any) {
         >
           <OptionWrapper
             aria-selected={isSelected}
-            className={`t--dropdown-option ${isSelected ? "selected" : ""}`}
+            className={`t--dropdown-option ${isSelected ? "selected" : ""} ${
+              isHighlighted ? "highlighted" : ""
+            }`}
             data-cy={`t--dropdown-option-${option?.label}`}
             disabled={option.disabled}
             key={index}

app/client/src/pages/Editor/GeneratePage/components/DataSourceOption.tsx

@@ -53,8 +53,9 @@ const OptionWrapper = styled.div<{
     }
   }
 
-  &:hover {
-    background-color: ${Colors.Gallery};
+  &:hover,
+  &.highlight-option {
+    background-color: ${Colors.GALLERY_1};
 
     &&& svg {
       rect {
@@ -98,6 +99,7 @@ interface DataSourceOptionType extends RenderDropdownOptionType {
 function DataSourceOption({
   cypressSelector,
   extraProps,
+  isHighlighted,
   isSelectedNode,
   option: dropdownOption,
   optionClickHandler,
@@ -130,7 +132,9 @@ function DataSourceOption({
       }}
     >
       <OptionWrapper
-        className="t--dropdown-option"
+        className={`t--dropdown-option ${
+          isHighlighted ? "highlight-option" : ""
+        }`}
         data-cy={optionCypressSelector}
         disabled={isNotSupportedDatasource}
         key={(dropdownOption as DropdownOption).id}

app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx

@@ -622,6 +622,7 @@ function GeneratePageForm() {
             optionWidth={DROPDOWN_DIMENSION.WIDTH}
             options={dataSourceOptions}
             renderOption={({
+              isHighlighted,
               isSelectedNode,
               option,
               optionClickHandler,
@@ -629,6 +630,7 @@ function GeneratePageForm() {
               <DataSourceOption
                 cypressSelector="t--datasource-dropdown-option"
                 extraProps={{ routeToCreateNewDatasource }}
+                isHighlighted={isHighlighted}
                 isSelectedNode={isSelectedNode}
                 key={(option as DropdownOption).id}
                 option={option}

app/client/src/pages/Editor/PropertyPane/PropertyPaneConnections.tsx

@@ -174,7 +174,8 @@ const OptionContentWrapper = styled.div<{
     margin-right: ${(props) => props.theme.spaces[5]}px;
   }
 
-  &:hover {
+  &:hover,
+  &.highlighted {
     background-color: ${(props) =>
       !props.hasError && props.theme.colors.dropdown.hovered.bg};
   }
@@ -269,8 +270,12 @@ function OptionNode(props: any) {
   };
 
   const handleKeyDown = (e: KeyboardEvent) => {
-    if (!props.isSelectedNode) return;
-    if (e.key === " " || e.key === "Enter") onClick();
+    if (!props.isSelectedNode && !props.isHighlighted) return;
+    if (
+      (props.isSelectedNode || props.isHighlighted) &&
+      (e.key === " " || e.key === "Enter")
+    )
+      onClick();
   };
 
   useEffect(() => {
@@ -278,14 +283,16 @@ function OptionNode(props: any) {
     return () => {
       document.removeEventListener("keydown", handleKeyDown);
     };
-  }, [props.isSelectedNode]);
+  }, [props.isSelectedNode, props.isHighlighted]);
 
   return (
     <OptionWrapper
+      className={`t--dropdown-option`}
       fillIconColor={!entityInfo?.datasourceName}
       hasError={!!entityInfo?.hasError}
     >
       <OptionContentWrapper
+        className={`${props.isHighlighted ? "highlighted" : ""}`}
         hasError={!!entityInfo?.hasError}
         isSelected={props.isSelectedNode}
         onClick={onClick}
@@ -433,6 +440,7 @@ function PropertyPaneConnections(props: PropertyPaneConnectionsProps) {
         renderOption={(optionProps: RenderDropdownOptionType) => {
           return (
             <OptionNode
+              isHighlighted={optionProps.isHighlighted}
               isSelectedNode={optionProps.isSelectedNode}
               option={optionProps.option}
             />
@@ -469,6 +477,7 @@ function PropertyPaneConnections(props: PropertyPaneConnectionsProps) {
         renderOption={(optionProps: RenderDropdownOptionType) => {
           return (
             <OptionNode
+              isHighlighted={optionProps.isHighlighted}
               isSelectedNode={optionProps.isSelectedNode}
               option={optionProps.option}
             />

app/client/src/pages/Editor/ThemePropertyPane/controls/ThemeFontControl.tsx

@@ -20,11 +20,15 @@ function ThemeFontControl(props: ThemeFontControlProps) {
    * @param param0
    * @returns
    */
-  const renderOption: RenderOption = ({ isSelectedNode, option }) => (
+  const renderOption: RenderOption = ({
+    isHighlighted,
+    isSelectedNode,
+    option,
+  }) => (
     <div
-      className={`flex space-x-2  w-full hover:bg-gray-200 cursor-pointer ${
-        isSelectedNode ? "px-2 py-2" : "px-2 py-2 "
-      }`}
+      className={`flex space-x-2  w-full cursor-pointer ${
+        isSelectedNode ? "px-2 py-2" : "px-2 py-2 hover:bg-gray-200"
+      } ${isHighlighted ? "bg-gray-200" : ""}`}
       onClick={() => {
         if (!isSelectedNode) {
           updateTheme({

app/client/yarn.lock

@@ -6211,10 +6211,10 @@ depd@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz"
 
-"design-system@npm:@appsmithorg/design-system@1.0.24":
-  version "1.0.24"
-  resolved "https://registry.yarnpkg.com/@appsmithorg/design-system/-/design-system-1.0.24.tgz#e83f33ba12917c31f130d20f7eab68e62a0fb86f"
-  integrity sha512-efcOCNX+h4EjDG2Tr09484PAMv7bR0olVQiTq+rwIF+TI9oajNfVGy8aRKVWeDg7kKdatULJ5avZ+IyM3aUJKg==
+"design-system@npm:@appsmithorg/design-system@1.0.25":
+  version "1.0.25"
+  resolved "https://registry.yarnpkg.com/@appsmithorg/design-system/-/design-system-1.0.25.tgz#a4762cf01b779de79fbf89afb2c8732bd382d3e5"
+  integrity sha512-wYKuspbhlGGC5zNpo1yTtbuzy05+5Gktw2PE43vVunMljK94GutNpyvdzNbO9ePw6ZUKLk+KFPngO7igsGY7kA==
   dependencies:
     "@blueprintjs/datetime" "3.23.6"
     copy-to-clipboard "^3.3.1"