Skip to content

Conversation

alexz88dev
Copy link
Contributor

Summary

This pull request enhances the Shimmer component by introducing new props to customize the linear gradient animation. Previously, the gradient colors and their start/end coordinates were hardcoded, limiting flexibility.

This change allows users to specify:

  • linearGradients: An array of color strings for the gradient.
  • gradientStart: An object { x: number, y: number } for the gradient's starting point.
  • gradientEnd: An object { x: number, y: number } for the gradient's ending point.

Default values are provided for these new props to maintain existing behavior if they are not specified. The component's Props interface and the project's README.md have been updated to reflect these additions.

Test plan

  1. Default Behavior:

    • Render the Shimmer component within a ShimmerProvider without passing any of the new props (linearGradients, gradientStart, gradientEnd).
    • Expected: The shimmer animation should appear with the default gradient (transparent -> semi-transparent white -> transparent) moving horizontally.
  2. Custom linearGradients:

    • Render the Shimmer component and pass a custom linearGradients prop, for example: linearGradients={['#FF000050', '#00FF0050', '#0000FF50']}.
    • Expected: The shimmer animation should now use the custom colors (e.g., semi-transparent red, green, blue).
  3. Custom gradientStart and gradientEnd:

    • Render the Shimmer component and pass custom gradientStart and gradientEnd props to change the gradient direction. For example, for a vertical shimmer:
      • gradientStart={{ x: 0.5, y: 0 }}
      • gradientEnd={{ x: 0.5, y: 1 }}
    • Expected: The shimmer animation should now move vertically.
  4. Combination of Custom Props:

    • Render the Shimmer component passing custom values for linearGradients, gradientStart, and gradientEnd simultaneously.
    • Expected: The shimmer animation should reflect all custom values (custom colors and custom direction).
  5. README Documentation:

    • Check the README.md file.
    • Expected: The "Props" section for the Shimmer component should accurately list and describe linearGradients, gradientStart, and gradientEnd, including their types and default values.

@Q1w1N Q1w1N merged commit 6d08c6d into callstack:main May 14, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants