Composable Tearsheet ☂️

[oliviaflory]

We want to make Tearsheet more composable and allow for the option to move it into the Carbon core repo.

Carbon for IBM Products

• There are two variants of Tearsheet
  • Tearsheet (wide)
  • Tearsheet narrow
  • Website
• A number of components and/or patterns in Carbon for IBM Products have dependencies on Tearsheet
  • Create flows
  • Edit and update *in preview/experimental

Carbon

• What changes need to be made to move Tearsheet into core, what are the options
  • Consult with Kenny (Tearsheet as dialogue)
• What level of effort would our adopters face if Tearsheet is moved into core
• Feature flags?

Checklist of features / common elements

Elements

• Header
  • Label
  • Title
  • Description
  • Action items
    • Dropdown
    • Buttons
• Influencer
  • right and left
    • different visually
    • Add and select uses a similar right influencer
    • Are they providing different use cases?
    • Would you ever allow for BOTH right and left
  • Influencer width
• Action bar / footer
  • Two, three or four buttons, NO buttons
  • Button height (current 64 and 80) I've seen requests for smaller
  • Requests for more flexibility
• Layering
  • Tearsheet may not follow v11 layering fully

Elements specific to Create tearsheet

• Divider
• something else

Functionality

• Stacking
  • Open another tearsheet on top of the existing one
  • Remove stacking??
  • Read docs on stacking
  • Research how people are using stacking
• Stepping: click on the next button and takes you to next step
  • Ideally works within the existing tearsheet: this does exist in Create
• Always pinned to bottom
  • I've seen requests for not pinned to the bottom
• Breakpoints

Tasks

Preview Give feedback

1. UX review of Tearsheet and Create tearsheet #6194
   role: design +1
   
2. Tearsheet design research: Stepping and Stacking #6286
   +0
   
3. Tearsheet design exploration: Action footer #6285
   role: design +1
4. Tearsheet design exploration: Influencer and main area #6284
   component: Tearsheet role: design +2
5. Content on CreateTearsheet 400% page resize #3567
   0 of 2
   UX: issue component: CreateTearsheet component: EditTearsheet component: Tearsheet needs: design opinion role: design type: a11y ♿ type: question ❓ +8

Design explorations

• Tearsheet design exploration: Header layout #6385
• Tearsheet design: VerticalPosition #6428
• Tearsheet design exploration: Theming and token usage #6429
• Tearsheet design exploration: Header truncation #6283
• Reach out to teams about stacking usage
• Tearsheet design explo: Keyboard interactions
• Tearsheet design exploration: Responsiveness

Documentation/Guidance

• Write new Tearsheet v2 guidance

For documentation, reference Calendar usage guidance.

[kingtraceyj]

@RichKummer jan noticed a discrepancy for padding in tearsheet. there are a few differences:

Hey, we stumbled upon an inconsistency in the Tearsheet guidelines. In the Create flows guideline the wide CreateTearsheet has a 24px padding on the left and right of the main content. This is also how it’s implemented in code. On the other hand, the general, wide tearsheet guidelines specify that the padding should be 32px.
https://pages.github.ibm.com/carbon/ibm-products/patterns/create-flows/usage/#wide-tearsheet
https://pages.github.ibm.com/carbon/ibm-products/components/tearsheet/style/

Wondering if we should update the old one as well as incorporate it into the new one (or however we decided to update the component)

[RichKummer]

Carbon design crit 12/03/24

Truncation

• Overall, team preferred an option to expand or contract the description through "Read more" utility.
• Mike Gower: A read more mechanism is accessible for keyboard; the hover is not.
• Mike also wondered if we could have the description scroll up (similar to PageHeader as the user scrolls. We should try this in a prototype.

Close button

• Anna: I do agree the close button positioning shouldn't be conditional. It should probably always be in the same spot no matter what's around it.
• We should consider opening an issue for close button alignment across relevant components.
  • Cameron mentioned that the adoption teams had a bit of a rule to inset the close button when other buttons would align to it, and leave it flush when there are no other interactive elements nearby.

Documentation

• We should provide guidance on recommended character count for elements in the tearsheet. Specifically for the description.
• Teams often reach for tearsheet when a full page experience would make the overall flow less complex. We should add guidance that if the flow is complicated to consider starting the flow in a page rather than a tearsheet. Tearsheets are meant to be transient.
• Tracey: character limit gets a little tricky with internationalization but i also like the character count recommendation! i'm looking at that with page header right now too. we could have similar guidance here maybe.

Other

• Cameron noted that we should avoid making the title smaller in the tearsheet since we often design for 1312px size but the real world is different. The title can look small on larger screens.
• We should question where tearsheet ends up, whether in core or products team. If it goes to core, it should be less complex. If it lives in product, it might be more opinionated.
• Mike G: My naive gut feeling on tear sheet is that it's the Megamenu of our time
• Cameron: Tearsheets have their place, particularly when it's helpful to have a 'quick route' back. Psychologically, it helps the feel that you're still in the same spot within the product and the speed / immediacy of accessing a related view. Valuable for processes related to dedicated page (saving an artifact back to a project). Also valuable to bring in an ‘experience integration’ within your current view without having to navigate fully to that destination.
• Preference for horizontally aligning the header action with the AI slug and close button, over vertical alignment.
• For the main area of the tearsheet, the grid should apply to the area. For spacing consideration, need to be aware that cards could be placed in here and should align with the header content.

[RichKummer]

Slack notes on tabbing through Tearsheet

A user noticed a tabbing issue when moving through the teartsheet header where a content switcher they had placed in the description was skipped at first. If we enable a dedicated slot for components like this, it should ideally show up in the tab order. This behavior also happens with Button, TextArea, DropDown, etc., not just ContentSwitcher (because it is used in the description.

https://ibm-studios.slack.com/archives/CQGR0HC05/p1733237950971699

Issue: #6523