TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-22 11:16:01 +03:00
Code Issues Projects Releases Wiki Activity

Admin navigation settings fix (#21323)

Browse Source 
fixes
https://linear.app/tryghost/issue/DES-73/enter-should-create-new-navigation-itemmove-to-next-field

Solves a regression where, when adding navigation items, pressing ENTER
(when on the last item in the list) no longer created a new row.

Also solves an issue where the `+` button next to the row of input
fields wasn't positioned correctly when a form error was showing (it
jumped down along with the error).
This commit is contained in:
Daniël van der Winden 2024-10-17 15:10:21 +02:00 committed by GitHub
parent 3eb6503849
commit eaed33972f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/admin-x-settings/src/components/settings/site/navigation/NavigationEditForm.tsx
View File

@ -7,6 +7,10 @@ const NavigationEditForm: React.FC<{
baseUrl: string;
navigation: NavigationEditor;
}> = ({baseUrl, navigation}) => {
const onAddItem = () => {
navigation.addItem();
};
return <div className="w-full pt-2">
<SortableList
items={navigation.items}
@ -25,7 +29,7 @@ const NavigationEditForm: React.FC<{
<div className='flex items-center gap-3'>
<Icon colorClass='text-grey-300 dark:text-grey-900 mt-1' name='add' size='sm' />
<NavigationItemEditor
action={<Button className='mx-2 mt-1 self-center rounded bg-green p-1' data-testid="add-button" icon="add" iconColorClass='text-white' size='sm' unstyled onClick={navigation.addItem} />}
action={<Button className='mx-2 mt-2.5 self-start rounded bg-green p-1' data-testid="add-button" icon="add" iconColorClass='text-white' size='sm' unstyled onClick={onAddItem} />}
baseUrl={baseUrl}
className="mt-1"
clearError={key => navigation.clearError(navigation.newItem.id, key)}
@ -33,6 +37,7 @@ const NavigationEditForm: React.FC<{
item={navigation.newItem}
labelPlaceholder="New item label"
updateItem={navigation.setNewItem}
onAddItem={onAddItem}
/>
</div>
</div>;

20
apps/admin-x-settings/src/components/settings/site/navigation/NavigationItemEditor.tsx
View File

@ -12,9 +12,17 @@ export type NavigationItemEditorProps = React.HTMLAttributes<HTMLDivElement> & {
unstyled?: boolean
textFieldClasses?: string
action?: ReactNode
onAddItem?: () => void; // New prop
}
const NavigationItemEditor: React.FC<NavigationItemEditorProps> = ({baseUrl, item, updateItem, clearError, labelPlaceholder, unstyled, textFieldClasses, action, className, ...props}) => {
const NavigationItemEditor: React.FC<NavigationItemEditorProps> = ({baseUrl, item, updateItem, clearError, labelPlaceholder, unstyled, textFieldClasses, action, className, onAddItem,...props}) => {
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
e.preventDefault();
onAddItem?.();
}
};
return (
<div className={clsx('flex w-full items-start gap-3', className)} data-testid='navigation-item-editor' {...props}>
<div className="flex flex-1 pt-1">
@ -29,7 +37,10 @@ const NavigationItemEditor: React.FC<NavigationItemEditorProps> = ({baseUrl, ite
value={item.label}
hideTitle
onChange={e => updateItem?.({label: e.target.value})}
onKeyDown={() => clearError?.('label')}
onKeyDown={(e) => {
clearError?.('label');
handleKeyDown(e);
}}
/>
</div>
<div className="flex flex-1 pt-1">
@ -44,7 +55,10 @@ const NavigationItemEditor: React.FC<NavigationItemEditorProps> = ({baseUrl, ite
value={item.url}
hideTitle
onChange={value => updateItem?.({url: value || ''})}
onKeyDown={() => clearError?.('url')}
onKeyDown={(e) => {
clearError?.('url');
handleKeyDown(e);
}}
/>
</div>
{action}