Consider removing prop spreading from VRT output

Summary

Right now, we show all of the props of the direct child of a Spec in our visual regression tests.

const Props = props => {
  const node = React.Children.only(props.children);
  const propEntries = Object.entries(node.props);
  return (
    <PropList>
      {propEntries
        .filter(([, value]) => typeof value !== 'function')
        .map(([key, value]) => (
          <Pill key={key} label={key} value={value} />
        ))}
    </PropList>
  );
};

This leads to visual output like this.

Problems with this

While this was useful at the start for reviewing the initial baseline VRTs, it causes problems when we refactor our components. If you check this PR, you will see that we didn’t make any changes to the props accepted by the component. All we did was remove a surrounding HOC around the component. However, the following visual diff showed up

Suggestion approach

Remove display of props, and use the Spec label to properly display the component state.

[jonnybel]

I think it would be nice if we could just display the props we wanted in the VRT, instead of all of them or none of them.

For instance, on this simple Toggled example, just pass the isToggled prop (and perhaps also the isToggleButton) to make it clear which are the props that cause the visual difference.

[jonnybel]

Currently, we can either omit all props with omitPropsList and we can filter which props do display with propsToList, but most of the VRTs are still not using it.

I’m not sure if it’s worth to go through all VRTs and make them to use the filter. I guess we should try to use the filter when we refactor components and their VRT that show a diff in the props list, and also to newly added VRTs.

And would it be worth to also have a propsToHide (the opposite of propsToList)?