Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-01 13:47:27 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/component/common/FormTemplate/FormTemplate.tsx
View File

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

1
frontend/src/component/project/Project/CreateProject/CreateProjectDialog/CreateProjectDialog.tsx
View File

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