diff --git a/src/lib/viewers/controls/color-picker/ColorPickerControl.scss b/src/lib/viewers/controls/color-picker/ColorPickerControl.scss
index 5c9f67618..e907d0ade 100644
--- 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
index f2127963a..8e428c007 100644
--- 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 (
- {isColorPickerToggled && (
-
-
-
- )}
+
+
+
);
}
diff --git a/src/lib/viewers/controls/color-picker/__tests__/ColorPickerControl-test.tsx b/src/lib/viewers/controls/color-picker/__tests__/ColorPickerControl-test.tsx
index b5954b1a7..af89da004 100644
--- 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();
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,7 +18,7 @@ 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', () => {
@@ -26,7 +26,28 @@ describe('ColorPickerControl', () => {
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);
});
});