From e404c69a1d35c25c1d51e2868764ca1455d25841 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 8 Feb 2024 12:26:17 +0200 Subject: [PATCH 1/8] DataViews: Use chips for filter summary --- packages/dataviews/src/filter-summary.js | 98 ++++++++++++++++++++---- packages/dataviews/src/style.scss | 81 ++++++++++++++++++++ 2 files changed, 165 insertions(+), 14 deletions(-) diff --git a/packages/dataviews/src/filter-summary.js b/packages/dataviews/src/filter-summary.js index 2cf381b600507c..1b3e1ff779dc53 100644 --- a/packages/dataviews/src/filter-summary.js +++ b/packages/dataviews/src/filter-summary.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ @@ -8,9 +13,13 @@ import { __experimentalHStack as HStack, FlexItem, SelectControl, + Tooltip, + Icon, } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; import { useRef } from '@wordpress/element'; +import { closeSmall } from '@wordpress/icons'; +import { ENTER, SPACE } from '@wordpress/keycodes'; /** * Internal dependencies @@ -153,11 +162,14 @@ export default function FilterSummary( { ...commonProps } ) { const toggleRef = useRef(); - const { filter, view } = commonProps; + const { filter, view, onChangeView } = commonProps; const filterInView = view.filters.find( ( f ) => f.field === filter.field ); const activeElement = filter.elements.find( ( element ) => element.value === filterInView?.value ); + const isPrimary = filter.isPrimary; + const hasValues = filterInView?.value !== undefined; + const canResetOrRemove = ! isPrimary || hasValues; return ( ( - +
+ +
{ + if ( + [ ENTER, SPACE ].includes( event.keyCode ) + ) { + onToggle(); + } + } } + aria-pressed={ isOpen } + aria-expanded={ isOpen } + ref={ toggleRef } + > + +
+ + { canResetOrRemove && ( + + + + ) } +
) } renderContent={ () => { return ( diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index b0faa0080cfe38..4923fd94324795 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -631,3 +631,84 @@ padding: $grid-unit-05; border-top: 1px solid $gray-200; } + +.dataviews-filter-summary__chip-container { + position: relative; + + .dataviews-filter-summary__chip { + border-radius: $grid-unit-20; + border: 1px solid transparent; + cursor: pointer; + transition: all 0.1s linear; + @include reduce-motion("transition"); + padding: 6px $grid-unit-15; + background: $gray-100; + color: $gray-700; + position: relative; + + &.has-reset { + padding-inline-end: 28px; + } + + &:hover, + &:focus { + background: $gray-200; + color: $gray-900; + } + + &.is-primary.has-values { + color: var(--wp-admin-theme-color); + &:hover { + background: rgba(var(--wp-admin-theme-color--rgb), 0.04); + } + } + + &:focus { + outline: none; + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + } + } + + .dataviews-filter-summary__chip-remove { + width: $icon-size; + height: $icon-size; + border-radius: 50%; + border: 0; + padding: 0; + position: absolute; + right: 2px; + top: 50%; + transform: translateY(-50%); + display: flex; + align-items: center; + justify-content: center; + background: transparent; + cursor: pointer; + + svg { + fill: $gray-700; + } + + &:hover, + &:focus { + background: $gray-200; + svg { + fill: $gray-900; + } + } + + &.is-primary { + svg { + fill: var(--wp-admin-theme-color); + } + &:hover { + background: rgba(var(--wp-admin-theme-color--rgb), 0.04); + } + } + + &:focus { + outline: none; + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + } + } +} From 441d7507b115d2f9d71b6d69d035aaccf316062b Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 8 Feb 2024 12:57:19 +0200 Subject: [PATCH 2/8] fix focus loss --- packages/dataviews/src/filter-summary.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/dataviews/src/filter-summary.js b/packages/dataviews/src/filter-summary.js index 1b3e1ff779dc53..1d78b241887424 100644 --- a/packages/dataviews/src/filter-summary.js +++ b/packages/dataviews/src/filter-summary.js @@ -242,6 +242,9 @@ export default function FilterSummary( { // back to the available filters from `Add filter` component. if ( ! isPrimary ) { addFilterRef.current?.focus(); + } else { + // If is primary, focus the toggle button. + toggleRef.current?.focus(); } } } > From bf14c19b3a255ca26f1ee4e2d19ec34dfccd9ca5 Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 8 Feb 2024 11:52:06 +0000 Subject: [PATCH 3/8] Style tweaks --- packages/dataviews/src/filter-summary.js | 3 ++- packages/dataviews/src/style.scss | 25 +++++++++++++----------- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/packages/dataviews/src/filter-summary.js b/packages/dataviews/src/filter-summary.js index 1d78b241887424..a18f20bd9295f2 100644 --- a/packages/dataviews/src/filter-summary.js +++ b/packages/dataviews/src/filter-summary.js @@ -227,7 +227,8 @@ export default function FilterSummary( {