chore: remove antd Space component (#18396)

PostHog · Nov 6, 2023 · 876bb6a · 876bb6a
1 parent fd61058
commit 876bb6a
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 33 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -110,10 +110,6 @@ module.exports = {
                         element: 'Col',
                         message: 'use flex utility classes instead - most of the time can simply be a plain <div>',
                     },
-                    {
-                        element: 'Space',
-                        message: 'use flex or space utility classes instead',
-                    },
                     {
                         element: 'Divider',
                         message: 'use <LemonDivider> instead',
@@ -161,6 +157,10 @@ module.exports = {
                         element: 'Tabs',
                         message: 'use <LemonTabs> instead',
                     },
+                    {
+                        element: 'Space',
+                        message: 'use flex or space utility classes instead',
+                    },
                     {
                         element: 'Spin',
                         message: 'use Spinner instead',

diff --git a/frontend/src/lib/components/InsightLabel/index.tsx b/frontend/src/lib/components/InsightLabel/index.tsx
@@ -1,4 +1,4 @@
-import { Space, Tag } from 'antd'
+import { Tag } from 'antd'
 import { ActionFilter, BreakdownKeyType } from '~/types'
 import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
 import { capitalizeFirstLetter, hexToRGBA, midEllipsis } from 'lib/utils'
@@ -168,7 +168,7 @@ export function InsightLabel({
                     )}
 
                     {pillValues.length > 0 && (
-                        <Space direction={'horizontal'} wrap={true}>
+                        <div className="flex flex-wrap gap-1">
                             {pillValues.map((pill) => (
                                 <Tooltip title={pill} key={pill}>
                                     <Tag className="tag-pill" closable={false}>
@@ -179,7 +179,7 @@ export function InsightLabel({
                                     </Tag>
                                 </Tooltip>
                             ))}
-                        </Space>
+                        </div>
                     )}
                 </div>
             </div>

diff --git a/frontend/src/scenes/dashboard/DashboardReloadAction.tsx b/frontend/src/scenes/dashboard/DashboardReloadAction.tsx
@@ -1,4 +1,4 @@
-import { Radio, Space, RadioChangeEvent } from 'antd'
+import { Radio, RadioChangeEvent } from 'antd'
 import { dashboardLogic, DASHBOARD_MIN_REFRESH_INTERVAL_MINUTES } from 'scenes/dashboard/dashboardLogic'
 import { useActions, useValues } from 'kea'
 import { humanFriendlyDuration } from 'lib/utils'
@@ -82,7 +82,7 @@ export function DashboardReloadAction(): JSX.Element {
                                             value={autoRefresh.interval}
                                             style={{ width: '100%' }}
                                         >
-                                            <Space direction="vertical" style={{ width: '100%' }}>
+                                            <div className="flex flex-col gap-2">
                                                 {intervalOptions.map(({ label, value }) => (
                                                     <Radio
                                                         key={value}
@@ -93,7 +93,7 @@ export function DashboardReloadAction(): JSX.Element {
                                                         {label}
                                                     </Radio>
                                                 ))}
-                                            </Space>
+                                            </div>
                                         </Radio.Group>
                                     </div>
                                 </div>

diff --git a/frontend/src/scenes/instance/AsyncMigrations/AsyncMigrations.tsx b/frontend/src/scenes/instance/AsyncMigrations/AsyncMigrations.tsx
@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 import { PageHeader } from 'lib/components/PageHeader'
 import { SceneExport } from 'scenes/sceneTypes'
-import { Button, Progress, Space } from 'antd'
+import { Button, Progress } from 'antd'
 import { useActions, useValues } from 'kea'
 import { PlayCircleOutlined } from '@ant-design/icons'
 import {
@@ -309,7 +309,6 @@ export function AsyncMigrations(): JSX.Element {
                                     Refresh
                                 </LemonButton>
                             </div>
-                            <Space />
                             <LemonTable
                                 pagination={{ pageSize: 10 }}
                                 loading={asyncMigrationsLoading}

diff --git a/frontend/src/scenes/plugins/edit/PluginDrawer.tsx b/frontend/src/scenes/plugins/edit/PluginDrawer.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react'
 import { useActions, useValues } from 'kea'
 import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
-import { Button, Form, Space, Switch } from 'antd'
-import { CodeOutlined, LockFilled } from '@ant-design/icons'
+import { Form, Switch } from 'antd'
+import { LockFilled } from '@ant-design/icons'
 import { userLogic } from 'scenes/userLogic'
 import { PluginImage } from 'scenes/plugins/plugin/PluginImage'
 import { Drawer } from 'lib/components/Drawer'
@@ -18,7 +18,8 @@ import { PluginJobOptions } from './interface-jobs/PluginJobOptions'
 import { MOCK_NODE_PROCESS } from 'lib/constants'
 import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown'
 import { PluginTags } from '../tabs/apps/components'
-import { LemonTag, Link } from '@posthog/lemon-ui'
+import { LemonButton, LemonTag, Link } from '@posthog/lemon-ui'
+import { IconCode } from '@posthog/icons'
 
 window.process = MOCK_NODE_PROCESS
 
@@ -136,20 +137,19 @@ export function PluginDrawer(): JSX.Element {
                 title={editingPlugin?.name}
                 data-attr="plugin-drawer"
                 footer={
-                    <div className="flex">
-                        <Space>
-                            <Button onClick={() => editPlugin(null)} data-attr="plugin-drawer-cancel">
-                                Cancel
-                            </Button>
-                            <Button
-                                type="primary"
-                                loading={loading}
-                                onClick={form.submit}
-                                data-attr="plugin-drawer-save"
-                            >
-                                Save
-                            </Button>
-                        </Space>
+                    <div className="flex space-x-2">
+                        <LemonButton size="small" onClick={() => editPlugin(null)} data-attr="plugin-drawer-cancel">
+                            Cancel
+                        </LemonButton>
+                        <LemonButton
+                            size="small"
+                            type="primary"
+                            loading={loading}
+                            onClick={form.submit}
+                            data-attr="plugin-drawer-save"
+                        >
+                            Save
+                        </LemonButton>
                     </div>
                 }
             >
@@ -184,14 +184,14 @@ export function PluginDrawer(): JSX.Element {
 
                             {editingPlugin.plugin_type === 'source' && canGloballyManagePlugins(user?.organization) ? (
                                 <div>
-                                    <Button
-                                        type={editingSource ? 'default' : 'primary'}
-                                        icon={<CodeOutlined />}
+                                    <LemonButton
+                                        status={editingSource ? 'muted' : 'primary'}
+                                        icon={<IconCode />}
                                         onClick={() => setEditingSource(!editingSource)}
                                         data-attr="plugin-edit-source"
                                     >
                                         Edit source
-                                    </Button>
+                                    </LemonButton>
                                 </div>
                             ) : null}