UI Shell updates ☂️

[laurenmrice]

Brief

There has been a recent uptick in questions in support and during office hours revolving around how to use the UI Shell component. Making some updates to the UI Shell component, in code, on the website, and in the Figma design kit, could help resolve some of these questions and vastly improve all aspects of the component.

In addition, the UIShell is being positioned as a strategic investment to create a Platform of Products. More to come on this as it becomes available.

Acceptance Criteria

Make the UI Shell more composable

• What are the highest priority enhancements to add that will benefit our users.
• Determine what we should move from PAL to Core.

Stakeholders

Robert Uthe
Carrie Lloyd
Randa Salem
...who else?

Update website design docs

• Update our current docs to use the new usage and style content templates.

Update design kit

• Fix any current bugs for the UI Shell component.

---

Phase 1

Prework

Preview Give feedback

1. UIShell: [Figma] discrepancy with UI shell header and right panel color tokens carbon-design-kit#742
   kit: figma role: design ✏️ severity: 3 type: bug 🐛 +4
   
2. Connect with Robert Uthe's team (Automation) (Scott has reached out)
3. UI Shell: Research & Audit #17761
   component: ui-shell role: design ✏️ +2
   
4. Meeting with Linda/Marion (aligning and finding a common site for Sass and on Prem guidance)
5. UI Shell: Research & Audit playback #17783
   component: ui-shell role: design ✏️ +2
   
6. UI Shell: Consistent naming structure for elements carbon-website#3897
   component: ui-shell role: design ✏️ type: docs 📖 +3
7. Telemetry: Determine what parts of the UI shell are most frequently used (Page header, Side panel, Profile menu, MSCP?)
8. Dev task eventually: examine how shell related components are built in Core and PAL
9. Theming
10. Evaluate enhancement possibilities in the list below. Might overlap with some needs we need to address from talking with the above teams^.

Update website design docs

Preview Give feedback

1. UI Shell header: Usage tab carbon-website#4150
   component: ui-shell role: design ✏️ status: blocked 🙅‍♀️ type: docs 📖 type: enhancement 💡 +5
2. UI Shell header: Style tab carbon-website#4151
   component: ui-shell role: design ✏️ status: blocked 🙅‍♀️ type: docs 📖 type: enhancement 💡 +5
3. UI Shell left panel: Usage tab carbon-website#3810
   component: ui-shell role: design ✏️ status: blocked 🙅‍♀️ type: a11y ♿ type: docs 📖 type: enhancement 💡 +6
4. UI Shell left panel: Style tab carbon-website#3811
   component: ui-shell role: design ✏️ status: blocked 🙅‍♀️ type: a11y ♿ type: docs 📖 type: enhancement 💡 +6
5. UI Shell right panel: Usage tab carbon-website#4114
   component: ui-shell role: design ✏️ status: blocked 🙅‍♀️ type: docs 📖 type: enhancement 💡 +5
6. UI Shell right panel: Style tab carbon-website#4115
   component: ui-shell role: design ✏️ status: blocked 🙅‍♀️ type: docs 📖 type: enhancement 💡 +5

Update Figma kit

Preview Give feedback

1. UI Shell header: Figma fixes carbon-design-kit#861
   component: ui-shell role: design ✏️ severity: 3 type: bug 🐛 +4
   

UI Shell enhancement possibilities

Preview Give feedback

1. This might also involve enhancements coming in from PAL
2. UI Shell Enhancements #5302
   component: ui-shell proposal: open type: enhancement 💡 +3
3. [UI Shell] Design extensions #5152
   component: ui-shell proposal: open role: design ✏️ type: enhancement 💡 +4
4. [UI Shell] Explore alternate configurations #5143
   component: ui-shell proposal: open role: design ✏️ type: enhancement 💡 +4
5. [Feature Request]: Support button element in UIShell right panel #14236
   component: ui-shell proposal: open status: waiting for maintainer response 💬 type: enhancement 💡 +4
6. [enhancement]: UIShell/HeaderContainer with multiple expandable panels #14630
   component: ui-shell role: dev 🤖 type: enhancement 💡 +3
7. UI Shell header allow dropdowns from icons #5149
   component: ui-shell proposal: open type: enhancement 💡 +3
8. [Feature Request]: HeaderGlobalAction for Menu #11946
   component: ui-shell proposal: open type: enhancement 💡 +3
9. [Feature request💡] : UI Shell-Global header icons and functions move to hamburger menu in small screen size #17064
   component: ui-shell role: dev 🤖 type: enhancement 💡 +3
10. [Feature Request] "rail icon" variant for SideNav #15109
    component: ui-shell proposal: open role: design ✏️ role: dev 🤖 type: enhancement 💡 +5
11. [a11y]: UI Shell header has implementation, documentation and prototyping issues to address or consider #12137
    component: ui-shell package: @carbon/react role: design ✏️ status: needs accessibility info type: docs 📖 type: enhancement 💡 +6

[github-actions]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[aagonzales]

Also the concept of UI Shell theming came up in the DSIT call on 7-24-24. This something else we should add into our docs. Here's an old UI Shell theme study.

[sstrubberg]

How does this connect to the Platform initiative in IBM Software?

[sstrubberg]

E2E journey
UI Patterns
MCSP SaaS Console

https://pages.github.ibm.com/ibm-saas-platform/mcsp-react-components/?path=/story/header--with-single-switcher-float-left

[sstrubberg]

https://pages.github.ibm.com/carbon/ibm-products/cloud-pak/header/overview/

[sstrubberg]

This epic is taking a back-seat to a larger volume of work found at the board below. By the end of this initiative, we should have a more composable Shell and much stronger and complete documentation to support it.

https://github.com/orgs/carbon-design-system/projects/90