Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add resize to document field #7729

Merged
merged 6 commits into from
Jul 26, 2022
Merged

Add resize to document field #7729

merged 6 commits into from
Jul 26, 2022

Conversation

Achisingh
Copy link
Contributor

@Achisingh Achisingh commented Jul 20, 2022

This pull request changes the document field editor’s default overflow behaviour to align with Keystone's other multi-line text field display mode in the Item view – supporting a fixed height and resizable container instead of an unbounded height for the field.

Justification:

Prior to this PR, the user would be burdened with having to view the entire contents of any document field instance in the item view. The existing approach:

  • made it hard for users to discern where the form ends and the input begins (e.g. document field values can be styled to look like a field's label)
  • forced the user into a lot of scrolling when:
    • there was a lot of content in the field
    • and/or when there were multiple document field instances within the form

This PR changes that behaviour to contain the input contents in a fixed height container with a border that demarcates the input area from the form container.

The user has two progressive disclosure options to view more:

  • [NEW] Click and drag the resize handle to see more contents within the form
  • [EXISTING] Click the "Expand" button located on the right side of the control bar to edit the field in full-screen mode

A video of the new behaviour

Screen.Recording.2022-07-26.at.10.42.19.am.mov

@changeset-bot

This comment was marked as outdated.

@vercel

This comment was marked as outdated.

@codesandbox-ci

This comment was marked as outdated.

@vercel vercel bot temporarily deployed to Preview July 21, 2022 00:12 Inactive
@vercel vercel bot temporarily deployed to Preview July 21, 2022 00:35 Inactive
@vercel vercel bot temporarily deployed to Preview July 22, 2022 10:11 Inactive
@vercel vercel bot temporarily deployed to Preview July 25, 2022 01:08 Inactive
@Achisingh Achisingh marked this pull request as ready for review July 25, 2022 01:15
Copy link
Contributor

@raveling raveling left a comment

Choose a reason for hiding this comment

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

Looks great thank you!

@vercel vercel bot temporarily deployed to Preview July 26, 2022 03:37 Inactive
@dcousens dcousens merged commit 36ed1e7 into main Jul 26, 2022
@dcousens dcousens deleted the document-field-ui-fix branch July 26, 2022 03:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants