Replace style prop with utility css classes

[thmsobrmlr]

We're cleaning up how we write css. Previously we would often use the style prop e.g. <div style={{position: 'absolute', top: 8}} '/> to style components. We're now replacing this with utility classes that are very similar to the tailwind classes.

More Context

The locations that need updating can be found by running the following command:

 pnpm eslint --rule "{react/forbid-dom-props: warn}" 

Please note that not all styles can be replaced with utility classes. When dynamic values are passed in, we keep the style prop (or at least keep it for the dynamic values) and add the eslint directive // eslint-disable-next-line react/forbid-dom-props to mark this occurance as ok.

Documentation

• Our source for the classes: https://github.com/PostHog/posthog/blob/master/frontend/src/styles/utilities.scss
• A bit of documentation in Storybook: https://storybook.posthog.net/?path=/docs/lemon-ui-utilities--overview
• Reference documentation in Tailwind: https://tailwindcss.com/docs/margin.

Contributors

When you want to work on this PR, don't try to do it all at once. Rather pick out a couple (1-10) files and replace the styles there. It often makes sense to pick a specific product area or page so that changes can easily be reviewed together.

[Udit-takkar]

@thmsobrmlr can i work on this issue?

[ebrahim95]

Can multiple people work on this issue? If so then I would like to do it too.

Thank You

[thmsobrmlr]

You're both welcome to work on this and we don't typically assign issues. I'd like to avoid a situation where you both work on the same things though. Maybe @Udit-takkar can start from the top of eslint issues and @ebrahim95 from the bottom? Or align with each other and post a short notice of an area you work on.

[BalanaguYashwanth]

Is this Issue is open to contribute?

[mariusandra]

This is an long running project. Feel free to contribute if you'd like!

[BalanaguYashwanth]

ok

[Dejvino]

Looks like this is no longer reproducible and can be closed since PR #19134 started enforcing the eslint rule.

[thmsobrmlr]

@Dejvino

Looks like this is no longer reproducible and can be closed since PR #19134 started enforcing the eslint rule.

There are still quite a bunch of these in the codebase, they just have been ignored from the linter with eslint-disable-next-line react/forbid-dom-props directives.