Skip to content

Commit

Permalink
feat: Sidebar new components (#32821)
Browse files Browse the repository at this point in the history
  • Loading branch information
@juliajforesti
juliajforesti committed Sep 6, 2024
1 parent d27cc36 commit cd0d500
Show file tree
Hide file tree
Showing 31 changed files with 196 additions and 731 deletions.
13 changes: 13 additions & 0 deletions .changeset/many-balloons-scream.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
'@rocket.chat/uikit-playground': minor
'@rocket.chat/fuselage-ui-kit': minor
'@rocket.chat/ui-theming': minor
'@rocket.chat/ui-video-conf': minor
'@rocket.chat/ui-composer': minor
'@rocket.chat/gazzodown': minor
'@rocket.chat/ui-avatar': minor
'@rocket.chat/ui-client': minor
'@rocket.chat/meteor': minor
---

Replaced new `SidebarV2` components under feature preview
38 changes: 14 additions & 24 deletions apps/meteor/client/sidebarv2/Item/Condensed.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { IconButton, Sidebar } from '@rocket.chat/fuselage';
import { IconButton, SidebarV2Item, SidebarV2ItemAvatarWrapper, SidebarV2ItemMenu, SidebarV2ItemTitle } from '@rocket.chat/fuselage';
import { useEffectEvent, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
import type { Keys as IconName } from '@rocket.chat/icons';
import type { ReactElement } from 'react';
import React, { memo, useState } from 'react';

type CondensedProps = {
title: ReactElement | string;
title: string;
titleIcon?: ReactElement;
avatar: ReactElement | boolean;
icon?: IconName;
Expand All @@ -19,7 +19,7 @@ type CondensedProps = {
clickable?: boolean;
};

const Condensed = ({ icon, title = '', avatar, actions, href, unread, menu, badges, ...props }: CondensedProps) => {
const Condensed = ({ icon, title, avatar, actions, href, unread, menu, badges, selected }: CondensedProps) => {
const [menuVisibility, setMenuVisibility] = useState(!!window.DISABLE_ANIMATION);

const isReduceMotionEnabled = usePrefersReducedMotion();
Expand All @@ -32,28 +32,18 @@ const Condensed = ({ icon, title = '', avatar, actions, href, unread, menu, badg
};

return (
<Sidebar.Item {...props} {...({ href } as any)} clickable={!!href}>
{avatar && <Sidebar.Item.Avatar>{avatar}</Sidebar.Item.Avatar>}
<Sidebar.Item.Content>
<Sidebar.Item.Wrapper>
{icon}
<Sidebar.Item.Title data-qa='sidebar-item-title' className={(unread && 'rcx-sidebar-item--highlighted') as string}>
{title}
</Sidebar.Item.Title>
</Sidebar.Item.Wrapper>
{badges && <Sidebar.Item.Badge>{badges}</Sidebar.Item.Badge>}
{menu && (
<Sidebar.Item.Menu {...handleMenuEvent}>
{menuVisibility ? menu() : <IconButton tabIndex={-1} aria-hidden mini rcx-sidebar-item__menu icon='kebab' />}
</Sidebar.Item.Menu>
)}
</Sidebar.Item.Content>
{actions && (
<Sidebar.Item.Container>
<Sidebar.Item.Actions>{actions}</Sidebar.Item.Actions>
</Sidebar.Item.Container>
<SidebarV2Item href={href} selected={selected}>
{avatar && <SidebarV2ItemAvatarWrapper>{avatar}</SidebarV2ItemAvatarWrapper>}
{icon && icon}
<SidebarV2ItemTitle unread={unread}>{title}</SidebarV2ItemTitle>
{badges && badges}
{actions && actions}
{menu && (
<SidebarV2ItemMenu {...handleMenuEvent}>
{menuVisibility ? menu() : <IconButton tabIndex={-1} aria-hidden mini rcx-sidebar-v2-item__menu icon='kebab' />}
</SidebarV2ItemMenu>
)}
</Sidebar.Item>
</SidebarV2Item>
);
};

Expand Down
9 changes: 1 addition & 8 deletions apps/meteor/client/sidebarv2/Item/Extended.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,7 @@ export default {
const Template: ComponentStory<typeof Extended> = (args) => (
<Extended
{...args}
title={
<Box display='flex' flexDirection='row' w='full' alignItems='center'>
<Box flexGrow='1' withTruncatedText>
John Doe
</Box>
<Box fontScale='micro'>15:38</Box>
</Box>
}
title='John Doe'
subtitle={
<Box display='flex' flexDirection='row' w='full' alignItems='center'>
<Box flexGrow='1' withTruncatedText>
Expand Down
70 changes: 35 additions & 35 deletions apps/meteor/client/sidebarv2/Item/Extended.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,14 @@
import { Sidebar, IconButton } from '@rocket.chat/fuselage';
import {
SidebarV2Item,
SidebarV2ItemAvatarWrapper,
SidebarV2ItemCol,
SidebarV2ItemRow,
SidebarV2ItemTitle,
SidebarV2ItemTimestamp,
SidebarV2ItemContent,
SidebarV2ItemMenu,
IconButton,
} from '@rocket.chat/fuselage';
import { useEffectEvent, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
import type { Keys as IconName } from '@rocket.chat/icons';
import React, { memo, useState } from 'react';
Expand All @@ -7,7 +17,7 @@ import { useShortTimeAgo } from '../../hooks/useTimeAgo';

type ExtendedProps = {
icon?: IconName;
title?: React.ReactNode;
title: string;
avatar?: React.ReactNode | boolean;
actions?: React.ReactNode;
href?: string;
Expand All @@ -24,7 +34,7 @@ type ExtendedProps = {

const Extended = ({
icon,
title = '',
title,
avatar,
actions,
href,
Expand All @@ -37,7 +47,6 @@ const Extended = ({
threadUnread: _threadUnread,
unread,
selected,
...props
}: ExtendedProps) => {
const formatDate = useShortTimeAgo();
const [menuVisibility, setMenuVisibility] = useState(!!window.DISABLE_ANIMATION);
Expand All @@ -47,42 +56,33 @@ const Extended = ({
const handleMenu = useEffectEvent((e) => {
setMenuVisibility(e.target.offsetWidth > 0 && Boolean(menu));
});

const handleMenuEvent = {
[isReduceMotionEnabled ? 'onMouseEnter' : 'onTransitionEnd']: handleMenu,
};

return (
<Sidebar.Item selected={selected} highlighted={unread} {...props} {...({ href } as any)} clickable={!!href}>
{avatar && <Sidebar.Item.Avatar>{avatar}</Sidebar.Item.Avatar>}
<Sidebar.Item.Content>
<Sidebar.Item.Content>
<Sidebar.Item.Wrapper>
{icon}
<Sidebar.Item.Title data-qa='sidebar-item-title' className={(unread && 'rcx-sidebar-item--highlighted') as string}>
{title}
</Sidebar.Item.Title>
{time && <Sidebar.Item.Time>{formatDate(time)}</Sidebar.Item.Time>}
</Sidebar.Item.Wrapper>
</Sidebar.Item.Content>
<Sidebar.Item.Content>
<Sidebar.Item.Wrapper>
<Sidebar.Item.Subtitle className={(unread && 'rcx-sidebar-item--highlighted') as string}>{subtitle}</Sidebar.Item.Subtitle>
<Sidebar.Item.Badge>{badges}</Sidebar.Item.Badge>
{menu && (
<Sidebar.Item.Menu {...handleMenuEvent}>
{menuVisibility ? menu() : <IconButton tabIndex={-1} aria-hidden mini rcx-sidebar-item__menu icon='kebab' />}
</Sidebar.Item.Menu>
)}
</Sidebar.Item.Wrapper>
</Sidebar.Item.Content>
</Sidebar.Item.Content>
{actions && (
<Sidebar.Item.Container>
<Sidebar.Item.Actions>{actions}</Sidebar.Item.Actions>
</Sidebar.Item.Container>
)}
</Sidebar.Item>
<SidebarV2Item href={href} selected={selected}>
{avatar && <SidebarV2ItemAvatarWrapper>{avatar}</SidebarV2ItemAvatarWrapper>}

<SidebarV2ItemCol>
<SidebarV2ItemRow>
{icon && icon}
<SidebarV2ItemTitle unread={unread}>{title}</SidebarV2ItemTitle>
{time && <SidebarV2ItemTimestamp>{formatDate(time)}</SidebarV2ItemTimestamp>}
</SidebarV2ItemRow>

<SidebarV2ItemRow>
<SidebarV2ItemContent unread={unread}>{subtitle}</SidebarV2ItemContent>
{badges && badges}
{actions && actions}
{menu && (
<SidebarV2ItemMenu {...handleMenuEvent}>
{menuVisibility ? menu() : <IconButton tabIndex={-1} aria-hidden mini rcx-sidebar-v2-item__menu icon='kebab' />}
</SidebarV2ItemMenu>
)}
</SidebarV2ItemRow>
</SidebarV2ItemCol>
</SidebarV2Item>
);
};

Expand Down
41 changes: 16 additions & 25 deletions apps/meteor/client/sidebarv2/Item/Medium.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { Sidebar, IconButton } from '@rocket.chat/fuselage';
import { IconButton, SidebarV2Item, SidebarV2ItemAvatarWrapper, SidebarV2ItemMenu, SidebarV2ItemTitle } from '@rocket.chat/fuselage';
import { useEffectEvent, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
import type { Keys as IconName } from '@rocket.chat/icons';
import React, { memo, useState } from 'react';

type MediumProps = {
title: React.ReactNode;
title: string;
titleIcon?: React.ReactNode;
avatar: React.ReactNode | boolean;
icon?: string;
icon?: IconName;
actions?: React.ReactNode;
href?: string;
unread?: boolean;
Expand All @@ -16,7 +17,7 @@ type MediumProps = {
menuOptions?: any;
};

const Medium = ({ icon, title = '', avatar, actions, href, badges, unread, menu, ...props }: MediumProps) => {
const Medium = ({ icon, title, avatar, actions, href, badges, unread, menu, selected }: MediumProps) => {
const [menuVisibility, setMenuVisibility] = useState(!!window.DISABLE_ANIMATION);

const isReduceMotionEnabled = usePrefersReducedMotion();
Expand All @@ -29,28 +30,18 @@ const Medium = ({ icon, title = '', avatar, actions, href, badges, unread, menu,
};

return (
<Sidebar.Item {...props} href={href} clickable={!!href}>
{avatar && <Sidebar.Item.Avatar>{avatar}</Sidebar.Item.Avatar>}
<Sidebar.Item.Content>
<Sidebar.Item.Wrapper>
{icon}
<Sidebar.Item.Title data-qa='sidebar-item-title' className={unread ? 'rcx-sidebar-item--highlighted' : undefined}>
{title}
</Sidebar.Item.Title>
</Sidebar.Item.Wrapper>
{badges && <Sidebar.Item.Badge>{badges}</Sidebar.Item.Badge>}
{menu && (
<Sidebar.Item.Menu {...handleMenuEvent}>
{menuVisibility ? menu() : <IconButton tabIndex={-1} aria-hidden mini rcx-sidebar-item__menu icon='kebab' />}
</Sidebar.Item.Menu>
)}
</Sidebar.Item.Content>
{actions && (
<Sidebar.Item.Container>
<Sidebar.Item.Actions>{actions}</Sidebar.Item.Actions>
</Sidebar.Item.Container>
<SidebarV2Item href={href} selected={selected}>
<SidebarV2ItemAvatarWrapper>{avatar}</SidebarV2ItemAvatarWrapper>
{icon && icon}
<SidebarV2ItemTitle unread={unread}>{title}</SidebarV2ItemTitle>
{badges && badges}
{actions && actions}
{menu && (
<SidebarV2ItemMenu {...handleMenuEvent}>
{menuVisibility ? menu() : <IconButton tabIndex={-1} aria-hidden mini rcx-sidebar-v2-item__menu icon='kebab' />}
</SidebarV2ItemMenu>
)}
</Sidebar.Item>
</SidebarV2Item>
);
};

Expand Down
Loading

0 comments on commit cd0d500

Please sign in to comment.