fix(annotations): Fix Palette doesn't close when blurred (#1317)

box · Jan 13, 2021 · bd6413b · bd6413b
1 parent e8a3c57
commit bd6413b
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 11 deletions.
diff --git a/src/lib/viewers/controls/color-picker/ColorPickerControl.scss b/src/lib/viewers/controls/color-picker/ColorPickerControl.scss
@@ -18,6 +18,7 @@
     top: -#{$arrow-height};
     left: 50%;
     z-index: 1;
+    display: none;
     padding-bottom: 10px;
     transform: translate(-50%, -100%);
 
@@ -31,6 +32,10 @@
         transform: translateX(-50%);
         content: '';
     }
+
+    &.bp-is-open {
+        display: block;
+    }
 }
 
 .bp-ColorPickerControl-swatch {

diff --git a/src/lib/viewers/controls/color-picker/ColorPickerControl.tsx b/src/lib/viewers/controls/color-picker/ColorPickerControl.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
+import classNames from 'classnames';
 import { bdlBoxBlue } from 'box-ui-elements/es/styles/variables';
 import ColorPickerPalette from './ColorPickerPalette';
+import useAttention from '../hooks/useAttention';
 import './ColorPickerControl.scss';
 
 export type Props = {
@@ -16,28 +18,41 @@ export default function ColorPickerControl({
     ...rest
 }: Props): JSX.Element | null {
     const [isColorPickerToggled, setIsColorPickerToggled] = useState(false);
+    const [isPaletteActive, handlers] = useAttention();
 
     const handleSelect = (color: string): void => {
         setIsColorPickerToggled(false);
         onColorSelect(color);
     };
 
+    const handleBlur = (): void => {
+        if (isPaletteActive) {
+            return;
+        }
+        setIsColorPickerToggled(false);
+    };
+
+    const handleClick = (): void => setIsColorPickerToggled(!isColorPickerToggled);
+
     return (
         <div className="bp-ColorPickerControl">
             <button
                 className="bp-ColorPickerControl-button"
                 data-testid="bp-ColorPickerControl-button"
-                onClick={(): void => setIsColorPickerToggled(!isColorPickerToggled)}
+                onBlur={handleBlur}
+                onClick={handleClick}
                 type="button"
                 {...rest}
             >
                 <div className="bp-ColorPickerControl-swatch" style={{ backgroundColor: activeColor }} />
             </button>
-            {isColorPickerToggled && (
-                <div className="bp-ColorPickerControl-palette">
-                    <ColorPickerPalette colors={colors} data-testid="bp-ColorPickerPalette" onSelect={handleSelect} />
-                </div>
-            )}
+            <div
+                className={classNames('bp-ColorPickerControl-palette', { 'bp-is-open': isColorPickerToggled })}
+                data-testid="bp-ColorPickerControl-palette"
+                {...handlers}
+            >
+                <ColorPickerPalette colors={colors} data-testid="bp-ColorPickerPalette" onSelect={handleSelect} />
+            </div>
         </div>
     );
 }
diff --git a/src/lib/viewers/controls/color-picker/__tests__/ColorPickerControl-test.tsx b/src/lib/viewers/controls/color-picker/__tests__/ColorPickerControl-test.tsx
@@ -9,7 +9,7 @@ describe('ColorPickerControl', () => {
         shallow(<ColorPickerControl colors={[defaultColor]} onColorSelect={jest.fn()} {...props} />);
 
     const getColorPickerPalette = (wrapper: ShallowWrapper): ShallowWrapper =>
-        wrapper.find('[data-testid="bp-ColorPickerPalette"]');
+        wrapper.find('[data-testid="bp-ColorPickerControl-palette"]');
 
     const getToggleButton = (wrapper: ShallowWrapper): ShallowWrapper =>
         wrapper.find('[data-testid="bp-ColorPickerControl-button"]');
@@ -18,15 +18,36 @@ describe('ColorPickerControl', () => {
         test('should not render ColorPickerPalette when the component is first mounted', () => {
             const wrapper = getWrapper();
 
-            expect(getColorPickerPalette(wrapper).exists()).toBe(false);
+            expect(getColorPickerPalette(wrapper).hasClass('bp-is-open')).toBe(false);
         });
 
         test('should render ColorPickerPalette when the toggle button is clicked', () => {
             const wrapper = getWrapper();
 
             getToggleButton(wrapper).simulate('click');
 
-            expect(getColorPickerPalette(wrapper).exists()).toBe(true);
+            expect(getColorPickerPalette(wrapper).hasClass('bp-is-open')).toBe(true);
+        });
+
+        test('should close the palette when button is blurred', () => {
+            const wrapper = getWrapper();
+            const toggleButton = getToggleButton(wrapper);
+
+            toggleButton.simulate('click');
+            expect(getColorPickerPalette(wrapper).hasClass('bp-is-open')).toBe(true);
+
+            toggleButton.simulate('blur');
+            expect(getColorPickerPalette(wrapper).hasClass('bp-is-open')).toBe(false);
+        });
+
+        test('should not close the palette when palette is active', () => {
+            const wrapper = getWrapper();
+
+            getToggleButton(wrapper).simulate('click');
+            expect(getColorPickerPalette(wrapper).hasClass('bp-is-open')).toBe(true);
+
+            getColorPickerPalette(wrapper).simulate('focus');
+            expect(getColorPickerPalette(wrapper).hasClass('bp-is-open')).toBe(true);
         });
     });
 
@@ -36,9 +57,9 @@ describe('ColorPickerControl', () => {
             const wrapper = getWrapper({ onColorSelect });
 
             getToggleButton(wrapper).simulate('click');
-            getColorPickerPalette(wrapper).simulate('select', defaultColor);
+            wrapper.find('[data-testid="bp-ColorPickerPalette"]').simulate('select', defaultColor);
 
-            expect(getColorPickerPalette(wrapper).exists()).toBe(false);
+            expect(getColorPickerPalette(wrapper).hasClass('bp-is-open')).toBe(false);
             expect(onColorSelect).toHaveBeenCalledWith(defaultColor);
         });
     });