Update Carbon

[AlanGreene]

Update to Carbon 11.

Carbon 10 is being sunset and will no longer be supported as of 1st October 2024.

Announcements:

• https://medium.com/carbondesign/announcing-the-carbon-design-system-release-schedule-f33144e9141
• https://medium.com/carbondesign/moving-forward-on-deprecating-carbon-components-and-carbon-components-react-4f2f0c3d8448

We have already done quite a bit of preparation for this, including simplification of the data / API layers which allowed us to reduce the number of custom page containers used in the app in #2452 and related issues.

So far it looks like React 18 should not be required for this effort 🤞 If it is, see #3492 for details.

Migration guide: https://carbondesignsystem.com/migrating/guide/overview/

Initially we'll migrate to the new versions keeping the design as close as possible to existing. This is to minimise the impact / overhead on tests, developer experience, and user experience during the migration process.

Some changes will be required, particularly around use of notifications and tooltips. Details in the migration guide.

Once the initial migration is complete we can consider adopting some of the new components and behaviours provided to enhance the experience.

[AlanGreene]

Results of first pass at updating the Dashboard to Carbon 11 (most styling is expected to be broken / missing for now):

• run the provided code mods to automatically migrate as much as possible
• disable any remaining problematic code / styles
  • comment out use of legacy tokens in the styles
  • comment out use of legacy components
  • minimal changes to get the app to build and run

This was just to get a baseline status and a better feel for the amount of work required to migrate fully.

~10% of unit tests (55/581) are failing in this state, affecting ~25% of the test suites (19/73).

About page:

PipelineRuns:

PipelineRun details:

The next step is to go through the longer / more detailed manual migration guide at https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md to resolve the styling and functional issues.

There are a number of breaking changes to components such as notifications and tooltips that will need to be addressed, as well as changes to the structure of tabs, etc.

My hope is that the bulk of the issues will be resolved by changes to common components that are reused in multiple places.

Once the issues with the core app and components are resolved we'll also need to address any issues with the experimental / WIP components and utils such as the graph components.

[AlanGreene]

Looking a bit better after some minor changes to the theme-related styles and how the base Carbon component styles were being loaded.

About:

PipelineRuns:

PipelineRun details:

There are still a number of layer / theme related issues that need to be resolved, but looks like we have a solid foundation to start from.

One issue that may take a little more experimentation (and was also present after the first pass above) is an apparent change in behaviour for the side nav. It now overlaps the content when open instead of influencing (pushing) the grid:

[AlanGreene]

Getting closer, still some colour, typography, and spacing tokens to migrate but this should be the bulk of the big styling issues resolved.

About:

PipelineRuns:

Next, move onto the functional issues, starting with the tab components as they're not currently rendering the tab list. Once the main functionality is roughly working, we can focus on getting the tests passing again and deal with any remaining issues as we find them.

[AlanGreene]

Starting to look a lot better now, tabs are rendered correctly and hooked up to the URL again. Most major styling issues resolved, working through remaining cleanup and functional fixes.

PipelineRuns:

PipelineRun details:

There are still some minor issues with the actions menu button and the log toolbar buttons but everything on this page appears to be functional at least 😸

[AlanGreene]

With the addition of 01b9c37 the E2E tests are now passing again 🎉

There are still some styling and accessibility issues to be resolved, as well as some remaining functional issues not currently covered by E2E tests.

[AlanGreene]

a11y issues with Accordion component:

• [a11y]: Tab focus in accordion items incorrect, focusing on hidden items carbon-design-system/carbon#16781
• [a11y]: AccordionItem - Prevent keyboard navigation from reaching closed AccordionItem's clickable content carbon-design-system/carbon#16413

There's also an issue with the ActionableNotification component's close button trapping focus.
I've worked around it for now using the 'unstable' + experimental feature flags 😅 : 74f2dc9#diff-9b40aa71e20dfce56078f07084c09937debb4b201f87f9d965de48b520418c23R21-R23

ComboBox behaviour has changed in v11 too, no longer firing the onChange handler when the 'clear' button is clicked. Worked around it on the global NamespacesDropdown by listening for the underlying DownShift state change events but would be nice to have a cleaner solution similar to the one we had with Carbon v10. Slack thread open with the Carbon folks discussing options.

Also noticed the ComboBox clear behaviour is not quite as expected on the 'create' pages, even though the event is being handled and the URL is updated as expected, the input is not cleared consistently. Blurring, re-focusing / opening, and closing the listbox again seems to trigger it to update correctly, so something's interfering with the first update. Warnings in the console with details of the underlying DownShift component changing from uncontrolled to controlled, may not be related, but should also be resolved.

There's some odd behaviour with the actions menu on the run details pages too. Keyboard nav of the items in the open menu is causing the page to scroll. Not seeing the same behaviour in the Carbon storybook or our own for that matter, so likely something else on the page contributing to the problem.

Some good news is that most of the unit tests are now passing again, current status:

Test Files  9 failed | 64 passed (73)
Tests  16 failed | 565 passed | 1 skipped (582)

and we've reduced the size of the build output by disabling unused fonts.

[AlanGreene]

Carbon team have confirmed the 3 remaining issues are valid bugs:

• MenuButton causing scroll on keyboard nav, PR open with fix
• Tab styles in Firefox
• focus styles on DataTable batch actions in dark themes

Once the fix for the MenuButton is released we can update Carbon to the latest version and mark #3501 ready for merge. I don't consider the other issues blockers at this time as they're either purely cosmetic or have workarounds.

[AlanGreene]

Carbon patch release expected today with fixes for the MenuButton scroll issue and the Firefox tab styles.