fix: Banner surface adjustments (#362)

RocketChat · Jan 21, 2021 · 2d59b7c · 2d59b7c
1 parent 6324875
commit 2d59b7c
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 12 deletions.
diff --git a/packages/fuselage-ui-kit/src/blocks/ActionsBlock.js b/packages/fuselage-ui-kit/src/blocks/ActionsBlock.js
@@ -2,6 +2,8 @@ import { Box, Button } from '@rocket.chat/fuselage';
 import { BlockContext, ElementType } from '@rocket.chat/ui-kit';
 import React, { useCallback, useState } from 'react';
 
+import { useSurfaceType } from '../surfaces/SurfaceContext';
+
 const Action = ({ blockId, appId, element, parser }) => {
   const renderedElement = parser.renderActions(
     { blockId, appId, ...element },
@@ -25,17 +27,19 @@ const Action = ({ blockId, appId, element, parser }) => {
   );
 };
 
-const ActionsBlock = ({ blockId, appId, elements, parser }) => {
+const ActionsBlock = ({ className, blockId, appId, elements, parser }) => {
+  const surfaceType = useSurfaceType();
+
   const [showMoreVisible, setShowMoreVisible] = useState(
-    () => elements.length > 5
+    () => elements.length > 5 && surfaceType !== 'banner'
   );
 
   const handleShowMoreClick = useCallback(() => {
     setShowMoreVisible(false);
   }, []);
 
   return (
-    <Box display='flex' flexWrap='wrap' margin={-4}>
+    <Box className={className} display='flex' flexWrap='wrap' margin={-4}>
       {(showMoreVisible ? elements.slice(0, 5) : elements).map((element, i) => (
         <Action
           key={i}

diff --git a/packages/fuselage-ui-kit/src/blocks/ContextBlock.js b/packages/fuselage-ui-kit/src/blocks/ContextBlock.js
@@ -27,8 +27,8 @@ const Item = ({ element, parser }) => {
   }
 };
 
-const ContextBlock = ({ elements, parser }) => (
-  <Box display='flex' alignItems='center' margin={-4}>
+const ContextBlock = ({ className, elements, parser }) => (
+  <Box className={className} display='flex' alignItems='center' margin={-4}>
     {elements.map((element, i) => (
       <Item key={i} element={element} parser={parser} />
     ))}

diff --git a/packages/fuselage-ui-kit/src/blocks/DividerBlock.js b/packages/fuselage-ui-kit/src/blocks/DividerBlock.js
@@ -1,6 +1,8 @@
 import { Divider } from '@rocket.chat/fuselage';
 import React from 'react';
 
-const DividerBlock = () => <Divider marginBlock='x24' />;
+const DividerBlock = ({ className }) => (
+  <Divider className={className} marginBlock='x24' />
+);
 
 export default DividerBlock;
diff --git a/packages/fuselage-ui-kit/src/blocks/ImageBlock.js b/packages/fuselage-ui-kit/src/blocks/ImageBlock.js
@@ -28,7 +28,7 @@ const fetchImageState = (img) => {
   };
 };
 
-const ImageBlock = ({ element, parser }) => {
+const ImageBlock = ({ className, element, parser }) => {
   const surface = useSurfaceType();
 
   const alignment =
@@ -74,6 +74,7 @@ const ImageBlock = ({ element, parser }) => {
 
   return (
     <Box
+      className={className}
       display='flex'
       flexDirection='column'
       flexWrap='nowrap'

diff --git a/packages/fuselage-ui-kit/src/blocks/InputBlock.js b/packages/fuselage-ui-kit/src/blocks/InputBlock.js
@@ -4,11 +4,11 @@ import React, { memo } from 'react';
 
 import { useBlockContext } from '../hooks';
 
-const InputBlock = ({ element, parser, context }) => {
+const InputBlock = ({ className, element, parser, context }) => {
   const [{ error }] = useBlockContext(element.element, context);
 
   return (
-    <Field>
+    <Field className={className}>
       {element.label && (
         <Field.Label>{parser.plainText(element.label)}</Field.Label>
       )}

diff --git a/packages/fuselage-ui-kit/src/blocks/SectionBlock.js b/packages/fuselage-ui-kit/src/blocks/SectionBlock.js
@@ -27,7 +27,7 @@ const Fields = ({ fields, parser }) => (
   </Grid>
 );
 
-const SectionBlock = ({ element, parser }) => {
+const SectionBlock = ({ className, element, parser }) => {
   const { blockId, appId, text, fields, accessory } = element;
 
   const accessoryElement = useMemo(() => ({ blockId, appId, ...accessory }), [
@@ -37,7 +37,7 @@ const SectionBlock = ({ element, parser }) => {
   ]);
 
   return (
-    <Grid>
+    <Grid className={className}>
       <Grid.Item>
         {text && (
           <Box is='span' fontScale='p1' color='default'>

diff --git a/packages/fuselage-ui-kit/src/surfaces/BannerSurface.js b/packages/fuselage-ui-kit/src/surfaces/BannerSurface.js
@@ -1,9 +1,14 @@
+import { Margins } from '@rocket.chat/fuselage';
 import React from 'react';
 
 import { Surface } from './SurfaceContext';
 
 const BannerSurface = ({ children }) => {
-  return <Surface type='banner'>{children}</Surface>;
+  return (
+    <Surface type='banner'>
+      <Margins block='x8'>{children}</Margins>
+    </Surface>
+  );
 };
 
 export default BannerSurface;