feat: Extended utility classes and updated color palette #11047
Merged
Conversation
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
# Conflicts: # frontend/src/scenes/billing/BillingSubscribed.tsx # frontend/src/scenes/dashboard/Dashboard.tsx
benjackwhite
changed the title
# Conflicts: # frontend/src/exporter/Exporter.tsx # frontend/src/scenes/experiments/Experiment.tsx
# Conflicts: # frontend/src/scenes/funnels/FunnelCanvasLabel.tsx
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Problem
Likely to close #9868
Rather than worrying about Tailwind / Windi for now, lets just replicate the API for what we currently need / want
Changes
Notice to be posted in #dev Slack when done:
Hey everyone - heads up that with a latest merge we have updated the in-house Utility CSS classes to be more in line with the ever-so-popular Tailwind (although we are not moving to Tailwind). Some things have changed that you should simply be aware of. (You can get a feeling for what changed by glancing at the PR or checking out a new entry in Storybook: TODO)
Notable changes
all margin/padding/gap/space values are updated to match the Tailwind convention:
p-2===padding: 0.5remp-4===padding: 1remSo that is different to how we used to have it:
mais nowm-4pt-05is nowpt-2...elsewhere...
border-allis gone in favour ofborder rounded-lgseparating the radius stuff from the border logicspace-between-itemsis nowflex justify-betweenflex-centeris nowflex items-centerThis is part of a bigger load of work towards standardising our frontend docs and approach so bear with us 🙌
👉 Stay up-to-date with PostHog coding conventions for a smoother review.
How did you test this code?
A LOT of local checking everywhere I could