feat(toolbar): Update control toolbars to latest design

src/lib/Controls.scss

@@ -6,7 +6,7 @@ $controls-button-width: 32px;
     left: 50%;
     display: flex;
     background: fade-out($black, .2);
-    border-radius: 3px;
+    border-radius: 6px;
     transform: translateX(-50%);
     opacity: 0;
     transition: opacity .5s;
@@ -40,13 +40,14 @@ $controls-button-width: 32px;
 
 .bp-controls-btn {
     display: block;
-    width: 48px;
-    height: 48px;
+    width: 44px;
+    height: 44px;
     margin: 0;
     padding: 0;
     color: $white;
     background: transparent;
     border: 1px solid transparent;
+    border-radius: 6px;
     outline: 0;
     cursor: pointer;
     opacity: .7;

src/lib/viewers/controls/_styles.scss

@@ -1,30 +1,16 @@
-@import '~box-ui-elements/es/styles/variables';
+@import '~box-ui-elements/es/styles/constants/colors';
+@import '~box-ui-elements/es/styles/deprecated';
 
 $bp-controls-background: fade-out($black, .2);
+$bp-controls-opacity: .8;
+$bp-controls-outline: inset 0 0 0 1px fade-out($white, .5), 0 1px 2px fade-out($black, .9);
+$bp-controls-radius-inner: 4px;
+$bp-controls-radius-outer: 6px;
+$bp-controls-size-default: 44px;
+$bp-controls-size-small: 32px;
+$bp-controls-spacing: 6px;
 
-@mixin bp-Control--hover {
-    opacity: .7;
-    transition: opacity 150ms;
-    will-change: opacity; // Prevent flickering in Safari
-
-    &:focus,
-    &:hover {
-        opacity: 1;
-    }
-}
-
-@mixin bp-Control--focus {
-    outline: 0;
-
-    &:focus {
-        box-shadow: inset 0 0 0 1px fade-out($white, .5), 0 1px 2px fade-out($black, .9);
-    }
-}
-
-@mixin bp-ControlButton($height: 48px, $width: 48px) {
-    @include bp-Control--hover;
-    @include bp-Control--focus;
-
+@mixin bp-Control($height: $bp-controls-size-default, $width: $bp-controls-size-default) {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -34,7 +20,8 @@ $bp-controls-background: fade-out($black, .2);
     padding: 0;
     color: $white;
     background: transparent;
-    border: 1px solid transparent;
+    border: 0;
+    border-radius: $bp-controls-radius-outer;
     cursor: pointer;
     user-select: none;
     touch-action: manipulation;
@@ -45,11 +32,61 @@ $bp-controls-background: fade-out($black, .2);
         opacity: .2;
         pointer-events: none;
     }
+
+    svg {
+        width: $bp-controls-size-small;
+        height: $bp-controls-size-small;
+        padding: 5px;
+        border-radius: $bp-controls-radius-inner;
+    }
+
+    @include bp-Control--fade;
+    @include bp-Control--outline;
 }
 
-@mixin bp-ControlGroup {
+@mixin bp-Control--expand {
+    margin-top: -$bp-controls-spacing;
+    margin-bottom: -$bp-controls-spacing;
+}
+
+@mixin bp-Control--fade {
+    opacity: $bp-controls-opacity;
+    transition: opacity 150ms;
+    will-change: opacity; // Prevent flickering in Safari
+
+    &:focus,
+    &:hover {
+        opacity: 1;
+    }
+}
+
+@mixin bp-Control--outline {
+    outline: 0;
+
+    &:focus {
+        box-shadow: $bp-controls-outline; // Show effect for all events in legacy browsers (IE, Safari)
+    }
+
+    &:focus-visible {
+        box-shadow: $bp-controls-outline; // Show effect for keyboard events in modern browsers
+    }
+
+    &:focus:not(:focus-visible) {
+        box-shadow: none; // Remove effect for mouse events in modern browsers
+    }
+}
+
+@mixin bp-ControlLabel {
     display: flex;
     align-items: center;
-    margin-right: 4px;
-    margin-left: 4px;
+    justify-content: center;
+    min-width: $bp-controls-size-default;
+    padding-right: 3px;
+    padding-left: 3px;
+    color: $white;
+    font-size: 13px;
+    line-height: 1;
+    white-space: nowrap;
+    opacity: $bp-controls-opacity;
+    user-select: none;
 }

src/lib/viewers/controls/annotations/AnnotationsButton.scss

@@ -2,17 +2,15 @@
 @import '../styles';
 
 .bp-AnnotationsButton {
-    @include bp-ControlButton;
+    @include bp-Control;
 
     svg {
-        width: 34px;
-        height: 32px;
-        padding: 4px 5px;
-        border-radius: 4px;
         fill: $white;
     }
 
     &.bp-is-active {
+        opacity: 1;
+
         svg {
             background-color: $white;
             fill: $black;

src/lib/viewers/controls/annotations/AnnotationsControls.scss

@@ -2,8 +2,6 @@
 @import '../styles';
 
 .bp-AnnotationsControls {
-    @include bp-ControlGroup;
-
-    padding-left: 4px;
-    border-left: 1px solid $twos;
+    display: flex;
+    align-items: center;
 }

src/lib/viewers/controls/color-picker/ColorPickerControl.scss

@@ -8,15 +8,15 @@
 }
 
 .bp-ColorPickerControl-toggle {
-    @include bp-ControlButton;
+    @include bp-Control;
 
     &.bp-is-active,
     &:focus,
     &:hover {
         .bp-ColorPickerControl-toggle-background {
             padding: 8px;
             background-color: $fours;
-            border-radius: 4px;
+            border-radius: $bp-controls-radius-inner;
         }
     }
 }

src/lib/viewers/controls/color-picker/ColorPickerPalette.scss

@@ -6,7 +6,7 @@
     justify-content: center;
     padding: 0 8px;
     background: $bp-controls-background;
-    border-radius: 4px;
+    border-radius: $bp-controls-radius-inner;
 }
 
 .bp-ColorPickerPalette-button {
@@ -15,7 +15,7 @@
     margin: 10px 2px;
     padding: 0;
     border: none;
-    border-radius: 4px;
+    border-radius: $bp-controls-radius-inner;
     cursor: pointer;
 
     &:focus,

src/lib/viewers/controls/controls-bar/ControlsBar.scss

@@ -1,12 +1,16 @@
-@import '~box-ui-elements/es/styles/variables';
+@import '../styles';
 
 .bp-ControlsBar {
     display: flex;
     align-items: center;
-    background: fade-out($black, .2);
-    border-radius: 3px;
+    background: $bp-controls-background;
+    border-radius: $bp-controls-radius-outer;
+
+    &:empty {
+        display: none;
+    }
 
     & + & {
-        margin-left: 6px;
+        margin-left: $bp-controls-spacing;
     }
 }

src/lib/viewers/controls/controls-bar/ControlsBarGroup.scss

@@ -0,0 +1,20 @@
+@import 'src/lib/viewers/controls/styles';
+
+.bp-ControlsBarGroup {
+    display: flex;
+    align-items: center;
+    margin-left: $bp-controls-spacing;
+
+    &:empty {
+        display: none;
+    }
+
+    &:last-child {
+        margin-right: $bp-controls-spacing;
+    }
+}
+
+.bp-ControlsBarGroup--distinct {
+    background-color: fade-out($bdl-gray-80, .2);
+    border-radius: $bp-controls-radius-inner;
+}

src/lib/viewers/controls/controls-bar/ControlsBarGroup.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import classNames from 'classnames';
+import './ControlsBarGroup.scss';
+
+export type Props = React.HTMLAttributes<HTMLDivElement> & {
+    isDistinct?: boolean;
+};
+
+export default function ControlsBarGroup({ children, className, isDistinct }: Props): JSX.Element {
+    return (
+        <div className={classNames('bp-ControlsBarGroup', { 'bp-ControlsBarGroup--distinct': isDistinct }, className)}>
+            {children}
+        </div>
+    );
+}

src/lib/viewers/controls/controls-bar/index.ts

@@ -1 +1,2 @@
 export { default } from './ControlsBar';
+export { default as ControlsBarGroup } from './ControlsBarGroup';

src/lib/viewers/controls/findbar/FindBarToggle.scss

@@ -1,5 +1,5 @@
 @import '../styles';
 
 .bp-FindBarToggle {
-    @include bp-ControlButton;
+    @include bp-Control;
 }

src/lib/viewers/controls/findbar/FindBarToggle.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import IconSearch18 from '../icons/IconSearch18';
+import IconSearch24 from '../icons/IconSearch24';
 import './FindBarToggle.scss';
 
 export type Props = {
@@ -13,7 +13,7 @@ export default function FindBarToggle({ onFindBarToggle }: Props): JSX.Element |
 
     return (
         <button className="bp-FindBarToggle" onClick={onFindBarToggle} title={__('toggle_findbar')} type="button">
-            <IconSearch18 />
+            <IconSearch24 />
         </button>
     );
 }

src/lib/viewers/controls/findbar/__tests__/FindBarToggle-test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import FindBarToggle from '../FindBarToggle';
-import IconSearch18 from '../../icons/IconSearch18';
+import IconSearch24 from '../../icons/IconSearch24';
 
 describe('FindBarToggle', () => {
     const getWrapper = (props = {}): ShallowWrapper => shallow(<FindBarToggle {...props} />);
@@ -22,7 +22,7 @@ describe('FindBarToggle', () => {
             const wrapper = getWrapper({ onFindBarToggle: jest.fn() });
 
             expect(wrapper.hasClass('bp-FindBarToggle')).toBe(true);
-            expect(wrapper.exists(IconSearch18)).toBe(true);
+            expect(wrapper.exists(IconSearch24)).toBe(true);
         });
 
         test('should return an empty wrapper if no callback is defined', () => {

src/lib/viewers/controls/fullscreen/FullscreenToggle.scss

@@ -1,5 +1,5 @@
 @import 'src/lib/viewers/controls/styles';
 
 .bp-FullscreenToggle {
-    @include bp-ControlButton;
+    @include bp-Control;
 }

src/lib/viewers/controls/icons/IconArrowDown24.tsx

@@ -4,7 +4,6 @@ function IconArrowDown24(props: React.SVGProps<SVGSVGElement>): JSX.Element {
     return (
         <svg fill="#fff" focusable="false" height={24} viewBox="0 0 24 24" width={24} {...props}>
             <path d="M7 10l5 5 5-5z" />
-            <path d="M0 0h24v24H0z" fill="none" />
         </svg>
     );
 }

src/lib/viewers/controls/icons/IconArrowUp24.tsx

@@ -3,8 +3,7 @@ import * as React from 'react';
 function IconArrowUp24(props: React.SVGProps<SVGSVGElement>): JSX.Element {
     return (
         <svg fill="#fff" focusable="false" height={24} viewBox="0 0 24 24" width={24} {...props}>
-            <path d="M7 14l5-5 5 5z" />
-            <path d="M0 0h24v24H0z" fill="none" />
+            <path d="M7 15l5-5 5 5z" />
         </svg>
     );
 }

src/lib/viewers/controls/icons/IconDrawing24.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 function IconDrawing24({ fill, ...rest }: React.SVGProps<SVGSVGElement>): JSX.Element {
     return (
-        <svg focusable="false" height={24} viewBox="0 0 18 18" width={24} {...rest}>
+        <svg focusable="false" height={24} viewBox="0 0 16 16" width={24} {...rest}>
             <path
                 d="M12.444 13.4l.677-.673a.876.876 0 00.15.995c.33.33.77.23 1.078-.14.743-.855.855-1.934.302-2.523-.743-.792-1.716-.2-2.656.736l-.973 1.01 1.17-1.366c1.5-1.7 2.13-3.16 1.236-4.03-.835-.827-1.986-.105-3.827 1.696-1.552 1.52-2.347 2.347-2.63 2.04-.217-.23.15-.736 2.02-2.964 2.558-3.048 3.636-5.185 2.53-6.25-1.13-1.086-2.44-.133-5.582 2.593C3.765 6.424 2.4 7.355 1.522 7.84c-.44.245-.63.708-.46 1.12.178.427.644.56 1.157.287.88-.462 2.433-1.563 4.662-3.504C9.616 3.36 10.182 2.9 10.465 3.2c.342.35-.276 1.33-2.65 4.106-2.65 3.083-2.94 4.26-2.07 5.185 1.006 1.072 2.38.2 4.655-2.01 1.802-1.76 1.913-1.913 2.02-1.794.112.12-.125.308-1.736 2.312-1.27 1.563-1.532 2.46-.874 3.16.605.652 1.466.35 2.637-.75z"
                 fill={fill}

src/lib/viewers/controls/icons/IconFullscreenIn24.tsx

@@ -3,13 +3,10 @@ import * as React from 'react';
 function IconFullscreenIn24(props: React.SVGProps<SVGSVGElement>): JSX.Element {
     return (
         <svg focusable="false" height={24} viewBox="0 0 24 24" width={24} {...props}>
-            <g fill="none" fillRule="evenodd">
-                <path
-                    d="M15 3l2.3 2.3-2.89 2.87 1.42 1.42L18.7 6.7 21 9V3h-6zM3 3v6l2.3-2.3 2.87 2.89 1.42-1.42L6.7 5.3 9 3H3zm11.41 12.83l2.89 2.87L15 21h6v-6l-2.3 2.3-2.87-2.89-1.42 1.42zM5.3 17.3L3 15v6h6l-2.3-2.3 2.89-2.87-1.42-1.42L5.3 17.3z"
-                    fill="#fff"
-                />
-                <path d="M0 0h24v24H0z" />
-            </g>
+            <path
+                d="M7.705 22.062c.394 0 .699-.12.914-.36.214-.24.315-.526.3-.86-.014-.335-.158-.64-.432-.915L7.208 18.65l4.82-4.823 4.812 4.823-1.278 1.277c-.275.275-.418.58-.428.914-.01.335.09.622.3.861.212.24.518.36.92.36h4.392c.373 0 .681-.122.924-.365s.365-.551.365-.924v-4.385c0-.401-.122-.708-.365-.92a1.195 1.195 0 00-.866-.295c-.334.014-.638.158-.913.433l-1.28 1.278-4.817-4.824 4.818-4.82 1.28 1.277c.274.275.578.419.912.433.335.014.623-.084.866-.296.243-.211.365-.517.365-.919V3.34c0-.366-.122-.671-.365-.914s-.55-.364-.924-.364h-4.392c-.402 0-.708.12-.92.359a1.19 1.19 0 00-.3.856c.01.33.153.633.428.908l1.287 1.29-4.818 4.82-4.821-4.83 1.277-1.28c.274-.275.418-.577.433-.908a1.16 1.16 0 00-.301-.856c-.215-.24-.52-.36-.914-.36H3.312c-.38 0-.688.122-.924.365a1.26 1.26 0 00-.353.914v4.395c0 .402.121.708.364.92.243.21.53.31.86.295.331-.014.634-.158.909-.433l1.28-1.285 4.818 4.83-4.821 4.823-1.277-1.279c-.275-.275-.578-.419-.908-.433a1.187 1.187 0 00-.861.296c-.243.211-.364.518-.364.919v4.385c0 .373.118.681.353.924.236.243.544.365.924.365h4.393z"
+                fill="#fff"
+            />
         </svg>
     );
 }

src/lib/viewers/controls/icons/IconFullscreenOut24.tsx

@@ -3,13 +3,10 @@ import * as React from 'react';
 function IconFullscreenOut24(props: React.SVGProps<SVGSVGElement>): JSX.Element {
     return (
         <svg focusable="false" height={24} viewBox="0 0 24 24" width={24} {...props}>
-            <g fill="none" fillRule="evenodd">
-                <path d="M0 0h24v24H0z" />
-                <path
-                    d="M19.58 3l-2.87 2.89-2.3-2.3v6h6l-2.3-2.3L21 4.42 19.58 3zM4.42 3L3 4.42l2.89 2.87-2.3 2.3h6v-6l-2.3 2.3L4.42 3zm9.99 11.41v6l2.3-2.3L19.58 21 21 19.58l-2.89-2.87 2.3-2.3h-6zm-10.82 0l2.3 2.3L3 19.58 4.42 21l2.87-2.89 2.3 2.3v-6h-6z"
-                    fill="#fff"
-                />
-            </g>
+            <path
+                d="M18.705 13.062c.394 0 .699.12.914.359.214.24.315.524.3.856-.014.33-.158.633-.432.908l-1.277 1.28 4.115 4.123a1 1 0 010 1.413l-.352.353a1 1 0 01-1.415-.002l-4.11-4.12-1.28 1.285c-.275.275-.578.419-.908.433a1.187 1.187 0 01-.861-.296c-.243-.211-.364-.517-.364-.919V14.34c0-.366.118-.671.353-.914.236-.243.544-.364.924-.364zm-8.952 0c.38 0 .688.121.924.364.236.243.354.548.354.914v4.395c0 .402-.122.708-.365.92-.242.21-.53.31-.86.295-.331-.014-.634-.158-.908-.433l-1.28-1.285-4.111 4.12a1 1 0 01-1.414.002L1.74 22a1 1 0 010-1.413l4.116-4.123-1.277-1.28c-.275-.275-.419-.577-.433-.908a1.16 1.16 0 01.3-.856c.216-.24.52-.36.914-.36h4.393zM2.187 1.686a1 1 0 011.32.085l4.11 4.12 1.28-1.285c.275-.274.578-.419.909-.433.33-.014.618.085.86.296.243.211.365.518.365.92v4.394c0 .367-.118.671-.354.914s-.544.365-.924.365H5.36c-.394 0-.698-.12-.913-.36a1.16 1.16 0 01-.301-.855c.014-.331.158-.634.433-.909l1.277-1.28L1.74 3.535a1 1 0 010-1.413l.351-.352h.002zm19.786.083l.001.001.351.352a1 1 0 010 1.413L18.21 7.658l1.277 1.28c.274.275.418.578.433.909a1.16 1.16 0 01-.301.855c-.215.24-.52.36-.914.36h-4.393c-.38 0-.688-.122-.924-.365a1.26 1.26 0 01-.353-.914V5.388c0-.401.121-.708.364-.919.243-.211.53-.31.86-.296.331.014.634.159.909.433l1.28 1.285 4.11-4.12a1 1 0 011.415-.002z"
+                fill="#fff"
+            />
         </svg>
     );
 }

src/lib/viewers/controls/icons/IconRotate24.tsx

@@ -2,8 +2,7 @@ import * as React from 'react';
 
 function IconRotate24(props: React.SVGProps<SVGSVGElement>): JSX.Element {
     return (
-        <svg fill="#fff" focusable="false" height={24} viewBox="0 0 24 24" width={24} {...props}>
-            <path d="M0 0h24v24H0z" fill="none" />
+        <svg fill="#fff" focusable="false" height={24} viewBox="2 1 20 20" width={24} {...props}>
             <path d="M7.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z" />
         </svg>
     );