From e92b414589dd0d2c70c6253c081bebc9a6086cfa Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Mon, 30 Jun 2025 16:43:34 -0300 Subject: [PATCH 1/7] feat: added imgAlt, imgWidth and imgHeight to GenericUpsellModal --- .../GenericUpsellModal/GenericUpsellModal.tsx | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.tsx b/apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.tsx index a6f4993cd074b..13009bdbc5adb 100644 --- a/apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.tsx +++ b/apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.tsx @@ -8,11 +8,26 @@ type GenericUpsellModalProps = Omit, 'varian subtitle?: string | ReactElement; description?: string | ReactElement; img: ComponentProps['src']; + + imgWidth?: ComponentProps['width']; + imgHeight?: ComponentProps['height']; + imgAlt?: string; onClose: () => void; onConfirm?: () => void; }; -const GenericUpsellModal = ({ tagline, subtitle, img, description, confirmText, icon = null, ...props }: GenericUpsellModalProps) => { +const GenericUpsellModal = ({ + tagline, + subtitle, + img, + imgAlt = '', + imgWidth, + imgHeight, + description, + confirmText, + icon = null, + ...props +}: GenericUpsellModalProps) => { const { t } = useTranslation(); return ( @@ -23,7 +38,7 @@ const GenericUpsellModal = ({ tagline, subtitle, img, description, confirmText, variant='upsell' confirmText={confirmText ?? t('Upgrade')} > - + {subtitle && ( {subtitle} From 02ba419cfe56110af3fe114f5b3486b183765cfe Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Mon, 30 Jun 2025 17:46:45 -0300 Subject: [PATCH 2/7] test: added unit tests --- .../GenericUpsellModal.spec.tsx | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.spec.tsx b/apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.spec.tsx index 58daefb184689..f9f944ce5bb39 100644 --- a/apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.spec.tsx +++ b/apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.spec.tsx @@ -67,4 +67,24 @@ describe('GenericUpsellModal', () => { expect(screen.getByText('Premium capability')).toBeInTheDocument(); }); + + it('should render with img properties', () => { + const props = { + ...defaultProps, + onCancel: jest.fn(), + onConfirm: jest.fn(), + imgWidth: 300, + imgHeight: 200, + imgAlt: 'Alternative text', + }; + render(, { wrapper: appRoot }); + + const heroImage = screen.getByRole('img'); + expect(heroImage).toHaveAttribute('src', 'test-image.png'); + expect(heroImage).toHaveAttribute('alt', 'Alternative text'); + expect(heroImage).toHaveStyle({ + width: '300px', + height: '200px', + }); + }); }); From a1fe1ec189b29a4d949e82a9d11d18a19747114b Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Wed, 2 Jul 2025 19:26:21 -0300 Subject: [PATCH 3/7] chore: updated storybook --- .../GenericUpsellModal/GenericUpsellModal.stories.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.stories.tsx b/apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.stories.tsx index 3a391ff2f714f..aaab935b396cc 100644 --- a/apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.stories.tsx +++ b/apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.stories.tsx @@ -9,6 +9,7 @@ const meta = { args: { onClose: action('onClose'), img: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z', + imgAlt: 'Placeholder image', }, parameters: { layout: 'centered', @@ -24,6 +25,7 @@ export const Default: Story = { subtitle: 'This is a subtitle', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', + imgAlt: 'Placeholder image', onCancel: action('onCancel'), onConfirm: action('onConfirm'), }, @@ -50,3 +52,11 @@ export const WithAnnotation: Story = { annotation: 'This is an annotation.', }, }; + +export const WithFixedWidthAndHeight: Story = { + args: { + ...Default.args, + imgHeight: 600, + imgWidth: 600, + }, +}; From 0faf9f856aa35436d9b9ff7d846b61ef898c3fbe Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Wed, 2 Jul 2025 19:48:06 -0300 Subject: [PATCH 4/7] chore: updated snapshots --- .../GenericUpsellModal.spec.tsx.snap | 118 +++++++++++++++++- 1 file changed, 114 insertions(+), 4 deletions(-) diff --git a/apps/meteor/client/components/GenericUpsellModal/__snapshots__/GenericUpsellModal.spec.tsx.snap b/apps/meteor/client/components/GenericUpsellModal/__snapshots__/GenericUpsellModal.spec.tsx.snap index 61a7ec051890c..3a0e521ec8afb 100644 --- a/apps/meteor/client/components/GenericUpsellModal/__snapshots__/GenericUpsellModal.spec.tsx.snap +++ b/apps/meteor/client/components/GenericUpsellModal/__snapshots__/GenericUpsellModal.spec.tsx.snap @@ -57,7 +57,7 @@ exports[`GenericUpsellModal renders Default without crashing 1`] = ` class="rcx-modal__hero-image-wrapper" > @@ -167,7 +167,7 @@ exports[`GenericUpsellModal renders WithAnnotation without crashing 1`] = ` class="rcx-modal__hero-image-wrapper" > @@ -282,7 +282,7 @@ exports[`GenericUpsellModal renders WithCustomButtons without crashing 1`] = ` class="rcx-modal__hero-image-wrapper" > @@ -392,7 +392,7 @@ exports[`GenericUpsellModal renders WithCustomTagLine without crashing 1`] = ` class="rcx-modal__hero-image-wrapper" > @@ -444,3 +444,113 @@ exports[`GenericUpsellModal renders WithCustomTagLine without crashing 1`] = ` `; + +exports[`GenericUpsellModal renders WithFixedWidthAndHeight without crashing 1`] = ` + +
+ +
+
+
+
+
+ Premium capability +
+

+ This is the title +

+
+ +
+
+
+
+
+ Placeholder image +
+

+ This is a subtitle +

+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+
+ + +
+
+
+ +
+ +`; From e4e4f721e4e93b1fb87553057e93be0b9c5bd823 Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Thu, 3 Jul 2025 14:44:43 -0300 Subject: [PATCH 5/7] chore: changeset --- .changeset/hot-guests-itch.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 .changeset/hot-guests-itch.md diff --git a/.changeset/hot-guests-itch.md b/.changeset/hot-guests-itch.md new file mode 100644 index 0000000000000..63b49ce776c1d --- /dev/null +++ b/.changeset/hot-guests-itch.md @@ -0,0 +1,8 @@ +--- +"@rocket.chat/meteor": patch +--- + +##### Adds `imgAlt`, `imgWidth`, and `imgHeight` props to the `GenericUpsellModal` component. +These new props improve the accessibility of upsell modals by providing alternative text for images (`imgAlt`) and help prevent layout shifts during image loading by allowing fixed dimensions to be specified (`imgWidth` and `imgHeight`). + + From aecdc864668ea2c984ad07230a039818be0426d9 Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Thu, 3 Jul 2025 14:47:35 -0300 Subject: [PATCH 6/7] chore: updated changeset formatting --- .changeset/hot-guests-itch.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.changeset/hot-guests-itch.md b/.changeset/hot-guests-itch.md index 63b49ce776c1d..c04086ffe539d 100644 --- a/.changeset/hot-guests-itch.md +++ b/.changeset/hot-guests-itch.md @@ -2,7 +2,8 @@ "@rocket.chat/meteor": patch --- -##### Adds `imgAlt`, `imgWidth`, and `imgHeight` props to the `GenericUpsellModal` component. +Adds `imgAlt`, `imgWidth`, and `imgHeight` props to the `GenericUpsellModal` component. + These new props improve the accessibility of upsell modals by providing alternative text for images (`imgAlt`) and help prevent layout shifts during image loading by allowing fixed dimensions to be specified (`imgWidth` and `imgHeight`). From 2c20a610f25c95b475c038c61ce3f54b3dfcc067 Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Thu, 3 Jul 2025 19:21:08 -0300 Subject: [PATCH 7/7] chore: updated changeset --- .changeset/hot-guests-itch.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/.changeset/hot-guests-itch.md b/.changeset/hot-guests-itch.md index c04086ffe539d..8d364d713b7f9 100644 --- a/.changeset/hot-guests-itch.md +++ b/.changeset/hot-guests-itch.md @@ -2,8 +2,6 @@ "@rocket.chat/meteor": patch --- -Adds `imgAlt`, `imgWidth`, and `imgHeight` props to the `GenericUpsellModal` component. - -These new props improve the accessibility of upsell modals by providing alternative text for images (`imgAlt`) and help prevent layout shifts during image loading by allowing fixed dimensions to be specified (`imgWidth` and `imgHeight`). +Adds `imgAlt`, `imgWidth`, and `imgHeight` props to the `GenericUpsellModal` in order to improve the accessibility of upsell modals by providing alternative text for images and preventing layout shifts during image loading by allowing fixed dimensions.