feat: add scaled text input #1224
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| style={{ | ||
| transform: `scale(${containerScale})`, | ||
| width: `${100 / containerScale}%`, | ||
| }} |
There was a problem hiding this comment.
We should try to refrain from using inline-styling
There was a problem hiding this comment.
@cpcramer I think we are forced here to have the inline style. As this is a dynamic CSS story, which I don't think Tailwind has an easy solution for it.
@cpcramer this is also very similar on how CSS animation are built, where you have a basic class, but then use inline style to do crazy animaiton tricks.
| import type { TextInputReact } from './TextInput'; | ||
| import { TextInput } from './TextInput'; | ||
|
|
||
| export function ScaledTextInput(props: TextInputReact) { |
There was a problem hiding this comment.
Can you add some comments that explain when to use ScaledTextInput vs TextInput?
| import type { TextInputReact } from './TextInput'; | ||
| import { TextInput } from './TextInput'; | ||
|
|
||
| export function ScaledTextInput(props: TextInputReact) { |
There was a problem hiding this comment.
Can you add some comments that explain when to use ScaledTextInput vs TextInput?
| } else { | ||
| setContainerScale(1); | ||
| } | ||
| }, [props.value]); |
There was a problem hiding this comment.
Open question, could this re-fire too many times if we keep props.value too wide?
| export function ScaledTextInput(props: TextInputReact) { | ||
| const inputContainer = useRef<HTMLDivElement | null>(null); | ||
| const offscreenRef = useRef<HTMLSpanElement | null>(null); | ||
| const [containerScale, setContainerScale] = useState(1); |
There was a problem hiding this comment.
Help me understand what this number means. Maybe with a line of comment.
| return ( | ||
| <> | ||
| <div ref={inputContainer}> | ||
| <div |
There was a problem hiding this comment.
Can this be done with just 1 <div> instead of 2?
| <TextInput {...props} /> | ||
| </div> | ||
| </div> | ||
| <span |
|
closing in favor of increasing the padding between the value and select and keeping the current scroll behavior, cc: @mindapivessa |
What changed? Why?
Notes to reviewers
How has it been tested?