fix(fuselage): move size changes into V2 components

.changeset/stale-boats-collect.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": patch
+---
+
+fix(fuselage): move header size changes into V2 components

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 ref={ref} pi={16} pb={20} {...props}>
+      <Box ref={ref} p={24} {...props}>
         {children}
       </Box>
     );

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

@@ -1,8 +1,8 @@
-import { css } from '@rocket.chat/css-in-js';
 import type { ComponentProps } from 'react';
 import React, { memo } from 'react';
 
 import Box from '../Box';
+import Margins from '../Margins';
 
 type ContextualbarHeaderProps = ComponentProps<typeof Box>;
 
@@ -13,27 +13,24 @@ const ContextualbarHeader = ({
   <Box
     display='flex'
     alignItems='center'
-    height='x44'
-    pi={16}
+    height='x56'
+    pi={24}
     borderBlockEndWidth='default'
     borderBlockColor='extra-light'
     flexShrink={0}
     {...props}
   >
     <Box
+      marginInline='neg-x4'
       display='flex'
       alignItems='center'
       justifyContent='space-between'
       flexGrow={1}
       height='100%'
       overflow='hidden'
-      className={css`
-        gap: 8px;
-      `}
     >
-      {children}
+      <Margins inline='x4'>{children}</Margins>
     </Box>
   </Box>
 );
-
 export default memo(ContextualbarHeader);

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

@@ -5,6 +5,6 @@ import { Icon } from '..';
 
 const ContextualbarIcon = (
   props: ComponentProps<typeof Icon>
-): ReactElement => <Icon {...props} pi={2} size='x20' />;
+): ReactElement => <Icon {...props} pi={2} size='x24' />;
 
 export default memo(ContextualbarIcon);

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

@@ -11,7 +11,8 @@ const ContextualbarSection = forwardRef<
     <Box
       ref={ref}
       rcx-vertical-bar__section
-      p={16}
+      pi={24}
+      pb={16}
       display='flex'
       alignItems='center'
       flexGrow={1}

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

