Implement ToolbarIconButton

theatre/studio/src/UIRoot/UIRoot.tsx

@@ -40,9 +40,19 @@ const Container = styled.div`
   pointer-events: none;
 `
 
+const PortalLayer = styled.div`
+  z-index: 51;
+  position: fixed;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  pointer-events: none;
+`
+
 export default function UIRoot() {
   const studio = getStudio()
-  const [containerRef, container] = useRefAndState<HTMLDivElement>(
+  const [portalLayerRef, portalLayer] = useRefAndState<HTMLDivElement>(
     undefined as $IntentionalAny,
   )
   const inside = usePrism(() => {
@@ -61,8 +71,9 @@ export default function UIRoot() {
         <>
           <GlobalStyle />
           <ProvideTheme>
-            <PortalContext.Provider value={container}>
-              <Container ref={containerRef}>
+            <PortalContext.Provider value={portalLayer}>
+              <PortalLayer ref={portalLayerRef} />
+              <Container>
                 {shouldShowGlobalToolbar && <GlobalToolbar />}
                 {shouldShowTrigger && <TheTrigger />}
                 {shouldShowPanels && <PanelsRoot />}
@@ -72,7 +83,7 @@ export default function UIRoot() {
         </>
       </StyleSheetManager>
     )
-  }, [studio, containerRef, container])
+  }, [studio, portalLayerRef, portalLayer])
 
   return inside
 }

theatre/studio/src/index.ts

@@ -6,6 +6,7 @@ import * as globalVariableNames from '@theatre/shared/globalVariableNames'
 import type {$FixMe} from '@theatre/shared/utils/types'
 import StudioBundle from './StudioBundle'
 import type CoreBundle from '@theatre/core/CoreBundle'
+export {default as ToolbarIconButton} from './uiComponents/toolbar/ToolbarIconButton'
 
 const studioPrivateAPI = new Studio()
 setStudio(studioPrivateAPI)

theatre/studio/src/uiComponents/Tooltip.tsx

@@ -0,0 +1,23 @@
+import type {VFC} from 'react'
+import React from 'react'
+import {Tooltip as TooltipImpl, TooltipReference, useTooltipState} from 'reakit'
+import type {TooltipProps} from 'reakit'
+import styled from 'styled-components'
+
+export {TooltipReference, useTooltipState}
+
+const Container = styled(TooltipImpl)`
+  padding: 8px 14px;
+
+  font-size: 11px;
+  line-height: 1.25em;
+  border-radius: 2px;
+  background-color: #201f20;
+  color: white;
+  pointer-events: none;
+  font-weight: 500;
+`
+
+export const Tooltip: VFC<TooltipProps> = ({className, ...props}) => (
+  <Container {...props} className={className as string} />
+)

theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx

@@ -0,0 +1,57 @@
+import type {ReactElement} from 'react'
+import React from 'react'
+import styled from 'styled-components'
+import {Tooltip, TooltipReference} from '@theatre/studio/uiComponents/Tooltip'
+import {lighten} from 'polished'
+import type {ButtonProps} from 'reakit'
+import {useTooltipState} from 'reakit'
+import {Button} from 'reakit'
+
+const TheButton = styled(TooltipReference)`
+  pointer-events: auto;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 600;
+  width: 28px;
+  height: 28px;
+  outline: none;
+
+  &:hover {
+    background-color: ${lighten(0.02, '#313131')};
+    color: white;
+  }
+
+  color: #c0c0c0;
+  background-color: #313131;
+  border: 1px solid #272727;
+  border-radius: 3px;
+  box-shadow: 1px 1px 0px #0000001c;
+`
+
+const ToolbarIconButton: React.FC<
+  Exclude<ButtonProps, 'children'> & {
+    icon: ReactElement
+    label: string
+  }
+> = (props) => {
+  const tooltip = useTooltipState()
+  return (
+    <>
+      <TheButton
+        {...tooltip}
+        forwardedAs={Button}
+        aria-label={props.label}
+        onClick={props.onClick}
+        className={props.className}
+      >
+        {props.icon}
+      </TheButton>
+      <Tooltip {...tooltip}>{props.label}</Tooltip>
+    </>
+  )
+}
+
+export default ToolbarIconButton