fix(web): align step markers with thumb position using thumbSize prop #751
Conversation
- Pass thumbSize prop to StepsIndicator component - Use actual thumbSize value instead of hardcoded constant - Add WebProps type for proper TypeScript typing - Fix step marker alignment on web platform edges Fixes callstack#743
BartoszKlonowski
left a comment
BartoszKlonowski
left a comment
There was a problem hiding this comment.
This is indeed the correct fix for the issue, thank you very much for the work, @mikolajwilczek 💪
Implementation wise it's good to go already, I have only one, however major, ask regarding the thumbSize prop, and after that it's good to be merged.
| | `maximumTrackImage` | Assigns a maximum track image. Only static images are supported. The leftmost pixel of the image will be stretched to fill the track. | Image<br/>.propTypes<br/>.source | iOS | | ||
| | `minimumTrackImage` | Assigns a minimum track image. Only static images are supported. The rightmost pixel of the image will be stretched to fill the track. | Image<br/>.propTypes<br/>.source | iOS | | ||
| | `thumbImage` | Sets an image for the thumb. Only static images are supported. Needs to be a URI of a local or network image; base64-encoded SVG is not supported. | Image<br/>.propTypes<br/>.source | | | ||
| | `thumbSize` | Define the size of the thumb. Only for web<br/>Default value is 20px. | number | web | |
There was a problem hiding this comment.
We don't want to add this as a new prop - doing this will bring a lot of confusion for users.
Devs been asking for such customization for a long time now, expecting a possibility to actually increase the visible size of the thumb. What we have here, instead, is the "under the hood" layout width of the thumb that we reserve for the proper alignment when rendering Slider with steps number.
Let's remove this thumbSize prop from where relevant (README, Slider.tsx) and let's make it a const just for the implementation detail purpose.
| : constants.STEP_NUMBER_TEXT_FONT_BIG, | ||
| }; | ||
| }, [options.length]); | ||
| const platformDependentStyles = useMemo(() => { |
There was a problem hiding this comment.
| const platformDependentStyles = useMemo(() => { | |
| const platformDependentStyles = useMemo(() => { |
| } | ||
| : styles.stepIndicatorElement, | ||
| }; | ||
| }, [sliderWidth, thumbSize]); |
There was a problem hiding this comment.
| }, [sliderWidth, thumbSize]); | |
| }, [sliderWidth, thumbSize]); | |
2 participants
Fixes #743
Summary:
Test Plan:
thumbSizevalues on web - alignment works correctly whenthumbSizeis smaller than the gap between steps