feat(structure): document panel UI updates #8622

pedrobonamin · 2025-02-13T08:20:33Z

Description

This PR updates the document panel UI
TLDR;

Title and tabs are now in the same line, taking less vertical space.
Banners are rounded and have padding surrounding them, creating a more compelling effect.
Footer is also rounded to match the banners design and the footer border is removed
The inspector panel takes full height, the width occupied by the title and the footer when the inspector is open is reduced.
Footer Call To Action button size reduced.

Before	After

The Create banners are also updated, this shows the new designs.

Start in Create	Linked document

Mobile view
The mobile view was updated to include a dropdown instead of the tabs for the different views.
Also, the perspectives badges for the documents have a fade scroll view, they don't wrap anymore in the flex container

What to review

Testing

Notes for release

vercel · 2025-02-13T08:20:38Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
page-building-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 18, 2025 11:47am
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 18, 2025 11:47am
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 18, 2025 11:47am

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Feb 18, 2025 11:47am
test-next-studio	⬜️ Ignored (Inspect)			Feb 18, 2025 11:47am

github-actions · 2025-02-13T08:25:52Z

No changes to documentation

github-actions · 2025-02-13T08:26:31Z

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	42.92%	54839 / 127752
🔵	Statements	42.92%	54839 / 127752
🔵	Functions	48.05%	2788 / 5802
🔵	Branches	79.45%	10614 / 13359

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/sanity/src/core/create/components/CreateLinkedActions.tsx	26.19%	100%	0%	26.19%	15-52
packages/sanity/src/core/create/components/StartInCreateBanner.tsx	17.85%	100%	0%	17.85%	26-155
packages/sanity/src/structure/components/pane/PaneFooter.styles.tsx	100%	100%	100%	100%
packages/sanity/src/structure/components/pane/PaneHeader.styles.tsx	72%	66.66%	100%	72%	63-105
packages/sanity/src/structure/components/pane/PaneHeader.tsx	80.24%	48%	33.33%	80.24%	58-59, 63-64, 97-99, 114-124
packages/sanity/src/structure/panes/document/document-layout/DocumentLayout.tsx	15.25%	100%	0%	15.25%	56-231
packages/sanity/src/structure/panes/document/document-layout/DocumentLayoutFooter.tsx	27.27%	100%	0%	27.27%	28-74
packages/sanity/src/structure/panes/document/documentPanel/DocumentPanel.tsx	13.87%	100%	0%	13.87%	51-62, 65-289
packages/sanity/src/structure/panes/document/documentPanel/banners/Banner.tsx	95.23%	40%	100%	95.23%	40
packages/sanity/src/structure/panes/document/documentPanel/banners/CreateLinkedBanner.tsx	28.57%	100%	0%	28.57%	7-19
packages/sanity/src/structure/panes/document/documentPanel/banners/DraftLiveEditBanner.tsx	18.86%	100%	0%	18.86%	24-79
packages/sanity/src/structure/panes/document/documentPanel/header/DocumentHeaderTabs.tsx	8.33%	100%	0%	8.33%	10-109
packages/sanity/src/structure/panes/document/documentPanel/header/DocumentPanelHeader.tsx	11.21%	100%	0%	11.21%	43-68, 72-276, 286-302, 310-344
packages/sanity/src/structure/panes/document/documentPanel/header/DocumentPanelSubHeader.tsx	28.88%	100%	0%	28.88%	19-66
packages/sanity/src/structure/panes/document/inspectors/changes/ChangesTabs.tsx	19.75%	100%	0%	19.75%	25, 28-105
packages/sanity/src/structure/panes/document/statusBar/ActionMenuButton.tsx	11.11%	100%	0%	11.11%	31-50, 56-109, 121-147
packages/sanity/src/structure/panes/document/statusBar/DocumentStatusBar.tsx	19.27%	100%	0%	19.27%	33-117
packages/sanity/src/structure/panes/document/statusBar/DocumentStatusBarActions.tsx	12.84%	100%	0%	12.84%	29-91, 94-140, 143-173, 176-179
packages/sanity/src/structure/panes/document/statusBar/DocumentStatusLine.tsx	14.28%	100%	0%	14.28%	40-45, 52-83, 88-135, 138-153, 158-176, 184-234

