chore: create more page/header variations (#33900)

RocketChat · Nov 8, 2024 · 96bc87c · 96bc87c
1 parent c2b1365
commit 96bc87c
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 49 deletions.
diff --git a/apps/meteor/client/components/Page/PageBlock.tsx b/apps/meteor/client/components/Page/PageBlock.tsx
@@ -0,0 +1,11 @@
+import type { Box } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+import React, { forwardRef } from 'react';
+
+import PageContent from './PageContent';
+
+const PageBlock = forwardRef<HTMLElement, ComponentProps<typeof Box>>(function PageBlock(props, ref) {
+	return <PageContent borderBlockEndColor='transparent' {...props} pb={16} ref={ref} borderBlockEndWidth='default' height='auto' />;
+});
+
+export default PageBlock;
diff --git a/apps/meteor/client/components/Page/PageBlockWithBorder.tsx b/apps/meteor/client/components/Page/PageBlockWithBorder.tsx
@@ -2,21 +2,12 @@ import type { Box } from '@rocket.chat/fuselage';
 import type { ComponentProps } from 'react';
 import React, { forwardRef, useContext } from 'react';
 
-import PageContent from './PageContent';
+import PageBlock from './PageBlock';
 import PageContext from './PageContext';
 
 const PageBlockWithBorder = forwardRef<HTMLElement, ComponentProps<typeof Box>>(function PageBlockWithBorder(props, ref) {
 	const [border] = useContext(PageContext);
-	return (
-		<PageContent
-			{...props}
-			pb={16}
-			ref={ref}
-			borderBlockEndColor={border ? 'extra-light' : 'transparent'}
-			borderBlockEndWidth='default'
-			height='auto'
-		/>
-	);
+	return <PageBlock ref={ref} {...props} borderBlockEndColor={border ? 'extra-light' : 'transparent'} />;
 });
 
 export default PageBlockWithBorder;
diff --git a/apps/meteor/client/components/Page/PageHeader.tsx b/apps/meteor/client/components/Page/PageHeader.tsx
@@ -1,57 +1,24 @@
-import { Box, IconButton } from '@rocket.chat/fuselage';
-import { useDocumentTitle } from '@rocket.chat/ui-client';
-import { useLayout } from '@rocket.chat/ui-contexts';
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 import React, { useContext } from 'react';
-import { useTranslation } from 'react-i18next';
 
-import { HeaderToolbar } from '../Header';
-import SidebarToggler from '../SidebarToggler';
 import PageContext from './PageContext';
+import PageHeaderNoShadow from './PageHeaderNoShadow';
 
 type PageHeaderProps = {
 	title: ReactNode;
 	onClickBack?: () => void;
 	borderBlockEndColor?: string;
-} & Omit<ComponentPropsWithoutRef<typeof Box>, 'title'>;
+} & ComponentPropsWithoutRef<typeof PageHeaderNoShadow>;
 
-const PageHeader = ({ children = undefined, title, onClickBack, borderBlockEndColor, ...props }: PageHeaderProps) => {
-	const { t } = useTranslation();
+const PageHeader = ({ borderBlockEndColor, ...props }: PageHeaderProps) => {
 	const [border] = useContext(PageContext);
-	const { isMobile } = useLayout();
-
-	useDocumentTitle(typeof title === 'string' ? title : undefined);
 
 	return (
-		<Box
-			is='header'
+		<PageHeaderNoShadow
 			borderBlockEndWidth='default'
-			pb={8}
 			borderBlockEndColor={(borderBlockEndColor ?? border) ? 'extra-light' : 'transparent'}
 			{...props}
-		>
-			<Box
-				height='100%'
-				marginInline={24}
-				minHeight='x64'
-				display='flex'
-				flexDirection='row'
-				flexWrap='wrap'
-				alignItems='center'
-				color='default'
-			>
-				{isMobile && (
-					<HeaderToolbar>
-						<SidebarToggler />
-					</HeaderToolbar>
-				)}
-				{onClickBack && <IconButton small mie={8} icon='arrow-back' onClick={onClickBack} title={t('Back')} />}
-				<Box is='h1' fontScale='h2' flexGrow={1} data-qa-type='PageHeader-title'>
-					{title}
-				</Box>
-				{children}
-			</Box>
-		</Box>
+		/>
 	);
 };
 

diff --git a/apps/meteor/client/components/Page/PageHeaderNoShadow.tsx b/apps/meteor/client/components/Page/PageHeaderNoShadow.tsx
@@ -0,0 +1,51 @@
+import { Box, IconButton } from '@rocket.chat/fuselage';
+import { useDocumentTitle } from '@rocket.chat/ui-client';
+import { useLayout } from '@rocket.chat/ui-contexts';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { HeaderToolbar } from '../Header';
+import SidebarToggler from '../SidebarToggler';
+
+type PageHeaderProps = {
+	title: ReactNode;
+	onClickBack?: () => void;
+	borderBlockEndColor?: string;
+} & Omit<ComponentPropsWithoutRef<typeof Box>, 'title'>;
+
+const PageHeaderNoShadow = ({ children = undefined, title, onClickBack, ...props }: PageHeaderProps) => {
+	const { t } = useTranslation();
+
+	const { isMobile } = useLayout();
+
+	useDocumentTitle(typeof title === 'string' ? title : undefined);
+
+	return (
+		<Box is='header' borderBlockEndWidth='default' borderBlockEndColor='transparent' {...props}>
+			<Box
+				height='100%'
+				marginInline={24}
+				minHeight='x64'
+				display='flex'
+				flexDirection='row'
+				flexWrap='wrap'
+				alignItems='center'
+				color='default'
+			>
+				{isMobile && (
+					<HeaderToolbar>
+						<SidebarToggler />
+					</HeaderToolbar>
+				)}
+				{onClickBack && <IconButton small mie={8} icon='arrow-back' onClick={onClickBack} title={t('Back')} />}
+				<Box is='h1' fontScale='h2' flexGrow={1} data-qa-type='PageHeader-title'>
+					{title}
+				</Box>
+				{children}
+			</Box>
+		</Box>
+	);
+};
+
+export default PageHeaderNoShadow;