1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-01 13:47:27 +02:00

get rid of p > p errors

This commit is contained in:
Thomas Heartman 2025-07-02 11:46:45 +02:00
parent 80b0ace426
commit edbd25fd5f
8 changed files with 44 additions and 33 deletions

View File

@ -1,8 +1,8 @@
import type { FC, ReactNode } from 'react'; import type { FC, ReactNode } from 'react';
import { Box, styled } from '@mui/material'; import { styled } from '@mui/material';
import { ChangeItemInfo, ChangeItemWrapper } from './Change.styles.tsx'; import { ChangeItemInfo, ChangeItemWrapper } from './Change.styles.tsx';
const ArchiveBox = styled(Box)(({ theme }) => ({ const ArchiveBox = styled('span')(({ theme }) => ({
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
color: theme.palette.error.main, color: theme.palette.error.main,

View File

@ -1,9 +1,11 @@
import { styled, Typography } from '@mui/material'; import { styled, Typography } from '@mui/material';
import type { PropsWithChildren } from 'react'; import type { PropsWithChildren } from 'react';
const Action = styled(Typography)(({ theme }) => ({ export const Action = styled(({ children, ...props }: PropsWithChildren) => (
whiteSpace: 'nowrap', <Typography component='span' {...props}>
})); {children}
</Typography>
))(({ theme }) => ({}));
export const Deleted = styled(Action)(({ theme }) => ({ export const Deleted = styled(Action)(({ theme }) => ({
color: theme.palette.error.main, color: theme.palette.error.main,

View File

@ -1,6 +1,4 @@
import type { FC } from 'react'; import type { FC } from 'react';
import { styled } from '@mui/material';
import { textTruncated } from 'themes/themeStyles';
import { NameWithChangeInfo } from './NameWithChangeInfo/NameWithChangeInfo.tsx'; import { NameWithChangeInfo } from './NameWithChangeInfo/NameWithChangeInfo.tsx';
type ChangeSegmentNameProps = { type ChangeSegmentNameProps = {
@ -8,17 +6,7 @@ type ChangeSegmentNameProps = {
previousName?: string; previousName?: string;
}; };
const Truncated = styled('div')(() => ({
...textTruncated,
maxWidth: 500,
display: 'flex',
}));
export const ChangeSegmentName: FC<ChangeSegmentNameProps> = ({ export const ChangeSegmentName: FC<ChangeSegmentNameProps> = ({
name, name,
previousName, previousName,
}) => ( }) => <NameWithChangeInfo previousName={previousName} newName={name} />;
<Truncated>
<NameWithChangeInfo previousName={previousName} newName={name} />
</Truncated>
);

View File

@ -96,7 +96,7 @@ export const EnvironmentStrategyExecutionOrder = ({
<ChangeContent> <ChangeContent>
<ChangeItemWrapper> <ChangeItemWrapper>
<ChangeItemInfo> <ChangeItemInfo>
<p>Updating strategy execution order to</p> <span>Updating strategy execution order to</span>
</ChangeItemInfo> </ChangeItemInfo>
<div> <div>
<TabList> <TabList>

View File

@ -3,7 +3,7 @@ import { Typography, styled } from '@mui/material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { textTruncated } from 'themes/themeStyles'; import { textTruncated } from 'themes/themeStyles';
const Truncated = styled('div')(() => ({ const Truncated = styled('span')(() => ({
...textTruncated, ...textTruncated,
maxWidth: 500, maxWidth: 500,
})); }));
@ -30,7 +30,7 @@ export const NameWithChangeInfo: FC<{
condition={Boolean(newName)} condition={Boolean(newName)}
show={ show={
<Truncated> <Truncated>
<Typography>{newName}</Typography> <Typography component='span'>{newName}</Typography>
</Truncated> </Truncated>
} }
/> />

View File

@ -47,10 +47,11 @@ const DeleteReleasePlan: FC<{
sx={(theme) => ({ sx={(theme) => ({
color: theme.palette.error.main, color: theme.palette.error.main,
})} })}
component='span'
> >
- Deleting release plan - Deleting release plan
</Typography> </Typography>
<Typography>{releasePlan.name}</Typography> <Typography component='span'>{releasePlan.name}</Typography>
{actions} {actions}
</ChangeItemInfo> </ChangeItemInfo>
</ChangeItemWrapper> </ChangeItemWrapper>
@ -86,10 +87,12 @@ const StartMilestone: FC<{
<Tabs> <Tabs>
<ChangeItemWrapper> <ChangeItemWrapper>
<ChangeItemInfo> <ChangeItemInfo>
<Typography color='success.dark'> <Typography component='span' color='success.dark'>
+ Start milestone + Start milestone
</Typography> </Typography>
<Typography>{newMilestone.name}</Typography> <Typography component='span'>
{newMilestone.name}
</Typography>
</ChangeItemInfo> </ChangeItemInfo>
<div> <div>
<TabList> <TabList>
@ -158,10 +161,12 @@ const AddReleasePlan: FC<{
<> <>
<ChangeItemWrapper> <ChangeItemWrapper>
<ChangeItemInfo> <ChangeItemInfo>
<Typography color='success.dark'> <Typography component='span' color='success.dark'>
+ Adding release plan + Adding release plan
</Typography> </Typography>
<Typography>{planPreview.name}</Typography> <Typography component='span'>
{planPreview.name}
</Typography>
{actions} {actions}
</ChangeItemInfo> </ChangeItemInfo>
</ChangeItemWrapper> </ChangeItemWrapper>
@ -174,7 +179,7 @@ const AddReleasePlan: FC<{
<Tabs> <Tabs>
<ChangeItemWrapper> <ChangeItemWrapper>
<ChangeItemInfo> <ChangeItemInfo>
<Typography> <Typography component='span'>
Replacing{' '} Replacing{' '}
<TooltipLink <TooltipLink
tooltip={ tooltip={
@ -203,7 +208,7 @@ const AddReleasePlan: FC<{
</TooltipLink>{' '} </TooltipLink>{' '}
release plan with release plan with
</Typography> </Typography>
<Typography>{planPreview.name}</Typography> <Typography component='span'>{planPreview.name}</Typography>
</ChangeItemInfo> </ChangeItemInfo>
<div> <div>
<TabList> <TabList>

View File

@ -77,6 +77,7 @@ export const SegmentChangeDetails: FC<{
<ChangeItemWrapper> <ChangeItemWrapper>
<ChangeItemInfo> <ChangeItemInfo>
<Typography <Typography
component='span'
sx={(theme) => ({ sx={(theme) => ({
color: theme.palette.error.main, color: theme.palette.error.main,
})} })}
@ -112,7 +113,9 @@ export const SegmentChangeDetails: FC<{
/> />
<ChangeItemCreateEditWrapper> <ChangeItemCreateEditWrapper>
<ChangeItemInfo> <ChangeItemInfo>
<Typography>Editing segment</Typography> <Typography component='span'>
Editing segment
</Typography>
<ChangeSegmentName name={change.payload.name} /> <ChangeSegmentName name={change.payload.name} />
</ChangeItemInfo> </ChangeItemInfo>
{actionsWithTabs} {actionsWithTabs}

View File

@ -84,18 +84,30 @@ const EditHeader: FC<{
willBeDisabled?: boolean; willBeDisabled?: boolean;
}> = ({ wasDisabled = false, willBeDisabled = false }) => { }> = ({ wasDisabled = false, willBeDisabled = false }) => {
if (wasDisabled && willBeDisabled) { if (wasDisabled && willBeDisabled) {
return <Typography color='text.secondary'>Editing strategy</Typography>; return (
<Typography component='span' color='text.secondary'>
Editing strategy
</Typography>
);
} }
if (!wasDisabled && willBeDisabled) { if (!wasDisabled && willBeDisabled) {
return <Typography color='error.dark'>Editing strategy</Typography>; return (
<Typography component='span' color='error.dark'>
Editing strategy
</Typography>
);
} }
if (wasDisabled && !willBeDisabled) { if (wasDisabled && !willBeDisabled) {
return <Typography color='success.dark'>Editing strategy</Typography>; return (
<Typography component='span' color='success.dark'>
Editing strategy
</Typography>
);
} }
return <Typography>Editing strategy</Typography>; return <Typography component='span'>Editing strategy</Typography>;
}; };
const hasDiff = (object: unknown, objectToCompare: unknown) => const hasDiff = (object: unknown, objectToCompare: unknown) =>
@ -125,6 +137,7 @@ const DeleteStrategy: FC<{
<ChangeItemCreateEditDeleteWrapper> <ChangeItemCreateEditDeleteWrapper>
<ChangeItemInfo> <ChangeItemInfo>
<Typography <Typography
component='span'
sx={(theme) => ({ sx={(theme) => ({
color: theme.palette.error.main, color: theme.palette.error.main,
})} })}