Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: apply custom styling to active dropdown item #609

Merged
merged 10 commits into from
Aug 12, 2024

Conversation

SkMamtajuddin
Copy link
Contributor

@SkMamtajuddin SkMamtajuddin commented Aug 12, 2024

Description:
This PR introduces custom styling for active dropdown items in the RNPickerSelect component. It ensures that the active item in the dropdown menu is visually distinct by applying a specified custom style.

Changes Made:

  1. Component Update:

    • Modified the RNPickerSelect component to accept and apply custom styles to the active dropdown item.
    • Integrated logic to apply the custom styles based on the current value of the picker.
  2. Test Implementation:

    • Added unit tests to verify that the custom styles are correctly applied to the active dropdown item.
    • Ensured that the styles are applied when the picker value changes, and the active item reflects the custom styling.
  3. Testing Enhancements:

    • Updated existing tests and added new ones to validate the custom styling feature.
    • Included both Enzyme and React Testing Library approaches to cover various scenarios and ensure robustness.

Additional Notes:

  • The custom styles for the active item are defined through a customActiveItemStyle prop, which allows for flexible styling.
  • The test cases have been adapted to verify the presence and correctness of the applied styles using different testing libraries.

Screenshots/GIFs:
image

Impact:

  • This enhancement improves the visual feedback for users interacting with the dropdown, making it clear which item is currently selected.
  • The added tests ensure that future changes to the component do not break the custom styling functionality.

Related Issues:

@SkMamtajuddin
Copy link
Contributor Author

@remarkablemark can you please have a look on this ?

Copy link

codecov bot commented Aug 12, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Please upload report for BASE (master@1cb509c). Learn more about missing BASE report.

Additional details and impacted files
@@            Coverage Diff            @@
##             master     #609   +/-   ##
=========================================
  Coverage          ?   95.40%           
=========================================
  Files             ?        3           
  Lines             ?      174           
  Branches          ?       53           
=========================================
  Hits              ?      166           
  Misses            ?        8           
  Partials          ?        0           

@remarkablemark remarkablemark changed the title Enhance RNPickerSelect Dropdown Item Styling feat: apply custom styling to active dropdown item Aug 12, 2024
@remarkablemark remarkablemark added the enhancement New feature or request label Aug 12, 2024
@remarkablemark remarkablemark merged commit 4626a4e into lawnstarter:master Aug 12, 2024
6 of 7 checks passed
hesengineering pushed a commit to hesengineering/react-native-picker-select that referenced this pull request Aug 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Need a styling for active or selected item
5 participants