Generated in workflow #30626 for commit e355083 by the Vitest Coverage Report Action

github-actions · 2025-02-13T08:33:38Z

⚡️ Editor Performance Report

Updated Tue, 18 Feb 2025 11:52:50 GMT

Benchmark	reference ^{latency of sanity@latest}	experiment ^{latency of this branch}	Δ (%) ^{latency difference}
article (title)	27.0 efps (37ms)	26.3 efps (38ms)	+1ms (+2.7%)	✅
article (body)	78.1 efps (13ms)	79.4 efps (13ms)	-0ms (-/-%)	✅
article (string inside object)	28.6 efps (35ms)	25.6 efps (39ms)	+4ms (+11.4%)	✅
article (string inside array)	24.4 efps (41ms)	22.7 efps (44ms)	+3ms (+7.3%)	✅
recipe (name)	50.0 efps (20ms)	47.6 efps (21ms)	+1ms (+5.0%)	✅
recipe (description)	55.6 efps (18ms)	55.6 efps (18ms)	+0ms (-/-%)	✅
recipe (instructions)	99.9+ efps (5ms)	99.9+ efps (5ms)	+0ms (-/-%)	✅
synthetic (title)	20.0 efps (50ms)	19.6 efps (51ms)	+1ms (+2.0%)	✅
synthetic (string inside object)	19.6 efps (51ms)	20.0 efps (50ms)	-1ms (-2.0%)	✅

efps — editor "frames per second". The number of updates assumed to be possible within a second.

Derived from input latency. efps = 1000 / input_latency

Detailed information

🏠 Reference result

The performance result of sanity@latest

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	37ms	40ms	44ms	402ms	141ms	10.6s
article (body)	13ms	16ms	20ms	144ms	213ms	5.4s
article (string inside object)	35ms	37ms	43ms	69ms	215ms	6.5s
article (string inside array)	41ms	43ms	45ms	227ms	303ms	6.7s
recipe (name)	20ms	21ms	23ms	43ms	3ms	7.0s
recipe (description)	18ms	19ms	21ms	29ms	0ms	4.4s
recipe (instructions)	5ms	7ms	7ms	9ms	0ms	3.1s
synthetic (title)	50ms	51ms	56ms	228ms	587ms	12.7s
synthetic (string inside object)	51ms	55ms	103ms	263ms	1039ms	8.3s

🧪 Experiment result

The performance result of this branch

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	38ms	43ms	47ms	134ms	82ms	11.6s
article (body)	13ms	15ms	18ms	70ms	73ms	4.7s
article (string inside object)	39ms	41ms	46ms	190ms	144ms	6.9s
article (string inside array)	44ms	46ms	48ms	236ms	356ms	7.5s
recipe (name)	21ms	23ms	26ms	51ms	0ms	7.5s
recipe (description)	18ms	18ms	20ms	30ms	0ms	4.4s
recipe (instructions)	5ms	7ms	8ms	19ms	0ms	3.1s
synthetic (title)	51ms	53ms	62ms	94ms	377ms	14.3s
synthetic (string inside object)	50ms	53ms	70ms	421ms	856ms	8.2s

📚 Glossary

column definitions

benchmark — the name of the test, e.g. "article", followed by the label of the field being measured, e.g. "(title)".

latency — the time between when a key was pressed and when it was rendered. derived from a set of samples. the median (p50) is shown to show the most common latency.

p75 — the 75th percentile of the input latency in the test run. 75% of the sampled inputs in this benchmark were processed faster than this value. this provides insight into the upper range of typical performance.

p90 — the 90th percentile of the input latency in the test run. 90% of the sampled inputs were faster than this. this metric helps identify slower interactions that occurred less frequently during the benchmark.

p99 — the 99th percentile of the input latency in the test run. only 1% of sampled inputs were slower than this. this represents the worst-case scenarios encountered during the benchmark, useful for identifying potential performance outliers.

blocking time — the total time during which the main thread was blocked, preventing user input and UI updates. this metric helps identify performance bottlenecks that may cause the interface to feel unresponsive.

