diff --git a/.changeset/few-bikes-refuse.md b/.changeset/few-bikes-refuse.md new file mode 100644 index 0000000000..d87f77064f --- /dev/null +++ b/.changeset/few-bikes-refuse.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/fuselage': patch +--- + +fix(fuselage): SidebarItemV2 visual regressions diff --git a/packages/fuselage/src/components/Sidebar/SidebarItem.spec.tsx b/packages/fuselage/src/components/Sidebar/SidebarItem.spec.tsx new file mode 100644 index 0000000000..bb4195bb1e --- /dev/null +++ b/packages/fuselage/src/components/Sidebar/SidebarItem.spec.tsx @@ -0,0 +1,29 @@ +import { composeStories } from '@storybook/react-webpack5'; +import { axe } from 'jest-axe'; + +import { render } from '../../testing'; + +import * as stories from './SidebarItem.stories'; + +const testCases = Object.values(composeStories(stories)).map((Story) => [ + Story.storyName || 'Story', + Story, +]); + +test.each(testCases)( + `renders %s without crashing`, + async (_storyname, Story) => { + const tree = render(); + expect(tree.baseElement).toMatchSnapshot(); + }, +); + +test.each(testCases)( + '%s should have no a11y violations', + async (_storyname, Story) => { + const { container } = render(); + + const results = await axe(container); + expect(results).toHaveNoViolations(); + }, +); diff --git a/packages/fuselage/src/components/Sidebar/Item.stories.tsx b/packages/fuselage/src/components/Sidebar/SidebarItem.stories.tsx similarity index 85% rename from packages/fuselage/src/components/Sidebar/Item.stories.tsx rename to packages/fuselage/src/components/Sidebar/SidebarItem.stories.tsx index 8f8d256ea6..d193e46ddb 100644 --- a/packages/fuselage/src/components/Sidebar/Item.stories.tsx +++ b/packages/fuselage/src/components/Sidebar/SidebarItem.stories.tsx @@ -30,6 +30,20 @@ export default { }, } satisfies Meta; +const sidebarItemActions = ( + + + + + + +); + export const Default: StoryFn = () => ( <> @@ -50,14 +64,7 @@ export const Default: StoryFn = () => ( - - - - - - - - + {sidebarItemActions} @@ -75,14 +82,7 @@ export const Default: StoryFn = () => ( highlighted - - - - - - - - + @@ -102,14 +102,7 @@ export const Default: StoryFn = () => ( - - - - - - - - + {sidebarItemActions} @@ -140,12 +133,7 @@ export const Default: StoryFn = () => ( - - - - - - + {sidebarItemActions} diff --git a/packages/fuselage/src/components/Sidebar/__snapshots__/SidebarItem.spec.tsx.snap b/packages/fuselage/src/components/Sidebar/__snapshots__/SidebarItem.spec.tsx.snap new file mode 100644 index 0000000000..0767b2dde5 --- /dev/null +++ b/packages/fuselage/src/components/Sidebar/__snapshots__/SidebarItem.spec.tsx.snap @@ -0,0 +1,395 @@ +// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing + +exports[`renders Default without crashing 1`] = ` + +
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+ ddsfoasdhfiuashd ousadhfiuasdhfiuashd soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh +
+
+
+
+
+ + + + +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+ +
+
+ highlighted +
+
+
+
+
+ + +
+
+
+
+ +
+
+
+
+
+
+ +
+
+ ddsfoasdhfiuashd ousadhfiuasdhfiuashd soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh +
+
+
+
+
+ + + + +
+
+
+ + +
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+ ddsfoasdhfiuashd ousadhfiuasdhfiuashd soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh +
+
+
+
+
+
+ ddsfoasdhfiuashd ousadhfiuasdhfiuashd soduhfiuasdhfia ishdfiuashdfiuas iuashdfiausdh +
+
+
+
+
+
+
+ + + + +
+
+
+
+ +
+ +`; diff --git a/packages/fuselage/src/components/SidebarV2/Sidebar.styles.scss b/packages/fuselage/src/components/SidebarV2/Sidebar.styles.scss index e32f9109bb..c51ea74304 100644 --- a/packages/fuselage/src/components/SidebarV2/Sidebar.styles.scss +++ b/packages/fuselage/src/components/SidebarV2/Sidebar.styles.scss @@ -77,12 +77,6 @@ $sidebar-banner-color-danger: theme( colors.status-font(on-danger) ); -%highlighted { - color: $sidebar-item-color-highlighted; - - font-weight: 500; -} - .rcx-sidebar-v2 { position: relative; diff --git a/packages/fuselage/src/components/SidebarV2/SidebarItem/SidebarItem.styles.scss b/packages/fuselage/src/components/SidebarV2/SidebarItem/SidebarItem.styles.scss index a2723f8e90..969800a9a6 100644 --- a/packages/fuselage/src/components/SidebarV2/SidebarItem/SidebarItem.styles.scss +++ b/packages/fuselage/src/components/SidebarV2/SidebarItem/SidebarItem.styles.scss @@ -36,15 +36,15 @@ $sidebar-color-font-active: theme( } } -%highlighted { +%highlightedV2 { color: $sidebar-item-color-highlighted; - font-weight: 600; + font-weight: 500; } @mixin highlighted { &--highlighted { - @extend %highlighted; + @extend %highlightedV2; } } @@ -116,7 +116,9 @@ $sidebar-color-font-active: theme( } &__timestamp { - @include typography.use-font-scale(c2); + @include highlighted; + + @include typography.use-font-scale(micro); } &__content { @@ -143,7 +145,6 @@ $sidebar-color-font-active: theme( flex-direction: column; width: lengths.size(full); - gap: lengths.padding(4); } &__menu-wrapper { diff --git a/packages/fuselage/src/components/SidebarV2/SidebarItem/SidebarItemTimestamp.tsx b/packages/fuselage/src/components/SidebarV2/SidebarItem/SidebarItemTimestamp.tsx index af4a228884..0e14d9a2f4 100644 --- a/packages/fuselage/src/components/SidebarV2/SidebarItem/SidebarItemTimestamp.tsx +++ b/packages/fuselage/src/components/SidebarV2/SidebarItem/SidebarItemTimestamp.tsx @@ -2,11 +2,13 @@ import type { HTMLAttributes } from 'react'; export const SidebarItemTimestamp = ({ className, + unread, ...props -}: HTMLAttributes) => ( +}: { unread?: boolean } & HTMLAttributes) => (
[ + Story.storyName || 'Story', + Story, +]); -describe('[Sidebar Default story]', () => { - it('renders without crashing', () => { - render(); - }); - it('should have no a11y violations', async () => { - const { container } = render(); +test.each(testCases)( + `renders %s without crashing`, + async (_storyname, Story) => { + const tree = render(); + expect(tree.baseElement).toMatchSnapshot(); + }, +); + +test.each(testCases)( + '%s should have no a11y violations', + async (_storyname, Story) => { + const { container } = render(); const results = await axe(container); expect(results).toHaveNoViolations(); - }); -}); + }, +); diff --git a/packages/fuselage/src/components/Sidepanel/Sidepanel.stories.tsx b/packages/fuselage/src/components/Sidepanel/Sidepanel.stories.tsx index af2ae8909e..42c770a251 100644 --- a/packages/fuselage/src/components/Sidepanel/Sidepanel.stories.tsx +++ b/packages/fuselage/src/components/Sidepanel/Sidepanel.stories.tsx @@ -6,11 +6,16 @@ import { Icon, IconButton, InputBox, - SidebarItem, - SidebarItemBadge, - SidebarItemIcon, - SidebarItemMenu, - SidebarItemTitle, + SidebarV2ItemTitle, + SidebarV2ItemCol, + SidebarV2ItemBadge, + SidebarV2ItemIcon, + SidebarV2ItemMenu, + SidebarV2ItemContent, + SidebarV2ItemRow, + SidebarV2Item, + SidebarV2ItemTimestamp, + Tag, } from '../..'; import { SidebarItemAvatarWrapper } from '../SidebarV2/SidebarItem/SidebarItemAvatarWrapper'; import { MenuTemplate, leterAvatarUrls, names } from '../SidebarV2/helpers'; @@ -53,23 +58,52 @@ const Template: StoryFn = (args) => ( - {new Array(20).fill(null).map((_, index) => ( - - - - - - - {names[index % 10]} - - } /> - - - ))} + {new Array(20).fill(null).map((_, index) => { + return ( + + + + + + + + + + {names[index % 10]} + + 11:22:21 AM + + + + Lorem Ipsum Indolor Dolor Ipsum Ipsum + + + + Team title + + + } /> + + + + + ); + })} diff --git a/packages/fuselage/src/components/Sidepanel/Sidepanel.styles.scss b/packages/fuselage/src/components/Sidepanel/Sidepanel.styles.scss index eb05b8b154..28cc67f37f 100644 --- a/packages/fuselage/src/components/Sidepanel/Sidepanel.styles.scss +++ b/packages/fuselage/src/components/Sidepanel/Sidepanel.styles.scss @@ -48,5 +48,9 @@ $sidepanel-color-default: colors.font(default); &-list { padding-block: lengths.padding(8); + + &__item { + padding-block: lengths.padding(4); + } } } diff --git a/packages/fuselage/src/components/Sidepanel/__snapshots__/Sidepanel.spec.tsx.snap b/packages/fuselage/src/components/Sidepanel/__snapshots__/Sidepanel.spec.tsx.snap new file mode 100644 index 0000000000..356bb8a69a --- /dev/null +++ b/packages/fuselage/src/components/Sidepanel/__snapshots__/Sidepanel.spec.tsx.snap @@ -0,0 +1,2197 @@ +// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing + +exports[`renders Default without crashing 1`] = ` + +
+
+
+
+
+
+ Title Lorem Ipsum Indolor Ipsum Dolor Ipsum Ipsum +
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ avatar +
+
+
+ +
+
+ Marvin Black +
+
+ 11:22:21 AM +
+
+
+
+ Lorem Ipsum Indolor Dolor Ipsum Ipsum +
+ + + + Team title + + + + 3 + +
+ + + +
+
+
+ +
+
+ +
+
+
+
+ avatar +
+
+
+ +
+
+ Esther Miles +
+
+ 11:22:21 AM +
+
+
+
+ Lorem Ipsum Indolor Dolor Ipsum Ipsum +
+ + + + Team title + + + + 4 + +
+ + + +
+
+
+ +
+
+ +
+
+
+
+ avatar +
+
+
+ +
+
+ Leroy Jenkins +
+
+ 11:22:21 AM +
+
+
+
+ Lorem Ipsum Indolor Dolor Ipsum Ipsum +
+ + + + Team title + + + + 5 + +
+ + + +
+
+
+ +
+
+ +
+
+
+
+ avatar +
+
+
+ +
+
+ Morgan Freeman looooooooooong looooooooooong looooooooooong name +
+
+ 11:22:21 AM +
+
+
+
+ Lorem Ipsum Indolor Dolor Ipsum Ipsum +
+ + + + Team title + + + + 6 + +
+ + + +
+
+
+ +
+
+ +
+
+
+
+ avatar +
+
+
+ +
+
+ John Doe +
+
+ 11:22:21 AM +
+
+
+
+ Lorem Ipsum Indolor Dolor Ipsum Ipsum +
+ + + + Team title + + + + 7 + +
+ + + +
+
+
+ +
+
+ +
+
+
+
+ avatar +
+
+
+ +
+
+ Jane Doe +
+
+ 11:22:21 AM +
+
+
+
+ Lorem Ipsum Indolor Dolor Ipsum Ipsum +
+ + + + Team title + + + + 8 + +
+ + + +
+
+
+ +
+
+ +
+
+
+
+ avatar +
+
+
+ +
+
+ Baz Qux +
+
+ 11:22:21 AM +
+
+
+
+ Lorem Ipsum Indolor Dolor Ipsum Ipsum +
+ + + + Team title + + + + 9 + +
+ + + +
+
+
+ +
+
+ +
+
+
+
+ avatar +
+
+
+ +
+
+ Alice Bob +
+
+ 11:22:21 AM +
+
+
+
+ Lorem Ipsum Indolor Dolor Ipsum Ipsum +
+ + + + Team title + + + + 10 + +
+ + + +
+
+
+ +
+
+ +
+
+
+
+ avatar +
+
+
+ +
+
+ Charlie Delta +
+
+ 11:22:21 AM +
+
+
+
+ Lorem Ipsum Indolor Dolor Ipsum Ipsum +
+ + + + Team title + + + + 11 + +
+ + + +
+
+
+ +
+
+ +
+
+
+
+ avatar +
+
+
+ +
+
+ Eve Mallory +
+
+ 11:22:21 AM +
+
+
+
+ Lorem Ipsum Indolor Dolor Ipsum Ipsum +
+ + + + Team title + + + + 12 + +
+ + + +
+
+
+ +
+
+ +
+
+
+
+ avatar +
+
+
+ +
+
+ Marvin Black +
+
+ 11:22:21 AM +
+
+
+
+ Lorem Ipsum Indolor Dolor Ipsum Ipsum +
+ + + + Team title + + + + 13 + +
+ + + +
+
+
+ +
+
+ +
+
+
+
+ avatar +
+
+
+ +
+
+ Esther Miles +
+
+ 11:22:21 AM +
+
+
+
+ Lorem Ipsum Indolor Dolor Ipsum Ipsum +
+ + + + Team title + + + + 14 + +
+ + + +
+
+
+ +
+
+ +
+
+
+
+ avatar +
+
+
+ +
+
+ Leroy Jenkins +
+
+ 11:22:21 AM +
+
+
+
+ Lorem Ipsum Indolor Dolor Ipsum Ipsum +
+ + + + Team title + + + + 15 + +
+ + + +
+
+
+ +
+
+ +
+
+
+
+ avatar +
+
+
+ +
+
+ Morgan Freeman looooooooooong looooooooooong looooooooooong name +
+
+ 11:22:21 AM +
+
+
+
+ Lorem Ipsum Indolor Dolor Ipsum Ipsum +
+ + + + Team title + + + + 16 + +
+ + + +
+
+
+ +
+
+ +
+
+
+
+ avatar +
+
+
+ +
+
+ John Doe +
+
+ 11:22:21 AM +
+
+
+
+ Lorem Ipsum Indolor Dolor Ipsum Ipsum +
+ + + + Team title + + + + 17 + +
+ + + +
+
+
+ +
+
+ +
+
+
+
+ avatar +
+
+
+ +
+
+ Jane Doe +
+
+ 11:22:21 AM +
+
+
+
+ Lorem Ipsum Indolor Dolor Ipsum Ipsum +
+ + + + Team title + + + + 18 + +
+ + + +
+
+
+ +
+
+ +
+
+
+
+ avatar +
+
+
+ +
+
+ Baz Qux +
+
+ 11:22:21 AM +
+
+
+
+ Lorem Ipsum Indolor Dolor Ipsum Ipsum +
+ + + + Team title + + + + 19 + +
+ + + +
+
+
+ +
+
+ +
+
+
+
+ avatar +
+
+
+ +
+
+ Alice Bob +
+
+ 11:22:21 AM +
+
+
+
+ Lorem Ipsum Indolor Dolor Ipsum Ipsum +
+ + + + Team title + + + + 20 + +
+ + + +
+
+
+ +
+
+ +
+
+
+
+ avatar +
+
+
+ +
+
+ Charlie Delta +
+
+ 11:22:21 AM +
+
+
+
+ Lorem Ipsum Indolor Dolor Ipsum Ipsum +
+ + + + Team title + + + + 21 + +
+ + + +
+
+
+ +
+
+ +
+
+
+
+ avatar +
+
+
+ +
+
+ Eve Mallory +
+
+ 11:22:21 AM +
+
+
+
+ Lorem Ipsum Indolor Dolor Ipsum Ipsum +
+ + + + Team title + + + + 22 + +
+ + + +
+
+
+ +
+
+
+
+
+
+ +`;