1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-13 13:48:59 +02:00

chore: allow you to specify a width for the form sidebar

This commit is contained in:
Thomas Heartman 2024-05-27 13:04:42 +02:00
parent 02c0744fc2
commit fd0b41be74
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
2 changed files with 11 additions and 3 deletions

View File

@ -36,6 +36,7 @@ interface ICreateProps {
footer?: ReactNode;
compact?: boolean;
showGuidance?: boolean;
sidebarWidth?: string;
}
const StyledContainer = styled('section', {
@ -151,12 +152,14 @@ const StyledInfoIcon = styled(Info)(({ theme }) => ({
fill: theme.palette.primary.contrastText,
}));
const StyledSidebar = styled('aside')(({ theme }) => ({
const StyledSidebar = styled('aside', {
shouldForwardProp: (prop) => prop !== 'sidebarWidth',
})<{ sidebarWidth?: string }>(({ theme, sidebarWidth }) => ({
backgroundColor: theme.palette.background.sidebar,
padding: theme.spacing(4),
flexGrow: 0,
flexShrink: 0,
width: formTemplateSidebarWidth,
width: sidebarWidth || formTemplateSidebarWidth,
[theme.breakpoints.down(1100)]: {
width: '100%',
color: 'red',
@ -218,6 +221,7 @@ const FormTemplate: React.FC<ICreateProps> = ({
footer,
compact,
showGuidance = true,
sidebarWidth,
}) => {
const { setToastData } = useToast();
const smallScreen = useMediaQuery(`(max-width:${1099}px)`);
@ -319,6 +323,7 @@ const FormTemplate: React.FC<ICreateProps> = ({
documentationLinkLabel={documentationLinkLabel}
showDescription={showDescription}
showLink={showLink}
sidebarWidth={sidebarWidth}
>
{renderApiInfo(
formatApiCode === undefined,
@ -378,6 +383,7 @@ interface IGuidanceProps {
documentationLinkLabel?: string;
showDescription?: boolean;
showLink?: boolean;
sidebarWidth?: string;
}
const Guidance: React.FC<IGuidanceProps> = ({
@ -388,9 +394,10 @@ const Guidance: React.FC<IGuidanceProps> = ({
documentationLinkLabel = 'Learn more',
showDescription = true,
showLink = true,
sidebarWidth = undefined,
}) => {
return (
<StyledSidebar>
<StyledSidebar sidebarWidth={sidebarWidth}>
<ConditionallyRender
condition={showDescription}
show={

View File

@ -143,6 +143,7 @@ export const CreateProjectDialogue = ({
documentationLink={documentation.link?.url}
documentationLinkLabel={documentation.link?.label}
formatApiCode={formatApiCode}
sidebarWidth={'420px'}
>
<NewProjectForm
errors={errors}