Tearsheet research: Community outreach

[RichKummer]

Various teams responded to the outreach during DSAG 01/16/25. This story covers the discussions and research that arise from the responses.

• Connect with Oliver Kauselmann on responsiveness exploration
• Connect with Eva Dage and Event Automation team on Tearsheet needs
• Connect with Arin Clement on Accessible Workplace

[RichKummer]

From Arin Clement 01/17/25

You requested examples of using your tearsheet component. I'm pretty sure you're familiar at this point with the Accessible Workplace designs, but sharing our dev environment link for your reference. (Only email needed for access) https://awfe-test.wdc1a.ciocloud.nonprod.intranet.ibm.com/

• We decided to use the tearsheet in our "Create request" flow, because it allowed for a larger screen size when reviewing all decisions in the question flow before submitting the request. (You can create as many sample requests in this flow as you like to check it out, it's a dev environment.)
• I'm not sure if there was a better way for us to utilize the tearsheet component for our use case, but would still welcome any feedback.
• We also used a version of a side panel for approval flows. We needed to customize this as a separate region, not a modal, so that screen reader users were able to navigate between the details in the main content and approval questions in the panel. Not sure if this is related to your research, but happy to share if needed.

[RichKummer]

Oliver Kauselmann discussion (TBD)

I noticed many issues with responsive behaviour of tearsheets in general, especially in our create flows.
Inconsistencies and UX problems where things get really spooky when you resize the browser window. Found no guidance.
Thats why I started to collect as-is examples and explored grid-based solutions for the most common standard layouts per breakpoint.

Oliver's Figma exploration