feat: extend PickerBase component functionality

[vinnyhoward]

Description

This PR enhances the PickerBase component to provide more flexibility and control to developers, particularly in relation to the dropdown icon styling and positioning. These changes are necessary to accommodate the Header Update design requirements.

Key Changes:

1. Dropdown Icon Size Control: Developers can now specify the size of the dropdown icon, with a fallback to ensure consistent behavior.

2. Dropdown Icon Spacing: Added the ability to control the spacing between the dropdown icon and other elements within the component.

3. Backward Compatibility: These changes are designed to be non-breaking, maintaining compatibility with existing implementations.

Benefits:

• Increased flexibility for custom designs
• Better alignment with the new Header Update requirements
• Improved developer control over component styling

Impact:

Related issues

Related: #11763

Manual testing steps

1. View any instance of PickerBase being used. For example the NetworkPicker in header in the home screen

Screenshots/Recordings

Before	After

Before

NA

After

NA

Pre-merge author checklist

• I’ve followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[github-actions]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 08f40b3
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/bebe9360-dfd3-43e6-8190-82ab40467ffe

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[brianacnguyen]

Question regarding the arrow down icon changes

[github-actions]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: c612d2a
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/df1f0b89-cf1f-43ef-ba8b-e7d896d4066a

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[georgewrmarshall]

I agree that we should allow access to all child elements within our components. We usually handle this by spreading a prop object to the child components instead of exposing each prop individually, as you're doing with dropdownIconStyle. It might be more flexible to use dropdownIconProps and spread them to the <Icon {...dropdownIconProps} />, allowing props to be overridden, but that would require somewhat complex types which is out of the scope of this PR. Approving to unblock.

[vinnyhoward]

I agree that we should allow access to all child elements within our components. We usually handle this by spreading a prop object to the child components instead of exposing each prop individually, as you're doing with dropdownIconStyle. It might be more flexible to use dropdownIconProps and spread them to the <Icon {...dropdownIconProps} />, allowing props to be overridden, but that would require somewhat complex types which is out of the scope of this PR. Approving to unblock.

That makes sense. I can do a follow up after the header redesign is finished to allow that. Thanks for reviewing and approving🫡 @georgewrmarshall