chore: remove antd progress (#19953)

PostHog · Jan 26, 2024 · 0dd78c5 · 0dd78c5
1 parent f7f1408
commit 0dd78c5
Show file tree

Hide file tree

Showing 17 changed files with 84 additions and 27 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -119,7 +119,7 @@ module.exports = {
                     },
                     {
                         name: 'antd',
-                        importNames: ['Card', 'Col', 'Row', 'Alert', 'Tooltip'],
+                        importNames: ['Card', 'Col', 'Row', 'Alert', 'Tooltip', 'Progress'],
                         message: 'please use the Lemon equivalent instead',
                     },
                 ],
@@ -169,6 +169,10 @@ module.exports = {
                         element: 'LemonButtonWithDropdown',
                         message: 'use <LemonMenu> with a <LemonButton> child instead',
                     },
+                    {
+                        element: 'Progress',
+                        message: 'use <LemonProgress> instead',
+                    },
                 ],
             },
         ],

diff --git a/cypress/e2e/auth-password-reset.cy.ts b/cypress/e2e/auth-password-reset.cy.ts
@@ -24,7 +24,7 @@ describe('Password Reset', () => {
     it('Shows validation error if passwords do not match', () => {
         cy.visit('/reset/e2e_test_user/e2e_test_token')
         cy.get('[data-attr="password"]').type('12345678')
-        cy.get('.ant-progress-bg').should('be.visible')
+        cy.get('.LemonProgress__track').should('be.visible')
         cy.get('[data-attr="password-confirm"]').type('1234567A')
         cy.get('button[type=submit]').click()
         cy.get('.text-danger').should('contain', 'Passwords do not match')

diff --git a/cypress/e2e/invites.cy.ts b/cypress/e2e/invites.cy.ts
@@ -53,7 +53,7 @@ describe('Invite Signup', () => {
         cy.get('.BridgePage__left').should('contain', "You've been invited to join")
         cy.get('input[type="email"]').should('have.value', target_email)
         cy.get('[data-attr="password"]').type('12345678')
-        cy.get('.ant-progress-bg').should('not.have.css', 'width', '0px') // Password strength indicator is working
+        cy.get('.LemonProgress__track').should('not.have.css', 'width', '0px') // Password strength indicator is working
         cy.get('[data-attr="first_name"]').type(randomString('Bob'))
         cy.get('[data-attr=signup-role-at-organization]').click()
         cy.get('.Popover li:first-child').click()

diff --git a/frontend/__snapshots__/lemon-ui-lemon-progress--variations--dark.png b/frontend/__snapshots__/lemon-ui-lemon-progress--variations--dark.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-progress--variations--light.png b/frontend/__snapshots__/lemon-ui-lemon-progress--variations--light.png
diff --git a/frontend/__snapshots__/scenes-other-signup--cloud--dark.png b/frontend/__snapshots__/scenes-other-signup--cloud--dark.png
diff --git a/frontend/__snapshots__/scenes-other-signup--self-hosted--dark.png b/frontend/__snapshots__/scenes-other-signup--self-hosted--dark.png
diff --git a/frontend/__snapshots__/scenes-other-signup--self-hosted-sso--dark.png b/frontend/__snapshots__/scenes-other-signup--self-hosted-sso--dark.png
diff --git a/frontend/src/lib/components/PasswordStrength.tsx b/frontend/src/lib/components/PasswordStrength.tsx
@@ -1,4 +1,4 @@
-import { Progress } from 'antd'
+import { LemonProgress } from 'lib/lemon-ui/LemonProgress'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import zxcvbn from 'zxcvbn'
 
@@ -15,14 +15,12 @@ export default function PasswordStrength({
 
     return (
         <Tooltip title="Password strength">
-            <Progress
+            <LemonProgress
                 percent={passwordScore}
-                size="small"
                 strokeColor={
                     passwordScore <= 50 ? 'var(--danger)' : passwordScore <= 75 ? 'var(--warning)' : 'var(--success)'
                 }
                 className={className}
-                showInfo={false}
             />
         </Tooltip>
     )

diff --git a/frontend/src/lib/lemon-ui/LemonProgress/LemonProgress.stories.tsx b/frontend/src/lib/lemon-ui/LemonProgress/LemonProgress.stories.tsx
@@ -0,0 +1,23 @@
+import { Meta, StoryFn } from '@storybook/react'
+
+import { LemonProgress } from './LemonProgress'
+
+const meta: Meta<typeof LemonProgress> = {
+    title: 'Lemon UI/Lemon Progress',
+    component: LemonProgress,
+    args: {
+        percent: 30,
+    },
+    tags: ['autodocs'],
+}
+export default meta
+
+export const Variations: StoryFn<typeof LemonProgress> = () => {
+    return (
+        <div className="min-w-120">
+            <LemonProgress percent={30} />
+            <LemonProgress percent={75} strokeColor="var(--warning)" />
+            <LemonProgress percent={50} size="large" strokeColor="purple" />
+        </div>
+    )
+}
diff --git a/frontend/src/lib/lemon-ui/LemonProgress/LemonProgress.tsx b/frontend/src/lib/lemon-ui/LemonProgress/LemonProgress.tsx
@@ -0,0 +1,38 @@
+import clsx from 'clsx'
+
+export type LemonProgressProps = {
+    size?: 'medium' | 'large'
+    strokeColor?: string
+    percent: number
+    children?: React.ReactNode
+    className?: string
+}
+
+export const LemonProgress = ({
+    size = 'medium',
+    percent,
+    strokeColor = 'var(--brand-blue)',
+    children,
+    className,
+}: LemonProgressProps): JSX.Element => {
+    return (
+        <div
+            className={clsx(
+                'LemonProgress rounded-full w-full inline-block bg-bg-3000',
+                size === 'large' ? 'h-5' : 'h-1.5',
+                className
+            )}
+        >
+            <span
+                className={clsx(
+                    'LemonProgress__track block h-full rounded-full transition-all',
+                    percent > 0 ? (size === 'large' ? 'min-w-5' : 'min-w-1.5') : null
+                )}
+                // eslint-disable-next-line react/forbid-dom-props
+                style={{ width: `${percent}%`, backgroundColor: strokeColor }}
+            >
+                {children}
+            </span>
+        </div>
+    )
+}
diff --git a/frontend/src/lib/lemon-ui/LemonProgress/index.tsx b/frontend/src/lib/lemon-ui/LemonProgress/index.tsx
@@ -0,0 +1 @@
+export * from './LemonProgress'
diff --git a/frontend/src/scenes/apps/HistoricalExportsTab.tsx b/frontend/src/scenes/apps/HistoricalExportsTab.tsx
@@ -1,6 +1,6 @@
-import { Progress } from 'antd'
 import { useActions, useValues } from 'kea'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { LemonProgress } from 'lib/lemon-ui/LemonProgress'
 import { LemonTable, LemonTableColumn } from 'lib/lemon-ui/LemonTable'
 import { createdAtColumn, createdByColumn } from 'lib/lemon-ui/LemonTable/columnUtils'
 import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
@@ -76,7 +76,9 @@ export function HistoricalExportsTab(): JSX.Element {
                                         </LemonTag>
                                     )
                                 case 'not_finished':
-                                    return <Progress percent={Math.floor((historicalExport.progress || 0) * 100)} />
+                                    return (
+                                        <LemonProgress percent={Math.floor((historicalExport.progress || 0) * 100)} />
+                                    )
                             }
                         },
                         align: 'right',

diff --git a/frontend/src/scenes/experiments/Experiment.scss b/frontend/src/scenes/experiments/Experiment.scss
@@ -137,14 +137,6 @@
             font-weight: 900;
             content: '\2022';
         }
-
-        .ant-progress-inner {
-            border-radius: var(--radius);
-
-            .ant-progress-bg {
-                border-radius: var(--radius);
-            }
-        }
     }
 
     .no-experiment-results {

diff --git a/frontend/src/scenes/experiments/Experiment.tsx b/frontend/src/scenes/experiments/Experiment.tsx
@@ -10,7 +10,7 @@ import {
     LemonTextArea,
     Tooltip,
 } from '@posthog/lemon-ui'
-import { Popconfirm, Progress } from 'antd'
+import { Popconfirm } from 'antd'
 import clsx from 'clsx'
 import { BindLogic, useActions, useValues } from 'kea'
 import { Form, Group } from 'kea-forms'
@@ -26,6 +26,7 @@ import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { More } from 'lib/lemon-ui/LemonButton/More'
 import { LemonCollapse } from 'lib/lemon-ui/LemonCollapse'
+import { LemonProgress } from 'lib/lemon-ui/LemonProgress'
 import { Link } from 'lib/lemon-ui/Link'
 import { capitalizeFirstLetter, humanFriendlyNumber } from 'lib/utils'
 import { useEffect, useState } from 'react'
@@ -744,9 +745,8 @@ export function Experiment(): JSX.Element {
                                                     <div className="mb-2">
                                                         <b>Experiment progress</b>
                                                     </div>
-                                                    <Progress
-                                                        strokeWidth={20}
-                                                        showInfo={false}
+                                                    <LemonProgress
+                                                        size="large"
                                                         percent={experimentProgressPercent}
                                                         strokeColor="var(--success)"
                                                     />

diff --git a/frontend/src/scenes/experiments/ExperimentResult.tsx b/frontend/src/scenes/experiments/ExperimentResult.tsx
@@ -3,11 +3,12 @@ import './Experiment.scss'
 import { IconInfo } from '@posthog/icons'
 import { Tooltip } from '@posthog/lemon-ui'
 // eslint-disable-next-line no-restricted-imports
-import { Col, Progress } from 'antd'
+import { Col } from 'antd'
 import { useValues } from 'kea'
 import { getSeriesColor } from 'lib/colors'
 import { EntityFilterInfo } from 'lib/components/EntityFilterInfo'
 import { FunnelLayout } from 'lib/constants'
+import { LemonProgress } from 'lib/lemon-ui/LemonProgress'
 import { capitalizeFirstLetter } from 'lib/utils'
 
 import { filtersToQueryNode } from '~/queries/nodes/InsightQuery/utils/filtersToQueryNode'
@@ -131,10 +132,8 @@ export function ExperimentResult(): JSX.Element {
                                                 <span>{conversionRateForVariant(variant)}%</span>
                                             </div>
                                         )}
-                                        <Progress
+                                        <LemonProgress
                                             percent={Number((experimentResults.probability[variant] * 100).toFixed(1))}
-                                            size="small"
-                                            showInfo={false}
                                             strokeColor={getSeriesColor(
                                                 getIndexForVariant(variant, experimentInsightType)
                                             )}

diff --git a/frontend/src/scenes/instance/AsyncMigrations/AsyncMigrations.tsx b/frontend/src/scenes/instance/AsyncMigrations/AsyncMigrations.tsx
@@ -1,10 +1,10 @@
 import { Link } from '@posthog/lemon-ui'
-import { Progress } from 'antd'
 import { useActions, useValues } from 'kea'
 import { PageHeader } from 'lib/components/PageHeader'
 import { IconPlayCircle, IconRefresh, IconReplay } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { More } from 'lib/lemon-ui/LemonButton/More'
+import { LemonProgress } from 'lib/lemon-ui/LemonProgress'
 import { LemonTable, LemonTableColumn } from 'lib/lemon-ui/LemonTable'
 import { LemonTabs } from 'lib/lemon-ui/LemonTabs'
 import { LemonTag, LemonTagType } from 'lib/lemon-ui/LemonTag/LemonTag'
@@ -87,7 +87,7 @@ export function AsyncMigrations(): JSX.Element {
             const progress = asyncMigration.progress
             return (
                 <div>
-                    <Progress percent={progress} />
+                    <LemonProgress percent={progress} />
                 </div>
             )
         },