SelectPanel: Empty State - Explore SelectPanel.Message API and managing visibility of the component under the hood

[broccolinisoup]

Closes #

Changelog

New

Changed

Removed

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

⚠️ No Changeset found

Latest commit: 9895c58

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

[broccolinisoup]

Spiking about API options for the empty states. After having an initial conversation with @siddharthkp

Option 1 (As above code)

Pros

• Straightforward. Consumers don't need to deal with calculating items length etc to display the empty state messages and which empty state they are going to display i.e. no items vs no matches

Cons

• No flexibility to manage the visibility of the messages since everything is under the hood. There is a chance that it might not work for every usage if consumers have more params in determining the empty states. They can still manage it via this API but it would defeat its main motivation which is handling the complex stuff under the hood.

Option 2

We could simplify the API and let consumers worry about managing the empty state. Like below

<SelectPanel.Message variant="empty" title={noItemsState? `No items created yet' : No language found for'`}>
      {noItemsState? `Start creating your items here'  : Adjust your search term to find other languages}
</SelectPanel.Message>

Pros

• Simple API

Cons

• Consumers might choose to use the same messages for both empty states.
• A bit more work for consumers to deal with managing the state.

Alternatively we can use a prop rather than children for providing the messages.

<SelectPanel
  message={<SelectPanel.Message variant="empty" title={noItemsState? `No items created yet' : No language found for'`}>
      {noItemsState? `Start creating your items here'  : Adjust your search term to find other languages}
</SelectPanel.Message>}
</SelectPanel>

Curious to hear what you think 🙌🏻 @siddharthkp @camertron