From 2ae2c2fdeb9890e24b864cff7a787c86b8b7dbe6 Mon Sep 17 00:00:00 2001 From: Lasse Boisen Andersen Date: Fri, 21 Feb 2025 14:15:15 +0100 Subject: [PATCH 1/4] staggered anim on feature rows on open --- packages/browser-sdk/src/toolbar/Features.css | 14 +++++++++++++ packages/browser-sdk/src/toolbar/Features.tsx | 21 +++++++++++++++++-- packages/browser-sdk/src/toolbar/Toolbar.tsx | 1 + 3 files changed, 34 insertions(+), 2 deletions(-) diff --git a/packages/browser-sdk/src/toolbar/Features.css b/packages/browser-sdk/src/toolbar/Features.css index ee17134f..8790f385 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; 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 ( - +
From de8d81bf4b1c98e0ca0607e6a49f5d0c3dde70b7 Mon Sep 17 00:00:00 2001 From: Lasse Boisen Andersen Date: Fri, 21 Feb 2025 15:01:20 +0100 Subject: [PATCH 2/4] small visual tweaks --- packages/browser-sdk/index.html | 2 +- packages/browser-sdk/src/toolbar/Features.css | 2 +- packages/browser-sdk/src/toolbar/Toolbar.css | 59 +++++++++---------- packages/browser-sdk/src/toolbar/Toolbar.tsx | 1 + packages/browser-sdk/src/ui/Dialog.tsx | 5 +- 5 files changed, 34 insertions(+), 35 deletions(-) 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/src/toolbar/Features.css b/packages/browser-sdk/src/toolbar/Features.css index 8790f385..fad6b96a 100644 --- a/packages/browser-sdk/src/toolbar/Features.css +++ b/packages/browser-sdk/src/toolbar/Features.css @@ -73,7 +73,7 @@ } .feature-reset-cell { - width: 30px; + width: 32px; padding: 6px 0; text-align: right; } diff --git a/packages/browser-sdk/src/toolbar/Toolbar.css b/packages/browser-sdk/src/toolbar/Toolbar.css index 312b4441..3b3eee4d 100644 --- a/packages/browser-sdk/src/toolbar/Toolbar.css +++ b/packages/browser-sdk/src/toolbar/Toolbar.css @@ -56,8 +56,11 @@ --gray500: #787c91; --black: #1e1f24; - --bg-color: #1e1f24; - --border-color: #292b32; + --bg-color: hsla(230, 9%, 13%, 0.85); + --bg-light-color: hsla(230, 9%, 11%, 0.85); + --border-color: hsl(227, 10%, 18%); + --bg-blur: 3px; + --logo-color: white; --text-color: white; --text-size: 13px; @@ -83,11 +86,15 @@ .dialog { color: #ffffff; box-sizing: border-box; - background-color: var(--black); - border: 1px solid var(--border-color); + background: var(--bg-color); + backdrop-filter: blur(var(--bg-blur)); + -webkit-backdrop-filter: blur(var(--bg-blur)); + + border: 0; box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), - 0px 4px 6px -2px rgba(0, 0, 0, 0.05); + 0px 4px 6px -2px rgba(0, 0, 0, 0.05), + inset 0px 1px rgba(255, 255, 255, 0.1); border-radius: 7px; z-index: 999999; min-width: 200px; @@ -95,8 +102,8 @@ } .toolbar-toggle { - width: 34px; - height: 34px; + width: 36px; + height: 36px; position: fixed; z-index: 999999; padding: 0; @@ -105,11 +112,14 @@ color: var(--logo-color); background: var(--bg-color); - border: 1px solid var(--border-color); + backdrop-filter: blur(var(--bg-blur)); + -webkit-backdrop-filter: blur(var(--bg-blur)); + box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.15), - 0px 4px 6px -2px rgba(0, 0, 0, 0.1); - border-radius: 10px; + 0px 4px 6px -2px rgba(0, 0, 0, 0.1), + inset 0px 1px rgba(255, 255, 255, 0.1); + border-radius: 999px; cursor: pointer; @@ -119,23 +129,26 @@ animation: bounceInUp 1s ease-out; - transition: color 0.1s ease; + transition: + color 0.1s ease, + background 0.1s ease; &.open { color: var(--gray500); + background: var(--bg-light-color); } & .override-indicator { position: absolute; - top: -3px; - right: -3px; + top: 1px; + right: 1px; width: 8px; height: 8px; background-color: var(--brand400); border-radius: 50%; opacity: 0; transition: opacity 0.1s ease-in-out; - border: 1px solid var(--brand300); + box-shadow: inset 0px 1px rgba(255, 255, 255, 0.1); &.show { opacity: 1; @@ -143,21 +156,3 @@ } } } - -.arrow { - background-color: var(--black); - box-shadow: var(--border-color) -1px -1px 1px 0px; - - &.bottom { - box-shadow: var(--border-color) -1px -1px 1px 0px; - } - &.top { - box-shadow: var(--border-color) 1px 1px 1px 0px; - } - &.left { - box-shadow: var(--border-color) 1px -1px 1px 0px; - } - &.right { - box-shadow: var(--border-color) -1px 1px 1px 0px; - } -} diff --git a/packages/browser-sdk/src/toolbar/Toolbar.tsx b/packages/browser-sdk/src/toolbar/Toolbar.tsx index 6ebb7397..122c66e2 100644 --- a/packages/browser-sdk/src/toolbar/Toolbar.tsx +++ b/packages/browser-sdk/src/toolbar/Toolbar.tsx @@ -93,6 +93,7 @@ export default function Toolbar({ anchor: toggleToolbarRef.current, placement: "top-start", }} + showArrow={false} close={close} > 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 && ( Date: Fri, 21 Feb 2025 15:06:42 +0100 Subject: [PATCH 3/4] bump versions --- packages/browser-sdk/package.json | 2 +- packages/react-sdk/package.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) 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/react-sdk/package.json b/packages/react-sdk/package.json index 867a55dc..d58989d9 100644 --- a/packages/react-sdk/package.json +++ b/packages/react-sdk/package.json @@ -1,6 +1,6 @@ { "name": "@bucketco/react-sdk", - "version": "3.0.0-alpha.7", + "version": "3.0.0-alpha.8", "license": "MIT", "repository": { "type": "git", @@ -34,7 +34,7 @@ } }, "dependencies": { - "@bucketco/browser-sdk": "3.0.0-alpha.4", + "@bucketco/browser-sdk": "3.0.0-alpha.5", "canonical-json": "^0.0.4", "rollup": "^4.2.0" }, From e8861455d97c51a60e3c6e2dd34dcb6e851f69ee Mon Sep 17 00:00:00 2001 From: Lasse Boisen Andersen Date: Fri, 21 Feb 2025 15:09:46 +0100 Subject: [PATCH 4/4] fix lock --- yarn.lock | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/yarn.lock b/yarn.lock index f03474e3..edcf9146 100644 --- a/yarn.lock +++ b/yarn.lock @@ -872,7 +872,19 @@ __metadata: languageName: node linkType: hard -"@bucketco/browser-sdk@npm:3.0.0-alpha.4, @bucketco/browser-sdk@workspace:packages/browser-sdk": +"@bucketco/browser-sdk@npm:3.0.0-alpha.4": + version: 3.0.0-alpha.4 + resolution: "@bucketco/browser-sdk@npm:3.0.0-alpha.4" + dependencies: + "@floating-ui/dom": "npm:^1.6.8" + canonical-json: "npm:^0.0.4" + js-cookie: "npm:^3.0.5" + preact: "npm:^10.22.1" + checksum: 10c0/3515ce0bbb481e3d1b4815eab0964680978797707140a661dcac70a17cacd8a86f9682e406d73b6b8e5c0dab0c5626a017c459cac7577757d82d346b69a734ac + languageName: node + linkType: hard + +"@bucketco/browser-sdk@npm:3.0.0-alpha.5, @bucketco/browser-sdk@workspace:packages/browser-sdk": version: 0.0.0-use.local resolution: "@bucketco/browser-sdk@workspace:packages/browser-sdk" dependencies: @@ -1017,7 +1029,7 @@ __metadata: version: 0.0.0-use.local resolution: "@bucketco/react-sdk@workspace:packages/react-sdk" dependencies: - "@bucketco/browser-sdk": "npm:3.0.0-alpha.4" + "@bucketco/browser-sdk": "npm:3.0.0-alpha.5" "@bucketco/eslint-config": "workspace:^" "@bucketco/tsconfig": "workspace:^" "@testing-library/react": "npm:^15.0.7"