improvement(component-library): make improvements in the checkbox component (#13299)

datahub-web-react/src/alchemy-components/components/Checkbox/Checkbox.tsx

@@ -5,7 +5,6 @@ import {
     CheckboxContainer,
     CheckboxGroupContainer,
     Checkmark,
-    HoverState,
     Label,
     Required,
     StyledCheckbox,
@@ -35,7 +34,6 @@ export const Checkbox = ({
     ...props
 }: CheckboxProps) => {
     const [checked, setChecked] = useState(isChecked || false);
-    const [isHovering, setIsHovering] = useState(false);
 
     useEffect(() => {
         setChecked(isChecked || false);
@@ -76,14 +74,6 @@ export const Checkbox = ({
                     disabled={isDisabled || false}
                     checked={checked || false}
                     size={size || 'md'}
-                    onMouseOver={() => setIsHovering(true)}
-                    onMouseLeave={() => setIsHovering(false)}
-                />
-                <HoverState
-                    isHovering={!isDisabled ? isHovering : false}
-                    error={error || ''}
-                    checked={checked || false}
-                    disabled={isDisabled || false}
                 />
             </CheckboxBase>
         </CheckboxContainer>

datahub-web-react/src/alchemy-components/components/Checkbox/components.ts

@@ -4,6 +4,7 @@ import {
     getCheckboxColor,
     getCheckboxHoverBackgroundColor,
     getCheckboxSize,
+    getCheckmarkPosition,
 } from '@components/components/Checkbox/utils';
 import { formLabelTextStyles } from '@components/components/commonStyles';
 import { borders, colors, radius, spacing, transform, zIndices } from '@components/theme';
@@ -56,26 +57,33 @@ export const Checkmark = styled.div<{
     size: SizeOptions;
 }>(({ intermediate, checked, error, disabled, size }) => ({
     ...getCheckboxSize(size),
+    ...getCheckmarkPosition(size),
     position: 'absolute',
-    top: '4px',
-    left: '11px',
     zIndex: zIndices.docked,
-    borderRadius: '3px',
-    border: `${borders['2px']} ${getCheckboxColor(checked, error, disabled, undefined)}`,
+    borderRadius: '4px',
+    border: `${borders['1px']} ${getCheckboxColor(checked, error, disabled, undefined)}`,
     transition: 'all 0.2s ease-in-out',
-    cursor: 'pointer',
+    cursor: disabled ? 'normal' : 'pointer',
+    ':hover': {
+        ...(!disabled && {
+            borderColor: colors.violet[500],
+        }),
+    },
     '&:after': {
         content: '""',
         position: 'absolute',
         display: 'none',
-        top: !intermediate ? '10%' : '20%',
-        left: !intermediate ? '30%' : '40%',
+        top: !intermediate ? '10%' : '25%',
+        left: !intermediate ? '30%' : '45%',
         width: !intermediate ? '35%' : '0px',
         height: !intermediate ? '60%' : '50%',
         border: 'solid white',
-        borderWidth: '0 3px 3px 0',
+        borderWidth: '0 2px 2px 0',
         transform: !intermediate ? 'rotate(45deg)' : transform.rotate[90],
     },
+    ...(disabled && {
+        backgroundColor: colors.gray[1500],
+    }),
 }));
 
 export const HoverState = styled.div<{ isHovering: boolean; error: string; checked: boolean; disabled: boolean }>(

datahub-web-react/src/alchemy-components/components/Checkbox/utils.ts

@@ -6,7 +6,7 @@ const checkboxBackgroundDefault = {
     default: colors.white,
     checked: theme.semanticTokens.colors.primary,
     error: theme.semanticTokens.colors.error,
-    disabled: colors.gray[300],
+    disabled: colors.gray[1500],
 };
 
 const checkboxHoverColors = {
@@ -16,7 +16,9 @@ const checkboxHoverColors = {
 };
 
 export function getCheckboxColor(checked: boolean, error: string, disabled: boolean, mode: 'background' | undefined) {
-    if (disabled) return checkboxBackgroundDefault.disabled;
+    if (disabled) {
+        return mode === 'background' ? checkboxBackgroundDefault.disabled : colors.gray[100];
+    }
     if (error) return checkboxBackgroundDefault.error;
     if (checked) return checkboxBackgroundDefault.checked;
     return mode === 'background' ? checkboxBackgroundDefault.default : colors.gray[500];
@@ -43,3 +45,19 @@ export function getCheckboxSize(size: SizeOptions) {
         width: sizeMap[size],
     };
 }
+
+const offsetMap: Record<SizeOptions, string> = {
+    xs: '7px',
+    sm: '6px',
+    md: '5px',
+    lg: '4px',
+    xl: '3px',
+    inherit: 'inherit',
+};
+
+export function getCheckmarkPosition(size: SizeOptions) {
+    return {
+        top: offsetMap[size],
+        left: offsetMap[size],
+    };
+}