diff --git a/.changeset/clever-candles-shop.md b/.changeset/clever-candles-shop.md new file mode 100644 index 0000000000..8dfba14c6e --- /dev/null +++ b/.changeset/clever-candles-shop.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/fuselage": minor +--- + +feat(fuselage): TableSelection visual improvements diff --git a/packages/fuselage/src/components/Table/Table.spec.tsx b/packages/fuselage/src/components/Table/Table.spec.tsx index 873dc800f0..af45f2185a 100644 --- a/packages/fuselage/src/components/Table/Table.spec.tsx +++ b/packages/fuselage/src/components/Table/Table.spec.tsx @@ -3,67 +3,29 @@ import { render } from '@testing-library/react'; import { axe } from 'jest-axe'; import React from 'react'; -import { Table, TableRow, TableHead, TableBody, TableCell, TableFoot } from '.'; import * as stories from './Table.stories'; -const { Default, Selected } = composeStories(stories); - -describe('[Table Component]', () => { - it('renders Table without crashing', () => { - render(); - }); - - it('renders TableRow without crashing', () => { - render(, { - wrapper: ({ children }) => ( -
- {children} -
- ), - }); - }); - - it('renders TableHead without crashing', () => { - render(, { - wrapper: ({ children }) => {children}
, - }); - }); - - it('renders TableBody without crashing', () => { - render(, { - wrapper: ({ children }) => {children}
, - }); - }); - - it('renders TableFoot without crashing', () => { - render(, { - wrapper: ({ children }) => {children}
, - }); - }); - - it('renders TableCell without crashing', () => { - render(, { - wrapper: ({ children }) => ( - - - {children} - -
- ), - }); - }); - - it('should have no a11y violations on Default story', async () => { - const { container: defaultContainer } = render(); - - const defaultResults = await axe(defaultContainer); - expect(defaultResults).toHaveNoViolations(); - }); - - it('should have no a11y violations on Selected story', async () => { - const { container: selectedContainer } = render(); - - const selectedResults = await axe(selectedContainer); - expect(selectedResults).toHaveNoViolations(); - }); +const testCases = Object.values(composeStories(stories)).map((Story) => [ + Story.storyName || 'Story', + Story, +]); + +describe('[Table Rendering]', () => { + 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/Table/Table.stories.tsx b/packages/fuselage/src/components/Table/Table.stories.tsx index b38bea9fdd..acd5134ab6 100644 --- a/packages/fuselage/src/components/Table/Table.stories.tsx +++ b/packages/fuselage/src/components/Table/Table.stories.tsx @@ -17,6 +17,7 @@ import { TableRow, TableCell, TableBody, + TableSelectionButtonGroup, } from './index'; export default { @@ -73,11 +74,8 @@ export const Default: ComponentStory = () => ( ); -export const Selected: ComponentStory = () => ( +export const WithSelection: ComponentStory = () => ( <> - - Delete - @@ -154,6 +152,12 @@ export const Selected: ComponentStory = () => (
+ + + Delete + Cancel + + ); diff --git a/packages/fuselage/src/components/Table/Table.styles.scss b/packages/fuselage/src/components/Table/Table.styles.scss index cefdd7a364..38134b1b8f 100644 --- a/packages/fuselage/src/components/Table/Table.styles.scss +++ b/packages/fuselage/src/components/Table/Table.styles.scss @@ -16,12 +16,12 @@ } &__selection { - color: colors.status-font(on-info); + color: colors.font(titles-labels); border-radius: theme( 'table-selected-border-radius', - lengths.border-radius(small) + lengths.border-radius(medium) ); - background-color: colors.status-background(info); + background-color: colors.surface(neutral); } &__wrapper { diff --git a/packages/fuselage/src/components/Table/Table.tsx b/packages/fuselage/src/components/Table/Table.tsx index 11890d28f5..83564b91e8 100644 --- a/packages/fuselage/src/components/Table/Table.tsx +++ b/packages/fuselage/src/components/Table/Table.tsx @@ -1,14 +1,8 @@ -import type { ComponentProps, CSSProperties } from 'react'; +import type { ComponentProps } from 'react'; import React from 'react'; import Box from '../Box'; -export const style: CSSProperties = { - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', -}; - export type TableProps = ComponentProps & { striped?: boolean; sticky?: boolean; diff --git a/packages/fuselage/src/components/Table/TableSelection.tsx b/packages/fuselage/src/components/Table/TableSelection/TableSelection.tsx similarity index 78% rename from packages/fuselage/src/components/Table/TableSelection.tsx rename to packages/fuselage/src/components/Table/TableSelection/TableSelection.tsx index 365008bd4b..19ad95198c 100644 --- a/packages/fuselage/src/components/Table/TableSelection.tsx +++ b/packages/fuselage/src/components/Table/TableSelection/TableSelection.tsx @@ -1,9 +1,8 @@ import type { ComponentProps } from 'react'; import React from 'react'; -import Box from '../Box'; -import Margins from '../Margins'; -import { style } from './Table'; +import Box from '../../Box'; +import Margins from '../../Margins'; type TableSelectionProps = ComponentProps & { text?: string; @@ -19,10 +18,11 @@ export const TableSelection = ({ display='flex' alignItems='center' justifyContent='space-between' - {...props} pi={24} + elevation='2' + {...props} > - + {text} {children && ( diff --git a/packages/fuselage/src/components/Table/TableSelection/TableSelectionButton.tsx b/packages/fuselage/src/components/Table/TableSelection/TableSelectionButton.tsx new file mode 100644 index 0000000000..f449a53cd8 --- /dev/null +++ b/packages/fuselage/src/components/Table/TableSelection/TableSelectionButton.tsx @@ -0,0 +1,10 @@ +import type { ComponentProps } from 'react'; +import React from 'react'; + +import { Button } from '../../Button'; + +type TableSelectionButtonProps = ComponentProps; + +export const TableSelectionButton = (props: TableSelectionButtonProps) => ( + + + + + + + +`; diff --git a/packages/fuselage/src/components/Table/index.ts b/packages/fuselage/src/components/Table/index.ts index 04b0f60f8f..e39cbeb7e9 100644 --- a/packages/fuselage/src/components/Table/index.ts +++ b/packages/fuselage/src/components/Table/index.ts @@ -5,4 +5,3 @@ export * from './TableFoot'; export * from './TableHead'; export * from './TableRow'; export * from './TableSelection'; -export * from './TableSelectionButton';