Apps nav tool #14815
Draft
Apps nav tool #14815
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Creates a type to represent the apps nav as it currently appears in `guardian/cross-platform-navigation`. Also adds a fixture taken from that repo, for testing.
Add a component to display the apps nav, and corresponding stories.
Adds three buttons to each section: - Delete: deletes the section - Insert Into: inserts a new section as a subsection of the current one - Insert After: inserts a new section adjacent to the current one Also introduces a way to keep track of changes, and two buttons to work with this history: - Undo: undoes the last change - Reset: undoes all changes, reverting to the initial state
Switched to an icon-only version of the inline section buttons, and aligned them to appear before the section titles, making the UI more regular. The 'Insert After' button moves to the top menu, is renamed "Add Section", and now reuses the `insertInto` action. The `insertAfter` action is removed. The top menu now uses a `menu` element. Swapped the icons used for "Undo" and "Reset".
Simpler UX.
Rename to `StatusMessage`.
github-actions
bot
removed
the
run_chromatic
Fixes a bug where the state for the form fields wasn't being populated by the initial values coming from props. As the form was always rendered, regardless of whether anything was currently being edited, the initial values coming from the props and passed to the `useState` calls were empty. Then when a particular section was selected, these props changed to reflect the data from that section. However, `useState` only uses the initial values from the *first render*, so it was ignoring these updated props, and retaining the empty values. The solution is not to render the form while nothing is being edited, and then render it when a section is selected for editing. That way each time a section is selected for editing, the form is considered a new addition to the tree, and therefore the initial data coming from props on the "first render" is the section data.
Fixes a bug where the state for the form fields was being populated by the data from the previous section added. As the form is always rendered, regardless of whether anything is currently being inserted, the state shown in the form fields and managed by `useState` persists for the lifetime of the application. The first time someone adds a section, the fields are empty. But if they're filled out, the section inserted, and then the form is opened again to insert another section, it still retains the values from the previous section added. The solution is not to render the form while nothing is being inserted, and then render it when the "Add Section" button is clicked. That way each time the form appears it is considered a new addition to the tree, and therefore the initial, empty data coming from props on the "first render" is used to populate the state.
github-actions
bot
removed
the
run_chromatic
This was referenced Nov 14, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Experimental nav tool, nowhere near ready. This draft PR exists just to get a Chromatic build for testing.
Note: The lint failure is expected.