feat: Bring back previous announcement style

.changeset/small-snails-burn.md

@@ -0,0 +1,7 @@
+---
+'@rocket.chat/ui-client': minor
+'@rocket.chat/meteor': minor
+---
+
+Restores the previous room announcement style
+> This change is being tested under `Enhanced navigation experience` feature preview, in order to check it you need to enabled it

apps/meteor/client/views/room/RoomAnnouncement/RoomAnnouncement.stories.tsx

@@ -1,4 +1,3 @@
-import { action } from '@storybook/addon-actions';
 import type { Meta, StoryFn } from '@storybook/react';
 
 import RoomAnnouncement from '.';
@@ -9,8 +8,6 @@ export default {
 } satisfies Meta<typeof RoomAnnouncement>;
 
 export const Default: StoryFn<typeof RoomAnnouncement> = (args) => <RoomAnnouncement {...args} />;
-Default.storyName = 'Announcement';
 Default.args = {
 	announcement: 'Lorem Ipsum Indolor',
-	announcementDetails: action('announcementDetails'),
 };

apps/meteor/client/views/room/RoomAnnouncement/RoomAnnouncement.tsx

@@ -1,23 +1,38 @@
 import { Box } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import { AnnouncementBanner } from '@rocket.chat/ui-client';
 import { useSetModal } from '@rocket.chat/ui-contexts';
