Skip to content

docs(FilterBar): outline responsive behavior of filter area #5992

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.

Sign up for GitHub

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

Merged
merged 2 commits into from
Jul 1, 2024
Merged

docs(FilterBar): outline responsive behavior of filter area #5992

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
81b59d7
docs(FilterBar): outline responsive behavior of filter area
Lukas742 Jun 28, 2024
f9310e7
Update index.tsx
Lukas742 Jun 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions packages/main/src/components/FilterBar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,16 @@ const resizeObserverEntryWidth = (entry) => {

/**
* The `FilterBar` displays filters in a user-friendly manner to populate values for a query. It consists of a row containing the `VariantManagement` or a title, the related buttons, and an area underneath displaying the filters. The filters are arranged in a logical row that is divided depending on the space available and the width of the filters. The area containing the filters can be hidden or shown using the "Hide FilterBar / Show FilterBar" button, the "Filters" button shows the filter dialog.
In this dialog, the consumer has full control over the FilterBar. The filters in this dialog are displayed in one column and organized in groups. Each filter can be marked as visible in the FilterBar by selecting the respective checkbox.

__Note:__ We recommend always fully controlling the filters, as otherwise, you may encounter discrepancies between the filters dialog and the FilterBar, especially when using complex or custom filter components.
* In this dialog, the consumer has full control over the FilterBar. The filters in this dialog are displayed in one column and organized in groups. Each filter can be marked as visible in the FilterBar by selecting the respective row.
*
* __Responsiveness:__
* The name of the view or title is always visible. The filter area varies:
*
* * Desktop: Expanded or collapsed by default
* * Tablet: Collapsed by default
* * Phone: Not displayed. Accessible through filter dialog.
*
*__Note:__ We recommend always fully controlling the filters, as otherwise, you may encounter discrepancies between the filters dialog and the FilterBar, especially when using complex or custom filter components.
*/
const FilterBar = forwardRef<HTMLDivElement, FilterBarPropTypes>((props, ref) => {
const {
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/components/FilterBar/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export interface FilterBarPropTypes extends CommonProps {
/**
* Defines whether the "Hide/Show Filters" button is displayed in the `FilterBar`.
*
* __Note:__ If `hideToolbar` is `true` this prop has no effect.
* __Note:__ If `hideToolbar` is `true` or the FilterBar is used on mobile, this prop has no effect.
*/
hideToggleFiltersButton?: boolean;
/**
Expand Down
Loading