chore: Replace IconButton in favor of Button on PageHeader (#31171

)

apps/meteor/client/components/Contextualbar/ContextualbarScrollableContent.tsx

@@ -2,14 +2,14 @@ import { Margins } from '@rocket.chat/fuselage';
 import type { ComponentProps } from 'react';
 import React, { forwardRef, memo } from 'react';
 
-import Page from '../Page';
+import { PageScrollableContent } from '../Page';
 
-const ContextualbarScrollableContent = forwardRef<HTMLElement, ComponentProps<typeof Page.ScrollableContent>>(
+const ContextualbarScrollableContent = forwardRef<HTMLElement, ComponentProps<typeof PageScrollableContent>>(
 	function ContextualbarScrollableContent({ children, ...props }, ref) {
 		return (
-			<Page.ScrollableContent p={24} {...props} ref={ref}>
+			<PageScrollableContent p={24} {...props} ref={ref}>
 				<Margins blockEnd={16}>{children}</Margins>
-			</Page.ScrollableContent>
+			</PageScrollableContent>
 		);
 	},
 );

apps/meteor/client/components/Page/Page.stories.tsx

@@ -2,16 +2,16 @@ import { Box, Button, ButtonGroup } from '@rocket.chat/fuselage';
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
-import Page from '.';
+import { Page, PageContent, PageHeader, PageScrollableContent, PageScrollableContentWithShadow } from '.';
 
 export default {
 	title: 'Components/Page',
 	component: Page,
 	subcomponents: {
-		'Page.Content': Page.Content,
-		'Page.Header': Page.Header,
-		'Page.ScrollableContent': Page.ScrollableContent,
-		'Page.ScrollableContentWithShadow': Page.ScrollableContentWithShadow,
+		PageContent,
+		PageHeader,
+		PageScrollableContent,
+		PageScrollableContentWithShadow,
 	},
 	parameters: {
 		layout: 'fullscreen',
@@ -29,45 +29,45 @@ const DummyContent = ({ rows = 10 }: { rows?: number }) => (
 
 export const Example: ComponentStory<typeof Page> = () => (
 	<Page>
-		<Page.Header title='A platform that prioritizes collaboration over vendor choices' />
-		<Page.Content>
+		<PageHeader title='A platform that prioritizes collaboration over vendor choices' />
+		<PageContent>
 			<Box marginBlock={16}>
 				Say goodbye to inefficient email threads and managing multiple guest accounts. Enable teams to communicate safely with partners,
 				vendors, and suppliers directly from Rocket.Chat regardless of which collaboration platform they use.
 			</Box>
-		</Page.Content>
+		</PageContent>
 	</Page>
 );
 
 export const WithButtonsAtTheHeader: ComponentStory<typeof Page> = () => (
 	<Page>
-		<Page.Header title='Page Title'>
+		<PageHeader title='Page Title'>
 			<ButtonGroup>
 				<Button primary type='button'>
 					Perform action
 				</Button>
 			</ButtonGroup>
-		</Page.Header>
-		<Page.Content>
+		</PageHeader>
+		<PageContent>
 			<DummyContent />
-		</Page.Content>
+		</PageContent>
 	</Page>
 );
 
 export const WithScrollableContent: ComponentStory<typeof Page> = () => (
 	<Page>
-		<Page.Header title='Page Title' />
-		<Page.ScrollableContent>
+		<PageHeader title='Page Title' />
+		<PageScrollableContent>
 			<DummyContent rows={60} />
-		</Page.ScrollableContent>
+		</PageScrollableContent>
 	</Page>
 );
 
 export const WithScrollableContentWithShadow: ComponentStory<typeof Page> = () => (
 	<Page>
-		<Page.Header title='Page Title' />
-		<Page.ScrollableContentWithShadow>
+		<PageHeader title='Page Title' />
+		<PageScrollableContentWithShadow>
 			<DummyContent rows={60} />
-		</Page.ScrollableContentWithShadow>
+		</PageScrollableContentWithShadow>
 	</Page>
 );

apps/meteor/client/components/Page/PageHeader.tsx

@@ -1,4 +1,4 @@
-import { Box, IconButton } from '@rocket.chat/fuselage';
+import { Box, Button } from '@rocket.chat/fuselage';
 import { HeaderToolbox, useDocumentTitle } from '@rocket.chat/ui-client';
 import { useLayout, useTranslation } from '@rocket.chat/ui-contexts';
 import type { FC, ComponentProps, ReactNode } from 'react';
@@ -35,10 +35,14 @@ const PageHeader: FC<PageHeaderProps> = ({ children = undefined, title, onClickB
 						<BurgerMenu />
 					</HeaderToolbox>
 				)}
-				{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>
+				{onClickBack && (
+					<Button icon='back' onClick={onClickBack}>
+						{t('Back')}
+					</Button>
+				)}
 				{children}
 			</Box>
 		</Box>

apps/meteor/client/components/Page/index.ts

@@ -1,14 +1,6 @@
-import Page from './Page';
-import PageContent from './PageContent';
-import PageFooter from './PageFooter';
-import PageHeader from './PageHeader';
-import PageScrollableContent from './PageScrollableContent';
-import PageScrollableContentWithShadow from './PageScrollableContentWithShadow';
-
-export default Object.assign(Page, {
-	Header: PageHeader,
-	Content: PageContent,
-	ScrollableContent: PageScrollableContent,
-	ScrollableContentWithShadow: PageScrollableContentWithShadow,
-	Footer: PageFooter,
-});
+export { default as Page } from './Page';
+export { default as PageContent } from './PageContent';
+export { default as PageFooter } from './PageFooter';
+export { default as PageHeader } from './PageHeader';
+export { default as PageScrollableContent } from './PageScrollableContent';
+export { default as PageScrollableContentWithShadow } from './PageScrollableContentWithShadow';

apps/meteor/client/components/PageSkeleton.tsx

@@ -2,25 +2,24 @@ import { Box, Button, ButtonGroup, Skeleton } from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
 import React from 'react';
 
-import Page from './Page';
+import { Page, PageHeader, PageContent } from './Page';
 
 const PageSkeleton = (): ReactElement => (
 	<Page>
-		<Page.Header title={<Skeleton width='x320' maxWidth='full' />}>
+		<PageHeader title={<Skeleton width='x320' maxWidth='full' />}>
 			<ButtonGroup>
 				<Button children={<Skeleton width='x80' />} disabled />
 			</ButtonGroup>
-		</Page.Header>
-
-		<Page.Content>
+		</PageHeader>
+		<PageContent>
 			<Box marginBlock='none' marginInline='auto' width='full' maxWidth='x580'>
 				<Box is='p' color='hint' fontScale='p2'>
 					<Skeleton />
 					<Skeleton />
 					<Skeleton width='75%' />
 				</Box>
 			</Box>
-		</Page.Content>
+		</PageContent>
 	</Page>
 );
 

apps/meteor/client/views/account/accessibility/AccessibilityPage.tsx

@@ -21,7 +21,7 @@ import { useMutation } from '@tanstack/react-query';
 import React, { useMemo } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 
-import Page from '../../../components/Page';
+import { Page, PageHeader, PageScrollableContentWithShadow, PageFooter } from '../../../components/Page';
 import { getDirtyFields } from '../../../lib/getDirtyFields';
 import { fontSizes } from './fontSizes';
 import type { AccessibilityPreferencesData } from './hooks/useAcessibilityPreferencesValues';
@@ -84,8 +84,8 @@ const AccessibilityPage = () => {
 
 	return (
 		<Page>
-			<Page.Header title={t('Accessibility_and_Appearance')} />
-			<Page.ScrollableContentWithShadow>
+			<PageHeader title={t('Accessibility_and_Appearance')} />
+			<PageScrollableContentWithShadow>
 				<Box is='form' id={pageFormId} onSubmit={handleSubmit(handleSaveData)} maxWidth='x600' w='full' alignSelf='center' mb={40} mi={36}>
 					<Box fontScale='p1' mbe={24}>
 						<Box pb={16}>{t('Accessibility_activation')}</Box>
@@ -213,15 +213,15 @@ const AccessibilityPage = () => {
 						</Accordion.Item>
 					</Accordion>
 				</Box>
-			</Page.ScrollableContentWithShadow>
-			<Page.Footer isDirty={isDirty}>
+			</PageScrollableContentWithShadow>
+			<PageFooter isDirty={isDirty}>
 				<ButtonGroup>
 					<Button onClick={() => reset(preferencesValues)}>{t('Cancel')}</Button>
 					<Button primary disabled={!isDirty} loading={isSubmitting} form={pageFormId} type='submit'>
 						{t('Save_changes')}
 					</Button>
 				</ButtonGroup>
-			</Page.Footer>
+			</PageFooter>
 		</Page>
 	);
 };

apps/meteor/client/views/account/featurePreview/AccountFeaturePreviewPage.tsx

@@ -22,7 +22,7 @@ import type { ChangeEvent } from 'react';
 import React, { useEffect, Fragment } from 'react';
 import { useForm } from 'react-hook-form';
 
-import Page from '../../../components/Page';
+import { Page, PageHeader, PageScrollableContentWithShadow, PageFooter } from '../../../components/Page';
 
 const AccountFeaturePreviewPage = () => {
 	const t = useTranslation();
@@ -79,8 +79,8 @@ const AccountFeaturePreviewPage = () => {
 
 	return (
 		<Page>
-			<Page.Header title={t('Feature_preview')} />
-			<Page.ScrollableContentWithShadow>
+			<PageHeader title={t('Feature_preview')} />
+			<PageScrollableContentWithShadow>
 				<Box maxWidth='x600' w='full' alignSelf='center'>
 					{featuresPreview.length === 0 && (
 						<States>
@@ -124,15 +124,15 @@ const AccountFeaturePreviewPage = () => {
 						</>
 					)}
 				</Box>
-			</Page.ScrollableContentWithShadow>
-			<Page.Footer isDirty={isDirty}>
+			</PageScrollableContentWithShadow>
+			<PageFooter isDirty={isDirty}>
 				<ButtonGroup>
 					<Button onClick={() => reset({ featuresPreview: features })}>{t('Cancel')}</Button>
 					<Button primary disabled={!isDirty} onClick={handleSubmit(handleSave)}>
 						{t('Save_changes')}
 					</Button>
 				</ButtonGroup>
-			</Page.Footer>
+			</PageFooter>
 		</Page>
 	);
 };

apps/meteor/client/views/account/integrations/AccountIntegrationsPage.tsx

@@ -8,7 +8,7 @@ import React, { useMemo } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 
 import { WebdavAccounts } from '../../../../app/models/client';
-import Page from '../../../components/Page';
+import { Page, PageHeader, PageScrollableContentWithShadow } from '../../../components/Page';
 import { useReactiveValue } from '../../../hooks/useReactiveValue';
 import { getWebdavServerName } from '../../../lib/getWebdavServerName';
 
@@ -34,8 +34,8 @@ const AccountIntegrationsPage = (): ReactElement => {
 
 	return (
 		<Page>
-			<Page.Header title={t('Integrations')} />
-			<Page.ScrollableContentWithShadow>
+			<PageHeader title={t('Integrations')} />
+			<PageScrollableContentWithShadow>
 				<Box maxWidth='x600' w='full' alignSelf='center'>
 					<Field>
 						<FieldLabel>{t('WebDAV_Accounts')}</FieldLabel>
@@ -60,7 +60,7 @@ const AccountIntegrationsPage = (): ReactElement => {
 						</FieldRow>
 					</Field>
 				</Box>
-			</Page.ScrollableContentWithShadow>
+			</PageScrollableContentWithShadow>
 		</Page>
 	);
 };

apps/meteor/client/views/account/omnichannel/OmnichannelPreferencesPage.tsx

@@ -4,7 +4,7 @@ import type { ReactElement } from 'react';
 import React from 'react';
 import { useForm, FormProvider } from 'react-hook-form';
 
-import Page from '../../../components/Page';
+import { Page, PageHeader, PageScrollableContentWithShadow, PageFooter } from '../../../components/Page';
 import PreferencesConversationTranscript from './PreferencesConversationTranscript';
 import { PreferencesGeneral } from './PreferencesGeneral';
 
@@ -45,8 +45,8 @@ const OmnichannelPreferencesPage = (): ReactElement => {
 
 	return (
 		<Page>
-			<Page.Header title={t('Omnichannel')} />
-			<Page.ScrollableContentWithShadow is='form' onSubmit={handleSubmit(handleSave)}>
+			<PageHeader title={t('Omnichannel')} />
+			<PageScrollableContentWithShadow is='form' onSubmit={handleSubmit(handleSave)}>
 				<Box maxWidth='x600' w='full' alignSelf='center'>
 					<Accordion>
 						<FormProvider {...methods}>
@@ -55,15 +55,15 @@ const OmnichannelPreferencesPage = (): ReactElement => {
 						</FormProvider>
 					</Accordion>
 				</Box>
-			</Page.ScrollableContentWithShadow>
-			<Page.Footer isDirty={isDirty}>
+			</PageScrollableContentWithShadow>
+			<PageFooter isDirty={isDirty}>
 				<ButtonGroup>
 					<Button onClick={() => reset({ omnichannelTranscriptPDF, omnichannelTranscriptEmail })}>{t('Cancel')}</Button>
 					<Button primary disabled={!isDirty} onClick={handleSubmit(handleSave)}>
 						{t('Save_changes')}
 					</Button>
 				</ButtonGroup>
-			</Page.Footer>
+			</PageFooter>
 		</Page>
 	);
 };

apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx

@@ -6,7 +6,7 @@ import type { ReactElement } from 'react';
 import React from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
-import Page from '../../../components/Page';
+import { Page, PageHeader, PageScrollableContentWithShadow, PageFooter } from '../../../components/Page';
 import { getDirtyFields } from '../../../lib/getDirtyFields';
 import PreferencesGlobalSection from './PreferencesGlobalSection';
 import PreferencesHighlightsSection from './PreferencesHighlightsSection';
@@ -75,8 +75,8 @@ const AccountPreferencesPage = (): ReactElement => {
 
 	return (
 		<Page>
-			<Page.Header title={t('Preferences')} />
-			<Page.ScrollableContentWithShadow>
+			<PageHeader title={t('Preferences')} />
+			<PageScrollableContentWithShadow>
 				<FormProvider {...methods}>
 					<Box id={preferencesFormId} is='form' maxWidth='x600' w='full' alignSelf='center' onSubmit={handleSubmit(handleSaveData)}>
 						<Accordion>
@@ -91,15 +91,15 @@ const AccountPreferencesPage = (): ReactElement => {
 						</Accordion>
 					</Box>
 				</FormProvider>
-			</Page.ScrollableContentWithShadow>
-			<Page.Footer isDirty={isDirty}>
+			</PageScrollableContentWithShadow>
+			<PageFooter isDirty={isDirty}>
 				<ButtonGroup>
 					<Button onClick={() => reset(preferencesValues)}>{t('Cancel')}</Button>
 					<Button form={preferencesFormId} primary type='submit'>
 						{t('Save_changes')}
 					</Button>
 				</ButtonGroup>
-			</Page.Footer>
+			</PageFooter>
 		</Page>
 	);
 };

apps/meteor/client/views/account/profile/AccountProfilePage.tsx

@@ -16,7 +16,7 @@ import React, { useState, useCallback } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import ConfirmOwnerChangeModal from '../../../components/ConfirmOwnerChangeModal';
-import Page from '../../../components/Page';
+import { Page, PageFooter, PageHeader, PageScrollableContentWithShadow } from '../../../components/Page';
 import { useAllowPasswordChange } from '../security/useAllowPasswordChange';
 import AccountProfileForm from './AccountProfileForm';
 import ActionConfirmModal from './ActionConfirmModal';
@@ -113,8 +113,8 @@ const AccountProfilePage = (): ReactElement => {
 
 	return (
 		<Page>
-			<Page.Header title={t('Profile')} />
-			<Page.ScrollableContentWithShadow>
+			<PageHeader title={t('Profile')} />
+			<PageScrollableContentWithShadow>
 				<Box maxWidth='600px' w='full' alignSelf='center'>
 					<FormProvider {...methods}>
 						<AccountProfileForm id={profileFormId} />
@@ -130,8 +130,8 @@ const AccountProfilePage = (): ReactElement => {
 						)}
 					</ButtonGroup>
 				</Box>
-			</Page.ScrollableContentWithShadow>
-			<Page.Footer isDirty={isDirty}>
+			</PageScrollableContentWithShadow>
+			<PageFooter isDirty={isDirty}>
 				<ButtonGroup>
 					<Button disabled={!isDirty} onClick={() => reset(getProfileInitialValues(user))}>
 						{t('Cancel')}
@@ -147,7 +147,7 @@ const AccountProfilePage = (): ReactElement => {
 						{t('Save_changes')}
 					</Button>
 				</ButtonGroup>
-			</Page.Footer>
+			</PageFooter>
 		</Page>
 	);
 };