@@ -9,7 +9,7 @@ const ContextualbarTitle = (
   <Box
     flexShrink={1}
     flexGrow={1}
-    fontScale='h5'
+    fontScale='h4'
     withTruncatedText
     {...props}
   />

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

@@ -10,13 +10,13 @@ exports[`[Contextualbar Rendering] renders Default without crashing 1`] = `
         class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-1pzjc7w"
       >
         <div
-          class="rcx-box rcx-box--full rcx-css-5a9eaq"
+          class="rcx-box rcx-box--full rcx-css-13kuqi8"
         >
           <div
-            class="rcx-box rcx-box--full rcx-css-1bdyjik rcx-css-1tmbvtv"
+            class="rcx-box rcx-box--full rcx-css-1sl6k6j"
           >
             <button
-              class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-ue04py"
+              class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-css-x7bl3q rcx-css-1yzvz7u"
               title="Back"
               type="button"
             >
@@ -28,16 +28,16 @@ exports[`[Contextualbar Rendering] renders Default without crashing 1`] = `
               </i>
             </button>
             <div
-              class="rcx-box rcx-box--full rcx-css-1spko5i"
+              class="rcx-box rcx-box--full  rcx-css-x7bl3q rcx-css-1to6ka7"
             >
               Contextualbar Title
             </div>
             <div
-              class="rcx-button-group rcx-button-group--align-start"
+              class="rcx-button-group rcx-button-group--align-start rcx-css-x7bl3q"
               role="group"
             >
               <button
-                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-button-group__item rcx-css-ue04py"
+                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-button-group__item rcx-css-1yzvz7u"
                 title="Title"
                 type="button"
               >
@@ -49,7 +49,7 @@ exports[`[Contextualbar Rendering] renders Default without crashing 1`] = `
                 </i>
               </button>
               <button
-                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-button-group__item rcx-css-ue04py"
+                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-button-group__item rcx-css-1yzvz7u"
                 title="Add user"
                 type="button"
               >
@@ -61,7 +61,7 @@ exports[`[Contextualbar Rendering] renders Default without crashing 1`] = `
                 </i>
               </button>
               <button
-                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-button-group__item rcx-css-ue04py"
+                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-button-group__item rcx-css-1yzvz7u"
                 title="Close"
                 type="button"
               >
@@ -76,7 +76,7 @@ exports[`[Contextualbar Rendering] renders Default without crashing 1`] = `
           </div>
         </div>
         <div
-          class="rcx-box rcx-box--full rcx-vertical-bar__section rcx-css-14bkbcs"
+          class="rcx-box rcx-box--full rcx-vertical-bar__section rcx-css-s9fquj"
         >
           <label
             class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
@@ -103,7 +103,7 @@ exports[`[Contextualbar Rendering] renders Default without crashing 1`] = `
           class="rcx-box rcx-box--full rcx-vertical-bar__content rcx-css-1ptgac4"
         />
         <div
-          class="rcx-box rcx-box--full rcx-css-f51umh"
+          class="rcx-box rcx-box--full rcx-css-m843eh"
         >
           <div
             class="rcx-button-group rcx-button-group--align-start"
@@ -159,13 +159,13 @@ exports[`[Contextualbar Rendering] renders Empty without crashing 1`] = `
         class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-1pzjc7w"
       >
         <div
-          class="rcx-box rcx-box--full rcx-css-5a9eaq"
+          class="rcx-box rcx-box--full rcx-css-13kuqi8"
         >
           <div
-            class="rcx-box rcx-box--full rcx-css-1bdyjik rcx-css-1tmbvtv"
+            class="rcx-box rcx-box--full rcx-css-1sl6k6j"
           >
             <button
-              class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-ue04py"
+              class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-css-x7bl3q rcx-css-1yzvz7u"
               title="Back"
               type="button"
             >
@@ -177,16 +177,16 @@ exports[`[Contextualbar Rendering] renders Empty without crashing 1`] = `
               </i>
             </button>
             <div
-              class="rcx-box rcx-box--full rcx-css-1spko5i"
+              class="rcx-box rcx-box--full  rcx-css-x7bl3q rcx-css-1to6ka7"
             >
               Contextualbar Empty
             </div>
             <div
-              class="rcx-button-group rcx-button-group--align-start"
+              class="rcx-button-group rcx-button-group--align-start rcx-css-x7bl3q"
               role="group"
             >
               <button
-                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-button-group__item rcx-css-ue04py"
+                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-button-group__item rcx-css-1yzvz7u"
                 title="Title"
                 type="button"
               >
@@ -220,7 +220,7 @@ exports[`[Contextualbar Rendering] renders Empty without crashing 1`] = `
           </div>
         </div>
         <div
-          class="rcx-box rcx-box--full rcx-css-f51umh"
+          class="rcx-box rcx-box--full rcx-css-m843eh"
         >
           Footer
         </div>
@@ -240,13 +240,13 @@ exports[`[Contextualbar Rendering] renders Skeleton without crashing 1`] = `
         class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-1pzjc7w"
       >
         <div
-          class="rcx-box rcx-box--full rcx-css-5a9eaq"
+          class="rcx-box rcx-box--full rcx-css-13kuqi8"
         >
           <div
-            class="rcx-box rcx-box--full rcx-css-1bdyjik rcx-css-1tmbvtv"
+            class="rcx-box rcx-box--full rcx-css-1sl6k6j"
           >
             <span
-              class="rcx-box rcx-box--full rcx-skeleton--text rcx-skeleton rcx-css-1qcz93u"
+              class="rcx-box rcx-box--full rcx-skeleton--text rcx-skeleton  rcx-css-x7bl3q rcx-css-16xwxf4"
             />
           </div>
         </div>

packages/fuselage/src/components/ContextualbarV2/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/ContextualbarV2/Contextualbar.stories.tsx

@@ -0,0 +1,109 @@
+import { action } from '@storybook/addon-actions';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from 'react';
+
+import {
+  ContextualbarV2,
+  ContextualbarV2Action,
+  ContextualbarV2Actions,
+  ContextualbarV2Button,
+  ContextualbarV2Content,
+  ContextualbarV2EmptyContent,
+  ContextualbarV2Footer,
+  ContextualbarV2Header,
+  ContextualbarV2Section,
+  ContextualbarV2Skeleton,
+  ContextualbarV2Title,
+} from '.';
+import { Button, ButtonGroup, IconButton, Box, InputBox, Icon } from '..';
+
+export default {
+  title: 'Containers/ContextualbarV2',
+  component: ContextualbarV2,
+  parameters: {
+    docs: {
+      description: {
+        component: `The \`ContextualbarV2\` has the purpose to persist and input information about the scope of the related page.
+				`,
+      },
+    },
+  },
+  decorators: [
+    (storyFn) => (
+      <Box width='x400' elevation='2'>
+        {storyFn()}
+      </Box>
+    ),
+  ],
+} as ComponentMeta<typeof ContextualbarV2>;
+
+export const Default: ComponentStory<typeof ContextualbarV2> = () => (
+  <ContextualbarV2 position='static' height='x540'>
+    <ContextualbarV2Header>
+      <ContextualbarV2Action
+        title='Back'
+        name='arrow-back'
+        onClick={action('click')}
+      />
+      <ContextualbarV2Title>ContextualbarV2 Title</ContextualbarV2Title>
+      <ContextualbarV2Actions>
+        <ContextualbarV2Action
+          title='Title'
+          name='new-window'
+          onClick={action('click')}
+        />
+        <ContextualbarV2Action
+          title='Add user'
+          name='add-user'
+          onClick={action('click')}
+        />
+        <ContextualbarV2Action
+          title='Close'
+          name='cross'
+          onClick={action('click')}
+        />
+      </ContextualbarV2Actions>
+    </ContextualbarV2Header>
+    <ContextualbarV2Section>
+      <InputBox
+        type='text'
+        placeholder='Search'
+        addon={<Icon name='magnifier' size='x20' />}
+      />
+    </ContextualbarV2Section>
+    <ContextualbarV2Content />
+    <ContextualbarV2Footer>
+      <ButtonGroup>
+        <ContextualbarV2Button width='full' secondary>
+          Cancel
+        </ContextualbarV2Button>
+        <Button width='full' primary>
+          Save
+        </Button>
+        <IconButton title='More' icon='menu' secondary />
+      </ButtonGroup>
+    </ContextualbarV2Footer>
+  </ContextualbarV2>
+);
+
+export const Skeleton: ComponentStory<typeof ContextualbarV2> = () => (
+  <ContextualbarV2Skeleton position='static' height='x540' />
+);
+
+export const Empty: ComponentStory<typeof ContextualbarV2> = () => (
+  <ContextualbarV2 position='static' height='x540'>
+    <ContextualbarV2Header>
+      <ContextualbarV2Action title='Back' name='arrow-back' />
+      <ContextualbarV2Title>ContextualbarV2 Empty</ContextualbarV2Title>
+      <ContextualbarV2Actions>
+        <ContextualbarV2Action
+          title='Title'
+          name='new-window'
+          onClick={action('click')}
+        />
+      </ContextualbarV2Actions>
+    </ContextualbarV2Header>
+    <ContextualbarV2EmptyContent />
+    <ContextualbarV2Footer>Footer</ContextualbarV2Footer>
+  </ContextualbarV2>
+);