Content on CreateTearsheet 400% page resize

[hkang92]

What package(s) are you using?

• [x] Carbon for IBM Products (or Carbon for IBM Cloud & Cognitive)
• [ ] Legacy/CDAI
• [ ] Legacy/Security

import { CreateTearsheet } from '@carbon/ibm-products'; "@carbon/ibm-products": "^2.10.2",

What did you want to know?

Hi, I have an AVT issue where I am using the CreateTearsheet component and resizing the page to 400%. When I resize the page, the content within the tearsheet is not able to be reached or shown.

Relevant information

https://www.ibm.com/able/requirements/requirements/#1_4_10

### Tasks
- [ ] Review and choose path forward from Tomer's options
- [ ] Implement recommended responsive behavior

[elycheea]

Thanks for reporting this @hkang92! We may need to follow up with the design team on an appropriate treatment at 400%. Curious if there’s any behavior you or your design teams would expect in the create flows at this level of zoom so we can discuss this in more depth.

@kristastarr Not sure if this will also come up in the accessibility audit but wanted to bring this up.

FYI @Laura-Marshall 🙃

[hkang92]

@elycheea I was looking at the IBM accessibility requirements on reflow and it seems like we should be able to have the same function when screen is zoomed to 200-400%. When I am testing out certain pages with a tearsheet, I do not have any functions such as scrolling or viewing page at 400%. It is kinda just stuck on what it is zoomed to.

You can test out this page and check that when zoomed in, the page is automatically adjusted to the zoom

[My-Money29]

I'll bring this up next we meet, @elycheea

[My-Money29]

I've created a Figma file comparing all variations of the pattern to zoom-in percent, for v10+11.

Found issues that we would like to resolve, and added a comment and an indication next to them.

[My-Money29]

Perhaps container queries are the way to go

[elycheea]

Also this might be a helpful way to approach this @My-Money29 https://www.ibm.com/able/toolkit/design/visual/#responsive-reflow

Lee did some testing in CodePen after our call. https://codepen.io/lee-chase/pen/GReQmjZ/7ce554b90cd70a261b0a71ed3ef4ab5d

[makafsal]

@elycheea @My-Money29 @hkang92 I've examined the issue and I've come up with a couple of suggestions that may help. Firstly, we can eliminate those left, right, and top margins when the screen is at a 400% zoom. And if it's fine, we could consider hiding the influencer in that 400% view. I've already put together a workaround for it. Take a look at the screenshots below to see what I mean. Let me know what you think!

https://github.com/carbon-design-system/ibm-products/assets/9197089/ff378ddc-9efc-47ed-95c4-855e1b990ee3

Without Influencer

https://github.com/carbon-design-system/ibm-products/assets/9197089/ffd3cda8-8093-47ff-9696-18fbf333e3ba

[elycheea]

@makafsal Thanks for the suggestions! 100% on removing the extra margins at 400% — maybe 300% even. Hiding the influencer is an interesting suggestion and definitely gives back a bit of the real estate. It’s not interactive but does at least help communicate how far into the flow you are or even how many steps there are total. I’m not sure it’s critical information, but also feel like there should still be a way to view that content.

We can also see in @hkang92’s screenshot though that they have two lines of description which takes up a bit more real vertical real estate too. I wonder if we can either unstick the header at a certain breakpoint?

Comparing the Carbon modal at 400%^1 — the header remains sticky, but lack of the description provides more space back as well. Maybe we can get a happy medium by only having the title sticky and the description scrolling out of view at this breakpoint or even at 300%? 🤔

FYI @oliviaflory @RichKummer 👀

[makafsal]

@elycheea Thanks for the feedback! Actually, in Carbon Modal, the description is in the body, so naturally, it will scroll up and we'll get more real estate. But in the case of Tearsheet, the description is placed within the header itself, so either completely hide it or hide it in the scroll (like side panel header animation).

I think we could make the Influencers toggleable or I'll think about other ways to show this info.

I'll further investigate in light of your feedback.

[makafsal]

@elycheea - The influencer may or may not contain critical information, because the content is dynamic. So, I have thought of removing the description from the title. Because the description only permits two lines, we could expect only some hint or descriptive type of information. Hence, it will look like this:

FYI @oliviaflory @RichKummer

[oliviaflory]

The influencer may or may not contain critical information, because the content is dynamic. So, I have thought of removing the description from the title. Because the description only permits two lines, we could expect only some hint or descriptive type of information. Hence, it will look like this:

@makafsal is this solution removing the description entirely? Or is it moving the description into the body of the tearsheet?

I would be concerned about removing the description entirely because it may have instructions on what to do. I am not yet familiar enough with how teams are utilizing the tear sheet, but I could see it being problematic to remove the description. Even the example content shown in the original issue seems important.

[makafsal]

@elycheea @oliviaflory - I think, it is better to keep both description and influencer. And to gain more real estate I've suggestions like:

1. Description: We can make this hide when a scroll happens in the body like the Side Panel.

https://github.com/carbon-design-system/ibm-products/assets/9197089/ff78e6d9-7412-456a-8c0e-b8435ea46816

2. Influencer: We can make it toggleable (I think this needs a design review? or I can suggest a design?).

OR

Another approach is to give scrolls, so users can scroll through the entire Tearsheet body like this:

https://github.com/carbon-design-system/ibm-products/assets/9197089/c876a633-adcf-4809-a1dc-534fd88c1dea

I think this approach may not need a design review.

FYI @RichKummer

[elycheea]

@makafsal Having the description scroll out of view with limited screen real estate (similar to how side panel handles it) is also what I was thinking.

Influencer feels trickier to me. I think we can have a short term solution to make it more usable for now (scrolling like you have it could be good enough for now?) and we can revisit this with @oliviaflory and @RichKummer as they get more familiar. 🤔

[makafsal]

@elycheea - Yeah, for now, we can remove the left-right and top margins only. Animating the paragraph is not worthwhile if we're not covering all the scenarios and it needs more effort.

I think, we can put things like influencer, paragraph, and all other things related to it and also things that require design review for later.

[sstrubberg]

REF https://github.com/carbon-design-system/ibm-products/issues/4898

[oliviaflory]

@My-Money29 can you find the file of your explorations and add it to the issue if it's not here already, thanks!