[IMPROVE] Replace SortListItem and CreateListItem with ListItem

app/user-status/client/lib/userStatus.ts

@@ -49,4 +49,4 @@ export const userStatus: UserStatusTypes = {
 			statusType: UserStatus.OFFLINE,
 		},
 	},
-};
+} as const;

client/components/Sidebar/ListItem.tsx

@@ -0,0 +1,19 @@
+import { Option, OptionColumn } from '@rocket.chat/fuselage';
+import React, { ComponentProps, MouseEventHandler, ReactElement } from 'react';
+
+type ListItemProps = {
+	text: string;
+	icon?: ComponentProps<typeof Option.Icon>['name'];
+	input?: any;
+	action?: MouseEventHandler<HTMLOrSVGElement>;
+};
+
+const ListItem = ({ text, icon, input, action }: ListItemProps): ReactElement => (
+	<Option onClick={action}>
+		{icon && <Option.Icon name={icon} />}
+		<Option.Content>{text}</Option.Content>
+		{input && <OptionColumn>{input}</OptionColumn>}
+	</Option>
+);
+
+export default ListItem;

client/components/Sidebar/index.ts

@@ -2,6 +2,7 @@ import Content from './Content';
 import GenericItem from './GenericItem';
 import Header from './Header';
 import ItemsAssembler from './ItemsAssembler';
+import ListItem from './ListItem';
 import NavigationItem from './NavigationItem';
 import Sidebar from './Sidebar';
 
@@ -11,4 +12,5 @@ export default Object.assign(Sidebar, {
 	GenericItem,
 	NavigationItem,
 	ItemsAssembler,
+	ListItem,
 });

client/components/SortList/GroupingList.js

@@ -1,15 +1,20 @@
-import { Box, Margins, CheckBox } from '@rocket.chat/fuselage';
+import { CheckBox, OptionTitle } from '@rocket.chat/fuselage';
 import React, { useCallback } from 'react';
 
 import { useMethod } from '../../contexts/ServerContext';
 import { useTranslation } from '../../contexts/TranslationContext';
 import { useUserPreference } from '../../contexts/UserContext';
-import SortListItem from './SortListItem';
+import ListItem from '../Sidebar/ListItem';
 
 const style = {
 	textTransform: 'uppercase',
 };
 
