Adds TagsSelect component to Predict component #59
Conversation
…re are <2 unselected options
…uestionSuggestionButton
…n line with Question component
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| @@ -447,11 +488,6 @@ export function Predict({ | |||
| )} | |||
| </Transition> | |||
| </div> | |||
| {tagsPreview?.length > 0 && ( | |||
There was a problem hiding this comment.
Not really sure what this code was doing before, as it doesn't look like tagsPreview was ever getting updated
There was a problem hiding this comment.
This was for if you used a hashtag in the question title to quick-add a tag. Probably we should remove that functionality as it is superseded by this select
components/predict-form/Predict.tsx
Outdated
| @@ -359,6 +359,10 @@ export function Predict({ | |||
| } | |||
| } | |||
|
|
|||
| // used to calculate width of TagsSelect menu | |||
| const containerRef = useRef<HTMLDivElement>(null); | |||
There was a problem hiding this comment.
nit: ; should be removed by prettier
I use this as my cursor "Rules for AI", and find it doesn't generate semicolons: Always use typescript, React, Tailwind, daisy-ui, clsx, HeroIcons, and TRPC. No semicolons. Prefer useState to React.useState. Use typed reducers (inline type). Prefer inline function props.
There was a problem hiding this comment.
Thanks, clearly I also have my format on save setup wrong, I'll fix both
| : "opacity-80", | ||
| small && "btn-xs px-5", | ||
| "w-full resize-none rounded-md p-4 -mb-2 border-b bg-white", | ||
| "focus:outline-indigo-700 placeholder:text-neutral-400", |
There was a problem hiding this comment.
the outline on this when not focussed is thinner than our other input components, e.g. the resolve by and make prediction inputs below, maybe increase it to match (and so it looks more input-y)? Or could up the outline on the parent div maybe, whatever you think looks best
| ref={mergeRefs([textAreaRef, formRef])} | ||
| /> | ||
| <div className="flex flex-row items-center p-2 sm:px-4 gap-1 z-20"> | ||
| <TagsSelect |
There was a problem hiding this comment.
minor: It's a bit strange that the add new icon is not full width, not a big deal though. Maybe could make the background of the empty space be the same grey so it looks a bit more like it spans the full width?
| @@ -447,11 +488,6 @@ export function Predict({ | |||
| )} | |||
| </Transition> | |||
| </div> | |||
| {tagsPreview?.length > 0 && ( | |||
There was a problem hiding this comment.
This was for if you used a hashtag in the question title to quick-add a tag. Probably we should remove that functionality as it is superseded by this select
| @@ -109,6 +119,84 @@ export function TagsSelect({ | |||
| // 2px box shadow | |||
There was a problem hiding this comment.
We could improve this by using the classNames prop instead of styles, so we can use tailwind styles and keep it consistent with the rest of our styles. Notably could use max-sm instead of doing manual media breakpoints. Probably not worth switching costs unless Claude can ~one-shot it! https://react-select.com/styles#the-classnames-prop
…t component, updates TagsSelect component to only use a single column menuList during tag creation
|
bug: When I submit a prediction, keep the tags and submit another, the tags stay visually in the select but aren't applied to the second prediction
|
|
minor: the outline when focussed doesn't match (it's thinner) |
Pull Request: Adds TagsSelect to Predict component
Related Issue
Asana ref
Changes Made
Testing
Tested locally and in preview, for TagsSelect components in Predict, Question and Calibration components.