test duration — how long the test run took to complete.

github-actions · 2025-02-13T08:37:09Z

Component Testing Report Updated Feb 18, 2025 11:56 AM (UTC)

❌ Failed Tests (5) -- expand for details

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	1m 23s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	14s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	❌ Failed (Inspect)	2m 41s	3	0	3
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	58s	11	7	0
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx	✅ Passed (Inspect)	0s	0	12	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	30s	6	0	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	17s	3	0	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	✅ Passed (Inspect)	31s	6	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	1m 17s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 51s	21	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	❌ Failed (Inspect)	2m 57s	20	0	1
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	14s	3	9	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	30s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	❌ Failed (Inspect)	2m 38s	20	0	1
formBuilder/tree-editing/TreeEditing.spec.tsx	✅ Passed (Inspect)	0s	0	3	0
formBuilder/tree-editing/TreeEditingNestedObjects.spec.tsx	✅ Passed (Inspect)	0s	0	3	0

pedrobonamin · 2025-02-14T12:09:07Z

packages/sanity/src/structure/panes/document/document-layout/DocumentLayout.tsx

-          {createLinkMetadata &&
-            isSanityCreateLinked(createLinkMetadata) &&
-            CreateLinkedBannerContent && (
-              <ShowWhenPaneOpen>
-                <Banner
-                  tone="transparent"
-                  data-test-id="sanity-create-read-only-banner"
-                  content={<CreateLinkedBannerContent metadata={createLinkMetadata} />}
-                />
-              </ShowWhenPaneOpen>
-            )}


This was moved to the banners into the DocumentPanel* with the rest of banners

RitaDias · 2025-02-18T08:42:09Z

@RitaDias thank you for going through this. Regarding:

@mariuslundgard @pedrobonamin : did you all clear it with the Create folks about the UI change to the banner? I remember at the time where was some discussion about the Call to Action being important as well as the reason why they did it separately from the existing banner components. I see the update doesn't have the call to action anymore nor does it follow the design they initially had. So just for my peace of mind, I'd like to know 🙏

(...)

Ahh I see what you mean, I completely missed the call to actions act the bottom. This was something I brought up as well when the create banner was first implemented. Initially, they had the buttons at the bottom on the footer as well but Product asked they move it to the banner if I'm not mistaken because it was too intrusive for normal users. So yes, I'd definitely want to just have a double check from create before we go ahead with these changes 🙏

edit: also, I was unable to test this myself on the deployed version; but before: if a user started editing the document, the banner would disappear, making it that if the user didn't want to engage with create they would just keep going about their day. Would the document actions revert back to the normal actions if the editor starts making changes in a doc? @pedrobonamin @mariusGundersen

pedrobonamin · 2025-02-18T08:49:08Z

Alright added another comment, nothing truly blocking. I think before I feel comfortable giving it a green though I just want confirmation around the create banner aspect of things I mentioned above :)

Some odd things I came across which are worth having a look at / bringing up:

the document actions don't seem to be flex end, and I feel they should?

It should definitely be flex end. I missed it, I looked to much into the mobile view.
Will fix it, thanks!!

pedrobonamin · 2025-02-18T09:03:00Z

@RitaDias thank you for going through this. Regarding:

@mariuslundgard @pedrobonamin : did you all clear it with the Create folks about the UI change to the banner? I remember at the time where was some discussion about the Call to Action being important as well as the reason why they did it separately from the existing banner components. I see the update doesn't have the call to action anymore nor does it follow the design they initially had. So just for my peace of mind, I'd like to know 🙏

(...)

Ahh I see what you mean, I completely missed the call to actions act the bottom. This was something I brought up as well when the create banner was first implemented. Initially, they had the buttons at the bottom on the footer as well but Product asked they move it to the banner if I'm not mistaken because it was too intrusive for normal users. So yes, I'd definitely want to just have a double check from create before we go ahead with these changes 🙏

edit: also, I was unable to test this myself on the deployed version; but before: if a user started editing the document, the banner would disappear, making it that if the user didn't want to engage with create they would just keep going about their day. Would the document actions revert back to the normal actions if the editor starts making changes in a doc? @pedrobonamin @mariusGundersen

