Add button_layout parameter to support CSS grid

[jodeleeuw]

This PR is trying to resolve the button layout issue in #2858.

It adds a button_layout parameter to the html-button-response plugin, and two corresponding parameters for button_rows and button_cols.

I think the grid layout is an improvement over the flex layout, so I also decided to make it the default. But flex is still supported.

If these changes look reasonable to @jspsych/core I'll update the other button plugins as well.

[changeset-bot]

🦋 Changeset detected

Latest commit: 45e0d65

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@jspsych/plugin-html-button-response	Major
jspsych	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[jodeleeuw]

(I'll update the tests if the general approach seems right)

[becky-gilbert]

Agh, sorry Josh - for some reason I'm not receiving the jspsych/core notifications so I missed your question about this on #2858.

This is actually my preferred solution. I think this will cover the most non-standard-layout use cases. If anyone is doing something really specific/unusual with the layout, we can point them in the direction of overriding the CSS.

[becky-gilbert]

Pending changes to failing tests 🙂

[bjoluc]

Looks very useful in general 👌

[jodeleeuw]

@bjoluc the failing tests are because of Jest: Couldn't locate all inline snapshots. on my local build. Is this a configuration problem on my end?

EDIT: clarification that this is when I try to update the snapshots using npm run test button -- -u

[bjoluc]

Is this a configuration problem on my end?

Nope, Jest tries to find the right position to update each inline snapshot at and doesn't succeed for some reason (Surcrase sourcemap issues?). I was erroneously hoping this would be fixed in a feature version without me looking into it. We have two options: Use regular snapshots (the ones with external files) instead of inline snapshots, or update the snapshots manually for the time being. I didn't completely give up on this and I'm planning to look into it when I get a chance, so until now I've always just manually updated the inline snapshots according to failure messages. Feel free to decide for either approach.