Skip to content

Textinput: Add new theme support#2285

Merged
matyasf merged 1 commit intov12from
textinput_new_theme
Dec 5, 2025
Merged

Textinput: Add new theme support#2285
matyasf merged 1 commit intov12from
textinput_new_theme

Conversation

@matyasf
Copy link
Copy Markdown
Collaborator

@matyasf matyasf commented Dec 2, 2025

Also fix a missing dependency in Pill

To test:

  • compare with the design specs in Figma for TextInput component (it does not need the arrows, those are only for NumberInput)
  • it should work as before

Completes INSTUI-4814

@matyasf matyasf self-assigned this Dec 2, 2025
@github-actions
Copy link
Copy Markdown

github-actions bot commented Dec 2, 2025

PR Preview Action v1.6.3
Preview removed because the pull request was closed.
2025-12-05 14:22 UTC

constructor(props: TextInputProps) {
super(props)
this.state = {
hasFocus: false,
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not needed, the focus utility calculates this automatically

@matyasf matyasf force-pushed the textinput_new_theme branch 3 times, most recently from fae2586 to bcbebb3 Compare December 3, 2025 21:09
Comment on lines +140 to +142
small: 'sm',
medium: 'md',
large: 'xl'
Copy link
Copy Markdown
Collaborator Author

@matyasf matyasf Dec 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@design is this mapping correct? This means that size=small TextInput should use sm sized Lucide icons, medium should use md,..

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The large textInput variant should use the lg icon size that is 24 px.

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

its fixed

@ToMESSKa
Copy link
Copy Markdown
Contributor

ToMESSKa commented Dec 4, 2025

@matyasf If it's in an error/success state, the focus outline remains blue.
Shouldn't that change to red/green too?
It does in v11 and I also does in v12 TextArea e.g:
image

@ToMESSKa
Copy link
Copy Markdown
Contributor

ToMESSKa commented Dec 4, 2025

@matyasf think the upgare guide should be updated too. Some of the tokens have been renamed or removed.

Copy link
Copy Markdown
Contributor

@ToMESSKa ToMESSKa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

see my comments

@matyasf matyasf force-pushed the textinput_new_theme branch from bcbebb3 to 92f27ce Compare December 4, 2025 11:18
@matyasf
Copy link
Copy Markdown
Collaborator Author

matyasf commented Dec 4, 2025

@matyasf If it's in an error/success state, the focus outline remains blue. Shouldn't that change to red/green too? It does in v11 and I also does in v12 TextArea e.g: image

Fixed now

@matyasf
Copy link
Copy Markdown
Collaborator Author

matyasf commented Dec 4, 2025

@matyasf think the upgare guide should be updated too. Some of the tokens have been renamed or removed.

I've added the token changes to the upgrade guide

@matyasf matyasf requested a review from ToMESSKa December 4, 2025 11:20
Copy link
Copy Markdown
Contributor

@ToMESSKa ToMESSKa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@matyasf If it's in an error/success state, the focus outline remains blue. Shouldn't that change to red/green too? It does in v11 and I also does in v12 TextArea e.g: image

Fixed now

@matyasf In the success state, the focus outline is still blue, I think this should be green too?

Copy link
Copy Markdown
Collaborator

@adamlobler adamlobler left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just left some comments, we also need to update some token values on our side, I try to merge these changes asap to v12 and we can check to outcome here if you rebase them.

@matyasf matyasf force-pushed the textinput_new_theme branch 2 times, most recently from cd8d311 to 6d1d317 Compare December 4, 2025 21:56
@matyasf
Copy link
Copy Markdown
Collaborator Author

matyasf commented Dec 4, 2025

@matyasf In the success state, the focus outline is still blue, I think this should be green too?

I've changed it according to our new rules

Copy link
Copy Markdown
Collaborator

@adamlobler adamlobler left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you update the large icon size, I think its done ✅

…r TextInput

Also fix a missing dependency in Pill

To test:
- compare with the design specs in Figma for TextInput component
(it does not need the arrows)
- it should work as before

Completes INSTUI-4814
@matyasf matyasf force-pushed the textinput_new_theme branch from 6d1d317 to 1987961 Compare December 5, 2025 14:14
@matyasf matyasf requested a review from adamlobler December 5, 2025 14:15
@matyasf matyasf merged commit 77b3159 into v12 Dec 5, 2025
7 checks passed
@matyasf matyasf deleted the textinput_new_theme branch December 5, 2025 14:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants