[BUG]: Docs usage examples are incorrect when settings are toggled

[camggould]

Describe the issue

Background

As a user, when I see a demo of a component and can change some toggles to customize the demo, I expect the "code" tab to contain the code example that properly reflects the modified version of the component, so I can easily copy the exact usage via the copy functionality in the code snippet UX.

Actual behavior

When toggling settings on component demos and then viewing the code, the code only contains the props for the toggled settings rather than all props required for the demo to work as expected.

This impacts all components with adjustable settings. The "bug" can be traced back to the usage of this function in the CodeExample component. The propsString only contains the props that were modified, and the usageCode regex replacement is matching the entire component string and replacing it with only the props from the propsString.

One callout for the resolver, which can also be seen in the TiltedCard example. The way that this is currently implemented avoids a problem where two independent props are coupled, and one should only exist if the other is set to a specific value. For example, the displayOverlayContent prop is coupled with the overlayContent prop. When the UI toggle is used to disable the overlay, the code updates the context to replace only the displayOverlayContent to false and all the other props disappear from usage. Since the existing solution simply gets rid of all the other props, there is no extra code to reconcile coupled props.

I would argue that displayOverlayContent is redundant--the presence (or lack thereof) of an overlayContent is sufficient, but changing component interfaces is understandably unpopular, and I don't think this specific issue necessitates it.

What I will say is that the solution to this problem does have to find a way to track which props to remove if a "coupled" prop is toggled to some sort of "off" state, like what we see here. Otherwise, we will run into an issue where toggling off displayOverlayContent will update displayOverlayContent={false} but will not also remove the overlayContent prop.

Reproduction Link

No response

Steps to reproduce

1. Visit the Tilted Card component demo.
2. Check the code tab. The "usage" section contains all props which are being used to create the current experience displayed in the demo:

import TiltedCard from './TiltedCard';

<TiltedCard
  imageSrc="https://i.scdn.co/image/ab67616d0000b273d9985092cd88bffd97653b58"
  altText="Kendrick Lamar - GNX Album Cover"
  captionText="Kendrick Lamar - GNX"
  containerHeight="300px"
  containerWidth="300px"
  imageHeight="300px"
  imageWidth="300px"
  rotateAmplitude={12}
  scaleOnHover={1.2}
  showMobileWarning={false}
  showTooltip={true}
  displayOverlayContent={true}
  overlayContent={
    <p className="tilted-card-demo-text">
      Kendrick Lamar - GNX
    </p>
  }
/>
  

3. Toggle the "Show tooltip" setting to disable tooltips.
4. Open the code tab. Notice the "usage" section no longer reflects the full set of props needed to recreate the demo and instead is only displaying the className and the prop we've toggled off:

import TiltedCard from './TiltedCard';

<TiltedCard
  showTooltip={false}
  className="tilted-card-demo-text"
/>

Validations

• I have checked other issues to see if my issue was already reported or addressed

[DavidHDev]

Makes sense, I'll see what I can do

[DavidHDev]

The approach was updated keep demo defaults and only update prop values where user updates have been detected.