UI Shell updates ☂️

[laurenmrice]

Acceptance criteria

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.

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.

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.

---

Phase 1

Prework

Beta Give feedback

1. [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. [Docs] need consistent naming structure for elements in ui shell carbon-website#3897
   component: ui-shell role: design ✏️ type: docs 📖 +3

Update website design docs

Beta Give feedback

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

Update Figma kit

Beta Give feedback

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

Phase 2

UI Shell PAL and Core alignment

Beta Give feedback

1. Determine what additions to UI shell would be most beneficial to our users.
2. Get current telemetry
3. Cloud PAK: How is this built and we leverage it as the starting point. Dejan? Rhonda S?
4. Find strategic teams/business partners to tell us what they need
5. Determine what parts of the UI shell are most frequently used. Page header, Side panel, Profile menu, MSCP?
6. Audit
7. UI Shell Enhancements #5302
   component: ui-shell epic proposal: open type: enhancement 💡 +4
8. Examine how shell related components are built in Core and PAL
9. Theming

Phase 3

UI Shell enhancements

Beta Give feedback

1. This might also involve enhancements coming in from PAL
2. [UI Shell] Design extensions #5152
   component: ui-shell proposal: open role: design ✏️ type: enhancement 💡 +4
3. [UI Shell] Explore alternate configurations #5143
   component: ui-shell proposal: open role: design ✏️ type: enhancement 💡 +4
4. [Feature Request]: Support button element in UIShell right panel #14236
   component: ui-shell proposal: open status: waiting for maintainer response 💬 type: enhancement 💡 +4
5. [enhancement]: UIShell/HeaderContainer with multiple expandable panels #14630
   component: ui-shell role: dev 🤖 type: enhancement 💡 +3
6. UI Shell header allow dropdowns from icons #5149
   component: ui-shell proposal: open type: enhancement 💡 +3
7. [Feature Request]: HeaderGlobalAction for Menu #11946
   component: ui-shell proposal: open type: enhancement 💡 +3
8. [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
9. [Feature Request] "rail icon" variant for SideNav #15109
   component: ui-shell proposal: open role: design ✏️ role: dev 🤖 type: enhancement 💡 +5

[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.