From a9799f736101edbd18fe28c5a3c37c2d83ff733f Mon Sep 17 00:00:00 2001 From: gca-axelor <117281520+gca-axelor@users.noreply.github.com> Date: Fri, 29 Nov 2024 12:12:27 +0100 Subject: [PATCH] fix: improve display of warning error with popup (#812) * RM#87294 --- changelogs/unreleased/87274.json | 5 ++++ .../unreleased/87274_CardIndicator.json | 5 ++++ changelogs/unreleased/87274_InfoBubble.json | 5 ++++ .../src/navigator/drawer/DrawerContent.js | 7 ++++- .../src/navigator/drawer/MenuIconButton.js | 1 + .../molecules/CardIndicator.test.js | 20 +++++++++++--- .../components/organisms/InfoBubble.test.js | 7 +++++ .../molecules/CardIndicator/CardIndicator.tsx | 27 +++++++++++++++---- .../organisms/InfoBubble/InfoBubble.tsx | 5 +++- .../molecules/CardIndicator.stories.tsx | 2 ++ .../stories/organisms/InfoBubble.stories.tsx | 2 ++ 11 files changed, 75 insertions(+), 11 deletions(-) create mode 100644 changelogs/unreleased/87274.json create mode 100644 changelogs/unreleased/87274_CardIndicator.json create mode 100644 changelogs/unreleased/87274_InfoBubble.json diff --git a/changelogs/unreleased/87274.json b/changelogs/unreleased/87274.json new file mode 100644 index 0000000000..f453715dd8 --- /dev/null +++ b/changelogs/unreleased/87274.json @@ -0,0 +1,5 @@ +{ + "title": "Menu: use popup to display error message", + "type": "fix", + "packages": "core" +} diff --git a/changelogs/unreleased/87274_CardIndicator.json b/changelogs/unreleased/87274_CardIndicator.json new file mode 100644 index 0000000000..38f94c6eee --- /dev/null +++ b/changelogs/unreleased/87274_CardIndicator.json @@ -0,0 +1,5 @@ +{ + "title": "CardIndicator: add possibility to display indication in popup", + "type": "feat", + "packages": "ui" +} diff --git a/changelogs/unreleased/87274_InfoBubble.json b/changelogs/unreleased/87274_InfoBubble.json new file mode 100644 index 0000000000..5a72a41498 --- /dev/null +++ b/changelogs/unreleased/87274_InfoBubble.json @@ -0,0 +1,5 @@ +{ + "title": "InfoBubble: add usePopup props to display indication in popup", + "type": "feat", + "packages": "ui" +} diff --git a/packages/core/src/navigator/drawer/DrawerContent.js b/packages/core/src/navigator/drawer/DrawerContent.js index 0230c3d796..066ad7f42a 100644 --- a/packages/core/src/navigator/drawer/DrawerContent.js +++ b/packages/core/src/navigator/drawer/DrawerContent.js @@ -215,7 +215,9 @@ const DrawerContent = ({ {externalMenuIsVisible && ( - + {drawerModules.map(_module => ( marginHorizontal: 12, zIndex: 3, }, + scrollView: { + paddingBottom: 10, + }, otherIconsContainer: { marginVertical: 8, }, diff --git a/packages/core/src/navigator/drawer/MenuIconButton.js b/packages/core/src/navigator/drawer/MenuIconButton.js index 261808c104..9608eb33b4 100644 --- a/packages/core/src/navigator/drawer/MenuIconButton.js +++ b/packages/core/src/navigator/drawer/MenuIconButton.js @@ -83,6 +83,7 @@ const MenuIconButton = ({ {compatibilityError && ( { const props = { indication: 'heart', children: , isVisible: true, - handleClose: () => {}, + handleClose: jest.fn(), + usePopup: false, }; it('should render without crashing', () => { @@ -35,7 +36,7 @@ describe('CardIndicator Component', () => { expect(wrapper.exists()).toBe(true); }); - it('renders the right informations', () => { + it('renders the right components when usePopup is false', () => { const wrapper = shallow(); expect(wrapper.contains(props.children)).toBe(true); @@ -43,8 +44,19 @@ describe('CardIndicator Component', () => { expect(wrapper.find(Text).prop('children')).toBe(props.indication); wrapper.setProps({isVisible: false}); - expect(wrapper.contains(props.children)).toBe(true); expect(wrapper.find(Card).exists()).toBe(false); }); + + it('renders the right components when usePopup is true', () => { + const wrapper = shallow(); + + expect(wrapper.contains(props.children)).toBe(true); + expect(wrapper.find(Alert).exists()).toBe(true); + expect(wrapper.find(Text).prop('children')).toBe(props.indication); + + wrapper.setProps({isVisible: false}); + expect(wrapper.contains(props.children)).toBe(true); + expect(wrapper.find(Alert).exists()).toBe(false); + }); }); diff --git a/packages/ui/__tests__/components/organisms/InfoBubble.test.js b/packages/ui/__tests__/components/organisms/InfoBubble.test.js index 325a0caa46..f8ac4c4b56 100644 --- a/packages/ui/__tests__/components/organisms/InfoBubble.test.js +++ b/packages/ui/__tests__/components/organisms/InfoBubble.test.js @@ -28,6 +28,7 @@ describe('InfoBubble Component', () => { iconName: 'plus', badgeColor: Colors.primaryColor, indication: 'This is an info bubble.', + usePopup: false, }; it('should render without crashing', () => { @@ -78,4 +79,10 @@ describe('InfoBubble Component', () => { wrapper.find(TouchableOpacity).simulate('press'); expect(wrapper.find(CardIndicator).prop('isVisible')).toBe(false); }); + + it('should pass usePopup to CardIndicator', () => { + const wrapper = shallow(); + + expect(wrapper.find(CardIndicator).prop('usePopup')).toBe(true); + }); }); diff --git a/packages/ui/src/components/molecules/CardIndicator/CardIndicator.tsx b/packages/ui/src/components/molecules/CardIndicator/CardIndicator.tsx index 6a2d009b3a..62e420b2d5 100644 --- a/packages/ui/src/components/molecules/CardIndicator/CardIndicator.tsx +++ b/packages/ui/src/components/molecules/CardIndicator/CardIndicator.tsx @@ -24,6 +24,7 @@ import { } from '../../../hooks/use-click-outside'; import {checkNullString} from '../../../utils'; import {Card, Text} from '../../atoms'; +import Alert from '../Alert/Alert'; interface CardIndicatorProps { style?: any; @@ -34,6 +35,7 @@ interface CardIndicatorProps { isVisible: boolean; handleClose: () => void; space?: number; + usePopup?: boolean; } const CardIndicator = ({ @@ -45,6 +47,7 @@ const CardIndicator = ({ isVisible, handleClose, space = Dimensions.get('window').width * 0.08, + usePopup = false, }: CardIndicatorProps) => { const wrapperRef = useRef(null); const clickOutside = useClickOutside({wrapperRef}); @@ -60,14 +63,28 @@ const CardIndicator = ({ } }, [clickOutside, isVisible, handleClose]); + const renderIndication = () => { + if (checkNullString(indication)) { + return null; + } + + return usePopup ? ( + + {indication} + + ) : ( + + {indication} + + ); + }; + return ( {children} - {!checkNullString(indication) && isVisible ? ( - - {indication} - - ) : null} + {isVisible && renderIndication()} ); }; diff --git a/packages/ui/src/components/organisms/InfoBubble/InfoBubble.tsx b/packages/ui/src/components/organisms/InfoBubble/InfoBubble.tsx index 17d9dd9d53..6f71f01fc2 100644 --- a/packages/ui/src/components/organisms/InfoBubble/InfoBubble.tsx +++ b/packages/ui/src/components/organisms/InfoBubble/InfoBubble.tsx @@ -31,6 +31,7 @@ interface InfoBubbleProps { size?: number; position?: 'left' | 'right'; coloredBubble?: boolean; + usePopup?: boolean; } const InfoBubble = ({ @@ -42,6 +43,7 @@ const InfoBubble = ({ size = Dimensions.get('window').width * 0.07, position = 'right', coloredBubble = true, + usePopup = false, }: InfoBubbleProps) => { const styles = useMemo(() => getStyles(badgeColor, size), [badgeColor, size]); @@ -54,7 +56,8 @@ const InfoBubble = ({ position={position} isVisible={isVisible} handleClose={() => setIsVisible(false)} - textIndicationStyle={textIndicationStyle}> + textIndicationStyle={textIndicationStyle} + usePopup={usePopup}> setIsVisible(current => !current)}> = { position: 'right', space: 50, isVisible: true, + usePopup: false, }, argTypes: { handleClose: disabledControl, + usePopup: {control: 'boolean'}, }, render: args => { return ( diff --git a/packages/ui/stories/organisms/InfoBubble.stories.tsx b/packages/ui/stories/organisms/InfoBubble.stories.tsx index f0a3691bc0..205505a819 100644 --- a/packages/ui/stories/organisms/InfoBubble.stories.tsx +++ b/packages/ui/stories/organisms/InfoBubble.stories.tsx @@ -37,9 +37,11 @@ export const InfoBubble: Story = { size: 25, position: 'right', coloredBubble: true, + usePopup: false, }, argTypes: { badgeColor: colorPicker, + usePopup: {control: 'boolean'}, }, render: args => (