diff --git a/packages/fuselage/fuselage.d.ts b/packages/fuselage/fuselage.d.ts index a3f6d0cfac..0e698f7440 100644 --- 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 index 6a6d5d7f5e..5d74a5f16f 100644 --- 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 index 351aebc9cb..e715cf033f 100644 --- 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 {