[Filter] remove visual UI

SkyeSeitz commented 4 months ago

Check existing issues

[x] I have checked for existing issues to avoid duplicates

Description

Calcite-filter is documented as a util component, however when inserted, it has UI. Consider removing the ui of calcite-filter so it can be used as just a util.

Acceptance Criteria

Options to consider:

Add a way to remove the padding (component token?).
Removing the padding from calcite-filter and add to components that use it (e.g. calcite-list)
Make filter just a utility of sorts that accepts metadata + a value to search

From a designer perspective, it makes the most sense to decouple calcite-filter and its visual UI since it is just an input with padding (which is not always needed). Ideally a developer could choose to use calcite-filter on an input whether or not it is directly adjacent to the filtered UI elements. When built into other Calcite components, I would expect the padding around the input to come from the parent component at the specifications needed, e.g. calcite-list, and not prescribe that padding everywhere calcite-filter is used.

Relevant Info

No response

Which Component

calcite-filer

Example Use Case

Filter doesn't align with other input components in a form

Priority impact

p4 - not time sensitive

Calcite package

[ ] @esri/calcite-components
[ ] @esri/calcite-components-angular
[ ] @esri/calcite-components-react
[ ] @esri/calcite-design-tokens
[ ] @esri/eslint-plugin-calcite-components

Esri team

Calcite (design)

driskull commented 4 months ago

I think we should remove the padding as that makes sense.

I think we still need a UI because we need to wrap and configure the <calcite-input>. It configures input quite a bit so its not something a dev can just easily do.

We should also just expose the filter utility class at some point.

I could see filter being renamed to something like input-filter?

pllcoster commented 3 months ago

I was looking to open a similar issue when I found this one - an additional problem the padding causes is that both the container (with padding) and the filter element use the same variable --calcite-color-foreground-1 for their background color. This means that currently you cannot make the padding transparent but have the filter input background some other color. Removing the padding would also enable easier color customisation.

driskull commented 1 month ago

Would this be considered a visual breaking change?

SkyeSeitz commented 1 month ago

Would this be considered a visual breaking change?

Depends on the route we take..

Add a way to remove the padding (component token?) - Not breaking
Removing the padding from calcite-filter and add to components that use it (e.g. calcite-list) - Breaking for anyone using calcite-filter by itself
Make filter just a utility of sorts that accepts metadata + a value to search - Breaking for anyone using calcite-filter by itself

Esri / calcite-design-system