apply feedback

WordPress · Jul 16, 2024 · 1cd016e · 1cd016e
1 parent f2e9257
commit 1cd016e
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 16 deletions.
diff --git a/packages/dataviews/src/dataviews.tsx b/packages/dataviews/src/dataviews.tsx
@@ -79,7 +79,8 @@ export default function DataViews< Item >( {
  onSelectionChange = defaultOnSelectionChange,
 }: DataViewsProps< Item > ) {
  const [ selectionState, setSelectionState ] = useState< string[] >( [] );
- const [ isShowingFilter, setIsShowingFilter ] = useState< boolean >( true );
+ const [ isShowingFilter, setIsShowingFilter ] =
+ useState< boolean >( false );
  const isUncontrolled =
  selectionProperty === undefined || setSelectionProperty === undefined;
  const selection = isUncontrolled ? selectionState : selectionProperty;
@@ -119,7 +120,7 @@ export default function DataViews< Item >( {
  >
  <HStack
  justify="start"
- className="dataviews-filters__container"
+ className="dataviews-search__container"
  wrap
  >
  { search && (
@@ -129,15 +130,6 @@ export default function DataViews< Item >( {
  onChangeView={ onChangeView }
  />
  ) }
- { isShowingFilter && (
- <Filters
- fields={ _fields }
- view={ view }
- onChangeView={ onChangeView }
- openedFilter={ openedFilter }
- setOpenedFilter={ setOpenedFilter }
- />
- ) }
  </HStack>
  { [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) &&
  hasPossibleBulkAction && (
@@ -166,13 +158,22 @@ export default function DataViews< Item >( {
  isPressed={ isShowingFilter }
  aria-expanded={ isShowingFilter }
  />
- { view.filters.length > 0 && (
+ { !! view.filters?.length && view.filters?.length > 0 && (
  <span className="dataviews-filters-toggle__count">
  { view.filters.length }
  </span>
  ) }
  </div>
  </HStack>
+ { isShowingFilter && (
+ <Filters
+ fields={ _fields }
+ view={ view }
+ onChangeView={ onChangeView }
+ openedFilter={ openedFilter }
+ setOpenedFilter={ setOpenedFilter }
+ />
+ ) }
  <ViewComponent
  actions={ actions }
  data={ data }

diff --git a/packages/dataviews/src/filters.tsx b/packages/dataviews/src/filters.tsx
@@ -113,7 +113,12 @@ function _Filters< Item >( {
  }
 
  return (
- <HStack justify="flex-start" style={ { width: 'fit-content' } } wrap>
+ <HStack
+ justify="flex-start"
+ style={ { width: 'fit-content' } }
+ className="dataviews-filters__container"
+ wrap
+ >
  { filterComponents }
  </HStack>
  );

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
@@ -9,7 +9,8 @@
  flex-direction: column;
 }
 
-.dataviews-filters__view-actions {
+.dataviews-filters__view-actions,
+.dataviews-filters__container {
  box-sizing: border-box;
  padding: $grid-unit-20 $grid-unit-60;
  flex-shrink: 0;
@@ -25,6 +26,11 @@
  }
 }
 
+.dataviews-filters__container {
+ padding-top: 0;
+ margin-top: -$grid-unit-10;
+}
+
 .dataviews-filters__container {
  .dataviews-filters__reset-button[aria-disabled="true"] {
  &,
@@ -874,7 +880,8 @@
 /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
 @container (max-width: 430px) {
  .dataviews-pagination,
- .dataviews-filters__view-actions {
+ .dataviews-filters__view-actions,
+ .dataviews-filters__container {
  padding: $grid-unit-15 $grid-unit-30;
  }
 
@@ -956,7 +963,7 @@
 
 .dataviews-filters-toggle__count {
  position: absolute;
- top: -$grid-unit-15/2;
+ top: math.div(-$grid-unit-15, 2);
  right: -$grid-unit-15;
  background:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  height: $grid-unit-15 + 2*$border-width;