fix(browser-sdk): Small toolbar polish (#333)

laander · roncohen · commit 62b55a86472f · 2025-02-26T10:48:13.000+01:00
https://github.com/user-attachments/assets/9d45f398-933e-4b05-9e7f-5bda3f5599f8 https://github.com/user-attachments/assets/b8e1b30b-5384-42bc-9ad7-7a380d48375b - added stagger animation for feature rows - toolbar button and popover is now semi-transparent background with blurred glass effect - tweaked borders to be inset shadows instead - made toolbar button round - fixed single pixel resizing when showing Reset
diff --git a/packages/browser-sdk/index.html b/packages/browser-sdk/index.html
@@ -7,7 +7,7 @@
     <meta name="color-scheme" content="light dark" />
     <title>Bucket Browser SDK</title>
   </head>
-  <body>
+  <body style="background-color: black">
     <div id="app"></div>
     <span id="loading">Loading...</span>
 
diff --git 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
@@ -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
@@ -1,4 +1,5 @@
 import { h } from "preact";
+import { useEffect, useState } from "preact/hooks";
 
 import { Switch } from "./Switch";
 import { FeatureItem } from "./Toolbar";
@@ -7,22 +8,26 @@ 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 <div style={{ color: "var(--gray500)" }}>No features found</div>;
   }
   return (
     <table class="features-table">
       <tbody>
-        {features.map((feature) => (
+        {features.map((feature, index) => (
           <FeatureRow
             feature={feature}
             appBaseUrl={appBaseUrl}
             setEnabledOverride={setEnabledOverride}
+            isOpen={isOpen}
+            index={index}
           />
         ))}
       </tbody>
@@ -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 (
-    <tr key={feature.key}>
+    <tr
+      class={["feature-row", show ? "show" : undefined].join(" ")}
+      key={feature.key}
+      style={{ "--i": index }}
+    >
       <td class="feature-name-cell">
         <a
           href={`${appBaseUrl}/envs/current/features/by-key/${feature.key}`}
diff --git 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,20 +86,24 @@
 .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;
   padding: 0;
 }
 
 .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,45 +129,30 @@
 
   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;
       animation: gelatine 0.5s;
     }
   }
 }
-
-.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
@@ -93,6 +93,7 @@ export default function Toolbar({
           anchor: toggleToolbarRef.current,
           placement: "top-start",
         }}
+        showArrow={false}
         close={close}
       >
         <DialogHeader>
@@ -105,6 +106,7 @@ export default function Toolbar({
               bucketClient,
             )}
             appBaseUrl={appBaseUrl}
+            isOpen={isOpen}
           />
         </DialogContent>
       </Dialog>
diff --git 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<OpenDialogOptions> = ({
   containerId,
   strategy,
   children,
+  showArrow = true,
 }) => {
   const arrowRef = useRef<HTMLDivElement>(null);
   const dialogRef = useRef<HTMLDialogElement>(null);
@@ -199,7 +202,7 @@ export const Dialog: FunctionComponent<OpenDialogOptions> = ({
       >
         {children && <Fragment>{children}</Fragment>}
 
-        {anchor && (
+        {anchor && showArrow && (
           <DialogArrow
             arrowRef={arrowRef}
             arrowData={middlewareData?.arrow}
diff --git 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"
   },
diff --git 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:
@@ -1008,7 +1020,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"

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@bucketco/browser-sdk",`
`3`		`- "version": "3.0.0-alpha.4",`
	`3`	`+ "version": "3.0.0-alpha.5",`
`4`	`4`	`"packageManager": "[email protected]",`
`5`	`5`	`"license": "MIT",`
`6`	`6`	`"repository": {`