diff --git a/packages/browser-sdk/index.html b/packages/browser-sdk/index.html index 80353b29..6768647d 100644 --- a/packages/browser-sdk/index.html +++ b/packages/browser-sdk/index.html @@ -7,7 +7,7 @@ Bucket Browser SDK - +
Loading... diff --git a/packages/browser-sdk/package.json b/packages/browser-sdk/package.json index b9590217..148d25dd 100644 --- a/packages/browser-sdk/package.json +++ b/packages/browser-sdk/package.json @@ -1,6 +1,6 @@ { "name": "@bucketco/browser-sdk", - "version": "3.0.0-alpha.4", + "version": "3.0.0-alpha.5", "packageManager": "yarn@4.1.1", "license": "MIT", "repository": { diff --git a/packages/browser-sdk/src/toolbar/Features.css b/packages/browser-sdk/src/toolbar/Features.css index ee17134f..fad6b96a 100644 --- a/packages/browser-sdk/src/toolbar/Features.css +++ b/packages/browser-sdk/src/toolbar/Features.css @@ -42,6 +42,20 @@ border-collapse: collapse; } +.feature-row { + opacity: 0; + transform: translateY(-7px); + transition-property: opacity, transform; + transition-duration: 0.1s; + transition-timing-function: cubic-bezier(0.75, -0.015, 0.565, 1.055); + + &.show { + opacity: 1; + transform: translateY(0); + transition-delay: calc(0.01s * var(--i)); + } +} + .feature-name-cell { white-space: nowrap; overflow: hidden; @@ -59,7 +73,7 @@ } .feature-reset-cell { - width: 30px; + width: 32px; padding: 6px 0; text-align: right; } diff --git a/packages/browser-sdk/src/toolbar/Features.tsx b/packages/browser-sdk/src/toolbar/Features.tsx index 9867a57d..ee2de2c9 100644 --- a/packages/browser-sdk/src/toolbar/Features.tsx +++ b/packages/browser-sdk/src/toolbar/Features.tsx @@ -1,4 +1,5 @@ import { h } from "preact"; +import { useEffect, useState } from "preact/hooks"; import { Switch } from "./Switch"; import { FeatureItem } from "./Toolbar"; @@ -7,10 +8,12 @@ export function FeaturesTable({ features, setEnabledOverride, appBaseUrl, + isOpen, }: { features: FeatureItem[]; setEnabledOverride: (key: string, value: boolean | null) => void; appBaseUrl: string; + isOpen: boolean; }) { if (features.length === 0) { return
No features found
; @@ -18,11 +21,13 @@ export function FeaturesTable({ return ( - {features.map((feature) => ( + {features.map((feature, index) => ( ))} @@ -34,13 +39,25 @@ function FeatureRow({ setEnabledOverride, appBaseUrl, feature, + isOpen, + index, }: { feature: FeatureItem; appBaseUrl: string; setEnabledOverride: (key: string, value: boolean | null) => void; + isOpen: boolean; + index: number; }) { + const [show, setShow] = useState(true); + useEffect(() => { + setShow(isOpen); + }, [isOpen]); return ( - +
@@ -105,6 +106,7 @@ export default function Toolbar({ bucketClient, )} appBaseUrl={appBaseUrl} + isOpen={isOpen} /> diff --git a/packages/browser-sdk/src/ui/Dialog.tsx b/packages/browser-sdk/src/ui/Dialog.tsx index ca9da76b..d5000148 100644 --- a/packages/browser-sdk/src/ui/Dialog.tsx +++ b/packages/browser-sdk/src/ui/Dialog.tsx @@ -32,6 +32,8 @@ export interface OpenDialogOptions { containerId: string; + showArrow?: boolean; + children?: preact.ComponentChildren; } @@ -71,6 +73,7 @@ export const Dialog: FunctionComponent = ({ containerId, strategy, children, + showArrow = true, }) => { const arrowRef = useRef(null); const dialogRef = useRef(null); @@ -199,7 +202,7 @@ export const Dialog: FunctionComponent = ({ > {children && {children}} - {anchor && ( + {anchor && showArrow && (