Update to Carbon 11

[AlanGreene]

Changes

Closes #3493

/kind misc

Some of the remaining todo items are captured below.
There are more annotated TODO: carbon11 directly in the code.

Carbon:

• Form
  • Vertical margin for form items and fieldsets is no longer included by default, use <Stack> for vertical spacing
  • import resources
  • create *run
• Notifcations
  • https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#notifications
  • inline notification styling
  • toast notification styling
  • replace use of old notification components containing interactive content with new ActionableNotification component
  • verify styling of all uses
• Tabs
  • Due to its composability, renderContent is no longer needed on Tab. You now have full control over what is rendered inside of Tab and TabPanel.
  • https://react.carbondesignsystem.com/?path=/docs/components-tabs--default
• Tooltip
  • https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#tooltip
• TooltipIcon
  • https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#tooltipicon
• fonts
  • https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/fonts/README.md
  • @use '@carbon/react/scss/fonts';
  • can we load a subset instead of all 180 variants which are currently included in the build? (also ~1,000 lines of CSS defining all of the @font-faces)
    • disable the Serif font since we only use Mono and Sans
    • in future we could consider being more explicit about the font weights that get loaded, e.g.

      @use '@carbon/react/scss/config' with (
        // disable the automatic output of @font-face rules
        $css--font-face: false
      );
      @use '@carbon/styles/scss/fonts/sans';
      @include sans.regular($styles: normal);

• ThemePreference
  • https://github.com/carbon-design-system/carbon/blob/main/examples/light-dark-mode/src/components/ThemePreference.js
  • is it possible to skip outputting variables for white theme since we don't use it?
• base button styles overriding others
  • Modal footer button set styles being overridden so buttons not spanning full width
  • OverflowMenu button styles being overridden so they have a blue background

Dashboard:

• ViewYAML
  • need to right-align line numbers
• Actions
  • overflowmenu styling
  • menu button styling
• DeleteModal
  • button size
• Header and SideNav should always use g100 theme
• replace use of tkn--visually-hidden with cds--visually-hidden
• NamespacesDropdown in app header - not selecting 'All namespaces' as default value when clearing selection
• dropdowns on create pages not properly cleared when clicking the 'clear' button
• logs toolbar button styles
• graph components

Tests:

• Unit tests
  • current status: 1 additional test skipped due to change in ComboBox behaviour described above, all other tests now passing

    Test Files  73 passed (73)
    Tests  579 passed | 2 skipped (581)
    

• E2E tests
  • current status: green
• Linters
  • current status: clean
• Storybook
  • current status:
    • dev mode building successfully with graph components excluded
    • all most stories functional
    • some styling issues to be resolved
    • all stories rendering some stories not rendering (e.g. resourcedetails default)
    • some functional issues (unable to switch tabs in some stories)
• cross-browser testing
  • Carbon Tab style issues in Firefox, reproducible on Carbon storybook
  • Carbon Table batch action button focus styles (black outline instead of expected white / gray), reproduced in Chrome, haven't tested other browsers yet
• a11y, full pass including but not limited to:
  • keyboard navigation
  • colour contrast
  • screen reader

Submitter Checklist

As the author of this PR, please check off the items in this checklist:

• Docs included if any changes are user facing
• Tests included if any functionality added or changed
• Follows the commit message standard
• Meets the Tekton contributor standards (including
  functionality, content, code)
• Has a kind label. You can add one by adding a comment on this PR that contains /kind <type>. Valid types are bug, cleanup, design, documentation, feature, flake, misc, question, tep
• Release notes block below has been updated with any user facing changes (new features, significant UI changes, API changes, bug fixes, changes requiring upgrade notices or deprecation warnings)
• Release notes contains the string "action required" if the change requires additional action from users switching to the new release

Release Notes

NONE

[tekton-robot]

Skipping CI for Draft Pull Request.
If you want CI signal for your change, please convert it to an actual PR.
You can still manually trigger a test run with /test all

[briangleeson]

Thanks for the walkthrough. A few queries, but looking good otherwise

[AlanGreene]

/test all

[AlanGreene]

/hold cancel

[AlanGreene]

/test all

[AlanGreene]

/retest

[briangleeson]

/lgtm

👍

[tekton-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: briangleeson

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [briangleeson]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment