-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: extend PickerBase component functionality (#11851)
## **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](https://www.figma.com/design/aMYisczaJyEsYl1TYdcPUL/Portfolio-View?m=auto&node-id=5019-59596&t=PAdxL1bg2Mk08dSk-1) 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](#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 | |:---:|:---:| |<img width="459" alt="original" src="https://github.com/user-attachments/assets/bfee7ac9-0fd2-43e3-876a-7f2dafc5901e">|<img width="458" alt="updated" src="https://github.com/user-attachments/assets/278cf902-34a5-4aca-a848-02cba745aa9a">| ### **Before** NA ### **After** NA ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [x] 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.
- Loading branch information
1 parent
a5e5110
commit 6b2cf82
Showing
7 changed files
with
203 additions
and
21 deletions.
There are no files selected for viewing
57 changes: 57 additions & 0 deletions
57
app/component-library/components/Pickers/PickerBase/PickerBase.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
/* eslint-disable react/display-name */ | ||
/* eslint-disable react-native/no-inline-styles */ | ||
// External dependencies. | ||
import React from 'react'; | ||
import { View, Text } from 'react-native'; | ||
|
||
// Internal dependencies. | ||
import PickerBase from './PickerBase'; | ||
import { IconSize } from '../../Icons/Icon'; | ||
|
||
const PickerBaseMeta = { | ||
title: 'Component Library / Pickers', | ||
component: PickerBase, | ||
argTypes: { | ||
children: { | ||
control: { type: 'text' }, | ||
defaultValue: 'Select an option', | ||
}, | ||
iconSize: { | ||
options: Object.values(IconSize), | ||
control: { type: 'select' }, | ||
defaultValue: IconSize.Md, | ||
}, | ||
}, | ||
}; | ||
|
||
export default PickerBaseMeta; | ||
|
||
export const Default = { | ||
render: ({ | ||
children, | ||
iconSize, | ||
}: { | ||
children: string; | ||
iconSize: IconSize; | ||
}) => ( | ||
<View style={{ alignItems: 'flex-start' }}> | ||
<PickerBase onPress={() => null} iconSize={iconSize}> | ||
<Text>{children}</Text> | ||
</PickerBase> | ||
</View> | ||
), | ||
}; | ||
|
||
export const WithCustomStyles = { | ||
render: () => ( | ||
<View style={{ alignItems: 'flex-start' }}> | ||
<PickerBase | ||
onPress={() => null} | ||
style={{ width: 200 }} | ||
dropdownIconStyle={{ marginLeft: 20 }} | ||
> | ||
<Text>Custom Styled Picker</Text> | ||
</PickerBase> | ||
</View> | ||
), | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
68 changes: 64 additions & 4 deletions
68
app/component-library/components/Pickers/PickerBase/PickerBase.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,18 +1,78 @@ | ||
// Third party dependencies. | ||
import React from 'react'; | ||
import { View } from 'react-native'; | ||
import { render } from '@testing-library/react-native'; | ||
import { Text } from 'react-native'; | ||
import { render, fireEvent } from '@testing-library/react-native'; | ||
|
||
// Internal dependencies. | ||
import PickerBase from './PickerBase'; | ||
import { IconName, IconSize } from '../../Icons/Icon'; | ||
|
||
describe('PickerBase', () => { | ||
it('should render correctly', () => { | ||
const { toJSON } = render( | ||
<PickerBase onPress={jest.fn}> | ||
<View /> | ||
<PickerBase onPress={jest.fn()}> | ||
<Text>Test Content</Text> | ||
</PickerBase>, | ||
); | ||
expect(toJSON()).toMatchSnapshot(); | ||
}); | ||
|
||
it('should call onPress when pressed', () => { | ||
const onPressMock = jest.fn(); | ||
const { getByText } = render( | ||
<PickerBase onPress={onPressMock}> | ||
<Text>Test Content</Text> | ||
</PickerBase>, | ||
); | ||
|
||
fireEvent.press(getByText('Test Content')); | ||
expect(onPressMock).toHaveBeenCalledTimes(1); | ||
}); | ||
|
||
it('should render children correctly', () => { | ||
const { getByText } = render( | ||
<PickerBase onPress={jest.fn()}> | ||
<Text>Child Component</Text> | ||
</PickerBase>, | ||
); | ||
|
||
expect(getByText('Child Component')).toBeTruthy(); | ||
}); | ||
|
||
it('should render dropdown icon', () => { | ||
const { UNSAFE_getByProps } = render( | ||
<PickerBase onPress={jest.fn()}> | ||
<Text>Test Content</Text> | ||
</PickerBase>, | ||
); | ||
|
||
const icon = UNSAFE_getByProps({ name: IconName.ArrowDown }); | ||
expect(icon).toBeTruthy(); | ||
}); | ||
|
||
it('should apply custom icon size', () => { | ||
const { UNSAFE_getByProps } = render( | ||
<PickerBase onPress={jest.fn()} iconSize={IconSize.Lg}> | ||
<Text>Test Content</Text> | ||
</PickerBase>, | ||
); | ||
|
||
const icon = UNSAFE_getByProps({ | ||
name: IconName.ArrowDown, | ||
size: IconSize.Lg, | ||
}); | ||
expect(icon).toBeTruthy(); | ||
}); | ||
|
||
it('should apply custom dropdown icon style', () => { | ||
const customStyle = { marginLeft: 20 }; | ||
const { UNSAFE_getByProps } = render( | ||
<PickerBase onPress={jest.fn()} dropdownIconStyle={customStyle}> | ||
<Text>Test Content</Text> | ||
</PickerBase>, | ||
); | ||
|
||
const icon = UNSAFE_getByProps({ name: IconName.ArrowDown }); | ||
expect(icon.props.style).toEqual(expect.objectContaining(customStyle)); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters