#5575 Configuration options styling

[turbochef]

What does this PR do?

• closes Page Editor Epic Slice 3a: "Unbox" the "Configuration" #5575
• Updates configuration options design
• Create AccordionFieldSection for advanced options (uncontrolled, next story addresses that)
• Remove FieldSection
• Change button variant in the ArrayWidget

Demo

• Loom

Future Work

• Remove the “Input” title on the initial options
• Update all instances of primary buttons in the configuration settings to borderless/ghost

Checklist

• Designate a primary reviewer

[twschiller]

Added @mnholtz and @BrandonPxBx as FYI. PR/code changes are still in flux currently

[codecov]

Codecov Report

Merging #5617 (b788409) into main (764bf25) will decrease coverage by 0.11%.
The diff coverage is 57.62%.

@@            Coverage Diff             @@
##             main    #5617      +/-   ##
==========================================
- Coverage   64.43%   64.32%   -0.11%     
==========================================
  Files        1031     1031              
  Lines       32438    32414      -24     
  Branches     6155     6155              
==========================================
- Hits        20900    20850      -50     
- Misses      11538    11564      +26     

Impacted Files	Coverage Δ
...ents/selectionToolPopover/SelectionToolPopover.tsx	42.50% <0.00%> (-1.41%)	⬇️
...c/pageEditor/tabs/sidebar/SidebarConfiguration.tsx	38.70% <0.00%> (-3.72%)	⬇️
src/pageEditor/tabs/tour/TourConfiguration.tsx	90.00% <0.00%> (-1.67%)	⬇️
...quickBarProvider/QuickBarProviderConfiguration.tsx	54.54% <12.50%> (-1.98%)	⬇️
...itor/tabs/contextMenu/ContextMenuConfiguration.tsx	92.85% <50.00%> (-0.48%)	⬇️
...c/pageEditor/tabs/trigger/TriggerConfiguration.tsx	56.86% <66.66%> (-1.63%)	⬇️
src/pageEditor/tabs/effect/BlockConfiguration.tsx	93.44% <71.42%> (-0.21%)	⬇️
src/pageEditor/tabs/editTab/EditTab.tsx	97.77% <80.00%> (ø)
...onents/fields/schemaFields/widgets/ArrayWidget.tsx	86.84% <100.00%> (+0.35%)	⬆️
src/pageEditor/fields/AccordionFieldSection.tsx	100.00% <100.00%> (ø)
... and 5 more

... and 1 file with indirect coverage changes

[mnholtz]

nit: Would you add this color to colors.scss and import it as a variable, e.g.

pixiebrix-extension/src/components/Loader.module.scss

Line 18 in fbb43c0

@import "@/themes/colors";

?

You can give it an arbitrary name that makes sense because it's not in our Design System. We are attempting to start collecting hard-coded values as css variables as part of a first step in improving the state of our design system.

[mnholtz]

See this PR for context: #4726

[turbochef]

Understood. I'll address both.

[mnholtz]

nit: see other comment re refactoring this into a color in colors.scss

[BLoe]

Just had a small question about the CSS class that you added, LGTM otherwise 👍

[BLoe]

What's the effect of adding popover-wrapper-body here? Was this moved from somewhere else?

[turbochef]

Just styling. FieldSection was providing some padding but since I replaced it with a div I'm using this for padding.

[github-actions]

When the PR is merged, the first loom link found on this PR will be posted to #sprint-demo on Slack. Do not edit this comment manually.