Feat/contact create ux improvements - #2176
Conversation
|
@ddddami is attempting to deploy a commit to the openlane Team on Vercel. A member of the Team first needs to authorize it. |
|
@golanglemonade could you review this |
|
Also, I am proposing a sub-issue; I wanted to keep the PR as scoped as possible. "Refactor async typeaheads to use a unified component" Currently, we are hand-rolling async dropdowns (using absolute divs, z-indexes, and brittle mousedown hacks to prevent focus loss) in AddressField, VendorSelectField, and the Org Billing Settings. We should deprecate this logic and probably migrate all these fields to use a unified component by shadcn @repo/ui/command and @repo/ui/popover or smth similar |
|
@ddddami To answer both questions, we don't have a staging environment for open source contributions but Google has demo keys you should be able to test with: https://developers.google.com/maps/documentation/javascript/demo-key Using a shared component sounds great, If you want to write up an issue for that, that would be great 🙏 |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
4f84ab5 to
641af55
Compare
ddddami
left a comment
ddddami
left a comment
There was a problem hiding this comment.
hey @golanglemonade could you review this again
Co-authored-by: Bruno Papista <78353799+papistacoding@users.noreply.github.com> Signed-off-by: Damilola O. <82976159+ddddami@users.noreply.github.com>
Co-authored-by: Bruno Papista <78353799+papistacoding@users.noreply.github.com> Signed-off-by: Damilola O. <82976159+ddddami@users.noreply.github.com>
Co-authored-by: Bruno Papista <78353799+papistacoding@users.noreply.github.com> Signed-off-by: Damilola O. <82976159+ddddami@users.noreply.github.com>
c2aa280 to
1c6daec
Compare
| }) | ||
|
|
||
| const [predictions, setPredictions] = useState<google.maps.places.AutocompletePrediction[]>([]) | ||
| const [placeService, setPlaceService] = useState<google.maps.places.AutocompleteService | null>(null) |
| <FormItem> | ||
| <div className="flex items-center gap-2 shrink-0"> | ||
| <FormLabel> | ||
| Address <span className="text-muted-foreground font-normal">(optional)</span> |
There was a problem hiding this comment.
| Address <span className="text-muted-foreground font-normal">(optional)</span> | |
| Address |
| <div className="flex flex-col gap-1 w-full"> | ||
| <div className="flex items-center mb-1"> | ||
| <span className="font-medium text-sm"> | ||
| Tags <span className="text-muted-foreground font-normal">(optional)</span> |
There was a problem hiding this comment.
| Tags <span className="text-muted-foreground font-normal">(optional)</span> | |
| Tags |
| <CardContent> | ||
| <div className="mb-2 grid grid-cols-1 md:grid-cols-2 gap-2"> | ||
| <SelectField name="status" label="Status" options={enumOptions.statusOptions} tooltipContent="The current status of this contact" {...sharedFieldProps} /> | ||
| <SectionCard title="Vendor" description="Associate this contact with an existing vendor"> |
There was a problem hiding this comment.
The link Vendor button on here is causing weird alignment + whitespace on the form. It should be higher; I'd put it top right and ensure we don't have all this empty space below the "Linked vendor" header:
| <div className="mb-2 grid grid-cols-1 md:grid-cols-2 gap-2"> | ||
| <TextField name="company" label="Company" tooltipContent="The company this contact is associated with" {...sharedFieldProps} /> | ||
| <TextField name="title" label="Title" tooltipContent="The job title of this contact" {...sharedFieldProps} /> | ||
| <div className="flex items-center gap-3"> |
There was a problem hiding this comment.
I know you put this where the description of the issue has, but it feels like it's weirdly floating on the right. Can you just left align it for now? We might want to switch this to colored chips like other status but I'll need to write up colors for that first so I think just moving it for now so its on the left is a better place
| multiline?: boolean | ||
| displaySuffix?: React.ReactNode | ||
| formatDisplayValue?: (value: string) => React.ReactNode | ||
| required?: boolean |
There was a problem hiding this comment.
nice, good call putting this here 🙏
3 participants
#2162