[Components] @carbon/ibmdotcom-web-components Development v2 Epic

[oliviaflory]

Epic to track all component work for V2

Note

all work should be done in the feat/carbon-for-ibm-dotcom-v2 branch

This epic tracks the work to update all components in @carbon/ibmdotcom-web-components. Component styles and markup need to be updated as all upstream Carbon dependencies now use Carbon v11. As components in @carbon/web-components - an upstream dependency - have been upgraded to v11, the markup in many components in this package must be updated as well.

Issues with the v2 design change label have specific design requirements and may also introduce breaking changes. These issues should include updated design specs, component API changes, and may require working with the design team during implementation.

Component dependency map (Box Canvas)

Acceptance criteria

For all components, some basic acceptance criteria should be observed when working on them:

• also update React wrapper
• update Storybook docs
• use visual design checklist before opening a PR (with emphasis on numbers 1, 2, and 6)
• update migration guide if necessary (here is a good example of how the guide could look)
• update unit tests where necessary (tracked in [Components]: Update @carbon/ibmdotcom-web-components v2 unit tests Epic #10369)
  • Note: Currently there is no standardization of tests, duplicate and/or redundant tests, and inconsistency in UI testing. The team consensus is to modify the tests as necessary (markup/name changes, etc) but to give this lower priority if it becomes a blocker in completing a particular component. The tests will get an overhaul in the future, so it is unnecessary to get them completely updated.

Components

Preview Give feedback

1. [Component] Back to top #10721
   package: web components v2 +2
   
2. [Component] Background media #10723
   package: web components v2 +2
   
3. [Component] Button group #10724
   package: web components v2 +2
   
4. [Component] Callout quote #10725
   dev package: web components v2 +3
   
5. [Callout quote]: Content off grid #10050
   bug dev package: web components severity 4 +4
   
6. [Callout quote] Add color background options #9615
   dev package: web components v2 v2 design change +4
   
7. [Callout] Add component color tokens #9621
   dev v2 v2 NEW feature +3
   
8. [Component] Card group v2 WC #10453
   dev package: web components v2 +3
   
9. [Component] Card in card v2 WC #10384
   dev package: web components v2 v2 design change +4
   
10. [Component] Card link #10751
    dev v2 v2 design change +3
    
11. [Component] Card section offset #10807
    package: web components v2 +2
    
12. [Component] Card v2 updates #10329
    dev v2 v2 breaking change v2 design change +4
    
13. [Component] Card – pictogram v2 updates #10199
    dev v2 v2 design change +3
    
14. [Component] Card – static v2 WC #10244
    dev v2 v2 design change +3
    
15. [Feature card – large]: Updates to @lg and @md #10306
    dev v2 +2
    
16. [feature card]: Add regular color scheme #10073
    dev package: web components v2 +3
    
17. [Component] Carousel #10726
    package: web components v2 +2
    
18. [Component] Content block (internal) #10752
    dev hacktoberfest v2 +3
    
19. [content group]: explore combining content group level components #9590
    dev package: web components v2 +3
    
20. [Component] Content group #10753
    dev v2 +2
    
21. [Component] Content group banner #10754
    dev hacktoberfest v2 v2 breaking change +4
    
22. [Component] Content item #10747
    dev package: web components v2 +3
    
23. [Component] Content item horizontal #10808
    v2 v2 breaking change +2
    
24. [Content Section]: update content-section to v2 design specs #10454
    0 of 3
    package: web components v2 +2
    
25. [CTA] v2 discovery #10432
    dev package: web components v2 +3
    
26. [CTA] v2 WC #10359
    dev v2 v2 breaking change +3
    
27. [Component] Dotcom shell #10809
    dev v2 +2
    
28. [Component] Expressive modal #10850
    dev package: web components v2 +3
    
29. [Component] Feature section #10852
    dev v2 +2
    
30. [Component] Filter panel #10970
    dev package: web components v2 +3
    
31. [Component] Footer #10851
    dev package: web components v2 +3
    
32. [Component] Horizontal rule #10848
    dev package: web components v2 +3
    
33. [Component] Image #10750
    dev package: web components v2 +3
    
34. [Component] Layout #10722
    dev package: web components v2 +3
    
35. [Component] Lead space block #10786
    dev package: web components v2 v2 design change +4
    
36. [Component] Lead space search #10787
    v2 v2 design change +2
    
37. [Component] Lead space #10788
    dev v2 v2 design change +3
    
38. [Component] Leaving IBM #10856
    dev package: web components v2 +3
    
39. [Component] Lightbox media viewer #10855
    dev v2 +2
    
40. [Component] Link list #10789
    package: web components v2 v2 breaking change v2 design change +4
    
41. [Component] Link with icon #10859
    dev package: web components v2 +3
    
42. [Component] Locale modal #11045
    +0
43. [Component]: Locale Modal #10937
    dev hacktoberfest package: web components v2 +4
    
44. [Component] Logo grid (TBD)
45. [Component] Notice Choice #10858
    dev package: web components v2 +3
    
46. [Component] Quote #10847
    dev package: web components v2 +3
    
47. [Component] update Scroll animations to v2 #10854
    dev package: web components v2 +3
    
48. [Component] Search with type ahead #10790
    v2 v2 design change +2
    
49. [Component] Structured list #10806
    dev package: web components v2 +3
50. [Component] ToC vertical v2 WC #10514
    dev package: web components v2 +3
    
51. [Component] ToC horizontal v2 WC #10512
    dev package: web components v2 v2 design change +4
    
52. [Component] Tabs extended #10756
    5 of 5
    dev v2 v2 breaking change +3
    
53. [Component] Tag group #11026
    dev package: web components v2 +3
    
54. [Component] Tag link #11025
    dev package: web components v2 +3
    
55. [Component] Universal banner #10755
    dev v2 v2 breaking change +3
    
56. [Component] Video player #10853
    dev package: web components v2 +3
    
57. [Component] Audio player (experimental) web component #11046
    dev package: web components priority: low v2 +4
58. [Component] Callout with media #10905
    dev package: web components v2 +3
    

Deprecated Components

Preview Give feedback

1. example
2. [Component] Content group cards (deprecated)
3. [Component] Content block media (deprecated)
4. [Component] CTA section (deprecated)
5. [Component] CTA block (deprecated)
6. [Component] Content block mixed (deprecated)
7. [Component] Content block cards (deprecated)
8. [Component] Content group simple (deprecated)
9. [Component] Card section simple (deprecated)
10. [Component] Content group pictograms (deprecated)
11. [Component] Content block segmented (deprecated)
12. [Component] Card section carousel (deprecated)
13. [Component] Pictogram item (deprecated) #10746
    +0
    
14. [Component] Link list section (deprecated)
15. [Component] Tabs extended with media (deprecated)
16. [Component] Content block horizontal (deprecated)