feat(filter-panel): introducing react wrapper

[IgnacioBecerra]

Related Ticket(s)

#6644

Description

Introducing the React wrapper for the Filter Panel component.

Changelog

New

• added comments to the getter functions

Changed

• included the filter-panel and filter-panel-modal components in filter-panel-composite in order for the wrapper component to properly render

[ibmdotcom-bot]

Deploy preview created for package React:
https://ibmdotcom-react.s3.us-south.cloud-object-storage.appdomain.cloud/deploy-previews/7470/index.html

Built with commit: 806f9d168609f07b3f3135cb4b318db3fc1956a8

[ibmdotcom-bot]

Deploy preview created for package Web Components HTML Test Application:
https://ibmdotcom-web-components-html-test-upstream.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/7470/index.html

Built with commit: 806f9d168609f07b3f3135cb4b318db3fc1956a8

[ibmdotcom-bot]

Deploy preview created for package Web Components (React wrapper):
https://ibmdotcom-web-components-react.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/7470/index.html

Built with commit: 806f9d168609f07b3f3135cb4b318db3fc1956a8

[ibmdotcom-bot]

Deploy preview created for package Web Components:
https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/7470/index.html

Built with commit: 806f9d168609f07b3f3135cb4b318db3fc1956a8

[ibmdotcom-bot]

Deploy preview created for package NextJS Test Application:
https://ibmdotcom-nextjs-test-upstream.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/7470/index.html

Built with commit: 806f9d168609f07b3f3135cb4b318db3fc1956a8

[ibmdotcom-bot]

Deploy preview created for package "Web Components (Codesandbox Examples)":
https://webcomponents-codesandbox.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/7470/index.html

Built with commit: 806f9d168609f07b3f3135cb4b318db3fc1956a8

[ibmdotcom-bot]

Deploy preview created for package "React (Codesandbox Examples)":
https://react-codesandbox.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/7470/index.html

Built with commit: 806f9d168609f07b3f3135cb4b318db3fc1956a8

[emyarod]

I updated the branch, hopefully the changes from #7452 will be reflected in the wrapper afterwards?

[jeffchew]

You might need to update and do a yarn reset before running snapshot updates again:

[jeffchew]

@IgnacioBecerra are there props for the sub components that can be included here?

[jeffchew]

@IgnacioBecerra are there props for the sub components that can be included here?

Just checking if you can address this too, I didn't see this updated in the latest revision.

[jeffchew]

@ariellalgilmore I think I recall seeing this when you first introduced the e2e test for this, wondering if this is something that is happening sporadically based on animation timing?

[ariellalgilmore]

@ariellalgilmore I think I recall seeing this when you first introduced the e2e test for this, wondering if this is something that is happening sporadically based on animation timing?

Hmm i added a wait time for the animation to go through after I saw that test failing

[jeffchew]

@ariellalgilmore I think I recall seeing this when you first introduced the e2e test for this, wondering if this is something that is happening sporadically based on animation timing?

Hmm i added a wait time for the animation to go through after I saw that test failing

@ariellalgilmore @annawen1 maybe we should try to disable all animations for tests, something like this?

https://gist.github.com/cvan/576eb41ab5d382660c14e3831c33c6ea

[jeffchew]

Thanks @IgnacioBecerra ,

I think we should add prop tables for all of the sub components too, and also make it clear which prop table is for which. It looks like you just posted the table for DDSFilterPanelComposite? Should have separate tables for DDSFilterPanelCheckbox, DDSFilterGroupItem, etc.

[IgnacioBecerra]

@jeffchew I added tables for InputSelect and InputSelectItem. Some components like FilterGroup and FilterGroupItem don't have props so I excluded those.

I tried adding FilterPanelCheckbox and FilterPanelModal but it seems that the table wasn't rendering for some reason, stating that there are no props were found for those components. Not sure why that's the case, but these components don't require the use of props to work properly as they can just be used as it is (modal is actually embedded in filter panel composite anyway).

[annawen1]

@ariellalgilmore I think I recall seeing this when you first introduced the e2e test for this, wondering if this is something that is happening sporadically based on animation timing?

Hmm i added a wait time for the animation to go through after I saw that test failing

@ariellalgilmore @annawen1 maybe we should try to disable all animations for tests, something like this?

https://gist.github.com/cvan/576eb41ab5d382660c14e3831c33c6ea

hmm we can try it to see if the delay is really coming from the animations

[jeffchew]

@IgnacioBecerra looks like some formatting issues, can you take a look?

[oliviaflory]

@IgnacioBecerra

The animation fix looks good!

I'm going to be a little picky about how the panel is sitting on the grid though, forgive me (please!).

• The left side looks perfect
• On the right side, we want it to end on the edge of the column rather than the gutter.
  • Currently both 3 and 4 column variants are ending on the gutter (dotted line)
  • We want it to end on the column (solid line)

3 Column

4 column

[IgnacioBecerra]

@shixiedesign I changed this in both this new react wrapper story and the original web components story for Filter Panel 👍

edit: meant to ping @oliviaflory! The pixel profile pic threw me off haha

[shixiedesign]

😄 Did you mean to ping @oliviaflory ?

[jeffchew]

Thank you @IgnacioBecerra for the updates, LGTM!

[oliviaflory]

Looks good @IgnacioBecerra !