From a2074c1b8d2c167445cb265686387237e536b41d Mon Sep 17 00:00:00 2001 From: "Saad A. Bazaz" Date: Sun, 11 Aug 2024 18:33:04 +0500 Subject: [PATCH] fix: appbar center-aligned balancing --- apps/demo/src/app/page.tsx | 10 ++++---- apps/demo/tailwind.config.ts | 3 +++ packages/ui/src/app-bar/index.tsx | 39 ++++++++++++++++++++----------- 3 files changed, 34 insertions(+), 18 deletions(-) diff --git a/apps/demo/src/app/page.tsx b/apps/demo/src/app/page.tsx index c5e0052..8ca76b4 100644 --- a/apps/demo/src/app/page.tsx +++ b/apps/demo/src/app/page.tsx @@ -267,8 +267,8 @@ export default function Home() { @@ -276,8 +276,8 @@ export default function Home() { @@ -920,7 +920,7 @@ export default function Home() { arrow_back -
Center-aligned
+
Center-aligned
more_vert diff --git a/apps/demo/tailwind.config.ts b/apps/demo/tailwind.config.ts index 178cceb..c76bd01 100644 --- a/apps/demo/tailwind.config.ts +++ b/apps/demo/tailwind.config.ts @@ -16,6 +16,9 @@ const config: Config = { { pattern: /p(y|t|x|b)-(0|2|3)/, }, + { + pattern: /flex-(.)/, + }, ], theme: { extend: { diff --git a/packages/ui/src/app-bar/index.tsx b/packages/ui/src/app-bar/index.tsx index a20ab0c..1bfe51d 100644 --- a/packages/ui/src/app-bar/index.tsx +++ b/packages/ui/src/app-bar/index.tsx @@ -36,7 +36,7 @@ const AppBar = ({ const hasHeadlineExpandedElement = findSlotProp( children, - "headline-expanded", + "headline-expanded" ); const _headlineExpandedElement = headlineExpandedElement ? headlineExpandedElement @@ -79,7 +79,12 @@ const AppBar = ({ setIsHeadlineExpandedVisible(entry.isIntersecting); onExpansionChange?.(!entry.isIntersecting); }); - }); + }, + { + rootMargin: "-20px 0px", + threshold: 0, + } + ); observer.observe(headlineExpandedRef.current); } return () => { @@ -91,17 +96,20 @@ const AppBar = ({ <>
{_leadingElements}
@@ -109,13 +117,15 @@ const AppBar = ({
{_headlineElement} @@ -123,7 +133,10 @@ const AppBar = ({
{_trailingElements}
@@ -137,8 +150,8 @@ const AppBar = ({ ref={headlineExpandedRef} className={twMerge( "flex flex-row text-left w-full px-4 pb-5", - _variant === "medium" && "text-xl pt-1", - _variant === "large" && "text-2xl pt-4", + _variant === "medium" && "text-xl pt-2", + _variant === "large" && "text-2xl pt-4" )} > {_headlineExpandedElement}