Security PAL Migration

[sstrubberg]

As a developer consuming components and patterns from the deprecated Security PAL, I can confidently find these assets, refactored with modern coding standards and updated to use v11 tokens in the Product PAL storybook.

As a designer consuming components and patterns from the deprecated Security PAL, I can confidently find these assets in the Figma kit.

As a designer and developer, consuming components and patterns from the deprecated Security PAL, I can confidently find information on how to use these assets documented on the Product PAL website.

Refer to internal design issue
https://github.ibm.com/CDAI-design/pal/issues/1203

Tasks

Preview Give feedback

1. Review legacy Security OVERVIEW (Read me first) #4052
   area: migration ➡️ package: ibm-products package: security +3
   
2. Review legacy Security LAYOUTS for migration #4037
   area: migration ➡️ package: security +2
   
3. Review legacy Security PATTERNS for migration #4036
   area: migration ➡️ package: security +2
   
4. Review legacy Security COMPONENTS for migration #4003
   area: migration ➡️ package: security +2
   
5. Move ActionBar to canary #4482
   3 of 3
   area: migration ➡️ package: ibm-products +2
   
6. Separate Decorator into multiple components #4476
   area: migration ➡️ +1
   
7. New Component: : StatusIndicator #4253
   area: migration ➡️ package: security version: 2 +3
   
8. New Component : Icon button bar #4240
   0 of 2
   area: migration ➡️ +1
   
9. New Component: StringFormatter #4224
   area: migration ➡️ package: security status: waiting for maintainer 💬 version: 2 +4
   
10. New Component: DescriptionList (TypeLayout) #4189
    area: migration ➡️ package: security status: waiting for maintainer 💬 version: 2 +4
    
11. Search bar #4149
    1 of 1
    area: migration ➡️ package: security version: 2 +3
    
12. Clean up SearchBar props #4602
    0 of 2
    area: migration ➡️ role: dev +2
    
13. Document SearchBar changes from Security migration #4239
    area: migration ➡️ +1
    
14. New Component: Decorator #4146
    area: migration ➡️ package: security version: 2 +3
    
15. New Component: Nav #4136
    area: migration ➡️ package: security +2
    
16. New Component: TruncatedList #4071
    area: migration ➡️ package: security version: 2 +3
    
17. New Component: BigNumber (ICA) #4060
    area: migration ➡️ package: security status: waiting for maintainer 💬 version: 2 +4
    
18. New Component: DelimitedList #4058
    area: migration ➡️ package: security version: 2 +3
    
19. New Component: ScrollGradient #4309
    area: migration ➡️ +1
    
20. New Component: FilterPanel #4477
    6 of 6
    area: migration ➡️ +1
    
21. Create migration doc for Security package components / patterns #4436
    area: migration ➡️ type: docs 📖 +2
    
22. Decorator: update the kit
23. Decorator: update the website
24. Decorator: Usage docs (possible Core candidate because of overlap with Core's Experimental Tag)
25. Decorator: Style docs
26. Decorator: Accessibility docs
27. BigNumbers: Usage docs
28. DescriptionList: Is this a thing? It's StructuredList under the hood.
29. SearchBar: Usage docs
30. SearchBar: Style docs
31. SearchBar: Accessibility docs
32. ActionBar: Usage docs
33. ActionBar: Style docs
34. ActionBar: Accessibility docs
35. ScrollGradient: Usage docs
36. ScrollGradient: Style docs

[sstrubberg]

• The Decorator can have icons in it. It also has interactive elements. Strong experimental InteractiveTag vibes from Core.
• The Decorator has a lot of color stuff going on (@oliviaflory). It also has this key pair interaction moment that is different than Core's.
• BigNumbers feels pretty straightforward
• DescriptionList: Is this a thing? It's StructuredList under the hood. Should we just deprecate it?
• Action was internal. Now it's not. And it's supplanting IconButtonBar because it "does everything plus more" - Paul
• Nav is open to question. Is this a thing? It feels a lot like ContainedList from Core.
• StringFormatter and DelimitedList feel like utilities, not components.

[elycheea]

@sstrubberg We should probably have a high level conversation about next steps so we’re aligned with Security team on what to expect coming up.

• Decorator, big numbers (ICA), description list, search bar, scroll gradient, action bar (icon button bar) are the ones we’ve seen listed as priorities in the design repo.
• String formatter, possibly nav and filters are ease of migration from what I can recall from previous conversations. 👀

[elycheea]

Based on our call on April 3, 2024.

Proposals

These are items we want to push forward and expand for broader use case outside of Security.

• Decorator probably a good proposal to contribute further.
• ICA / big numbers also worth a proposal too.
• Filter panel brought it over to help teams for migration but likely will become foundation for broader filtering experience. Expect to have changes as we broaden it for overall IBM Software. Needs design attention.
• Status indicator seems like a decent proposal. Helpful for multi-sequenced events like this.
• Action bar probably a proposal.
• Search bar as a proposal.

Utilities

These are written as components but are probably more of utilities. Would be good to explore what this should look like longer term. Think there’s some precedent of utilities both as hooks and components in Carbon as well (Theme, useTheme(), Layer, useLayer()).

• Delimited list feels more like a utility ... might make more sense to recategorize (might change for stable).
• String formatter another utility ... possible re-categorization.
• Truncated list pretty useful for the functionality but possibly more utilitarian. Probably needs more thought if on how we categorize it.
• Scroll gradient also more of a utility.

Migration-path only

These should probably be deprecated over time but we’ve included it to ease the migration effort.

• Nav — No strong opinions ... probably migration path. Probably deprecate over time — similar to accordion. Recommend teams to migrate to Accordion over time.

Other

Description list likely should become a structured list variant.
DescriptionListModule that references this has another variant that has key value pairs stacked.

[matthewgallo]

We'll open up follow up issues for any further work here, initial components in migration have been merged.