Skip to content

Commit a2074c1

Browse files
SaadBazazSaadBazaz
committed
fix: appbar center-aligned balancing
1 parent 69043fd commit a2074c1

File tree

3 files changed

+34
-18
lines changed

3 files changed

+34
-18
lines changed

‎apps/demo/src/app/page.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -267,17 +267,17 @@ export default function Home() {
267267
<Icon slot="active-icon">
268268
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 96">
269269
<path
270-
fill-rule="evenodd"
271-
clip-rule="evenodd"
270+
fillRule="evenodd"
271+
clipRule="evenodd"
272272
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
273273
></path>
274274
</svg>
275275
</Icon>
276276
<Icon slot="inactive-icon">
277277
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 96">
278278
<path
279-
fill-rule="evenodd"
280-
clip-rule="evenodd"
279+
fillRule="evenodd"
280+
clipRule="evenodd"
281281
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
282282
></path>
283283
</svg>
@@ -920,7 +920,7 @@ export default function Home() {
920920
<Icon>arrow_back</Icon>
921921
</IconButton>
922922

923-
<div slot="headline">Center-aligned</div>
923+
<div slot="headline" className="line-clamp-1">Center-aligned</div>
924924

925925
<IconButton slot="trailing">
926926
<Icon>more_vert</Icon>

‎apps/demo/tailwind.config.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ const config: Config = {
1616
{
1717
pattern: /p(y|t|x|b)-(0|2|3)/,
1818
},
19+
{
20+
pattern: /flex-(.)/,
21+
},
1922
],
2023
theme: {
2124
extend: {

‎packages/ui/src/app-bar/index.tsx‎

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const AppBar = ({
3636

3737
const hasHeadlineExpandedElement = findSlotProp(
3838
children,
39-
"headline-expanded",
39+
"headline-expanded"
4040
);
4141
const _headlineExpandedElement = headlineExpandedElement
4242
? headlineExpandedElement
@@ -79,7 +79,12 @@ const AppBar = ({
7979
setIsHeadlineExpandedVisible(entry.isIntersecting);
8080
onExpansionChange?.(!entry.isIntersecting);
8181
});
82-
});
82+
},
83+
{
84+
rootMargin: "-20px 0px",
85+
threshold: 0,
86+
}
87+
);
8388
observer.observe(headlineExpandedRef.current);
8489
}
8590
return () => {
@@ -91,39 +96,47 @@ const AppBar = ({
9196
<>
9297
<div
9398
className={twMerge(
94-
"w-full px-2 flex flex-row justify-between items-center gap-2 left-0 bg-background transition-all",
99+
"w-full px-2 flex flex-row justify-between items-center gap-2 left-0 bg-background transition-all relative", // Added 'relative' here
95100
showExpandedHeadline && isHeadlineExpandedVisible
96101
? "pt-3 pb-0"
97102
: "py-3",
98-
className,
103+
className
99104
)}
100105
{...props}
101106
>
102107
<div
103108
id="leading-actions"
104-
className="flex flex-row justify-center items-center gap-2"
109+
className={twMerge(
110+
"flex flex-row justify-center items-center gap-2",
111+
_variant === "center-aligned" && "flex-1 justify-start"
112+
)}
105113
>
106114
{_leadingElements}
107115
</div>
108116

109117
<div
110118
id="headline"
111119
className={twMerge(
112-
"flex flex-row flex-1 w-full h-full items-center gap-2 text-lg transition-all",
113-
_variant === "center-aligned" && "justify-center text-center",
114-
(_variant === "small" || _variant === "medium") &&
115-
"justify-start text-left",
120+
"absolute left-1/2 transform -translate-x-1/2 flex items-center gap-2 text-lg transition-all", // Changed this line
121+
_variant === "center-aligned" && "text-center",
122+
(_variant === "small" ||
123+
_variant === "medium" ||
124+
_variant === "large") &&
125+
"justify-start text-left w-full",
116126
showExpandedHeadline && isHeadlineExpandedVisible
117127
? "opacity-0"
118-
: "opacity-100",
128+
: "opacity-100"
119129
)}
120130
>
121131
{_headlineElement}
122132
</div>
123133

124134
<div
125135
id="trailing-actions"
126-
className="flex flex-row justify-center items-center gap-2"
136+
className={twMerge(
137+
"flex flex-row justify-center items-center gap-2",
138+
_variant === "center-aligned" && "flex-1 justify-end"
139+
)}
127140
>
128141
{_trailingElements}
129142
</div>
@@ -137,8 +150,8 @@ const AppBar = ({
137150
ref={headlineExpandedRef}
138151
className={twMerge(
139152
"flex flex-row text-left w-full px-4 pb-5",
140-
_variant === "medium" && "text-xl pt-1",
141-
_variant === "large" && "text-2xl pt-4",
153+
_variant === "medium" && "text-xl pt-2",
154+
_variant === "large" && "text-2xl pt-4"
142155
)}
143156
>
144157
{_headlineExpandedElement}

0 commit comments

Comments
 (0)