fix(controls): update region annotation icon (#1212)

* fix(controls): update region annotation icon * fix(controls): update region annotation icon * Fix test * fix(controls): update region annotation icon * Remove un-needed class
box · May 26, 2020 · 699e859 · 699e859
1 parent bd51261
commit 699e859
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 11 deletions.
diff --git a/src/lib/AnnotationControls.scss b/src/lib/AnnotationControls.scss
@@ -1,23 +1,32 @@
 .bp-AnnotationControls-group {
-    padding: 0 4px 0 8px;
+    padding-left: 4px;
     border-left: 1px solid $twos;
 
     .bp-AnnotationControls-regionBtn {
-        width: $controls-button-width;
-        height: $controls-button-width;
-        border-radius: 4px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
         svg {
             fill: $white;
         }
 
         &.is-active {
-            background-color: $white;
-
             svg {
                 fill: $black;
             }
         }
+
+        &.is-active::before {
+            position: absolute;
+            z-index: -1;
+            width: 34px;
+            height: 32px;
+            background-color: $white;
+            border-radius: 4px;
+            content: '';
+        }
     }
 
     &.is-hidden {

diff --git a/src/lib/AnnotationControls.ts b/src/lib/AnnotationControls.ts
@@ -1,7 +1,7 @@
 import noop from 'lodash/noop';
 
 import { ICON_REGION_COMMENT } from './icons/icons';
-import Controls, { CLASS_BOX_CONTROLS_GROUP_BUTTON } from './Controls';
+import Controls from './Controls';
 import fullscreen from './Fullscreen';
 
 export const CLASS_ANNOTATIONS_GROUP = 'bp-AnnotationControls-group';
@@ -153,7 +153,7 @@ export default class AnnotationControls {
         const regionButton = this.controls.add(
             __('region_comment'),
             this.handleClick(onRegionClick, AnnotationMode.REGION),
-            `${CLASS_BOX_CONTROLS_GROUP_BUTTON} ${CLASS_REGION_BUTTON}`,
+            CLASS_REGION_BUTTON,
             ICON_REGION_COMMENT,
             'button',
             groupElement,

diff --git a/src/lib/__tests__/AnnotationControls-test.js b/src/lib/__tests__/AnnotationControls-test.js
@@ -7,7 +7,7 @@ import AnnotationControls, {
     CLASS_GROUP_HIDE,
     CLASS_REGION_BUTTON,
 } from '../AnnotationControls';
-import Controls, { CLASS_BOX_CONTROLS_GROUP_BUTTON } from '../Controls';
+import Controls from '../Controls';
 import fullscreen from '../Fullscreen';
 
 let annotationControls;
@@ -89,7 +89,7 @@ describe('lib/AnnotationControls', () => {
             expect(annotationControls.controls.add).to.be.calledWith(
                 __('region_comment'),
                 stubs.regionHandler,
-                `${CLASS_BOX_CONTROLS_GROUP_BUTTON} ${CLASS_REGION_BUTTON}`,
+                CLASS_REGION_BUTTON,
                 ICON_REGION_COMMENT,
                 'button',
                 sinon.match.any,

diff --git a/src/lib/icons/region_comment.svg b/src/lib/icons/region_comment.svg