Vertically Centering An Icon and Code Review

[uditadhikari117]

Hi folks,

Following is a screenshot of this figma design : https://www.figma.com/file/Bmr7ltHScX620smbk0DBpc/Signup-%2F-try-twilio-migration-to-Paste-(2022)?node-id=1415%3A242282&t=fpWvOvdNJHMUuTru-0

I am trying to create JSX for the right half of the page. In the right half, I am trying to vertically center the success icons in the card checklist so they align veridically across the text they represent. This is my JSX for it :

<Box> <Grid data-testid="signup-dashboard-desktop-messaging" className="center" > <Column span={1}> <SuccessIcon decorative={true} /> </Column> <Column span={11}> <Paragraph> {t( "Deliver targeted messages over preferred channels like SMS, email, and more" )} </Paragraph> </Column> </Grid> </Box>

I played around by adding on top of the but it felt hacky. Is there a better way to do this alignment? Also, reducing the browser width and height doesn't resize the JSX components.
Here is my full PR if one is interested : https://github.com/twilio-internal/console/pull/3131/files
And the JSX code being discussed is at : apps/console/src/app/applications/SignUp/Components/SignUpDashboard/Desktop/index.tsx

[loreina]

Hi @uditadhikari117, could you create a reproduction in CodeSandbox so our team can investigate this further? Thanks!

[uditadhikari117]

Ugh! You are right. Thanks for pointing that out. I have it working here in the deploy preview -> https://deploy-preview-3131.console.stage.twilio.com/try-twilio
Does that work while I look into the code sandbox issue?

[gloriliale]

Hi @uditadhikari117! Unfortunately I can't see anything from that link either, so sorry! It shows a spinner and an error toast, but nothing else after.

[uditadhikari117]

You mean the codesandbox one or the deploy preview?

[gloriliale]

ah, here's what I'm seeing for each at the moment:

• codesandbox: blank on the right hand panel
• deploy preview: spinner keeps spinning and an error toast

[uditadhikari117]

I recorded a video. May be its the portal in global protect. I think dev and stage now want us to be using the global portal.

Screen.Recording.2023-01-27.at.8.17.09.PM.mov

[gloriliale]

Hi @uditadhikari117! I don't seem to have the same settings available in global protect, but I realize now that you provided your code in the first post, so I think that should be enough for us to discuss.

Firstly, I see that you included a className in your component implementation. Paste components don't allow classes, since our design system has specific uses of properties and design tokens. If you were able to affect a component with a class, that is a bug and we'd like to know so we can fix it! Our component APIs are designed to be flexible enough for common use cases, and our primitives have the most style flexibility while still using our tokens. More information about why we do not support classes is available in these previous discussions: #761 and #1222.

I spoke to our design team and they assured me that having the icons line up with the top line of text would also be fine for this design, although it would be better to leave the default spacing after the heading as opposed to zero-ing it out.

If you'd still like to center the icon with the content, my suggestion is to take advantage of our Media Object component, which is specifically for an image or figure to be positioned horizontally next to some form of content.

Hope this helps!