+const checkBoxStyle = {
+	paddingLeft: '24px',
+	paddingInlineStart: '24px',
+};
+
 function GroupingList() {
 	const sidebarGroupByType = useUserPreference('sidebarGroupByType');
 	const sidebarShowFavorites = useUserPreference('sidebarShowFavorites');
@@ -25,49 +30,47 @@ function GroupingList() {
 	const handleChangeShowUnread = useHandleChange('sidebarShowUnread', !sidebarShowUnread);
 
 	const t = useTranslation();
+
 	return (
 		<>
-			<Margins block='x8'>
-				<Box is='p' style={style} fontScale='c1'>
-					{t('Group_by')}
-				</Box>
-			</Margins>
+			<OptionTitle style={style}>{t('Group_by')}</OptionTitle>
 			<ul className='rc-popover__list'>
-				<Margins block='x8'>
-					<SortListItem
-						icon={'flag'}
-						text={t('Unread')}
-						input={
-							<CheckBox
-								onChange={handleChangeShowUnread}
-								name='sidebarShowUnread'
-								checked={sidebarShowUnread}
-							/>
-						}
-					/>
-					<SortListItem
-						icon={'star'}
-						text={t('Favorites')}
-						input={
-							<CheckBox
-								onChange={handleChangeShoFavorite}
-								name='sidebarShowFavorites'
-								checked={sidebarShowFavorites}
-							/>
-						}
-					/>
-					<SortListItem
-						icon={'group-by-type'}
-						text={t('Types')}
-						input={
-							<CheckBox
-								onChange={handleChangeGroupByType}
-								name='sidebarGroupByType'
-								checked={sidebarGroupByType}
-							/>
-						}
-					/>
-				</Margins>
+				<ListItem
+					icon={'flag'}
+					text={t('Unread')}
+					input={
+						<CheckBox
+							style={checkBoxStyle}
+							onChange={handleChangeShowUnread}
+							name='sidebarShowUnread'
+							checked={sidebarShowUnread}
+						/>
+					}
+				/>
+				<ListItem
+					icon={'star'}
+					text={t('Favorites')}
+					input={
+						<CheckBox
+							style={checkBoxStyle}
+							onChange={handleChangeShoFavorite}
+							name='sidebarShowFavorites'
+							checked={sidebarShowFavorites}
+						/>
+					}
+				/>
+				<ListItem
+					icon={'group-by-type'}
+					text={t('Types')}
+					input={
+						<CheckBox
+							style={checkBoxStyle}
+							onChange={handleChangeGroupByType}
+							name='sidebarGroupByType'
+							checked={sidebarGroupByType}
+						/>
+					}
+				/>
 			</ul>
 		</>
 	);

client/components/SortList/SortList.js

@@ -1,4 +1,4 @@
-import { Divider } from '@rocket.chat/fuselage';
+import { Option } from '@rocket.chat/fuselage';
 import React from 'react';
 
 import GroupingList from './GroupingList';
@@ -8,13 +8,11 @@ import ViewModeList from './ViewModeList';
 function SortList() {
 	return (
 		<>
-			<div className='rc-popover__column'>
-				<ViewModeList />
-				<Divider />
-				<SortModeList />
-				<Divider />
-				<GroupingList />
-			</div>
+			<ViewModeList />
+			<Option.Divider />
+			<SortModeList />
+			<Option.Divider />
+			<GroupingList />
 		</>
 	);
 }

client/components/SortList/SortModeList.js

@@ -1,15 +1,20 @@
-import { RadioButton, Box, Margins } from '@rocket.chat/fuselage';
+import { RadioButton, OptionTitle } from '@rocket.chat/fuselage';
 import React, { useCallback } from 'react';
 
 import { useMethod } from '../../contexts/ServerContext';
 import { useTranslation } from '../../contexts/TranslationContext';
 import { useUserPreference } from '../../contexts/UserContext';
-import SortListItem from './SortListItem';
+import ListItem from '../Sidebar/ListItem';
 
 const style = {
 	textTransform: 'uppercase',
 };
 
+const checkBoxStyle = {
+	paddingLeft: '24px',
+	paddingInlineStart: '24px',
+};
+
 function SortModeList() {
 	const t = useTranslation();
 	const saveUserPreferences = useMethod('saveUserPreferences');
@@ -23,36 +28,32 @@ function SortModeList() {
 
 	return (
 		<>
-			<Margins block='x8'>
-				<Box is='p' style={style} fontScale='c1'>
-					{t('Sort_By')}
-				</Box>
-			</Margins>
+			<OptionTitle style={style}>{t('Sort_By')}</OptionTitle>
 			<ul className='rc-popover__list'>
-				<Margins block='x8'>
-					<SortListItem
-						icon={'clock'}
-						text={t('Activity')}
-						input={
-							<RadioButton
-								name='sidebarSortby'
-								onChange={setToActivity}
-								checked={sidebarSortBy === 'activity'}
-							/>
-						}
-					/>
-					<SortListItem
-						icon={'sort-az'}
-						text={t('Name')}
-						input={
-							<RadioButton
-								name='sidebarSortby'
-								onChange={setToAlphabetical}
-								checked={sidebarSortBy === 'alphabetical'}
-							/>
-						}
-					/>
-				</Margins>
+				<ListItem
+					icon={'clock'}
+					text={t('Activity')}
+					input={
+						<RadioButton
+							style={checkBoxStyle}
+							name='sidebarSortby'
+							onChange={setToActivity}
+							checked={sidebarSortBy === 'activity'}
+						/>
+					}
+				/>
+				<ListItem
+					icon={'sort-az'}
+					text={t('Name')}
+					input={
+						<RadioButton
+							style={checkBoxStyle}
+							name='sidebarSortby'
+							onChange={setToAlphabetical}
+							checked={sidebarSortBy === 'alphabetical'}
+						/>
+					}
+				/>
 			</ul>
 		</>
 	);