shoreline icon indicating copy to clipboard operation
shoreline copied to clipboard

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

Open viniciuslagedo opened this issue 5 months ago • 1 comments

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>

viniciuslagedo avatar Sep 27 '24 04:09 viniciuslagedo