Fix Clear button always being visible in Playroom TextFields

[jahredhope]

Edit: switched solution to option 1

Problem

Currently when not setting onClear on a TextField the Clear button (Cross on the right side) isn't visible in applications and the documentation site.

Example: Documentation Site - No Clear Button

However, it is visible in Playroom, due to Playroom's automatic injection of state handling.

Example: Playroom - Clear Button

This creates a discrepancy between what users see in docs examples and playrooms, and makes it impossible create playrooms where the Clear button is not visible.

Solution

Avoid passing onClear through to the TextField in Playroom when it's falsy.

To make it easy for prototyping to add the clear field behaviour allow passing true instead of a no-op function.

<TextField
  label="Label"
  stateName="field1"
  onClear={true}
/>

Example: Playroom - With Change now has no Clear button

When onClear is not provided:

<TextField
  label="Label"
  stateName="field1"
/>

There would now be no clear button:

Playroom

Alternative Options

The downside with the above solution is that playrooms now use invalid code onClear={true} in prototypes that can't be copied into application code.

Alternative 1 - Opt-out of Clear label: We could default to showing the Clear button (as we do currently) but allow passing onClear={false} to deliberately opt-out of the clear label.

<TextField
  label="Label"
  stateName="field1"
  onClear={false}
/>

This makes the minimal change, doesn't effect existing playrooms but doesn't fix the disconnect between examples and playrooms.

Alternative 2 - Authentic behaviour: We could simply not allow passing a boolean in, requiring users to enter a dummy function onClear={() => {}} to activate the clear button.

<TextField
  label="Label"
  stateName="field1"
  onClear={() => {}}
/>

This may be confusing to playroom users who aren't familiar with JavaScript as well as breaking existing playrooms.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 521a1a9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[felixhabib]

Putting the docs messaging below the example to reduce prominence. Happy for suggestions otherwise

[jahredhope]

Love it