2929 upgrade carbon

[kevinsperrine]

Closes #2929
Closes #2437

Summary

10.40

• MenuButtons are now opened in a portal, so tests using container to query for classes needed to be switched to document.body

10.41

• Pagination buttons were reduced in size causing style breaks
• • .bx--pagination__button was reduced from 3rem to 2.5rem
• • added size parameter to SimplePagination and defaulted it to lg

10.42

• No new test failures

10.43

• title attributes were added to the selected item in Dropdowns, so tests using screen.getByRole('button', { name: 'Size Small (4x1)' }) have now changed, b/c the title attribute doesn't match the text content that it used to screen.getByRole('button', { name: 'Size Small (4x1) Open menu' }) in one case
• Custom dropdown-based components (SimpleIconDropdown, ColorDropdown, etc) will now have a title attribute that is [Object object], because carbon is now using itemToString to add a title to the dropdown. This doesn't prevent the dropdowns from working, but they become less accessible. An issue has been opened requesting the ability to render the selected item with itemToElement instead of always using itemToString

10.44

• The prop wrapperClassName for Checkbox will be deprecated in V11 in favor of className. className will then be placed on the outer wrapper.
• The handleClick prop for ClickableTile has been deprecated in favor of onClick. It will be removed in the next major release.

10.45

• no new test failures

10.46

• no new test failures

10.47

• The iconDescription prop is being deprecated in favor of other props. On the Modal, it has been replaced with closeIconLabel, and on the TimePickerSelect it has been replaced with aria-label. Deprecate usage of iconDescription for v11 carbon#9624

Acceptance Test (how to verify the PR)

• as with all carbon upgrades we check all stories
• Confirm expanded SideNav item collapse when in isRail mode
• • Actually, this one doesn't seem to be working in the preview, but it definitely works locally. Their fix is using child.type.name and I'm betting that's getting mangled by minification. Posted a comment on the original issue.
• Confirm tabbing through cards with tooltips closes the tooltip

Regression Test (how to make sure this PR doesn't break old functionality)

• as with all carbon upgrades we check all stories
• with specific attention paid to:
• • any items using pagination to make sure the buttons are the correct size
• • SimpleIconDropdown, IconDropdown, ColorDropdown (any dropdowns hijacking itemToString

Things to look for during review

• Make sure all references to iot or bx class prefix is using the prefix variable
• (React) All major areas have a data-testid attribute. New test ids should have test written to ensure they are not changed or removed.
• UI should be checked in RTL mode to ensure the proper handling of layout and text.
• All strings should be translatable.
• The code should pass a11y scans (The storybook a11y knob should show no violations). New components should have a11y test written.
• Unit test should be written and should have a coverage of 90% or higher in all areas.
• All components should be passing visual regression test. For new styles or components either a visual regression test should be written for all permutations or the base image updated.
• Changes or new components should either write new or update existing documentation.
• PR should link and close out an existing issue

[netlify]

✔️ Deploy Preview for carbon-addons-iot-react ready!

🔨 Explore the source changes: 901434c

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-addons-iot-react/deploys/618d66737af86f000a65bdd0

😎 Browse the preview: https://deploy-preview-2932--carbon-addons-iot-react.netlify.app

[netlify]

✔️ Deploy Preview for ai-apps-pal-angular ready!

🔨 Explore the source changes: 901434c

🔍 Inspect the deploy log: https://app.netlify.com/sites/ai-apps-pal-angular/deploys/618d66737af86f000a65bdd4

😎 Browse the preview: https://deploy-preview-2932--ai-apps-pal-angular.netlify.app

[kevinsperrine]

Carbon started using itemToString to add a title to the currently selectedItem in a dropdown; however, this breaks our current implementation of IconDropdowns. I've opened an issue with them to add another prop to allow us to render the selectedItem as an element instead of always calling the itemToString carbon-design-system/carbon#10038

[bjornalm]

FYI. I think we have had that conversation with them before and they didn't want to support that functionality because they didn't agree with the design use case, but let's hope they change their minds.

[kevinsperrine]

carbon seems to have fixed the double-event firing that was happening when clicking the checkbox, so this stopProp isn't needed anymore. You can confirm with:

1. Go to story path=/story/1-watson-iot-list--with-checkbox-multi-selection
2. Verify that the multi selection works by clicking on the row, clicking the checkbox and using enter key when row is focused.
3. Verify the same but with knob isVirtualList checked
4. Go to story path=/story/1-watson-iot-list--with-checkbox-multi-selection-and-hierarchy
5. Repeat step 2-3 but also verify that child / parent selections works in BOTH directions including the indeterminate state

[kevinsperrine]

iconDescription is being deprecated in favor of other attributes. On the Modal it's the closeButtonLabel

[kevinsperrine]

There are some issue with PageTitlebar.

Bread crumbs are cut off Sizing on sticky header is messed up
vs next. vs next
I think something with the breadcrumbs are throwing off multiple stories for PageTitleBar

Good eye. Fixed.

[davidicus]

There is an issue with the menu button menu placement

There are also some positioning of the dropdown menu items in RTL that are new to this upgrade

[davidicus]

whew! That was a doozy. I think this last one will be it and it should be ok to 🚢

[kodiakhq]

This PR currently has a merge conflict. Please resolve this and then re-add the status: ready to merge 🎉 label.