github-actions[bot]
commented
1 hour 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.
The problem
I'm working on embedding the data-table and pagination component into our product watsonx Assistant chat. The pagination component has a smaller form factor, but it only appears when the screen size is close to mobile size.
For our use case our chat width is often quite narrow so it would be nice to use the smaller form factor of the component, however there is no good way to switch to the smaller form factor when it's only enabled by using a small screen.
(I'm marking this as high priority because we do have an upcoming release - however I can get around this by using my own css to hide parts of the components just like you guys do at this more narrow breakpoint, I just don't want to rely on that solution long term since it's brittle.)
The solution
Add a prop to the pagination component that can be used to dynamically switch to the smaller form factor. The component could still operate as it does today when this prop is not set in order to not break people who are relying on the screen size breakpoint behavior. With this prop I could make the chat look like this, or if the chat window is larger I could use the original pagination component view:
Examples
I don't have examples but I'm surprised Carbon is taking this approach here. For most components it seems functionality is exposed through props or breakpoints are made based off the parent components width. Setting break points off the screensize may be unexpected by consumers of Carbon if it's not a common pattern.
Application/PAL
watsonx Assistant
Business priority
High Priority = pressing release
Available extra resources
No response
Code of Conduct