Yes, it will
To test it you need to run locally the create studio. (not ideal)

cd ./sanity/dev/test-create-integration-studio
pnpm dev

Screen.Recording.2025-02-18.at.10.01.46.mov

RitaDias · 2025-02-18T09:10:39Z

Yes, it will To test it you need to run locally the create studio. (not ideal)
cd ./sanity/dev/test-create-integration-studio
pnpm dev
Screen.Recording.2025-02-18.at.10.01.46.mov

Thanks for the instructions this is very useful to know (remember?)
What I meant is that I wasn't able to test it with the updates you all have made in this PR :) meaning, with these updates, will the banner also disappear / the actions in the footer revert back like the video shows, or will we see a change of behavior where the actions will always prompt towards opening create?

(also sorry for digging into this, just want to make sure I fully understand it and it's clear, ultimately it's up to create if these changes are ok!)

pedrobonamin · 2025-02-18T09:30:45Z

Yes, it will To test it you need to run locally the create studio. (not ideal)
cd ./sanity/dev/test-create-integration-studio
pnpm dev
Screen.Recording.2025-02-18.at.10.01.46.mov
Thanks for the instructions this is very useful to know (remember?) What I meant is that I wasn't able to test it with the updates you all have made in this PR :) meaning, with these updates, will the banner also disappear / the actions in the footer revert back like the video shows, or will we see a change of behavior where the actions will always prompt towards opening create?

(also sorry for digging into this, just want to make sure I fully understand it and it's clear, ultimately it's up to create if these changes are ok!)

Yes, it will work in the same way as before.
Showing when you are starting a new document that can be linked and then going away if you start editing the document in the studio.

…rners

… designs

RitaDias · 2025-02-18T11:59:00Z

packages/sanity/src/structure/panes/document/document-layout/DocumentLayoutFooter.tsx

pedrobonamin force-pushed the sapp-2072 branch from 6d03be5 to a381f6e Compare February 13, 2025 08:40

vercel bot deployed to Preview – page-building-studio February 13, 2025 08:47 View deployment

vercel bot deployed to Preview – performance-studio February 13, 2025 08:47 View deployment

vercel bot deployed to Preview – test-studio February 13, 2025 08:47 View deployment

vercel bot deployed to Preview – performance-studio February 13, 2025 09:26 View deployment

vercel bot deployed to Preview – page-building-studio February 13, 2025 09:26 View deployment

vercel bot deployed to Preview – test-studio February 13, 2025 09:27 View deployment

pedrobonamin marked this pull request as ready for review February 14, 2025 12:03

pedrobonamin requested a review from a team as a code owner February 14, 2025 12:03

pedrobonamin requested review from RitaDias and mariuslundgard and removed request for a team February 14, 2025 12:03

pedrobonamin commented Feb 14, 2025

View reviewed changes

pedrobonamin marked this pull request as draft February 14, 2025 12:32

EoinFalconer force-pushed the next branch 2 times, most recently from 4c23995 to f99df5a Compare February 16, 2025 16:30

vercel bot deployed to Preview – performance-studio February 17, 2025 07:44 View deployment

vercel bot deployed to Preview – page-building-studio February 17, 2025 07:44 View deployment

vercel bot deployed to Preview – test-studio February 17, 2025 07:45 View deployment

vercel bot deployed to Preview – performance-studio February 17, 2025 08:31 View deployment

vercel bot deployed to Preview – page-building-studio February 17, 2025 08:31 View deployment

vercel bot deployed to Preview – test-studio February 17, 2025 08:33 View deployment

pedrobonamin force-pushed the sapp-2072 branch from dca0550 to 767739e Compare February 17, 2025 11:14

vercel bot deployed to Preview – test-studio February 17, 2025 11:22 View deployment

vercel bot deployed to Preview – performance-studio February 17, 2025 11:28 View deployment

vercel bot deployed to Preview – page-building-studio February 18, 2025 09:05 View deployment

vercel bot deployed to Preview – performance-studio February 18, 2025 09:05 View deployment

