Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(filter-value): show children text content instead of value #1982

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

viniciuslagedo
Copy link
Contributor

Summary

Partially resolves #1505

Now, the inner text from the children of the selected item is used on the selected value. Pay attention to the inner text expression here because it is not precisely the children property. So, no HTML tags will be rendered. I see that as a quick solution to not change all the state logic created.

Examples

Simple

For this example, when the item with value rj is selected, the filter will show 'Cidade: Rio de Janeiro'

const [city, setCity] = useState<string>('')

<Filter label="Cidade" value={city} setValue={setCity}>
  <FilterItem value="rj">Rio de Janeiro</FilterItem>
  <FilterItem value="sp">São Paulo</FilterItem>
  <FilterItem value="mg">Minas Gerais</FilterItem>
 </Filter>

Multiple

For this example, when the items with values rj and mg are selected in that order, the filter will show 'Cidade: Rio de Janeiro, +1'

const [cities, setCities] = useState<string>([])

<Filter label="Cidade" value={cities} setValue={setCities}>
  <FilterItem value="rj">Rio de Janeiro</FilterItem>
  <FilterItem value="sp">São Paulo</FilterItem>
  <FilterItem value="mg">Minas Gerais</FilterItem>
 </Filter>

Use the inner text from the selected item or from the first selected item instead of the value
property. It makes more sense because the children prop is more related to visual purposal

fix #1505
@viniciuslagedo viniciuslagedo requested a review from a team as a code owner September 27, 2024 04:49
Copy link

vercel bot commented Sep 27, 2024

Deployment failed with the following error:

You don't have permission to create a Preview Deployment for this project.

View Documentation: https://vercel.com/docs/accounts/team-members-and-roles

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: No status
Development

Successfully merging this pull request may close these issues.

FilterItem: value prop
2 participants