search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.61k stars 1.76k forks source link

Remove function export wrappers #15498

Open tay1orjones opened 6 months ago

tay1orjones commented 6 months ago

As part of v11, many components were upgraded from class components to function components, https://github.com/carbon-design-system/carbon/issues/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 - https://github.com/carbon-design-system/carbon/issues/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)

- [ ] Upgrade ContentSwitcher to be a functional component
- [x] ~Upgrade OverflowMenu to be a functional component~ Not needed as OverflowMenu already has a new function component implementation behind a feature flag
- [ ] Upgrade Slider to be a functional component
- [ ] Upgrade TileGroup to be a functional component
- [ ] Remove `createClassWrapper`
github-actions[bot] commented 6 months ago

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 commented 4 months ago

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.