fix(fuselage): Contextualbar elements syntax (#1314)

.changeset/yellow-jokes-rest.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": patch
+---
+
+fix(fuselage): `Contextualbar` elements syntax

packages/fuselage/src/components/Contextualbar/Contextualbar.spec.tsx

@@ -0,0 +1,33 @@
+import { composeStories } from '@storybook/testing-react';
+import { render } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import React from 'react';
+
+import * as stories from './Contextualbar.stories';
+
+expect.extend(toHaveNoViolations);
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  Story.storyName || 'Story',
+  Story,
+]);
+
+describe('[Contextualbar Rendering]', () => {
+  test.each(testCases)(
+    `renders %s without crashing`,
+    async (_storyname, Story) => {
+      const tree = render(<Story />);
+      expect(tree.baseElement).toMatchSnapshot();
+    }
+  );
+
+  test.each(testCases)(
+    '%s should have no a11y violations',
+    async (_storyname, Story) => {
+      const { container } = render(<Story />);
+
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    }
+  );
+});

packages/fuselage/src/components/Contextualbar/Contextualbar.stories.tsx

@@ -1,3 +1,4 @@
+import { action } from '@storybook/addon-actions';
 import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';
 
@@ -38,18 +39,22 @@ export default {
 export const Default: ComponentStory<typeof Contextualbar> = () => (
   <Contextualbar position='static' height='x540'>
     <ContextualbarHeader>
-      <ContextualbarAction name='chevron-right' />
-      <ContextualbarAction title='Back' name='arrow-back' />
+      <ContextualbarAction
+        title='Back'
+        name='arrow-back'
+        onClick={action('click')}
+      />
       <ContextualbarTitle>Contextualbar Title</ContextualbarTitle>
       <ContextualbarActions>
         <ContextualbarAction
           title='Title'
           name='new-window'
-          onClick={() => {}}
+          onClick={action('click')}
         />
         <ContextualbarAction
+          title='Add user'
           name='add-user'
-          onClick={() => console.log('close')}
+          onClick={action('click')}
         />
       </ContextualbarActions>
     </ContextualbarHeader>
@@ -62,7 +67,7 @@ export const Default: ComponentStory<typeof Contextualbar> = () => (
         <Button width='full' primary>
           Save
         </Button>
-        <IconButton icon='menu' />
+        <IconButton title='More' icon='menu' />
       </ButtonGroup>
     </ContextualbarFooter>
   </Contextualbar>
@@ -75,13 +80,13 @@ export const Skeleton: ComponentStory<typeof Contextualbar> = () => (
 export const Empty: ComponentStory<typeof Contextualbar> = () => (
   <Contextualbar position='static' height='x540'>
     <ContextualbarHeader>
-      <ContextualbarAction name='chevron-right' />
+      <ContextualbarAction title='Back' name='arrow-back' />
       <ContextualbarTitle>Contextualbar Empty</ContextualbarTitle>
       <ContextualbarActions>
         <ContextualbarAction
           title='Title'
           name='new-window'
-          onClick={() => {}}
+          onClick={action('click')}
         />
       </ContextualbarActions>
     </ContextualbarHeader>

packages/fuselage/src/components/Contextualbar/Contextualbar.tsx

@@ -15,6 +15,7 @@ const Contextualbar = ({
   <Box
     rcx-vertical-bar
     bg={bg}
+    color='default'
     display='flex'
     flexDirection='column'
     flexShrink={0}

packages/fuselage/src/components/Contextualbar/ContextualbarFooter.tsx

@@ -6,7 +6,7 @@ import { Box } from '..';
 const ContextualbarFooter = forwardRef<HTMLElement, ComponentProps<typeof Box>>(
   function ContextualbarFooter({ children, ...props }, ref) {
     return (
-      <Box is='footer' p={24} {...props} ref={ref}>
+      <Box ref={ref} p={24} {...props}>
         {children}
       </Box>
     );

packages/fuselage/src/components/Contextualbar/ContextualbarHeader.tsx

@@ -14,7 +14,6 @@ const ContextualbarHeader = ({
     display='flex'
     alignItems='center'
     height='x56'
-    is='h3'
     pi={24}
     borderBlockEndWidth='default'
     borderBlockColor='extra-light'
@@ -26,10 +25,9 @@ const ContextualbarHeader = ({
       display='flex'
       alignItems='center'
       justifyContent='space-between'
-      fontScale='h4'
       flexGrow={1}
+      height='100%'
       overflow='hidden'
-      color='default'
     >
       <Margins inline='x4'>{children}</Margins>
     </Box>

packages/fuselage/src/components/Contextualbar/ContextualbarSkeleton.tsx

@@ -7,7 +7,7 @@ import { Box, Skeleton } from '..';
 const ContextualbarSkeleton = (
   props: ComponentProps<typeof Box>
 ): ReactElement => (
-  <Contextualbar {...props} width='100%'>
+  <Contextualbar {...props}>
     <ContextualbarHeader>
       <Skeleton width='100%' />
     </ContextualbarHeader>

packages/fuselage/src/components/Contextualbar/ContextualbarTitle.tsx

@@ -6,7 +6,13 @@ import { Box } from '..';
 const ContextualbarTitle = (
   props: ComponentProps<typeof Box>
 ): ReactElement => (
-  <Box flexShrink={1} flexGrow={1} withTruncatedText {...props} />
+  <Box
+    flexShrink={1}
+    flexGrow={1}
+    fontScale='h4'
+    withTruncatedText
+    {...props}
+  />
 );
 
 export default memo(ContextualbarTitle);