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. 37
      striker-ui/components/Text/InlineMonoText.tsx

@ -7,6 +7,7 @@ import {
import { BLACK, TEXT, UNSELECTED } from '../../lib/consts/DEFAULT_THEME'; import { BLACK, TEXT, UNSELECTED } from '../../lib/consts/DEFAULT_THEME';
type BodyTextOptionalProps = { type BodyTextOptionalProps = {
edge?: 'start' | 'end' | null;
inheritColour?: boolean; inheritColour?: boolean;
inline?: boolean; inline?: boolean;
inverted?: boolean; inverted?: boolean;
@ -20,6 +21,7 @@ type BodyTextProps = MUITypographyProps & BodyTextOptionalProps;
const BODY_TEXT_CLASS_PREFIX = 'BodyText'; const BODY_TEXT_CLASS_PREFIX = 'BodyText';
const BODY_TEXT_DEFAULT_PROPS: Required<BodyTextOptionalProps> = { const BODY_TEXT_DEFAULT_PROPS: Required<BodyTextOptionalProps> = {
edge: null,
inheritColour: false, inheritColour: false,
inline: false, inline: false,
inverted: false, inverted: false,

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

Loading…
Cancel
Save