diff --git a/striker-ui/components/Text/BodyText.tsx b/striker-ui/components/Text/BodyText.tsx index 434727ed..4379f1bd 100644 --- a/striker-ui/components/Text/BodyText.tsx +++ b/striker-ui/components/Text/BodyText.tsx @@ -7,6 +7,7 @@ import { import { BLACK, TEXT, UNSELECTED } from '../../lib/consts/DEFAULT_THEME'; type BodyTextOptionalProps = { + edge?: 'start' | 'end' | null; inheritColour?: boolean; inline?: boolean; inverted?: boolean; @@ -20,6 +21,7 @@ type BodyTextProps = MUITypographyProps & BodyTextOptionalProps; const BODY_TEXT_CLASS_PREFIX = 'BodyText'; const BODY_TEXT_DEFAULT_PROPS: Required = { + edge: null, inheritColour: false, inline: false, inverted: false, diff --git a/striker-ui/components/Text/InlineMonoText.tsx b/striker-ui/components/Text/InlineMonoText.tsx index 85823d5c..da5161d3 100644 --- a/striker-ui/components/Text/InlineMonoText.tsx +++ b/striker-ui/components/Text/InlineMonoText.tsx @@ -1,21 +1,30 @@ -import { FC } from 'react'; +import { FC, useMemo } from 'react'; import { BodyTextProps } from './BodyText'; import SmallText from './SmallText'; -const InlineMonoText: FC = ({ sx, ...bodyTextRestProps }) => ( - = ({ + edge, + sx, + ...bodyTextRestProps +}) => { + const paddingLeft = useMemo(() => (edge === 'start' ? 0 : undefined), [edge]); - ...sx, - }, - }} - /> -); + const paddingRight = useMemo(() => (edge === 'end' ? 0 : undefined), [edge]); + + const combinedSx: BodyTextProps['sx'] = useMemo( + () => ({ + display: 'inline', + padding: '.1rem .3rem', + paddingLeft, + paddingRight, + + ...sx, + }), + [paddingLeft, paddingRight, sx], + ); + + return ; +}; export default InlineMonoText;