8000 JSON schema form visual improvements by gusevda · Pull Request #4053 · giantswarm/happa · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

JSON schema form visual improvements #4053

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 10 commits into from
Feb 2, 2023
Merged

JSON schema form visual improvements #4053

merged 10 commits into from
Feb 2, 2023

Conversation

gusevda
Copy link
Contributor
@gusevda gusevda commented Jan 31, 2023 •
edited
Loading

What does this PR do?

  1. Index postfix No. 1, No. 2 was added to the array field item titles.

  2. Checkbox styles were changed so the label is displayed inline with the checkbox.

  3. Several visual improvements were added:

  • Clickable area of accordion labels is now limited to the content of a label. Before, the whole header row was clickable.
  • Clickable area of an array "Add item" button was fixed. It used to take the whole width of the container.
  • Fields labels and descriptions were refactored so their templates are reused between components.

How does it look like?

Array field when items don't have a title:
Screenshot 2023-01-31 at 16 18 24

Array field when items have a title:
Screenshot 2023-01-31 at 16 20 45

Boolean field:
Screenshot 2023-02-01 at 15 26 50

Any background context you can provide?

Towards giantswarm/roadmap#1181.

@gusevda gusevda changed the title JSON schema form improvements JSON schema form visual improvements Jan 31, 2023
@marians
Copy link
Member
marians commented Jan 31, 2023

Just noticed that in this version title and description of boolean fields are not shown. Not sure it's in this branch or in the main branch

image

Here is the latest release in comparison:

image

@gusevda gusevda mentioned this pull request Feb 1, 2023
Closed
41 tasks
@gusevda gusevda force-pushed the json-schema-form-label-improvements branch from d26a468 to f371fce Compare February 1, 2023 09:01
@gusevda
Copy link
Contributor Author
gusevda commented Feb 1, 2023

As part of our experimentations with custom widgets we added ToggleWidget that can be used for boolean fields instead of simple checkbox. Currently it wasn't used anywhere and I'm thinking if we should keep it or remove it.
Here is how it looks like
Screenshot 2023-02-01 at 10 57 51
and to use it, this uiSchema settings should be set:

disabled: {
        'ui:widget': 'toggle',
        'ui:options': {
          label: false,
        },
},

@marians, @kuosandys what do you think?

@kuosandys
Copy link
Contributor

As part of our experimentations with custom widgets we added ToggleWidget that can be used for boolean fields instead of simple checkbox. Currently it wasn't used anywhere and I'm thinking if we should keep it or remove it.

I don't really see a use case for the ToggleWidget besides boolean fields, and I think it's best to be consistent in representing boolean fields. If we've decided in the specs to use checkboxes going forward, then I think we can remove it from the codebase.

@marians
Copy link
Member
marians commented Feb 1, 2023

We haven't made our own spec for this. Anyway, I think that a checkbox is better suited than the toggle control. The latter makes me wonder whether e. g. I can simply click it, or have to click and drag. +1 for using the checkbox. However I can't figure out yet what is title, description, and what happens if both are missing.

@gusevda
Copy link
Contributor Author
gusevda commented Feb 1, 2023

Ok, thanks, I'm going to delete ToggleWidget from the code base. @marians regarding title and description, here is how it looks like for this schema (first field is boolean without title and description, second one - with title and description)

"active": {
    "type": "boolean"
},
"enabled": {
    "description": "Boolean field with title and description.",
    "title": "Enabled",
    "type": "boolean"
}

Screenshot 2023-02-01 at 15 26 50

@marians
Copy link
Member
marians commented Feb 1, 2023

That looks good to me!

@gusevda gusevda force-pushed the json-schema-form-label-improvements branch from f371fce to bdeadd9 Compare February 1, 2023 14:16
@gusevda gusevda marked this pull request as ready for review February 1, 2023 14:27
@gusevda gusevda requested a review from a team February 1, 2023 14:27
@gusevda gusevda merged commit 486e745 into main Feb 2, 2023
@gusevda gusevda deleted the json-schema-form-label-improvements branch February 2, 2023 06:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kuosandys kuosandys kuosandys approved these changes

Assignees

@gusevda gusevda

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@gusevda @marians @kuosandys
0