Revert "feat: Added focus ring for focus visible (#37700)" (#38650)

appsmithorg · Jan 14, 2025 · e1b3b0d · e1b3b0d
1 parent 3ad06e2
commit e1b3b0d
Show file tree

Hide file tree

Showing 18 changed files with 81 additions and 103 deletions.
diff --git a/app/client/packages/design-system/ads-old/src/SearchComponent/index.tsx b/app/client/packages/design-system/ads-old/src/SearchComponent/index.tsx
@@ -63,11 +63,10 @@ const SearchInputWrapper = styled(InputGroup)<{
       text-overflow: ellipsis;
       width: 100%;
     }
-
     input:focus {
-      outline: var(--ads-v2-border-width-outline) solid
-        var(--ads-v2-color-outline);
-      outline-offset: var(--ads-v2-offset-outline);
+      border: 1.2px solid var(--ads-old-color-fern-green);
+      box-sizing: border-box;
+      width: 100%;
     }
 
     input:active {

diff --git a/app/client/packages/design-system/ads/src/Button/Button.styles.tsx b/app/client/packages/design-system/ads/src/Button/Button.styles.tsx
@@ -210,7 +210,6 @@ export const StyledButton = styled.button<{
   UNSAFE_width?: string;
   disabled?: boolean;
   isIconButton?: boolean;
-  isFocusVisible?: boolean;
 }>`
   ${Variables}
   /* Kind style */
@@ -270,14 +269,11 @@ export const StyledButton = styled.button<{
       }
     }
 
-    ${({ isFocusVisible }) =>
-      isFocusVisible &&
-      css`
-        :focus-visible {
-          outline: var(--ads-v2-border-width-outline) solid
-            var(--ads-v2-color-outline) !important;
-          outline-offset: var(--ads-v2-offset-outline) !important;
-        }
-      `}
+    /* Focus styles */
+    &:focus-visible {
+      outline: var(--ads-v2-border-width-outline) solid
+        var(--ads-v2-color-outline);
+      outline-offset: var(--ads-v2-offset-outline);
+    }
   }
 `;
diff --git a/app/client/packages/design-system/ads/src/Button/Button.tsx b/app/client/packages/design-system/ads/src/Button/Button.tsx
@@ -1,6 +1,5 @@
 import React, { forwardRef } from "react";
 import clsx from "classnames";
-import { useFocusRing } from "@react-aria/focus";
 
 import { StyledButton, ButtonContent } from "./Button.styles";
 import type { ButtonProps } from "./Button.types";
@@ -17,11 +16,6 @@ import {
 } from "./Button.constants";
 import { Spinner } from "../Spinner";
 
-// Add this before the Button component definition
-const SPINNER_ICON_PROPS = {
-  className: ButtonLoadingIconClassName,
-};
-
 /**
  * TODO:
  * - if both left and right icon is used, disregard left icon and print a warning in the console.
@@ -43,25 +37,21 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       ...rest
     } = props;
 
-    // Replace the direct mutation of rest.onClick with this
-    const handleClick =
+    // disable button when loading
+    rest.onClick =
       props.isLoading || props.isDisabled ? undefined : props.onClick;
     const buttonRef = useDOMRef(ref);
-    const { focusProps, isFocusVisible } = useFocusRing();
 
     return (
       <StyledButton
         as={renderAs || "button"}
         {...rest}
-        onClick={handleClick}
-        {...focusProps}
         UNSAFE_height={UNSAFE_height}
         UNSAFE_width={UNSAFE_width}
         className={clsx(ButtonClassName, className)}
         data-disabled={props.isDisabled || false}
         data-loading={isLoading}
         disabled={props.isDisabled}
-        isFocusVisible={isFocusVisible}
         isIconButton={isIconButton}
         kind={kind}
         ref={buttonRef}
@@ -71,7 +61,9 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         {isLoading === true && (
           <Spinner
             className={ButtonLoadingClassName}
-            iconProps={SPINNER_ICON_PROPS}
+            iconProps={{
+              className: ButtonLoadingIconClassName,
+            }}
             size="md"
           />
         )}

diff --git a/app/client/packages/design-system/ads/src/Input/Input.styles.tsx b/app/client/packages/design-system/ads/src/Input/Input.styles.tsx
@@ -164,7 +164,7 @@ export const StyledInput = styled.input<{
     renderer === "input" &&
     css`
       padding-left: calc((var(--input-padding-x) * 2) + var(--icon-size) - 1px);
-    `}
+    `};
 
   /* adjust padding end according to icon present or not */
   ${({ hasEndIcon, renderer }) =>
@@ -174,13 +174,20 @@ export const StyledInput = styled.input<{
       padding-right: calc(
         (var(--input-padding-x) * 2) + var(--icon-size) - 1px
       );
-    `}
+    `};
+
+  &:focus:enabled:not(:read-only) {
+    outline: var(--ads-v2-border-width-outline) solid
+      var(--ads-v2-color-outline);
+    outline-offset: var(--ads-v2-offset-outline);
+  }
 
   &:hover:enabled:not(:read-only) {
     --input-color-border: var(--ads-v2-colors-control-field-hover-border);
   }
 
-  &:active:enabled:not(:read-only) {
+  &:active:enabled:not(:read-only),
+  &:focus:enabled:not(:read-only) {
     --input-color-border: var(--ads-v2-colors-control-field-active-border);
   }
 
@@ -196,16 +203,11 @@ export const StyledInput = styled.input<{
       --input-color-border: var(--ads-v2-colors-control-field-error-border);
     }
 
-    &:active:enabled:not(:read-only) {
+    &:active:enabled:not(:read-only),
+    &:focus:enabled:not(:read-only) {
       --input-color-border: var(--ads-v2-colors-control-field-error-border);
     }
   }
-
-  &:focus {
-    outline: var(--ads-v2-border-width-outline) solid
-      var(--ads-v2-color-outline) !important;
-    outline-offset: var(--ads-v2-offset-outline) !important;
-  }
 `;
 
 export const Description = styled(Text)`

diff --git a/app/client/packages/design-system/ads/src/Input/Input.tsx b/app/client/packages/design-system/ads/src/Input/Input.tsx
@@ -1,4 +1,5 @@
-import React, { forwardRef, useCallback } from "react";
+import React, { forwardRef } from "react";
+import { useFocusRing } from "@react-aria/focus";
 import { useTextField } from "@react-aria/textfield";
 import clsx from "classnames";
 
@@ -54,7 +55,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     const { descriptionProps, errorMessageProps, inputProps, labelProps } =
       // @ts-expect-error fix this the next time the file is edited
       useTextField(props, inputRef);
-
+    const { focusProps, isFocusVisible } = useFocusRing();
     const {
       className: startIconClassName,
       onClick: startIconOnClick,
@@ -66,12 +67,9 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       ...restOfEndIconProps
     } = endIconProps || {};
 
-    const handleOnChange = useCallback(
-      (event: React.ChangeEvent<HTMLInputElement>) => {
-        onChange?.(event.target.value);
-      },
-      [onChange],
-    );
+    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      onChange?.(event.target.value);
+    };
 
     isValid = isValid === undefined ? !errorMessage : isValid;
 
@@ -118,6 +116,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             <StyledInput
               as={renderAs}
               type={type}
+              {...focusProps}
               {...inputProps}
               UNSAFE_height={UNSAFE_height}
               UNSAFE_width={UNSAFE_width}
@@ -127,6 +126,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
               hasEndIcon={!!endIcon}
               hasStartIcon={!!startIcon}
               inputSize={size}
+              isFocusVisible={isFocusVisible}
               onChange={handleOnChange}
               readOnly={isReadOnly}
               ref={inputRef}

diff --git a/app/client/packages/design-system/ads/src/Link/Link.styles.tsx b/app/client/packages/design-system/ads/src/Link/Link.styles.tsx
@@ -91,8 +91,8 @@ export const Styles = css<{ kind?: LinkKind }>`
 
   :focus-visible {
     outline: var(--ads-v2-border-width-outline) solid
-      var(--ads-v2-color-outline) !important;
-    outline-offset: var(--ads-v2-offset-outline) !important;
+      var(--ads-v2-color-outline);
+    outline-offset: var(--ads-v2-offset-outline);
     border-radius: var(--ads-v2-border-radius);
   }
 `;

diff --git a/app/client/packages/design-system/ads/src/SegmentedControl/SegmentedControl.styles.tsx b/app/client/packages/design-system/ads/src/SegmentedControl/SegmentedControl.styles.tsx
@@ -67,8 +67,8 @@ export const StyledControlContainer = styled.div`
 
   &:focus-visible {
     outline: var(--ads-v2-border-width-outline) solid
-      var(--ads-v2-color-outline) !important;
-    outline-offset: var(--ads-v2-offset-outline) !important;
+      var(--ads-v2-color-outline);
+    outline-offset: var(--ads-v2-offset-outline);
   }
 
   &[data-disabled="true"] {

diff --git a/app/client/packages/design-system/ads/src/Select/styles.css b/app/client/packages/design-system/ads/src/Select/styles.css
@@ -1,9 +1,7 @@
 .ads-v2-select {
   --select-color-border: var(--ads-v2-colors-control-field-default-border);
-  --select-padding-x: var(--ads-v2-spaces-2);
-  /* padding left and right */
-  --select-padding-y: var(--ads-v2-spaces-2);
-  /* padding top and bottom */
+  --select-padding-x: var(--ads-v2-spaces-2); /* padding left and right */
+  --select-padding-y: var(--ads-v2-spaces-2); /* padding top and bottom */
   --select-font-size: var(--ads-v2-font-size-2);
   --select-height: 24px;
   --select-search-input-padding-right: 0;
@@ -53,6 +51,7 @@
 .ads-v2-select.rc-select-focused {
   outline: var(--ads-v2-border-width-outline) solid var(--ads-v2-color-outline);
   outline-offset: var(--ads-v2-offset-outline);
+  --select-color-border: var(--ads-v2-colors-control-field-active-border);
 }
 
 /* Error */
@@ -88,7 +87,6 @@
   /* padding x + icon size + gap */
   --select-search-input-padding-right: calc(var(--select-padding-x) + 16px);
 }
-
 .ads-v2-select.rc-select-allow-clear.rc-select-show-arrow.rc-select-selection-search-input,
 .ads-v2-select.rc-select-allow-clear.rc-select-show-arrow
   .rc-select-selection-overflow {
@@ -115,10 +113,6 @@
   overflow: hidden;
 }
 
-.ads-v2-select.rc-select-focused > .rc-select-selector {
-  border-color: transparent;
-}
-
 /* Placeholder */
 .ads-v2-select > .rc-select-selector > .rc-select-selection-placeholder,
 .ads-v2-select > .rc-select-selector > .rc-select-selection-item {

diff --git a/app/client/packages/design-system/ads/src/Switch/Switch.styles.tsx b/app/client/packages/design-system/ads/src/Switch/Switch.styles.tsx
@@ -72,9 +72,8 @@ export const StyledSwitchInput = styled.input<{
   ${({ isFocusVisible }) =>
     isFocusVisible &&
     `
-      outline: var(--ads-v2-border-width-outline) solid
-        var(--ads-v2-color-outline) !important;
-      outline-offset: var(--ads-v2-offset-outline) !important;
+      outline: var(--ads-v2-border-width-outline) solid var(--ads-v2-color-outline);
+      outline-offset: var(--ads-v2-offset-outline);
     `}
 
   &:hover {

diff --git a/app/client/packages/design-system/ads/src/Tab/Tab.styles.tsx b/app/client/packages/design-system/ads/src/Tab/Tab.styles.tsx
@@ -88,7 +88,7 @@ export const StyledTab = styled(RadixTabs.TabsTrigger)`
   &:focus-visible {
     --tab-color: var(--ads-v2-colors-content-label-default-fg);
     outline: var(--ads-v2-border-width-outline) solid
-      var(--ads-v2-color-outline) !important;
-    outline-offset: var(--ads-v2-offset-outline) !important;
+      var(--ads-v2-color-outline);
+    outline-offset: var(--ads-v2-offset-outline);
   }
 `;
diff --git a/app/client/packages/design-system/ads/src/Text/Text.styles.tsx b/app/client/packages/design-system/ads/src/Text/Text.styles.tsx
@@ -201,13 +201,8 @@ export const StyledEditableInput = styled.input`
     border-color: var(--ads-v2-colors-control-field-hover-border);
   }
 
+  &:focus,
   &:active {
     border-color: var(--ads-v2-colors-control-field-active-border);
   }
-
-  &:focus-visible {
-    outline: var(--ads-v2-border-width-outline) solid
-      var(--ads-v2-color-outline);
-    outline-offset: var(--ads-v2-offset-outline);
-  }
 `;
diff --git a/app/client/packages/design-system/ads/src/__theme__/default/index.css b/app/client/packages/design-system/ads/src/__theme__/default/index.css
@@ -239,9 +239,9 @@
   /* --ads-v2-color-outline: var(--ads-v2-color-blue-300);
   --ads-v2-border-width-outline: 2px; */
   /* TODO: fix focus issue across the platform */
-  --ads-v2-color-outline: var(--ads-v2-color-blue-300);
-  --ads-v2-border-width-outline: 2px;
-  --ads-v2-offset-outline: -2px;
+  --ads-v2-color-outline: transparent;
+  --ads-v2-border-width-outline: 0;
+  --ads-v2-offset-outline: 0;
 
   /**
     * ===========================================*
@@ -251,22 +251,17 @@
   --ads-v2-opacity-disabled: 0.6;
 }
 
-:focus {
-  outline: none !important;
-}
-
 /* react-aria useFocusRing helper class*/
 .ads-v2-focus-ring {
-  outline: var(--ads-v2-border-width-outline) solid var(--ads-v2-color-outline) !important;
-  outline-offset: var(--ads-v2-offset-outline) !important;
+  outline: var(--ads-v2-border-width-outline) solid var(--ads-v2-color-outline);
+  outline-offset: var(--ads-v2-offset-outline);
 }
 
 /* Placeholder color */
 ::placeholder {
   /* This needs to be important to override the placeholder color on main repo */
   color: var(--ads-v2-colors-control-placeholder-default-fg) !important;
-  opacity: 1;
-  /* Firefox */
+  opacity: 1; /* Firefox */
 }
 
 :-ms-input-placeholder {

diff --git a/app/client/src/components/editorComponents/CodeEditor/index.tsx b/app/client/src/components/editorComponents/CodeEditor/index.tsx
@@ -1794,7 +1794,6 @@ class CodeEditor extends Component<Props, State> {
               onMouseOver={this.handleMouseMove}
               ref={this.editorWrapperRef}
               removeHoverAndFocusStyle={this.props?.removeHoverAndFocusStyle}
-              showFocusVisible={!this.props.isJSObject}
               size={size}
             >
               {this.state.peekOverlayProps && (

diff --git a/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts b/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts
@@ -54,7 +54,6 @@ export const EditorWrapper = styled.div<{
   AIEnabled?: boolean;
   mode: string;
   maxHeight?: string | number;
-  showFocusVisible?: boolean;
 }>`
   // Bottom border was getting clipped
   .CodeMirror.cm-s-duotone-light.CodeMirror-wrap {
@@ -84,17 +83,6 @@ export const EditorWrapper = styled.div<{
   text-transform: none;
 
   && {
-    ${(props) =>
-      props.showFocusVisible &&
-      `
-        .CodeMirror-focused {
-          outline: var(--ads-v2-border-width-outline) solid
-            var(--ads-v2-color-outline) !important;
-          outline-offset: var(--ads-v2-offset-outline) !important;
-          z-index: 1 !important;
-        }
-      `}
-
     .CodeMirror-cursor {
       border-right: none;
       border-left-width: 2px;
@@ -402,11 +390,12 @@ export const EditorWrapper = styled.div<{
       }
     }
 
-    &:focus-visible {
+    &:focus {
       .CodeMirror.cm-s-duotone-light {
-        outline: var(--ads-v2-border-width-outline) solid
-          var(--ads-v2-color-outline);
-        outline-offset: var(--ads-v2-offset-outline);
+        border-color: ${(props) =>
+          props.borderLess
+            ? "none"
+            : "var(--ads-v2-color-border-emphasis-plus)"};
       }
     }