Merge pull request #925 from kanushka/fix-ux-issues

Refactor Expression Editor floating button styles for theming

Author: kanushka

workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/ChipExpressionEditor.tsx

@@ -43,7 +43,7 @@ import { autocompletion } from "@codemirror/autocomplete";
 import { FloatingButtonContainer, FloatingToggleButton, ChipEditorContainer } from "../styles";
 import { HelperpaneOnChangeOptions } from "../../../../Form/types";
 import { CompletionItem, FnSignatureDocumentation, HelperPaneHeight } from "@wso2/ui-toolkit";
-import { CloseHelperIcon, ExpandIcon, OpenHelperIcon } from "./FloatingButtonIcons";
+import { CloseHelperIcon, ExpandIcon, MinimizeIcon, OpenHelperIcon } from "./FloatingButtonIcons";
 import { LineRange } from "@wso2/ballerina-core";
 import FXButton from "./FxButton";
 import { HelperPaneToggleButton } from "./HelperPaneToggleButton";
@@ -347,15 +347,14 @@ export const ChipExpressionEditorComponent = (props: ChipExpressionEditorCompone
                         {!props.isExpandedVersion &&
                             <FloatingToggleButton
                                 ref={helperPaneToggleButtonRef}
-                                isActive={helperPaneState.isOpen}
                                 onClick={handleHelperPaneManualToggle}
-                                title={helperPaneState.isOpen ? "Close Helper" : "Open Helper"}
+                                title={helperPaneState.isOpen ? "Close Helper Panel" : "Open Helper Panel"}
                             >
                                 {helperPaneState.isOpen ? <CloseHelperIcon /> : <OpenHelperIcon />}
                             </FloatingToggleButton>}
-                        {props.onOpenExpandedMode && !props.isInExpandedMode && (
-                            <FloatingToggleButton onClick={props.onOpenExpandedMode} title="Expand Editor" isActive={false}>
-                                <ExpandIcon />
+                        {props.onOpenExpandedMode && (
+                            <FloatingToggleButton onClick={props.onOpenExpandedMode} title={props.isInExpandedMode ? "Minimize Editor" : "Expand Editor"}>
+                                {props.isInExpandedMode ? <MinimizeIcon /> : <ExpandIcon />}
                             </FloatingToggleButton>
                         )}
                     </FloatingButtonContainer>

workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/FloatingToggleButton.tsx

@@ -35,7 +35,6 @@ export const FloatingToggleButton: React.FC<FloatingToggleButtonProps> = ({
 }) => {
     return (
         <StyledButton
-            isActive={isActive ?? false}
             onClick={onClick}
             title={title}
             {...{[ARIA_PRESSED_ATTRIBUTE]: isActive ?? false}}

workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/styles.tsx

@@ -231,13 +231,13 @@ export const FloatingButtonContainer = styled.div`
     z-index: 1500;
 `;
 
-export const FloatingToggleButton = styled.button<{ isActive: boolean }>`
+export const FloatingToggleButton = styled.button`
     width: 16px;
     height: 16px;
-    border: 1px solid ${props => props.isActive ? ThemeColors.PRIMARY : ThemeColors.OUTLINE};
+    border: 1px solid ${ThemeColors.OUTLINE};
     border-radius: 2px;
-    background-color: ${props => props.isActive ? ThemeColors.PRIMARY : ThemeColors.SURFACE_CONTAINER};
-    color: ${props => props.isActive ? ThemeColors.ON_PRIMARY : ThemeColors.ON_SURFACE_VARIANT};
+    background-color: ${ThemeColors.SURFACE_CONTAINER};
+    color: ${ThemeColors.ON_SURFACE_VARIANT};
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -247,20 +247,11 @@ export const FloatingToggleButton = styled.button<{ isActive: boolean }>`
     transition: background-color 0.1s ease, border-color 0.1s ease, color 0.1s ease, transform 0.1s ease;
     outline: none;
     padding: 0;
-    box-shadow: ${props => props.isActive ? `0 0 0 1px ${ThemeColors.PRIMARY}` : '0 1px 2px rgba(0, 0, 0, 0.15)'};
+    box-shadow: ${'0 1px 2px rgba(0, 0, 0, 0.15)'};
 
     &:hover {
-        background-color: ${props => props.isActive ? ThemeColors.PRIMARY_CONTAINER : ThemeColors.SURFACE_CONTAINER};
-        border-color: ${props => props.isActive ? ThemeColors.PRIMARY : ThemeColors.OUTLINE_VARIANT};
+        background-color: ${ThemeColors.SURFACE_DIM_2};
         transform: scale(1.05);
-        
-        svg {
-            color: ${ThemeColors.PRIMARY}cc;
-        }
-    }
-
-    &:active {
-        background-color: ${props => props.isActive ? ThemeColors.PRIMARY : ThemeColors.SURFACE_CONTAINER};
     }
 
     &:focus-visible {