[Docs] Filter Bar component #3396
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
dchyun
force-pushed
the
dchyun/filter-bar-component
branch
from
fcce535 to
64c48b9
Compare
LilithJames-HDS
left a comment
LilithJames-HDS
left a comment
There was a problem hiding this comment.
Looking great, I left some comments and some nitpicky little things
website/docs/components/filter-bar/partials/guidelines/guidelines.md
Outdated
Show resolved
Hide resolved
website/docs/components/filter-bar/partials/guidelines/guidelines.md
Outdated
Show resolved
Hide resolved
website/docs/components/filter-bar/partials/guidelines/guidelines.md
Outdated
Show resolved
Hide resolved
|
|
||
| - For complex query builder features. | ||
|
|
||
| ## Overlap with the Filter pattern guidance <!--Consider a different headline --> |
There was a problem hiding this comment.
I conjunction with this, should we have a revision to the Filter Patterns page that leads to this component? Maybe a banner on that page to alert anyone who is looking around and not aware that this is a newly available component
There was a problem hiding this comment.
Yes, that's exactly what I was thinking is adding a banner to the Filter Patterns page kind of directing consumers to the component, I just have yet to get that added in
|
|
||
| <!-- Should something be included about truncation? --> | ||
|
|
||
| ## Filter dropdown |
There was a problem hiding this comment.
It would be helpful to have an image of the entire menu here so consumers can see the left and right panels
website/docs/components/filter-bar/partials/guidelines/guidelines.md
Outdated
Show resolved
Hide resolved
website/docs/components/filter-bar/partials/guidelines/guidelines.md
Outdated
Show resolved
Hide resolved
| @@ -0,0 +1,183 @@ | |||
| The Filter Bar is used to apply and display filters to a data set. It is most often used in conjunction with the [Advanced Table](/components/table/advanced-table), but is flexible enough to support different data sets and rendering methods such as in a list or grid of cards. | |||
There was a problem hiding this comment.
[todo] We could link this directly to the filter bar examples in the adv table docs once I create those.
|
|
||
| The Filter Bar component is a successor to the [Filter patterns](/patterns/filter-patterns) guidance and supports the vast majority of filtering experiences within HashiCorp applications out of the box. New experiences should use the Filter Bar by default instead of the adhering to the pattern guidance, while already delivered features should consider migrating to the Filter Bar component. | ||
|
|
||
| ## Type |
There was a problem hiding this comment.
[Suggestion] Talking of "types" for this is kind of a misalignment with the code side. On the code side there is no property to change the filter bar from looking like standalone or attached. It really is just if the filter bar is used through the advanced table, or on its own.
Maybe it would help to say the filter bar can either be used directly through components (ex: advanced table, table) or as its own individual component. And we could link out to the adv table filter docs.
But if what you currently have more closely aligns to how the component is in figma then all good to leave it as is.
There was a problem hiding this comment.
Good callout, however, I think it's useful to include this for designers because that matches the property in Figma. I've added a callout block noting this difference, take a look to see if the language makes sense.
website/docs/components/filter-bar/partials/guidelines/guidelines.md
Outdated
Show resolved
Hide resolved
|
|
||
| If necessary, the default formatting within the Tag can be overidden with custom text. This can be useful if the label of the parameter is an irregular plural, if the parameter reads more naturally with certain punctuation or grammar, or for product-specific reasons. | ||
|
|
||
| <!-- @dylan could you help me out a bit with this? --> |
There was a problem hiding this comment.
[todo] Once I implement this on the dev side to not just be for custom filters we can add in some more specifics if we need to, but I think you covered a lot of it.
Do we want to talk about custom filters at all?
|
|
||
| Depending on how the data set is fetched and updated, the Filter Bar supports different methods of applying filters: | ||
|
|
||
| - **Per-filter:** selected filters are applied when the user confirms their selection with the "Apply filters" submit button. This is the most common method and generally requires a database or API call to update the data set with the corresponding filter parameters. |
There was a problem hiding this comment.
| - **Per-filter:** selected filters are applied when the user confirms their selection with the "Apply filters" submit button. This is the most common method and generally requires a database or API call to update the data set with the corresponding filter parameters. | |
| - **Per-filter:** selected filters are applied when the user confirms their selection with the "Apply filters" submit button inside the Filters dropdown. This is the most common method and generally requires a database or API call to update the data set with the corresponding filter parameters. |
[Suggestion] Note that the submit button is inside the dropdown
|
|
||
| ## Applying Filters | ||
|
|
||
| Depending on how the data set is fetched and updated, the Filter Bar supports different methods of applying filters: |
There was a problem hiding this comment.
| Depending on how the data set is fetched and updated, the Filter Bar supports different methods of applying filters: | |
| Depending on how consumers would prefer to trigger the filtering on their data sets, the Filter Bar supports different methods of applying filters: |
[Suggestion] I think it's less a constraint of the data set and more of a consumer choice on how often they want to run their queries for filtering based on the data set they have.
website/docs/components/filter-bar/partials/guidelines/guidelines.md
Outdated
Show resolved
Hide resolved
|
|
||
|  | ||
|
|
||
| ## Empty state |
There was a problem hiding this comment.
[Suggestion] The empty state is not a part of the filter bar component. It is only a part of the advanced table component, so it would make more sense to me to include this in the advanced table docs, not here.
There was a problem hiding this comment.
Good point, I've moved this to the advanced table docs for now
| | Value input | Required; Allows the user to input a value to filter upon such as a number, string, date, or time. | | ||
| | Clear filter | Required; Clears the filter operator and input fields. | | ||
|
|
||
| #### Filter value range input |
There was a problem hiding this comment.
[Question] Do we want to mention the generic / custom filter somewhere in here?
There was a problem hiding this comment.
Added some content for custom filtering both here in the specs, and in the guidelines.
dchyun
force-pushed
the
dchyun/filter-bar-component
branch
from
5515833 to
6d5f0b7
Compare
Co-authored-by: Lilith James <lilith.james@hashicorp.com>
…nes.md Co-authored-by: Dylan Hyun <dylan.hyun@hashicorp.com>
dchyun
force-pushed
the
dchyun/docs-filter-bar-component
branch
from
e103253 to
64d27e1
Compare
4 participants
📌 Summary
Adds documentation for the new
FilterBarcomponent from #3386Preview pages
🔗 External links
Jira ticket: HDS-4592
👀 Component checklist
💬 Please consider using conventional comments when reviewing this PR.
📋 PCI review checklist
Examples of changes to controls include access controls, encryption, logging, etc.
Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.