Skip to content

Conversation

@shiba-codes
Copy link
Contributor

@shiba-codes shiba-codes commented Nov 18, 2024

What

Adds customisation ability for the Select value

Media

Screenshot 2024-11-18 at 18 10 12

Why

Normally, select works like WYSIWYG: the user selects an item in the list and it is displayed as a select value

​Scenario: we might show additional information in the list (Fleet label + fare + ETA), but still want to display only the label as the value, when the item is selected

How

Introducing the renderValue prop

@lloydaf
Copy link
Contributor

lloydaf commented Nov 19, 2024

I feel like this should be a configuration; i.e; we should have variants where this is possible and this is not possible (and would result in a validation error) depending on a config/prop value

But for the sake of the dispatcher I am fine with merging, but this is in "wave" so we should probably have this option in the future imo

@shiba-codes
Copy link
Contributor Author

I feel like this should be a configuration; i.e; we should have variants where this is possible and this is not possible (and would result in a validation error) depending on a config/prop value

What scenario do you have in mind?

@lloydaf
Copy link
Contributor

lloydaf commented Nov 19, 2024

I feel like this should be a configuration; i.e; we should have variants where this is possible and this is not possible (and would result in a validation error) depending on a config/prop value

What scenario do you have in mind?

A normal scenario for a typeable select box component where we're only supposed to use the values available to us; that's how normal selects work, no?

@shiba-codes
Copy link
Contributor Author

A normal scenario for a typeable select box component where we're only supposed to use the values available to us; that's how normal selects work, no?

It still uses the values available in the items, this is just a presentation change for the selected item

@lloydaf
Copy link
Contributor

lloydaf commented Nov 19, 2024

A normal scenario for a typeable select box component where we're only supposed to use the values available to us; that's how normal selects work, no?

It still uses the values available in the items, this is just a presentation change for the selected item

Respectfully I don't see the point in this change then; what are we trying to achieve? Can you add a more "real-life" example to the docs to illustrate where this is useful better?

@shiba-codes
Copy link
Contributor Author

shiba-codes commented Nov 19, 2024

Can you add a more "real-life" example to the docs to illustrate where this is useful better?

Absolutely!
Imagine this: we have an additional information in the list to help make a selection
Screenshot 2024-11-19 at 14 41 40
But we want to display only the label as the select value, so in this case "Taxi XL", not "Taxi XL in 6 min 15-17 EUR"
Screenshot 2024-11-19 at 14 41 54

This is what this change is for

@shiba-codes shiba-codes merged commit 982d7be into main Nov 19, 2024
5 checks passed
@shiba-codes shiba-codes deleted the DISP-257/select-value-customisation branch November 19, 2024 14:09
github-actions bot pushed a commit that referenced this pull request Nov 19, 2024
## [2.16.0](v2.15.1...v2.16.0) (2024-11-19)

### Features

* **select:** add value customisation ([#492](#492)) ([982d7be](982d7be))
@github-actions
Copy link
Contributor

🎉 This PR is included in version 2.16.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Development

Successfully merging this pull request may close these issues.

4 participants