fix(drawing): show sub-shadow in color picker control button (#1318)

* fix(drawing): add toggle background for color picker control button
box · Jan 15, 2021 · 63f555c · 63f555c
1 parent 1c27b66
commit 63f555c
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 6 deletions.
diff --git a/src/lib/viewers/controls/color-picker/ColorPickerControl.scss b/src/lib/viewers/controls/color-picker/ColorPickerControl.scss
@@ -7,8 +7,18 @@
     justify-content: center;
 }
 
-.bp-ColorPickerControl-button {
+.bp-ColorPickerControl-toggle {
     @include bp-ControlButton;
+
+    &.bp-is-active,
+    &:focus,
+    &:hover {
+        .bp-ColorPickerControl-toggle-background {
+            padding: 8px;
+            background-color: $fours;
+            border-radius: 4px;
+        }
+    }
 }
 
 .bp-ColorPickerControl-palette {
@@ -38,7 +48,7 @@
     }
 }
 
-.bp-ColorPickerControl-swatch {
+.bp-ColorPickerControl-toggle-swatch {
     width: 18px;
     height: 18px;
     border: 2px solid #fff;

diff --git a/src/lib/viewers/controls/color-picker/ColorPickerControl.tsx b/src/lib/viewers/controls/color-picker/ColorPickerControl.tsx
@@ -37,14 +37,16 @@ export default function ColorPickerControl({
     return (
         <div className="bp-ColorPickerControl">
             <button
-                className="bp-ColorPickerControl-button"
-                data-testid="bp-ColorPickerControl-button"
+                className={classNames('bp-ColorPickerControl-toggle', { 'bp-is-active': isColorPickerToggled })}
+                data-testid="bp-ColorPickerControl-toggle"
                 onBlur={handleBlur}
                 onClick={handleClick}
                 type="button"
                 {...rest}
             >
-                <div className="bp-ColorPickerControl-swatch" style={{ backgroundColor: activeColor }} />
+                <div className="bp-ColorPickerControl-toggle-background">
+                    <div className="bp-ColorPickerControl-toggle-swatch" style={{ backgroundColor: activeColor }} />
+                </div>
             </button>
             <div
                 className={classNames('bp-ColorPickerControl-palette', { 'bp-is-open': 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
@@ -12,7 +12,7 @@ describe('ColorPickerControl', () => {
         wrapper.find('[data-testid="bp-ColorPickerControl-palette"]');
 
     const getToggleButton = (wrapper: ShallowWrapper): ShallowWrapper =>
-        wrapper.find('[data-testid="bp-ColorPickerControl-button"]');
+        wrapper.find('[data-testid="bp-ColorPickerControl-toggle"]');
 
     describe('render', () => {
         test('should not render ColorPickerPalette when the component is first mounted', () => {
@@ -29,6 +29,17 @@ describe('ColorPickerControl', () => {
             expect(getColorPickerPalette(wrapper).hasClass('bp-is-open')).toBe(true);
         });
 
+        test('should apply toggle background when the toggle button is clicked and remove the background when the button is blurred', () => {
+            const wrapper = getWrapper();
+            const toggleButton = getToggleButton(wrapper);
+
+            toggleButton.simulate('click');
+            expect(getToggleButton(wrapper).hasClass('bp-is-active')).toBe(true);
+
+            toggleButton.simulate('blur');
+            expect(getToggleButton(wrapper).hasClass('bp-is-active')).toBe(false);
+        });
+
         test('should close the palette when button is blurred', () => {
             const wrapper = getWrapper();
             const toggleButton = getToggleButton(wrapper);