Skip to content

Controls: Fix UI to add array items#22993

Merged
yannbf merged 3 commits into
storybookjs:nextfrom
sookmax:fix-array-item-add
Jun 27, 2023
Merged

Controls: Fix UI to add array items#22993
yannbf merged 3 commits into
storybookjs:nextfrom
sookmax:fix-array-item-add

Conversation

@sookmax
Copy link
Copy Markdown
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
Copy Markdown
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
@ndelangen ndelangen removed the patch:yes Bugfix & documentation PR that need to be picked to main branch label Oct 28, 2025
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

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