chore: remove all input number (PostHog#19545)

jacobwgillespie · Jan 12, 2024 · 0d1d990 · 0d1d990
1 parent 838281a
commit 0d1d990
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 20 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -191,6 +191,10 @@ module.exports = {
                         element: 'Badge',
                         message: 'use LemonBadge instead',
                     },
+                    {
+                        element: 'InputNumber',
+                        message: 'use LemonInput with type="number" instead',
+                    },
                     {
                         element: 'Collapse',
                         message: 'use <LemonCollapse> instead',

diff --git a/cypress/e2e/surveys.cy.ts b/cypress/e2e/surveys.cy.ts
@@ -96,7 +96,7 @@ describe('Surveys', () => {
         cy.get('[data-attr=prop-val] .ant-select-selector').click({ force: true })
         cy.get('[data-attr=prop-val-0]').click({ force: true })
 
-        cy.get('.ant-input-number-input-wrap>input').type('{backspace}')
+        cy.get('[data-attr="rollout-percentage"]').type('{backspace}')
 
         // save
         cy.get('[data-attr="save-survey"]').click()

diff --git a/frontend/src/scenes/experiments/ExperimentPreview.tsx b/frontend/src/scenes/experiments/ExperimentPreview.tsx
@@ -1,5 +1,5 @@
-import { LemonButton, LemonDivider, LemonModal, Tooltip } from '@posthog/lemon-ui'
-import { InputNumber, Slider } from 'antd'
+import { LemonButton, LemonDivider, LemonInput, LemonModal, Tooltip } from '@posthog/lemon-ui'
+import { Slider } from 'antd'
 import { useActions, useValues } from 'kea'
 import { Field, Form } from 'kea-forms'
 import { InsightLabel } from 'lib/components/InsightLabel'
@@ -136,12 +136,12 @@ export function ExperimentPreview({
                                     tipFormatter={(value) => `${value}%`}
                                 />
                             </div>
-                            <InputNumber
+                            <LemonInput
+                                type="number"
                                 min={1}
                                 max={sliderMaxValue}
                                 defaultValue={5}
-                                formatter={(value) => `${value}%`}
-                                style={{ margin: '0 16px' }}
+                                suffix={<span>%</span>}
                                 value={minimumDetectableChange}
                                 onChange={(value) => {
                                     setExperiment({

diff --git a/frontend/src/scenes/feature-flags/FeatureFlagReleaseConditions.tsx b/frontend/src/scenes/feature-flags/FeatureFlagReleaseConditions.tsx
@@ -1,7 +1,7 @@
 import './FeatureFlag.scss'
 
-import { LemonSelect, Link } from '@posthog/lemon-ui'
-import { InputNumber, Select } from 'antd'
+import { LemonInput, LemonSelect, Link } from '@posthog/lemon-ui'
+import { Select } from 'antd'
 import { useActions, useValues } from 'kea'
 import { router } from 'kea-router'
 import { allOperatorsToHumanName } from 'lib/components/DefinitionPopover/utils'
@@ -242,15 +242,17 @@ export function FeatureFlagReleaseConditions({
                         <div className="feature-flag-form-row gap-2">
                             <div className="flex items-center gap-1">
                                 Roll out to{' '}
-                                <InputNumber
-                                    style={{ width: 100, marginLeft: 8, marginRight: 8 }}
+                                <LemonInput
+                                    data-attr="rollout-percentage"
+                                    type="number"
+                                    className="mx-2"
                                     onChange={(value): void => {
-                                        updateConditionSet(index, value)
+                                        updateConditionSet(index, value || 100)
                                     }}
                                     value={group.rollout_percentage != null ? group.rollout_percentage : 100}
                                     min={0}
                                     max={100}
-                                    addonAfter="%"
+                                    suffix={<span>%</span>}
                                 />{' '}
                                 of <b>{aggregationTargetName}</b> in this set.{' '}
                             </div>

diff --git a/frontend/src/scenes/insights/EditorFilters/PathsAdvanced.tsx b/frontend/src/scenes/insights/EditorFilters/PathsAdvanced.tsx
@@ -1,5 +1,4 @@
-import { LemonDivider } from '@posthog/lemon-ui'
-import { InputNumber } from 'antd'
+import { LemonDivider, LemonInput } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { PayGateMini } from 'lib/components/PayGateMini/PayGateMini'
 import { IconSettings } from 'lib/lemon-ui/icons'
@@ -42,7 +41,8 @@ export function PathsAdvanced({ insightProps, ...rest }: EditorFilterProps): JSX
                 <LemonLabel info="Determines the maximum number of path nodes that can be generated. If necessary certain items will be grouped.">
                     Maximum number of paths
                 </LemonLabel>
-                <InputNumber
+                <LemonInput
+                    type="number"
                     min={0}
                     max={1000}
                     defaultValue={50}
@@ -63,7 +63,8 @@ export function PathsAdvanced({ insightProps, ...rest }: EditorFilterProps): JSX
                 </LemonLabel>
                 <div>
                     <span className="mr-2">Between</span>
-                    <InputNumber
+                    <LemonInput
+                        type="number"
                         min={0}
                         max={100000}
                         onChange={(value): void =>
@@ -76,7 +77,8 @@ export function PathsAdvanced({ insightProps, ...rest }: EditorFilterProps): JSX
                         onPressEnter={updateEdgeParameters}
                     />
                     <span className="mx-2">and</span>
-                    <InputNumber
+                    <LemonInput
+                        type="number"
                         onChange={(value): void =>
                             setLocalEdgeParameters((state) => ({
                                 ...state,

diff --git a/frontend/src/scenes/insights/views/Funnels/FunnelBinsPicker.tsx b/frontend/src/scenes/insights/views/Funnels/FunnelBinsPicker.tsx
@@ -1,4 +1,5 @@
-import { InputNumber, Select } from 'antd'
+import { LemonInput } from '@posthog/lemon-ui'
+import { Select } from 'antd'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { BIN_COUNT_AUTO } from 'lib/constants'
@@ -63,9 +64,9 @@ export function FunnelBinsPicker({ disabled }: FunnelBinsPickerProps): JSX.Eleme
                     <>
                         {menu}
                         <div>
-                            <InputNumber
+                            <LemonInput
+                                type="number"
                                 className="funnel-bins-custom-picker"
-                                size="middle"
                                 min={MIN}
                                 max={MAX}
                                 value={numericBinCount}