particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Wizard: Spacing between footer buttons on Review step

Browse source
This commit is contained in:
regexowl 2025-05-27 17:15:42 +02:00 • committed by Lucas Garfield
parent 4f339aec8f
commit 7039db2585
1 changed files with 58 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

113
src/Components/CreateImageWizard/steps/Review/Footer/Footer.tsx
View file

@ -3,6 +3,7 @@ import React, { useState, useEffect } from 'react';
import {
Button,
Dropdown,
Flex,
MenuToggle,
WizardFooterWrapper,
useWizardContext,
@ -66,61 +67,63 @@ const ReviewWizardFooter = () => {
return (
<WizardFooterWrapper>
<Dropdown
isOpen={isOpen}
onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
variant="primary"
ref={toggleRef}
onClick={onToggleClick}
isExpanded={isOpen}
isDisabled={!isValid}
splitButtonItems={
composeId
? [
<EditSaveButton
key="wizard-edit-save-btn"
getBlueprintPayload={getBlueprintPayload}
setIsOpen={setIsOpen}
blueprintId={composeId}
isDisabled={!isValid}
/>,
]
: [
<CreateSaveButton
key="wizard-create-save-btn"
getBlueprintPayload={getBlueprintPayload}
setIsOpen={setIsOpen}
isDisabled={!isValid}
/>,
]
}
/>
)}
shouldFocusToggleOnSelect
>
{composeId ? (
<EditSaveAndBuildBtn
getBlueprintPayload={getBlueprintPayload}
setIsOpen={setIsOpen}
blueprintId={composeId}
isDisabled={!isValid}
/>
) : (
<CreateSaveAndBuildBtn
getBlueprintPayload={getBlueprintPayload}
setIsOpen={setIsOpen}
isDisabled={!isValid}
/>
)}
</Dropdown>
<Button variant="secondary" onClick={goToPrevStep}>
Back
</Button>
<Button variant="link" onClick={close}>
Cancel
</Button>
<Flex columnGap={{ default: 'columnGapSm' }}>
<Dropdown
isOpen={isOpen}
onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
variant="primary"
ref={toggleRef}
onClick={onToggleClick}
isExpanded={isOpen}
isDisabled={!isValid}
splitButtonItems={
composeId
? [
<EditSaveButton
key="wizard-edit-save-btn"
getBlueprintPayload={getBlueprintPayload}
setIsOpen={setIsOpen}
blueprintId={composeId}
isDisabled={!isValid}
/>,
]
: [
<CreateSaveButton
key="wizard-create-save-btn"
getBlueprintPayload={getBlueprintPayload}
setIsOpen={setIsOpen}
isDisabled={!isValid}
/>,
]
}
/>
)}
shouldFocusToggleOnSelect
>
{composeId ? (
<EditSaveAndBuildBtn
getBlueprintPayload={getBlueprintPayload}
setIsOpen={setIsOpen}
blueprintId={composeId}
isDisabled={!isValid}
/>
) : (
<CreateSaveAndBuildBtn
getBlueprintPayload={getBlueprintPayload}
setIsOpen={setIsOpen}
isDisabled={!isValid}
/>
)}
</Dropdown>
<Button variant="secondary" onClick={goToPrevStep}>
Back
</Button>
<Button variant="link" onClick={close}>
Cancel
</Button>
</Flex>
</WizardFooterWrapper>
);
};