-import type { MouseEvent } from 'react';
+import type { KeyboardEvent, MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import AnnouncementComponent from './AnnouncementComponent';
 import GenericModal from '../../../components/GenericModal';
 import MarkdownText from '../../../components/MarkdownText';
 
 type RoomAnnouncementParams = {
 	announcement: string;
-	announcementDetails?: () => void;
 };
 
-const RoomAnnouncement = ({ announcement, announcementDetails }: RoomAnnouncementParams) => {
+const RoomAnnouncement = ({ announcement }: RoomAnnouncementParams) => {
 	const { t } = useTranslation();
 	const setModal = useSetModal();
-	const closeModal = useEffectEvent(() => setModal(null));
-	const handleClick = (e: MouseEvent<HTMLAnchorElement>): void => {
+
+	const handleOpenAnnouncement = useEffectEvent(() => {
+		setModal(
+			<GenericModal
+				icon={null}
+				title={t('Announcement')}
+				confirmText={t('Close')}
+				onConfirm={() => setModal(null)}
+				onClose={() => setModal(null)}
+			>
+				<Box>
+					<MarkdownText content={announcement} parseEmoji />
+				</Box>
+			</GenericModal>,
+		);
+	});
+
+	const handleClick = (e: MouseEvent) => {
 		if ((e.target as HTMLAnchorElement).href) {
 			return;
 		}
@@ -26,21 +41,24 @@ const RoomAnnouncement = ({ announcement, announcementDetails }: RoomAnnouncemen
 			return;
 		}
 
-		announcementDetails
-			? announcementDetails()
-			: setModal(
-					<GenericModal icon={null} title={t('Announcement')} confirmText={t('Close')} onConfirm={closeModal} onClose={closeModal}>
-						<Box>
-							<MarkdownText content={announcement} parseEmoji />
-						</Box>
-					</GenericModal>,
-				);
+		handleOpenAnnouncement();
+	};
+
+	const handleKeyDown = (e: KeyboardEvent) => {
+		if ((e.target as HTMLAnchorElement).href) {
+			return;
+		}
+
+		if (e.code === 'Enter' || e.code === 'Space') {
+			e.preventDefault();
+			handleOpenAnnouncement();
+		}
 	};
 
 	return announcement ? (
-		<AnnouncementComponent onClickOpen={handleClick}>
+		<AnnouncementBanner onClick={handleClick} onKeyDown={handleKeyDown}>
 			<MarkdownText variant='inlineWithoutBreaks' content={announcement} withTruncatedText parseEmoji />
-		</AnnouncementComponent>
+		</AnnouncementBanner>
 	) : null;
 };
 

apps/meteor/client/views/room/body/RoomBody.tsx

@@ -6,35 +6,35 @@ import { memo, useCallback, useMemo, useRef } from 'react';
 
 import DropTargetOverlay from './DropTargetOverlay';
 import JumpToRecentMessageButton from './JumpToRecentMessageButton';
+import LoadingMessagesIndicator from './LoadingMessagesIndicator';
+import RetentionPolicyWarning from './RetentionPolicyWarning';
+import RoomForeword from './RoomForeword/RoomForeword';
+import UnreadMessagesIndicator from './UnreadMessagesIndicator';
+import { UploadProgressContainer, UploadProgressIndicator } from './UploadProgress';
+import { MessageList } from '../MessageList';
+import { useReadMessageWindowEvents } from './hooks/useReadMessageWindowEvents';
 import { isTruthy } from '../../../../lib/isTruthy';
 import { CustomScrollbars } from '../../../components/CustomScrollbars';
 import { useEmbeddedLayout } from '../../../hooks/useEmbeddedLayout';
-import Announcement from '../Announcement';
 import { BubbleDate } from '../BubbleDate';
-import { MessageList } from '../MessageList';
-import LoadingMessagesIndicator from './LoadingMessagesIndicator';
-import RetentionPolicyWarning from './RetentionPolicyWarning';
-import UnreadMessagesIndicator from './UnreadMessagesIndicator';
 import MessageListErrorBoundary from '../MessageList/MessageListErrorBoundary';
+import RoomAnnouncement from '../RoomAnnouncement';
 import ComposerContainer from '../composer/ComposerContainer';
+import { useSelectAllAndScrollToTop } from './hooks/useSelectAllAndScrollToTop';
 import RoomComposer from '../composer/RoomComposer/RoomComposer';
 import { useChat } from '../contexts/ChatContext';
 import { useRoom, useRoomSubscription, useRoomMessages } from '../contexts/RoomContext';
 import { useRoomToolbox } from '../contexts/RoomToolboxContext';
 import { useDateScroll } from '../hooks/useDateScroll';
 import { useMessageListNavigation } from '../hooks/useMessageListNavigation';
 import { useRetentionPolicy } from '../hooks/useRetentionPolicy';
-import RoomForeword from './RoomForeword/RoomForeword';
-import { UploadProgressContainer, UploadProgressIndicator } from './UploadProgress';
 import { useFileUpload } from './hooks/useFileUpload';
 import { useGetMore } from './hooks/useGetMore';
 import { useGoToHomeOnRemoved } from './hooks/useGoToHomeOnRemoved';
 import { useHasNewMessages } from './hooks/useHasNewMessages';
 import { useListIsAtBottom } from './hooks/useListIsAtBottom';
 import { useQuoteMessageByUrl } from './hooks/useQuoteMessageByUrl';
-import { useReadMessageWindowEvents } from './hooks/useReadMessageWindowEvents';
 import { useRestoreScrollPosition } from './hooks/useRestoreScrollPosition';
-import { useSelectAllAndScrollToTop } from './hooks/useSelectAllAndScrollToTop';
 import { useHandleUnread } from './hooks/useUnreadMessages';
 
 const RoomBody = (): ReactElement => {
@@ -176,7 +176,7 @@ const RoomBody = (): ReactElement => {
 
 	return (
 		<>
-			{!isLayoutEmbedded && room.announcement && <Announcement announcement={room.announcement} announcementDetails={undefined} />}
+			{!isLayoutEmbedded && room.announcement && <RoomAnnouncement announcement={room.announcement} />}
 			<Box key={room._id} className={['main-content-flex', listStyle]}>
 				<section
 					role='presentation'

apps/meteor/client/views/room/body/RoomBodyV2.tsx

@@ -1,4 +1,3 @@
-import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
 import { useMergedRefs } from '@rocket.chat/fuselage-hooks';
 import { usePermission, useRole, useSetting, useTranslation, useUser, useUserPreference } from '@rocket.chat/ui-contexts';
@@ -12,11 +11,13 @@ import { BubbleDate } from '../BubbleDate';
 import { MessageList } from '../MessageList';
 import DropTargetOverlay from './DropTargetOverlay';
 import JumpToRecentMessageButton from './JumpToRecentMessageButton';
-import MessageListErrorBoundary from '../MessageList/MessageListErrorBoundary';
-import RoomAnnouncement from '../RoomAnnouncement';
 import LoadingMessagesIndicator from './LoadingMessagesIndicator';
 import RetentionPolicyWarning from './RetentionPolicyWarning';
+import MessageListErrorBoundary from '../MessageList/MessageListErrorBoundary';
+import RoomAnnouncement from '../RoomAnnouncement';
 import ComposerContainer from '../composer/ComposerContainer';
+import { useQuoteMessageByUrl } from './hooks/useQuoteMessageByUrl';
+import { useReadMessageWindowEvents } from './hooks/useReadMessageWindowEvents';
 import RoomComposer from '../composer/RoomComposer/RoomComposer';
 import { useChat } from '../contexts/ChatContext';
 import { useRoom, useRoomSubscription, useRoomMessages } from '../contexts/RoomContext';
@@ -27,14 +28,11 @@ import { useRetentionPolicy } from '../hooks/useRetentionPolicy';
 import RoomForeword from './RoomForeword/RoomForeword';
 import UnreadMessagesIndicator from './UnreadMessagesIndicator';
 import { UploadProgressContainer, UploadProgressIndicator } from './UploadProgress';
-import { useBannerSection } from './hooks/useBannerSection';
 import { useFileUpload } from './hooks/useFileUpload';
 import { useGetMore } from './hooks/useGetMore';
 import { useGoToHomeOnRemoved } from './hooks/useGoToHomeOnRemoved';
 import { useHasNewMessages } from './hooks/useHasNewMessages';
 import { useListIsAtBottom } from './hooks/useListIsAtBottom';
-import { useQuoteMessageByUrl } from './hooks/useQuoteMessageByUrl';
-import { useReadMessageWindowEvents } from './hooks/useReadMessageWindowEvents';
 import { useRestoreScrollPosition } from './hooks/useRestoreScrollPosition';
 import { useSelectAllAndScrollToTop } from './hooks/useSelectAllAndScrollToTop';
 import { useHandleUnread } from './hooks/useUnreadMessages';
@@ -99,8 +97,6 @@ const RoomBody = (): ReactElement => {
 
 	const { innerRef: getMoreInnerRef } = useGetMore(room._id, atBottomRef);
 
-	const { wrapperRef: sectionWrapperRef, hideSection, innerRef: sectionScrollRef } = useBannerSection();
-
 	const {
 		uploads,
 		handleUploadFiles,
@@ -126,7 +122,6 @@ const RoomBody = (): ReactElement => {
 		restoreScrollPositionInnerRef,
 		isAtBottomInnerRef,
 		newMessagesScrollRef,
-		sectionScrollRef,
 		unreadBarInnerRef,
 		getMoreInnerRef,
 		selectAndScrollRef,
@@ -177,25 +172,9 @@ const RoomBody = (): ReactElement => {
 	useReadMessageWindowEvents();
 	useQuoteMessageByUrl();
 
-	const wrapperStyle = css`
-		position: absolute;
-		width: 100%;
-		z-index: 5;
-		top: 0px;
-
-		&.animated-hidden {
-			top: -88px;
-		}
-	`;
-
 	return (
 		<>
-			<Box position='relative' w='full'>
-				<Box animated className={[wrapperStyle, hideSection && 'animated-hidden'].filter(isTruthy)} ref={sectionWrapperRef}>
-					{!isLayoutEmbedded && room.announcement && <RoomAnnouncement announcement={room.announcement} announcementDetails={undefined} />}
-				</Box>
-			</Box>
-
+			{!isLayoutEmbedded && room.announcement && <RoomAnnouncement announcement={room.announcement} />}
 			<Box key={room._id} className={['main-content-flex', listStyle]}>
 				<section
 					role='presentation'

apps/meteor/package.json

@@ -247,7 +247,7 @@
 		"@rocket.chat/emitter": "~0.31.25",
 		"@rocket.chat/favicon": "workspace:^",
 		"@rocket.chat/freeswitch": "workspace:^",
-		"@rocket.chat/fuselage": "~0.61.0",
+		"@rocket.chat/fuselage": "~0.62.0",
 		"@rocket.chat/fuselage-hooks": "~0.35.0",
 		"@rocket.chat/fuselage-polyfills": "~0.31.25",
 		"@rocket.chat/fuselage-toastbar": "^0.35.0",

apps/uikit-playground/package.json

@@ -18,7 +18,7 @@
     "@lezer/highlight": "^1.2.1",
     "@rocket.chat/core-typings": "workspace:^",
     "@rocket.chat/css-in-js": "~0.31.25",
-    "@rocket.chat/fuselage": "~0.61.0",
+    "@rocket.chat/fuselage": "~0.62.0",
     "@rocket.chat/fuselage-hooks": "~0.35.0",
     "@rocket.chat/fuselage-polyfills": "~0.31.25",
     "@rocket.chat/fuselage-toastbar": "^0.35.0",

ee/packages/ui-theming/package.json

@@ -4,7 +4,7 @@
 	"private": true,
 	"devDependencies": {
 		"@rocket.chat/css-in-js": "~0.31.25",
-		"@rocket.chat/fuselage": "~0.61.0",
+		"@rocket.chat/fuselage": "~0.62.0",
 		"@rocket.chat/fuselage-hooks": "~0.35.0",
 		"@rocket.chat/icons": "^0.42.0",
 		"@rocket.chat/ui-contexts": "workspace:~",