fix: ui-kit margins warnings and unique ids (#130)

Author: ggazzo

packages/fuselage-ui-kit/src/Actions.js

@@ -27,7 +27,7 @@ export const Actions = ({ blockId, appId, elements, parser }) => {
   const renderedElements = (showMoreVisible
     ? elements.slice(0, 5)
     : elements
-  ).map((element, i) => <Margins key={i} all={8}><Flex.Item basis={getStyle(element)}>{parser.renderActions({ blockId, appId, ...element }, BLOCK_CONTEXT.ACTION, parser)}</Flex.Item></Margins>);
+  ).map((element, i) => <Margins key={i} all='x8'><Flex.Item basis={getStyle(element)}>{parser.renderActions({ blockId, appId, ...element }, BLOCK_CONTEXT.ACTION, parser)}</Flex.Item></Margins>);
 
   const handleShowMoreClick = () => {
     setShowMoreVisible(false);

packages/fuselage-ui-kit/src/Block.js

@@ -3,6 +3,6 @@ import {
   Margins,
 } from '@rocket.chat/fuselage';
 
-export const Block = ({ children }) => (
-  <Margins blockEnd={16}>{children}</Margins>
+export const Block = ({ children, blockEnd = 'x16' }) => (
+  <Margins blockEnd={blockEnd}>{children}</Margins>
 );

packages/fuselage-ui-kit/src/index.js

@@ -89,10 +89,11 @@ class TextParser extends UiKitParserText {
 }
 
 class ButtonsParser extends UiKitParserButtons {
-  button(element, context) {
+  button(element, context, key) {
     const [{ loading }, action] = useBlockContext(element, context);
     return (
       <Button
+        key={key}
         mod-mod-loading={loading}
         {...getStyle(element.style)}
         small={context === BLOCK_CONTEXT.SECTION}
@@ -119,10 +120,11 @@ class MessageParser extends UiKitParserMessage {
     return <Overflow loading={loading} {...element} onChange={action} parser={this}/>;
   }
 
-  button(element, context) {
+  button(element, context, key) {
     const [{ loading }, action] = useBlockContext(element, context);
     return (
       <Button
+        key={key}
         mod-mod-loading={loading}
         {...getStyle(element.style)}
         small
@@ -135,8 +137,8 @@ class MessageParser extends UiKitParserMessage {
     );
   }
 
-  divider() {
-    return <Block><Divider /></Block>;
+  divider(_, __, key) {
+    return <Margins block={'x24'} key={key}> <Divider /> </Margins>;
   }
 
   section(args, context, index) {
@@ -145,18 +147,18 @@ class MessageParser extends UiKitParserMessage {
     );
   }
 
-  actions(args) {
+  actions(args, _, key) {
     return (
-      <ActionsLayoutBlock {...args} parser={this} />
+      <ActionsLayoutBlock {...args} key={key} parser={this} />
     );
   }
 
-  datePicker(element, context, index) {
+  datePicker(element, context, key) {
     const [{ loading }, action] = useBlockContext(element, context);
     const { actionId, placeholder } = element;
     return (
       <InputBox
-        key={index}
+        key={key}
         mod-mod-loading={loading}
         id={actionId}
         name={actionId}
@@ -168,19 +170,19 @@ class MessageParser extends UiKitParserMessage {
     );
   }
 
-  image(element, context, index) {
-    return <MessageImage key={index} element={element} context={context}/>;
+  image(element, context, key) {
+    return <MessageImage key={key} element={element} context={context}/>;
   }
 
-  context({ elements }, context, index) {
+  context({ elements }, context, key) {
     return (
-      <Block>
-        <Box is='div' className='TESTE'>
-          <Flex.Container alignItems='center' key={index}>
+      <Block key={key}>
+        <Box is='div'>
+          <Flex.Container alignItems='center'>
             <Margins all='neg-x4'>
               <Box is='div'>
                 {elements.map((element, i) => (
-                  <Margins all={4} key={i}>
+                  <Margins all='x4' key={i}>
                     <Flex.Item>
                       {[
                         ELEMENT_TYPES.PLAIN_TEXT_INPUT,
@@ -204,27 +206,28 @@ class MessageParser extends UiKitParserMessage {
     );
   }
 
-  multiStaticSelect(element, context) {
+  multiStaticSelect(element, context, key) {
     const [{ loading }, action] = useBlockContext(element, context);
     return (
       <MultiStaticSelect
         {...element}
+        key={key}
         mod-loading={loading}
         onChange={action}
         parser={this}
       />
     );
   }
 
-  staticSelect(element, context) {
+  staticSelect(element, context, key) {
     const [{ loading }, action] = useBlockContext(element, context);
-    return <StaticSelect {...element} mod-loading={loading} onChange={action} parser={this} />;
+    return <StaticSelect key={key} {...element} mod-loading={loading} onChange={action} parser={this} />;
   }
 
-  selectInput(element, context) {
+  selectInput(element, context, key) {
     const [{ loading }, action] = useBlockContext(element, context);
     return (
-      <SelectInput onChange={action} mod-loading={loading} placeholder={element.type} disabled />
+      <SelectInput key={key} onChange={action} mod-loading={loading} placeholder={element.type} disabled />
     );
   }
 }