Skip to content

Commit

Permalink
refactor(lemon-ui): Clarify field components with LemonField naming (…
Browse files Browse the repository at this point in the history 
…#20306)
  • Loading branch information
@Twixes
Twixes authored Feb 13, 2024
1 parent 29879c8 commit 37169b4
Show file tree
Hide file tree
Showing 59 changed files with 504 additions and 516 deletions.
0 ...nd-fields--fields-with-kea-form--dark.png → ...mon-field--fields-with-kea-form--dark.png
View file
File renamed without changes
0 ...d-fields--fields-with-kea-form--light.png → ...on-field--fields-with-kea-form--light.png
View file
File renamed without changes
0 ...i-forms-and-fields--pure-fields--dark.png → ...mon-ui-lemon-field--pure-fields--dark.png
View file
File renamed without changes
0 ...-forms-and-fields--pure-fields--light.png → ...on-ui-lemon-field--pure-fields--light.png
View file
File renamed without changes
6 changes: 3 additions & 3 deletions frontend/src/lib/components/AuthorizedUrlList/AuthorizedUrlList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import clsx from 'clsx'
import { useActions, useValues } from 'kea'
import { Form } from 'kea-forms'
import { Field } from 'lib/forms/Field'
import { IconDelete, IconEdit, IconOpenInApp, IconPlus } from 'lib/lemon-ui/icons'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { LemonDialog } from 'lib/lemon-ui/LemonDialog'
import { LemonField } from 'lib/lemon-ui/LemonField'
import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput'
import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
Expand Down Expand Up @@ -56,13 +56,13 @@ function AuthorizedUrlForm({ actionId, type }: AuthorizedUrlListProps): JSX.Elem
enableFormOnSubmit
className="w-full space-y-2"
>
<Field name="url">
<LemonField name="url">
<LemonInput
autoFocus
placeholder="Enter a URL or wildcard subdomain (e.g. https://*.posthog.com)"
data-attr="url-input"
/>
</Field>
</LemonField>
<div className="flex justify-end gap-2">
<LemonButton type="secondary" onClick={cancelProposingUrl}>
Cancel
Expand Down
18 changes: 9 additions & 9 deletions frontend/src/lib/components/Sharing/SharingModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import { useActions, useValues } from 'kea'
import { Form } from 'kea-forms'
import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
import { TitleWithIcon } from 'lib/components/TitleWithIcon'
import { Field } from 'lib/forms/Field'
import { IconGlobeLock, IconInfo, IconLink, IconLock, IconUnfoldLess, IconUnfoldMore } from 'lib/lemon-ui/icons'
import { LemonDialog } from 'lib/lemon-ui/LemonDialog'
import { LemonField } from 'lib/lemon-ui/LemonField'
import { LemonModal } from 'lib/lemon-ui/LemonModal'
import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
Expand Down Expand Up @@ -138,7 +138,7 @@ export function SharingModalContent({
</div>

<Form logic={sharingLogic} props={logicProps} formKey="embedConfig" className="space-y-2">
<Field name="whitelabel">
<LemonField name="whitelabel">
{({ value, onChange }) => (
<LemonSwitch
fullWidth
Expand All @@ -158,9 +158,9 @@ export function SharingModalContent({
disabled={!whitelabelAvailable}
/>
)}
</Field>
</LemonField>
{insight && (
<Field name="noHeader">
<LemonField name="noHeader">
{({ value, onChange }) => (
<LemonSwitch
fullWidth
Expand All @@ -170,10 +170,10 @@ export function SharingModalContent({
checked={!value}
/>
)}
</Field>
</LemonField>
)}
{showLegendCheckbox && (
<Field name="legend">
<LemonField name="legend">
{({ value, onChange }) => (
<LemonSwitch
fullWidth
Expand All @@ -183,10 +183,10 @@ export function SharingModalContent({
checked={value}
/>
)}
</Field>
</LemonField>
)}
{recordingId && (
<Field name="showInspector">
<LemonField name="showInspector">
{({ value, onChange }) => (
<LemonSwitch
fullWidth
Expand All @@ -196,7 +196,7 @@ export function SharingModalContent({
checked={value}
/>
)}
</Field>
</LemonField>
)}

{previewIframe && (
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/lib/components/SignupReferralSource.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import { LemonInput } from '@posthog/lemon-ui'
import { Field } from 'lib/forms/Field'
import { LemonField } from 'lib/lemon-ui/LemonField'

export default function SignupReferralSource({ disabled }: { disabled: boolean }): JSX.Element {
return (
<Field name="referral_source" label="Where did you hear about us?" showOptional>
<LemonField name="referral_source" label="Where did you hear about us?" showOptional>
<LemonInput
className="ph-ignore-input"
data-attr="signup-referral-source"
placeholder=""
disabled={disabled}
/>
</Field>
</LemonField>
)
}
6 changes: 3 additions & 3 deletions frontend/src/lib/components/SignupRoleSelect.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { Field } from 'lib/forms/Field'
import { LemonField } from 'lib/lemon-ui/LemonField'
import { LemonSelect } from 'lib/lemon-ui/LemonSelect'

export default function SignupRoleSelect({ className }: { className?: string }): JSX.Element {
return (
<Field name="role_at_organization" label="What is your role?" className={className} showOptional>
<LemonField name="role_at_organization" label="What is your role?" className={className} showOptional>
<LemonSelect
fullWidth
data-attr="signup-role-at-organization"
Expand Down Expand Up @@ -38,6 +38,6 @@ export default function SignupRoleSelect({ className }: { className?: string }):
},
]}
/>
</Field>
</LemonField>
)
}
54 changes: 27 additions & 27 deletions frontend/src/lib/components/Subscriptions/views/EditSubscription.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ import { Form } from 'kea-forms'
import { UserActivityIndicator } from 'lib/components/UserActivityIndicator/UserActivityIndicator'
import { usersLemonSelectOptions } from 'lib/components/UserSelectItem'
import { dayjs } from 'lib/dayjs'
import { Field } from 'lib/forms/Field'
import { IconChevronLeft } from 'lib/lemon-ui/icons'
import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { LemonField } from 'lib/lemon-ui/LemonField'
import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel'
import { LemonModal } from 'lib/lemon-ui/LemonModal'
import { LemonSelect } from 'lib/lemon-ui/LemonSelect'
Expand Down Expand Up @@ -166,13 +166,13 @@ export function EditSubscription({
</LemonBanner>
)}

<Field name="title" label="Name">
<LemonField name="title" label="Name">
<LemonInput placeholder="e.g. Weekly team report" />
</Field>
</LemonField>

<Field name="target_type" label="Destination">
<LemonField name="target_type" label="Destination">
<LemonSelect options={targetTypeOptions} />
</Field>
</LemonField>

{subscription.target_type === 'email' ? (
<>
Expand All @@ -193,7 +193,7 @@ export function EditSubscription({
</LemonBanner>
)}

<Field
<LemonField
name="target_value"
label="Who do you want to subscribe"
help="Enter the email addresses of the users you want to share with"
Expand All @@ -210,11 +210,11 @@ export function EditSubscription({
placeholder="Enter an email address"
/>
)}
</Field>
</LemonField>

<Field name="invite_message" label="Message" showOptional>
<LemonField name="invite_message" label="Message" showOptional>
<LemonTextArea placeholder="Your message to new subscribers (optional)" />
</Field>
</LemonField>
</>
) : null}

Expand Down Expand Up @@ -262,7 +262,7 @@ export function EditSubscription({
</>
) : (
<>
<Field
<LemonField
name="target_value"
label="Which Slack channel to send reports to"
help={
Expand All @@ -289,10 +289,10 @@ export function EditSubscription({
loading={slackChannelsLoading}
/>
)}
</Field>
</LemonField>

{showSlackMembershipWarning ? (
<Field name="memberOfSlackChannel">
<LemonField name="memberOfSlackChannel">
<LemonBanner type="info">
<div className="flex gap-2 items-center">
<span>
Expand All @@ -315,7 +315,7 @@ export function EditSubscription({
</LemonButton>
</div>
</LemonBanner>
</Field>
</LemonField>
) : null}
</>
)}
Expand All @@ -324,9 +324,9 @@ export function EditSubscription({

{subscription.target_type === 'webhook' ? (
<>
<Field name="target_value" label="Webhook URL">
<LemonField name="target_value" label="Webhook URL">
<LemonInput placeholder="https://example.com/webhooks/1234" />
</Field>
</LemonField>
<div className="text-xs text-muted mt-2">
Webhooks will be called with a HTTP POST request. The webhook endpoint should
respond with a healthy HTTP code (2xx).
Expand All @@ -338,38 +338,38 @@ export function EditSubscription({
<LemonLabel className="mb-2">Recurrence</LemonLabel>
<div className="flex gap-2 items-center rounded border p-2 flex-wrap">
<span>Send every</span>
<Field name="interval">
<LemonField name="interval">
<LemonSelect options={intervalOptions} />
</Field>
<Field name="frequency">
</LemonField>
<LemonField name="frequency">
<LemonSelect
options={
subscription.interval === 1
? frequencyOptionsSingular
: frequencyOptionsPlural
}
/>
</Field>
</LemonField>

{subscription.frequency === 'weekly' && (
<>
<span>on</span>
<Field name="byweekday">
<LemonField name="byweekday">
{({ value, onChange }) => (
<LemonSelect
options={weekdayOptions}
value={value ? value[0] : null}
onChange={(val) => onChange([val])}
/>
)}
</Field>
</LemonField>
</>
)}

{subscription.frequency === 'monthly' && (
<>
<span>on the</span>
<Field name="bysetpos">
<LemonField name="bysetpos">
{({ value, onChange }) => (
<LemonSelect
options={bysetposOptions}
Expand All @@ -379,8 +379,8 @@ export function EditSubscription({
}}
/>
)}
</Field>
<Field name="byweekday">
</LemonField>
<LemonField name="byweekday">
{({ value, onChange }) => (
<LemonSelect
dropdownMatchSelectWidth={false}
Expand All @@ -396,11 +396,11 @@ export function EditSubscription({
}
/>
)}
</Field>
</LemonField>
</>
)}
<span>by</span>
<Field name="start_date">
<LemonField name="start_date">
{({ value, onChange }) => (
<LemonSelect
options={timeOptions}
Expand All @@ -416,7 +416,7 @@ export function EditSubscription({
}}
/>
)}
</Field>
</LemonField>
</div>
</div>
</>
Expand Down
26 changes: 13 additions & 13 deletions frontend/src/lib/components/Support/SupportForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { LemonInput, LemonSegmentedButton, LemonSegmentedButtonOption, lemonToast, Link } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { Form } from 'kea-forms'
import { Field } from 'lib/forms/Field'
import { useUploadFiles } from 'lib/hooks/useUploadFiles'
import { IconBugReport, IconFeedback, IconHelpOutline } from 'lib/lemon-ui/icons'
import { LemonField } from 'lib/lemon-ui/LemonField'
import { LemonFileInput } from 'lib/lemon-ui/LemonFileInput/LemonFileInput'
import { LemonSelect } from 'lib/lemon-ui/LemonSelect/LemonSelect'
import { LemonTextArea } from 'lib/lemon-ui/LemonTextArea/LemonTextArea'
Expand Down Expand Up @@ -73,43 +73,43 @@ export function SupportForm(): JSX.Element | null {
>
{!user && (
<>
<Field name="name" label="Name">
<LemonField name="name" label="Name">
<LemonInput data-attr="name" placeholder="Jane" />
</Field>
<Field name="email" label="Email">
</LemonField>
<LemonField name="email" label="Email">
<LemonInput data-attr="email" placeholder="[email protected]" />
</Field>
</LemonField>
</>
)}
<Field name="kind" label="What type of message is this?">
<LemonField name="kind" label="What type of message is this?">
<LemonSegmentedButton fullWidth options={SUPPORT_TICKET_OPTIONS} />
</Field>
<Field name="target_area" label="What area does this best relate to?">
</LemonField>
<LemonField name="target_area" label="What area does this best relate to?">
<LemonSelect
fullWidth
options={Object.entries(TARGET_AREA_TO_NAME).map(([key, value]) => ({
label: value,
value: key,
}))}
/>
</Field>
<Field name="severity_level" label="What is the severity of this issue?">
</LemonField>
<LemonField name="severity_level" label="What is the severity of this issue?">
<LemonSelect
fullWidth
options={Object.entries(SEVERITY_LEVEL_TO_NAME).map(([key, value]) => ({
label: value,
value: key,
}))}
/>
</Field>
</LemonField>
<span className="text-muted">
Check out the{' '}
<Link target="_blank" to="https://posthog.com/docs/support-options#severity-levels">
severity level definitions
</Link>
.
</span>
<Field
<LemonField
name="message"
label={sendSupportRequest.kind ? SUPPORT_TICKET_KIND_TO_PROMPT[sendSupportRequest.kind] : 'Content'}
>
Expand All @@ -132,7 +132,7 @@ export function SupportForm(): JSX.Element | null {
)}
</div>
)}
</Field>
</LemonField>
</Form>
)
}
Loading

0 comments on commit 37169b4

Please sign in to comment.