Ant Design Refactor

[EDsCODE]

RE: @mariusandra's suggestion on better design system and overall UI improvements.

Why:

Posthog could use a makeover to reach parity in UI and UX with currently existing tools. At the moment, many of the components and layouts are initial renderings that we should standardize to give a more coherent experience to both developers and product owners.

How:

As suggested by Marius, Ant Design is a fully-featured and well-supported design system that has an extensive React library. They also have a full set of design elements for Figma/Sketch that can be used. We don't need to mockup elements from ground zero especially for initial parity. Ant Design will allow us to standardize the layout very quickly.

Process:

Features are being built and deployed on a daily basis therefore it's difficult to adhere to a full-length process of wireframing → mocking → interviewing → implementing. For the time being, we should modulate our process of designing to implementation. We can proceed as follows:

1. Scope a page or component on a page that can be rebuilt with antd components
2. Do a quick mockup of the chosen component using as much of the antd standards as possible. Match the current implemented design as much as possible and focus on complementing style from other refactored components. Emphasis on quick as the mockups don't have to be pixel perfect. Leaving negative space is ok because of possible reorientation and addition of new components. Fast drafts of alternative designs would be preferred too.
3. Create an issue with redesign components for validation/discussion
4. Implement

Extent:

• Tree shake css/js (Reduce antd module load #545 )

Key Components:

• Charts—specifically how the data is formatted in columns and date dividers are displayed (see /events)
• Graphs—specifically where buttons are located and labels are formatted
• Sidebar (Issue: Use ant.d for the sidebar #521, PR: Replace current Sidebar with Ant Design Sidebar #530)
• Modals
• Header bar (where email, worker status, config are displayed) (Antd layout #619)

Pages:

• Sign up
• Dashboard (PR: Multiple dashboards #703)
• Trends (Issue: Ant Design Trends Page #532)
• Events
• Actions (PR Updated Actions to use antd #757)
• Live Actions
• Users (PR: Speed up cohorts and use antd #706)
• Cohorts (PR: Speed up cohorts and use antd #706)
• Funnels (PR: Updated Funnels to use antd #751)
• Paths
• Setup (PR: AntD Refactor: Setup Page #621)

[SanketDG]

Can I take up refactoring the setup page with Ant components? Do I need to open a separate tracking issue for that?

[timgl]

Feel free to just raise a PR!

…

Le 16 avr. 2020 à 21:43, Sanket Dasgupta ***@***.***> a écrit : Can I take up refactoring the setup page with Ant components? Do I need to open a separate tracking issue for that? — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub, or unsubscribe.

[EDsCODE]

This is virtually done. Anything that still needs conversions are minor. Closing this