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

Controls: Fix UI to add array items #22993

Merged
merged 3 commits into from
Jun 27, 2023
Merged

Conversation

sookmax
Copy link
Contributor

@sookmax sookmax commented Jun 9, 2023

Closes #22903

What I did

I applied the same style to .rejt-array-node > span > * as .rejt-object-node > span > *

The bug was caused by the plus button being not clickable because it is obscured by the pseudo element in the same level (.rejt-not-collapsed::before), which is absolutely positioned with z-index 1. So by applying position: relative and z-index: 2 to the selector .rejt-array-node > span > *, the plus button can now be interacted if the object is an array as well.

How to test

  1. Run a sandbox for template, e.g. yarn task --task sandbox --start-from auto --template react-vite/default-ts
  2. Add some test array to the primary story in sandbox/react-vite-default-ts/src/stories/Button.stories.ts
// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
    array: [{
      a: 1,
      b: "2",
      c: false
    }, {
      a: 2,
      b: "3",
      c: true
    }]
  },
};
  1. Go over to Controls panel for Primary story and look for array field.
  2. Interact with the plus button in the first line and see if it works.

Checklist

  • Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
  • Make sure to add/update documentation regarding your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Maintainers

  • If this PR should be tested against many or all sandboxes,
    make sure to add the ci:merged or ci:daily GH label to it.
  • Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]

@sookmax sookmax requested a review from a team as a code owner June 9, 2023 04:17
@yannbf yannbf self-assigned this Jun 12, 2023
@yannbf yannbf added bug patch:yes Bugfix & documentation PR that need to be picked to main branch addon: controls labels Jun 12, 2023
@shilman shilman changed the title fix: add array items in controls Controls: Fix UI to add array items Jun 12, 2023
@yannbf
Copy link
Member

yannbf commented Jun 27, 2023

Thank you so much for your contribution @sookmax <3

@yannbf yannbf merged commit 4f7342b into storybookjs:next Jun 27, 2023
JReinhold pushed a commit that referenced this pull request Jul 2, 2023
Controls: Fix UI to add array items
(cherry picked from commit 4f7342b)
@github-actions github-actions bot mentioned this pull request Jul 2, 2023
15 tasks
@github-actions github-actions bot added the patch:done Patch/release PRs already cherry-picked to main/release branch label Jul 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
addon: controls bug patch:done Patch/release PRs already cherry-picked to main/release branch patch:yes Bugfix & documentation PR that need to be picked to main branch
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: The button to add the properties of the array is not pressed
3 participants