Remove function export wrappers

[tay1orjones]

As part of v11, many components were upgraded from class components to function components, #9712.

When v11 was close to being released, there were a handful of components that were not upgraded and instead a createClassWrapper helper was added that would wrap these components with a functional export - #10281.

The problem

One downside with this approach is that users can no longer place a ref on these components (example). One workaround is to bypass the functional wrapper by importing the root class-based component. For example:

import Slider from '@carbon/react/es/components/Slider/Slider';

The solution

The remaining components using createClassWrapper need to be refactored to be functional components. This technically is a breaking change. We could place these changes behind a feature flag(s) to avoid the breaking change until our next major (v12)

Tasks

Preview Give feedback

1. Upgrade ContentSwitcher to be a functional component
2. Upgrade OverflowMenu to be a functional component Not needed as OverflowMenu already has a new function component implementation behind a feature flag
3. Upgrade Slider to be a functional component
4. Upgrade TileGroup to be a functional component
5. Remove createClassWrapper

[github-actions]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[fabdslv]

Hello,

This problem prevents us from fixing an accessibility defect : our OverflowMenu has items that open a modal, and when we close the modal, there is no way to get focus back on the overflow menu button since we can't get ref.
The workaround doesn't work either for us because we use bx-- prefix which we can't set by importing the component directly.

[LUCROFT]

Hello @tay1orjones ! Any news on this work item ? Thanks.

[LUCROFT]

Hello @sstrubberg @tay1orjones I am re-reviewing our AVT issues and dependencies. Any news on this one ? Thanks.

[sstrubberg]

Hello @sstrubberg @tay1orjones I am re-reviewing our AVT issues and dependencies. Any news on this one ? Thanks.

We have it queued up in our "Next" pipeline, which means it's made the cut for something we're very interested in doing soon while at the same time competing with other priorities. Can you tell us more about how this effects your AVT issues and dependencies?

[fabdslv]

Hello @sstrubberg, our main issue with wrappers is that DOM (or components) references are not usable anymore, which prevents us from fixing some AVT defects around navigation (can't restore focus for example).