mirror of
https://github.com/Unleash/unleash.git
synced 2025-10-27 11:02:16 +01:00
2dc7cbaa31
Adds "change:" to the beginning of all changes and does some work to align the use of compononents and structure across them (supersedes https://github.com/Unleash/unleash/pull/10260). In doing so, I have also added new and legacy variants for all different change components, because this has required some hierarchy restructuring every now and then. A reason for doing that was adding the correct wrapping behavior for components, such that on smaller screens, we wouldn't entirely blow out and make the kebab menu invisible and inaccessible. It also makes it so that we switch to full-width change view earlier (at breakpoint md instead of sm), because at sm, a lot of stuff got hidden before we switched to full-width. Most changes are trivial updates; I've called out bits of the code that are not in comments. Rendered, it looks like this: <img width="1203" alt="image" src="https://github.com/user-attachments/assets/36bed974-99da-4d8d-a881-ea9df7797210" /> One interesting and potentially quite useful side-effect, is that all change types now use the exact same set of components in the same fashion, as evidenced by this screenie where I've added outlines to the hierarchy: <img width="1020" alt="image" src="https://github.com/user-attachments/assets/685fefcc-af7e-4697-b8f3-8260af1e2a84" /> The one difference is that components without a diff place the "more" kebab menu one layer further inside to facilitate prettier wrapping (the kebab menu can stay on the same line as the other text when wrapping): <img width="238" alt="image" src="https://github.com/user-attachments/assets/2b8d3174-06a8-4ad4-b366-cea97720deda" />
54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
import { styled, Typography, type TypographyProps } from '@mui/material';
|
|
import type { FC, PropsWithChildren } from 'react';
|
|
|
|
export const Action: FC<TypographyProps> = ({ children, ...props }) => (
|
|
<Typography component='span' {...props}>
|
|
{children}
|
|
</Typography>
|
|
);
|
|
|
|
export const Deleted = styled(Action)(({ theme }) => ({
|
|
color: theme.palette.error.main,
|
|
'::before': { content: '"- "' },
|
|
}));
|
|
|
|
export const Added = styled(Action)(({ theme }) => ({
|
|
'::before': { content: '"+ "' },
|
|
color: theme.palette.success.dark,
|
|
}));
|
|
|
|
export const AddedStrategy = styled(Added, {
|
|
shouldForwardProp: (prop) => prop !== 'disabled',
|
|
})<{ disabled?: boolean }>(({ theme, disabled }) => ({
|
|
color: disabled ? theme.palette.text.secondary : undefined,
|
|
}));
|
|
|
|
const Change = styled('span')({
|
|
fontWeight: 'bold',
|
|
});
|
|
|
|
export const ChangeItemInfo = styled(
|
|
({ children, ...props }: PropsWithChildren) => (
|
|
<Typography {...props}>
|
|
<Change>Change: </Change>
|
|
{children}
|
|
</Typography>
|
|
),
|
|
)(({ theme }) => ({
|
|
display: 'flex',
|
|
justifyItems: 'flex-start',
|
|
flexFlow: 'row wrap',
|
|
alignItems: 'center',
|
|
flex: 'auto',
|
|
columnGap: `1ch`,
|
|
rowGap: theme.spacing(0.5),
|
|
}));
|
|
|
|
export const ChangeItemWrapper = styled('div')(({ theme }) => ({
|
|
display: 'flex',
|
|
flexFlow: 'row wrap',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
gap: theme.spacing(1),
|
|
}));
|