search

jpmorganchase / salt-ds

React UI components built with a focus on accessibility, customisation and ease-of-use
https://www.saltdesignsystem.com
Apache License 2.0
111 stars 78 forks source link

Smarter `ResponsiveProp` resolve logic #3081

Open origami-z opened 4 months ago

origami-z commented 4 months ago

Area

UI Components

The problem

When using a prop with ResponsiveProp type, i need to specify all breakpoints to make it resolve correctly.

Take GridLayout's columns prop for example, if i want 2 columns on smaller viewport and 4 columns on bigger viewport, i will have to specify every breakpoint like columns={{ xs: 2, sm: 2, md: 2, lg: 2, xl: 2}}

The solution

It will be good to resolve values using only thresholds, i.e. columns={{ lg: 2, xl: 4 }}

Alternatives and examples

?

Are you a JPMorgan Chase & Co. employee?

el-dav commented 4 months ago

See https://github.com/jpmorganchase/salt-ds/pull/1158 for my previous suggestion. I don't think we should be building on the current implementation of responsive props in specific layout components.

Note I think the existing solution causes components to re-render excessively when the screen size changes