vercel bot deployed to Preview – test-studio February 18, 2025 09:06 View deployment

pedrobonamin added 13 commits February 18, 2025 11:57

feat(structure): adds document panel sub header

cf145c1

chore(structure): update document Banners, add padding and rounded co…

88d69f5

…rners

feat(structure): update document pane footer layout

232b26b

fix(structure): update usage of Create banner and footer to match new…

6ffb6fb

… designs

fix(structure): keep document pane dialogs within the document box

28d9df7

fix(core): update changes tabs vertical alignment

939c5c3

fix(structure): update draftLiveEditBanner alignment

ec39f6b

fix(create): update banners buttons size

e308f8e

fix(structure): update mobile view for document panel

3f2eff3

fix(structure): add scroller to document perspective list

794cb4b

feat(structure): add document header tabs menu item

38b58e2

fix(structure): remove document panel comments

88cf420

fix(structure): document actions position is flex end

74730a3

pedrobonamin force-pushed the sapp-2072 branch from baf1854 to 74730a3 Compare February 18, 2025 10:57

vercel bot deployed to Preview – page-building-studio February 18, 2025 11:04 View deployment

vercel bot deployed to Preview – performance-studio February 18, 2025 11:04 View deployment

vercel bot deployed to Preview – test-studio February 18, 2025 11:05 View deployment

chore(structure): split document layout footer

e355083

vercel bot deployed to Preview – performance-studio February 18, 2025 11:46 View deployment

vercel bot deployed to Preview – page-building-studio February 18, 2025 11:46 View deployment

vercel bot deployed to Preview – test-studio February 18, 2025 11:47 View deployment

RitaDias reviewed Feb 18, 2025

View reviewed changes

packages/sanity/src/structure/panes/document/document-layout/DocumentLayoutFooter.tsx Outdated

Copy link

Contributor

RitaDias Feb 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(structure): document panel UI updates #8622

feat(structure): document panel UI updates #8622

pedrobonamin commented Feb 13, 2025 •

edited

Loading

vercel bot commented Feb 13, 2025 •

edited

Loading

github-actions bot commented Feb 13, 2025

github-actions bot commented Feb 13, 2025 •

edited

Loading

github-actions bot commented Feb 13, 2025 •

edited

Loading

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

github-actions bot commented Feb 13, 2025 •

edited

Loading

pedrobonamin Feb 14, 2025

RitaDias commented Feb 18, 2025 •

edited

Loading

pedrobonamin commented Feb 18, 2025

pedrobonamin commented Feb 18, 2025 •

edited

Loading

RitaDias commented Feb 18, 2025

pedrobonamin commented Feb 18, 2025

RitaDias Feb 18, 2025

feat(structure): document panel UI updates #8622

Are you sure you want to change the base?

feat(structure): document panel UI updates #8622

Conversation

pedrobonamin commented Feb 13, 2025 • edited Loading

Description

What to review

Testing

Notes for release

vercel bot commented Feb 13, 2025 • edited Loading

github-actions bot commented Feb 13, 2025

github-actions bot commented Feb 13, 2025 • edited Loading

Coverage Report

github-actions bot commented Feb 13, 2025 • edited Loading

⚡️ Editor Performance Report

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

github-actions bot commented Feb 13, 2025 • edited Loading

pedrobonamin Feb 14, 2025

Choose a reason for hiding this comment

RitaDias commented Feb 18, 2025 • edited Loading

pedrobonamin commented Feb 18, 2025

pedrobonamin commented Feb 18, 2025 • edited Loading

RitaDias commented Feb 18, 2025

pedrobonamin commented Feb 18, 2025

RitaDias Feb 18, 2025

Choose a reason for hiding this comment

pedrobonamin commented Feb 13, 2025 •

edited

Loading

vercel bot commented Feb 13, 2025 •

edited

Loading

github-actions bot commented Feb 13, 2025 •

edited

Loading

github-actions bot commented Feb 13, 2025 •

edited

Loading

github-actions bot commented Feb 13, 2025 •

edited

Loading

RitaDias commented Feb 18, 2025 •

edited

Loading

pedrobonamin commented Feb 18, 2025 •

edited

Loading