✨ Create Dashboard Filter Component (#1983) #2006

mistryrn · 2021-07-23T14:20:15Z

Description of changes

Adds a new DropdownPanel component to UIKit which consists of:

a trigger button (contents can be a UIKit icon, or anything you want by using the customTrigger prop)
a fully accessible panel which opens/closes on button click, and additionally closes on click/focus outside the panel
panel contents are passed as children to the DropdownPanel component

Storybook: https://feat-1983-donor-id-table-filter--argo-ui-storybook.netlify.app/?path=/story/uikit-dropdownpanel--basic

Also includes a [WIP] instance of the DropdownPanel being used as a filter in the column header for the Dashboard's Donor Summary Table to filter based on the Donor ID column

As well as some smaller changes to ensure the new component works:

Add a new "filter" icon
Extend InteractiveIcon's hover functionality through props to allow the parent to specify different hover colours
Make Tooltip component arrow optional
Upgrade the react-tippy tooltip library
Wrap Input component in forwardRef to allow ref sharing
Add onBlur and type props to Button component to allow for focus change handling and to specify type="submit" vs type="button"
ReactTable styling changes to shrink the width of the draggable area for column resizers to prevent collision with filter buttons in column headers

Type of Change

Bug
Styling
New Feature

Checklist before requesting review:

mistryrn · 2021-07-29T14:52:08Z

uikit/Table/styledComponent.tsx

@@ -43,6 +43,21 @@ export const StyledTable = styled<typeof ReactTable, StyledTableProps>(ReactTabl

  &.ReactTable {
    border: none;
+    &.has-filters {


Quick explainer on these table styles:

for tables with header filters, we want to prevent the opacity change when there is no data so that the filters still look interactive

for tables with header filters, we want to make sure the table has a min-height so that the filter panel can be visible when open, regardless of the amount of data in the table

because of the min-height, we need to apply the negative margin-bottom when there is no data so that the "No data found in table" component appears as normal on tables with filters

Kind of hacky, but this classname solution seemed like the least intrusive approach to make sure everything still works as expected

mistryrn · 2021-07-29T14:55:21Z

uikit/Table/reactTableDefaultStyle.tsx

@@ -221,10 +233,10 @@ export default css`
  &.ReactTable .rt-resizer {
    display: inline-block;
    position: absolute;
-    width: 36px;
+    width: 12px;


Quick explainer for these rt-resizer style changes:

because we're adding filter buttons inside the table headers, we need to shrink the touch area for the column resizers so they don't over lap the new filter buttons

justincorrigible · 2021-07-29T21:34:19Z

Updated Storybook with the latest changes

* Adds a new "Filter" icon to the UIKit icon collection

* Adds support for custom fill colour on hover of interactive icons

* Upgrade react-tippy from v1.2.3 to v1.4.0 * Use TooltipProps from react-tippy library instead of exposing them manually * Make tooltip arrow optional

This reverts commit c980e74.

* Adds boolean prop `arrow` to Tooltip for controlling the visibility of the tooltip arrow

* Upgrade react-tippy from v1.2.3 to v1.4.0 * Use TooltipProps from react-tippy library instead of exposing them manually

* Allows Button component to accept `onBlur` handlers as props

* Enables ref forwarding to Input component instances

* Enables specification of button types `'button' | 'submit' | 'reset'`

* Adds a new `DropdownPanel` component to UIKit which renders a trigger button that, upon clicking, expands a panel which can be populated by content passed in as `children`

* Implements the Donor ID Filter to the Donor Summary Table via a custom column header containing a DropdownPanel with a text filter * TODO: connect the filter text to the API

* Moves code related to the text input filter for dropdown panels out of the Donor Summary Table page and into the DropdownPanel component. Cleans up imports, keeps everything related to the panel in one location for better reuse later on.

* Fixes a11y issue where clear button on UIKit Input component was inaccessible to non-mouse users

* Update Program Donor Summary query to support filters * Connect UI to Donor ID filter API

* Set table header filter icon to blue when filter is active, regardless of whether or not the panel is open, to indicate that it is currently being applied

* Apply `min-height` to table so the panel can be used without scrolling when there isn't enough data * Prevent table header opacity change when all data is filtered out

justincorrigible · 2021-07-30T15:33:23Z

Rebasing PR over develop to test if build pipeline takes it

edit: it's alive!

justincorrigible · 2021-07-30T16:03:31Z

components/pages/submission-system/program-dashboard/DonorDataSummary/index.tsx

+  sorts,
+  filters,
+  options = {},
+}: {


components/pages/submission-system/program-dashboard/DonorDataSummary/index.tsx

uikit/DropdownPanel/index.tsx

justincorrigible · 2021-07-30T16:34:58Z

uikit/Tooltip/index.tsx

+// exposing full react-tippy API based on https://github.com/tvkhoa/react-tippy
+// extending the html prop to support our previous implementation which also accepted strings
+export type TooltipProps = Omit<TippyProps, 'html'> & {
+  html?: React.ReactElement<any> | React.ReactNode | string;


man, that's clever!!! I saw this as a blocker with UiKit, because they hadn't updated their type stuff

justincorrigible · 2021-07-30T16:36:01Z

uikit/Tooltip/stories.tsx

@@ -53,7 +53,7 @@ const TooltipStories = storiesOf(`${__dirname}`, module).add(
      transitionFlip: boolean('transitionFlip', undefined),
      unmountHTMLWhenHide: boolean('unmountHTMLWhenHide', undefined),
      sticky: boolean('sticky', undefined),
-      stickyDuration: number('stickyDuration', undefined),
+      stickyDuration: boolean('stickyDuration', undefined),


This is the type issue I found at tippy! grr

There's been a PR to fix it since 2020
tvkhoa/react-tippy#133

justincorrigible · 2021-07-30T16:58:37Z

uikit/form/Input/index.tsx

+        <StyledInputWrapper
+          size={size as StyledInputWrapperProps['size']}
+          onClick={(e) => {
+            if (inputRef.current && e.target !== clearButtonRef?.current) inputRef.current.focus();


yeah, events' prevent default and bubbling control was iffy in React 16.

I can see the hoops you've had to jump through to make this one work... 💪

Definitely pulled some hair out and cursed at TypeScript quite a bit during this :P

Nah, it's React. They rewrote all that stuff in v17.

justincorrigible

Made a couple (non-show-stopping) suggestions, which you should feel free to add or dismiss...
This PR looks pretty darn good otherwise. Ready to squash and merge! 💪

Of note, I've committed a fix for the Input's declaration, so Storybook can identify it correctly again.
(Updated the temporary storybook link, for verification)

Co-authored-by: Anders Richardsson <[email protected]>

mistryrn requested a review from ciaranschutte July 23, 2021 14:20

mistryrn marked this pull request as ready for review July 29, 2021 14:04

rosibaj requested a review from justincorrigible July 29, 2021 14:37

mistryrn commented Jul 29, 2021

View reviewed changes

mistryrn added 16 commits July 30, 2021 11:29

🍱 Add Filter Icon (#1983)

373965a

* Adds a new "Filter" icon to the UIKit icon collection

🎨 Extend InteractiveIcon Hover Functionality (#1983)

8d85947

* Adds support for custom fill colour on hover of interactive icons

⬆️ Upgrade react-tippy tooltip component (#1983)

c7c5195

* Upgrade react-tippy from v1.2.3 to v1.4.0 * Use TooltipProps from react-tippy library instead of exposing them manually * Make tooltip arrow optional

Revert "⬆️ Upgrade react-tippy tooltip component (#1983)"

19f553d

This reverts commit c980e74.

🎨 Make tooltip arrow optional (#1983)

a1e8756

* Adds boolean prop `arrow` to Tooltip for controlling the visibility of the tooltip arrow

⬆️ Upgrade react-tippy tooltip library (#1983)

bd80834

* Upgrade react-tippy from v1.2.3 to v1.4.0 * Use TooltipProps from react-tippy library instead of exposing them manually

🚩 Add onBlur prop to Button component (#1983)

9686f13

* Allows Button component to accept `onBlur` handlers as props

🚩 Add forwardRef to Input component (#1983)

2f978e4

* Enables ref forwarding to Input component instances

🚩 Add type prop to UIKit Button (#1983)

82001b1

* Enables specification of button types `'button' | 'submit' | 'reset'`

✨ Create DropdownPanel Component (#1983)

c499f74

* Adds a new `DropdownPanel` component to UIKit which renders a trigger button that, upon clicking, expands a panel which can be populated by content passed in as `children`

🚧 [WIP] Add Donor ID Filter to Donor Summary Table (#1983)

ebb7f38

* Implements the Donor ID Filter to the Donor Summary Table via a custom column header containing a DropdownPanel with a text filter * TODO: connect the filter text to the API

♿️ Change Input component clear button from div to button (#1983)

fe8cdeb

* Fixes a11y issue where clear button on UIKit Input component was inaccessible to non-mouse users

✨ Add Donor ID Filter to Dashboard Data Summary Table (#1983)

f044546

* Update Program Donor Summary query to support filters * Connect UI to Donor ID filter API

💄 Indicate Active State for Table Header Filters (#1983)

d5d32b3

* Set table header filter icon to blue when filter is active, regardless of whether or not the panel is open, to indicate that it is currently being applied

💄 Donor Table Styling Fixes for Dropdown Panel (#1983)

28bc668

* Apply `min-height` to table so the panel can be used without scrolling when there isn't enough data * Prevent table header opacity change when all data is filtered out

justincorrigible force-pushed the feat/1983-donor-id-table-filter branch from 0ae376f to 28bc668 Compare July 30, 2021 15:31

justincorrigible reviewed Jul 30, 2021

View reviewed changes

components/pages/submission-system/program-dashboard/DonorDataSummary/index.tsx

sorts,

filters,

options = {},

}: {

Copy link

Member

justincorrigible Jul 30, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💪

justincorrigible reviewed Jul 30, 2021

View reviewed changes

components/pages/submission-system/program-dashboard/DonorDataSummary/index.tsx Outdated Show resolved Hide resolved

justincorrigible reviewed Jul 30, 2021

View reviewed changes

uikit/DropdownPanel/index.tsx Outdated Show resolved Hide resolved

justincorrigible reviewed Jul 30, 2021

View reviewed changes

restore Input storybook displayName

b66519e

justincorrigible approved these changes Jul 30, 2021

View reviewed changes

🎨 Apply suggestions from code review

c5d11a8

Co-authored-by: Anders Richardsson <[email protected]>

mistryrn merged commit ccc7edb into develop Jul 30, 2021

justincorrigible deleted the feat/1983-donor-id-table-filter branch July 30, 2021 18:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

✨ Create Dashboard Filter Component (#1983) #2006

✨ Create Dashboard Filter Component (#1983) #2006

mistryrn commented Jul 23, 2021 •

edited by justincorrigible

Loading

mistryrn Jul 29, 2021

mistryrn Jul 29, 2021

justincorrigible commented Jul 29, 2021

justincorrigible commented Jul 30, 2021 •

edited

Loading

justincorrigible Jul 30, 2021

justincorrigible Jul 30, 2021

justincorrigible Jul 30, 2021 •

edited

Loading

justincorrigible Jul 30, 2021 •

edited

Loading

mistryrn Jul 30, 2021

justincorrigible Jul 30, 2021

justincorrigible left a comment •

edited

Loading

✨ Create Dashboard Filter Component (#1983) #2006

✨ Create Dashboard Filter Component (#1983) #2006

Conversation

mistryrn commented Jul 23, 2021 • edited by justincorrigible Loading

mistryrn Jul 29, 2021

Choose a reason for hiding this comment

mistryrn Jul 29, 2021

Choose a reason for hiding this comment

justincorrigible commented Jul 29, 2021

justincorrigible commented Jul 30, 2021 • edited Loading

justincorrigible Jul 30, 2021

Choose a reason for hiding this comment

justincorrigible Jul 30, 2021

Choose a reason for hiding this comment

justincorrigible Jul 30, 2021 • edited Loading

Choose a reason for hiding this comment

justincorrigible Jul 30, 2021 • edited Loading

Choose a reason for hiding this comment

mistryrn Jul 30, 2021

Choose a reason for hiding this comment

justincorrigible Jul 30, 2021

Choose a reason for hiding this comment

justincorrigible left a comment • edited Loading

Choose a reason for hiding this comment

mistryrn commented Jul 23, 2021 •

edited by justincorrigible

Loading

justincorrigible commented Jul 30, 2021 •

edited

Loading

justincorrigible Jul 30, 2021 •

edited

Loading

justincorrigible Jul 30, 2021 •

edited

Loading

justincorrigible left a comment •

edited

Loading