Skip to content

Commit b28e67e

Browse files
Lasse Boisen Andersenroncohen
Lasse Boisen Andersen
authored and
roncohen
committed
fix(browser-sdk): Small toolbar polish (#333)
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
1 parent 9832b76 commit b28e67e

9 files changed

Lines changed: 85 additions & 42 deletions

File tree

‎packages/browser-sdk/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<meta name="color-scheme" content="light dark" />
88
<title>Bucket Browser SDK</title>
99
</head>
10-
<body>
10+
<body style="background-color: black">
1111
<div id="app"></div>
1212
<span id="loading">Loading...</span>
1313

‎packages/browser-sdk/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@bucketco/browser-sdk",
3-
"version": "3.0.0-alpha.4",
3+
"version": "3.0.0-alpha.5",
44
"packageManager": "yarn@4.1.1",
55
"license": "MIT",
66
"repository": {

‎packages/browser-sdk/src/toolbar/Features.css‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,20 @@
4242
border-collapse: collapse;
4343
}
4444

45+
.feature-row {
46+
opacity: 0;
47+
transform: translateY(-7px);
48+
transition-property: opacity, transform;
49+
transition-duration: 0.1s;
50+
transition-timing-function: cubic-bezier(0.75, -0.015, 0.565, 1.055);
51+
52+
&.show {
53+
opacity: 1;
54+
transform: translateY(0);
55+
transition-delay: calc(0.01s * var(--i));
56+
}
57+
}
58+
4559
.feature-name-cell {
4660
white-space: nowrap;
4761
overflow: hidden;
@@ -59,7 +73,7 @@
5973
}
6074

6175
.feature-reset-cell {
62-
width: 30px;
76+
width: 32px;
6377
padding: 6px 0;
6478
text-align: right;
6579
}

‎packages/browser-sdk/src/toolbar/Features.tsx‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { h } from "preact";
2+
import { useEffect, useState } from "preact/hooks";
23

34
import { Switch } from "./Switch";
45
import { FeatureItem } from "./Toolbar";
@@ -7,22 +8,26 @@ export function FeaturesTable({
78
features,
89
setEnabledOverride,
910
appBaseUrl,
11+
isOpen,
1012
}: {
1113
features: FeatureItem[];
1214
setEnabledOverride: (key: string, value: boolean | null) => void;
1315
appBaseUrl: string;
16+
isOpen: boolean;
1417
}) {
1518
if (features.length === 0) {
1619
return <div style={{ color: "var(--gray500)" }}>No features found</div>;
1720
}
1821
return (
1922
<table class="features-table">
2023
<tbody>
21-
{features.map((feature) => (
24+
{features.map((feature, index) => (
2225
<FeatureRow
2326
feature={feature}
2427
appBaseUrl={appBaseUrl}
2528
setEnabledOverride={setEnabledOverride}
29+
isOpen={isOpen}
30+
index={index}
2631
/>
2732
))}
2833
</tbody>
@@ -34,13 +39,25 @@ function FeatureRow({
3439
setEnabledOverride,
3540
appBaseUrl,
3641
feature,
42+
isOpen,
43+
index,
3744
}: {
3845
feature: FeatureItem;
3946
appBaseUrl: string;
4047
setEnabledOverride: (key: string, value: boolean | null) => void;
48+
isOpen: boolean;
49+
index: number;
4150
}) {
51+
const [show, setShow] = useState(true);
52+
useEffect(() => {
53+
setShow(isOpen);
54+
}, [isOpen]);
4255
return (
43-
<tr key={feature.key}>
56+
<tr
57+
class={["feature-row", show ? "show" : undefined].join(" ")}
58+
key={feature.key}
59+
style={{ "--i": index }}
60+
>
4461
<td class="feature-name-cell">
4562
<a
4663
href={`${appBaseUrl}/envs/current/features/by-key/${feature.key}`}

‎packages/browser-sdk/src/toolbar/Toolbar.css‎

Lines changed: 27 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,11 @@
5656
--gray500: #787c91;
5757
--black: #1e1f24;
5858

59-
--bg-color: #1e1f24;
60-
--border-color: #292b32;
59+
--bg-color: hsla(230, 9%, 13%, 0.85);
60+
--bg-light-color: hsla(230, 9%, 11%, 0.85);
61+
--border-color: hsl(227, 10%, 18%);
62+
--bg-blur: 3px;
63+
6164
--logo-color: white;
6265
--text-color: white;
6366
--text-size: 13px;
@@ -83,20 +86,24 @@
8386
.dialog {
8487
color: #ffffff;
8588
box-sizing: border-box;
86-
background-color: var(--black);
87-
border: 1px solid var(--border-color);
89+
background: var(--bg-color);
90+
backdrop-filter: blur(var(--bg-blur));
91+
-webkit-backdrop-filter: blur(var(--bg-blur));
92+
93+
border: 0;
8894
box-shadow:
8995
0px 10px 15px -3px rgba(0, 0, 0, 0.1),
90-
0px 4px 6px -2px rgba(0, 0, 0, 0.05);
96+
0px 4px 6px -2px rgba(0, 0, 0, 0.05),
97+
inset 0px 1px rgba(255, 255, 255, 0.1);
9198
border-radius: 7px;
9299
z-index: 999999;
93100
min-width: 200px;
94101
padding: 0;
95102
}
96103

97104
.toolbar-toggle {
98-
width: 34px;
99-
height: 34px;
105+
width: 36px;
106+
height: 36px;
100107
position: fixed;
101108
z-index: 999999;
102109
padding: 0;
@@ -105,11 +112,14 @@
105112

106113
color: var(--logo-color);
107114
background: var(--bg-color);
108-
border: 1px solid var(--border-color);
115+
backdrop-filter: blur(var(--bg-blur));
116+
-webkit-backdrop-filter: blur(var(--bg-blur));
117+
109118
box-shadow:
110119
0px 10px 15px -3px rgba(0, 0, 0, 0.15),
111-
0px 4px 6px -2px rgba(0, 0, 0, 0.1);
112-
border-radius: 10px;
120+
0px 4px 6px -2px rgba(0, 0, 0, 0.1),
121+
inset 0px 1px rgba(255, 255, 255, 0.1);
122+
border-radius: 999px;
113123

114124
cursor: pointer;
115125

@@ -119,45 +129,30 @@
119129

120130
animation: bounceInUp 1s ease-out;
121131

122-
transition: color 0.1s ease;
132+
transition:
133+
color 0.1s ease,
134+
background 0.1s ease;
123135

124136
&.open {
125137
color: var(--gray500);
138+
background: var(--bg-light-color);
126139
}
127140

128141
& .override-indicator {
129142
position: absolute;
130-
top: -3px;
131-
right: -3px;
143+
top: 1px;
144+
right: 1px;
132145
width: 8px;
133146
height: 8px;
134147
background-color: var(--brand400);
135148
border-radius: 50%;
136149
opacity: 0;
137150
transition: opacity 0.1s ease-in-out;
138-
border: 1px solid var(--brand300);
151+
box-shadow: inset 0px 1px rgba(255, 255, 255, 0.1);
139152

140153
&.show {
141154
opacity: 1;
142155
animation: gelatine 0.5s;
143156
}
144157
}
145158
}
146-
147-
.arrow {
148-
background-color: var(--black);
149-
box-shadow: var(--border-color) -1px -1px 1px 0px;
150-
151-
&.bottom {
152-
box-shadow: var(--border-color) -1px -1px 1px 0px;
153-
}
154-
&.top {
155-
box-shadow: var(--border-color) 1px 1px 1px 0px;
156-
}
157-
&.left {
158-
box-shadow: var(--border-color) 1px -1px 1px 0px;
159-
}
160-
&.right {
161-
box-shadow: var(--border-color) -1px 1px 1px 0px;
162-
}
163-
}

‎packages/browser-sdk/src/toolbar/Toolbar.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ export default function Toolbar({
9393
anchor: toggleToolbarRef.current,
9494
placement: "top-start",
9595
}}
96+
showArrow={false}
9697
close={close}
9798
>
9899
<DialogHeader>
@@ -105,6 +106,7 @@ export default function Toolbar({
105106
bucketClient,
106107
)}
107108
appBaseUrl={appBaseUrl}
109+
isOpen={isOpen}
108110
/>
109111
</DialogContent>
110112
</Dialog>

‎packages/browser-sdk/src/ui/Dialog.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ export interface OpenDialogOptions {
3232

3333
containerId: string;
3434

35+
showArrow?: boolean;
36+
3537
children?: preact.ComponentChildren;
3638
}
3739

@@ -71,6 +73,7 @@ export const Dialog: FunctionComponent<OpenDialogOptions> = ({
7173
containerId,
7274
strategy,
7375
children,
76+
showArrow = true,
7477
}) => {
7578
const arrowRef = useRef<HTMLDivElement>(null);
7679
const dialogRef = useRef<HTMLDialogElement>(null);
@@ -199,7 +202,7 @@ export const Dialog: FunctionComponent<OpenDialogOptions> = ({
199202
>
200203
{children && <Fragment>{children}</Fragment>}
201204

202-
{anchor && (
205+
{anchor && showArrow && (
203206
<DialogArrow
204207
arrowRef={arrowRef}
205208
arrowData={middlewareData?.arrow}

‎packages/react-sdk/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@bucketco/react-sdk",
3-
"version": "3.0.0-alpha.7",
3+
"version": "3.0.0-alpha.8",
44
"license": "MIT",
55
"repository": {
66
"type": "git",
@@ -34,7 +34,7 @@
3434
}
3535
},
3636
"dependencies": {
37-
"@bucketco/browser-sdk": "3.0.0-alpha.4",
37+
"@bucketco/browser-sdk": "3.0.0-alpha.5",
3838
"canonical-json": "^0.0.4",
3939
"rollup": "^4.2.0"
4040
},

‎yarn.lock‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -872,7 +872,19 @@ __metadata:
872872
languageName: node
873873
linkType: hard
874874

875-
"@bucketco/browser-sdk@npm:3.0.0-alpha.4, @bucketco/browser-sdk@workspace:packages/browser-sdk":
875+
"@bucketco/browser-sdk@npm:3.0.0-alpha.4":
876+
version: 3.0.0-alpha.4
877+
resolution: "@bucketco/browser-sdk@npm:3.0.0-alpha.4"
878+
dependencies:
879+
"@floating-ui/dom": "npm:^1.6.8"
880+
canonical-json: "npm:^0.0.4"
881+
js-cookie: "npm:^3.0.5"
882+
preact: "npm:^10.22.1"
883+
checksum: 10c0/3515ce0bbb481e3d1b4815eab0964680978797707140a661dcac70a17cacd8a86f9682e406d73b6b8e5c0dab0c5626a017c459cac7577757d82d346b69a734ac
884+
languageName: node
885+
linkType: hard
886+
887+
"@bucketco/browser-sdk@npm:3.0.0-alpha.5, @bucketco/browser-sdk@workspace:packages/browser-sdk":
876888
version: 0.0.0-use.local
877889
resolution: "@bucketco/browser-sdk@workspace:packages/browser-sdk"
878890
dependencies:
@@ -1008,7 +1020,7 @@ __metadata:
10081020
version: 0.0.0-use.local
10091021
resolution: "@bucketco/react-sdk@workspace:packages/react-sdk"
10101022
dependencies:
1011-
"@bucketco/browser-sdk": "npm:3.0.0-alpha.4"
1023+
"@bucketco/browser-sdk": "npm:3.0.0-alpha.5"
10121024
"@bucketco/eslint-config": "workspace:^"
10131025
"@bucketco/tsconfig": "workspace:^"
10141026
"@testing-library/react": "npm:^15.0.7"

0 commit comments

Comments
 (0)