fix(striker-ui): add edge prop to inline mono text

main
Tsu-ba-me 1 year ago
parent 8c380db940
commit f51af47b51
  1. 2
      striker-ui/components/Text/BodyText.tsx
  2. 31
      striker-ui/components/Text/InlineMonoText.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<BodyTextOptionalProps> = {
edge: null,
inheritColour: false,
inline: false,
inverted: false,

@ -1,21 +1,30 @@
import { FC } from 'react';
import { FC, useMemo } from 'react';
import { BodyTextProps } from './BodyText';
import SmallText from './SmallText';
const InlineMonoText: FC<BodyTextProps> = ({ sx, ...bodyTextRestProps }) => (
<SmallText
{...{
...bodyTextRestProps,
monospaced: true,
sx: {
const InlineMonoText: FC<BodyTextProps> = ({
edge,
sx,
...bodyTextRestProps
}) => {
const paddingLeft = useMemo(() => (edge === 'start' ? 0 : undefined), [edge]);
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 <SmallText monospaced sx={combinedSx} {...bodyTextRestProps} />;
};
export default InlineMonoText;

Loading…
Cancel
Save