fix: withRichContent prop split to fit in different contexts (#401)

RocketChat · Feb 22, 2021 · 22ca229 · 22ca229
1 parent 79405d3
commit 22ca229
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 9 deletions.
diff --git a/packages/fuselage/fuselage.d.ts b/packages/fuselage/fuselage.d.ts
@@ -142,7 +142,7 @@ declare module '@rocket.chat/fuselage' {
 
     elevation?: '0' | '1' | '2';
     invisible?: boolean;
-    withRichContent?: boolean;
+    withRichContent?: boolean | string;
     withTruncatedText?: boolean;
     size?: CSSProperties['blockSize'];
     minSize?: CSSProperties['blockSize'];

diff --git a/packages/fuselage/src/components/Box/index.js b/packages/fuselage/src/components/Box/index.js
@@ -52,14 +52,22 @@ export const useBoxOnlyProps = (props) => {
   }
 
   if (props.withRichContent) {
-    props.className = prependClassName(
-      props.className,
-      'rcx-box--with-inline-elements'
-    );
-    props.className = prependClassName(
-      props.className,
-      'rcx-box--with-block-elements'
-    );
+    if (props.withRichContent === 'inlineWithoutBreaks') {
+      props.className = prependClassName(
+        props.className,
+        'rcx-box--with-inline-elements'
+      );
+    } else {
+      props.className = prependClassName(
+        props.className,
+        'rcx-box--with-inline-elements'
+      );
+
+      props.className = prependClassName(
+        props.className,
+        'rcx-box--with-block-elements'
+      );
+    }
   }
 
   delete props.withRichContent;

diff --git a/packages/fuselage/src/styles/primitives/traits/rich-text.scss b/packages/fuselage/src/styles/primitives/traits/rich-text.scss
@@ -101,6 +101,38 @@
     }
   }
 
+  ul,
+  ol {
+    display: inline-flex;
+  }
+
+  li {
+    display: list-item;
+
+    margin-inline-start: lengths.margin(24);
+    margin-inline-end: lengths.margin(8);
+
+    &:first-child {
+      margin-inline-start: lengths.margin(16);
+    }
+  }
+
+  ul {
+    list-style-type: disc;
+
+    span {
+      margin-inline-end: lengths.margin(8);
+    }
+
+    input {
+      vertical-align: middle;
+    }
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
   code {
     display: inline;
 
@@ -288,11 +320,17 @@
   li {
     display: list-item;
 
+    margin-inline-start: lengths.margin(0);
+
     text-align: inherit;
 
     color: inherit;
 
     font: inherit;
+
+    &:first-child {
+      margin-inline-start: lengths.margin(0);
+    }
   }
 
   pre {