Skip to content

feat(ui-buttons,ui-text-input): add condensed sizes to IconButton and simplify TextInput afterElement#2466

Merged
balzss merged 1 commit intomasterfrom
fix/icon-button-sizes
Mar 18, 2026
Merged

feat(ui-buttons,ui-text-input): add condensed sizes to IconButton and simplify TextInput afterElement#2466
balzss merged 1 commit intomasterfrom
fix/icon-button-sizes

Conversation

@balzss
Copy link
Contributor

@balzss balzss commented Mar 17, 2026

Add condensedSmall and condensedMedium size options to IconButton, matching Button's existing condensed size support. These are intended for use inside compact layouts like TextInput.

Remove temporary workarounds from TextInput that were needed to make the old IconButton work inside the afterElement slot:

  • Remove adjustAfterElementHeight DOM hack
  • Remove sizeVariants spread on afterElement container
  • Remove afterElementHasWidth state machinery
  • Simplify afterElement to a basic flex container with padding

Update documentation examples in both IconButton and TextInput READMEs with a password visibility toggle use case and current icon names.

@github-actions
Copy link

github-actions bot commented Mar 17, 2026

PR Preview Action v1.8.1

QR code for preview link

🚀 View preview at
https://instructure.design/pr-preview/pr-2466/

Built to branch gh-pages at 2026-03-18 15:12 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

@balzss balzss self-assigned this Mar 17, 2026
@balzss balzss force-pushed the fix/icon-button-sizes branch from 303ccef to 5a0c82b Compare March 17, 2026 15:36
@balzss balzss requested review from joyenjoyer and matyasf March 17, 2026 22:26
Copy link
Collaborator

@matyasf matyasf left a comment

Choose a reason for hiding this comment

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

looks and works good! I could not test it with DateInput2, since that is not merged yet

@balzss balzss force-pushed the fix/icon-button-sizes branch from 5a0c82b to 885329f Compare March 18, 2026 14:20
Copy link
Contributor

@joyenjoyer joyenjoyer left a comment

Choose a reason for hiding this comment

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

I am happy that these ugly hacks got removed, code looks good

@balzss balzss force-pushed the fix/icon-button-sizes branch from 885329f to 639abaa Compare March 18, 2026 14:50
… simplify TextInput afterElement

Add condensedSmall and condensedMedium size options to IconButton,
matching Button's existing condensed size support. These are intended
for use inside compact layouts like TextInput.

Remove temporary workarounds from TextInput that were needed to make
the old IconButton work inside the afterElement slot:
- Remove adjustAfterElementHeight DOM hack
- Remove sizeVariants spread on afterElement container
- Remove afterElementHasWidth state machinery
- Simplify afterElement to a basic flex container with padding

Update documentation examples in both IconButton and TextInput READMEs
with a password visibility toggle use case and current icon names.
@balzss balzss force-pushed the fix/icon-button-sizes branch from 639abaa to 0fd9e33 Compare March 18, 2026 15:08
@balzss balzss merged commit 49bd675 into master Mar 18, 2026
7 checks passed
@balzss balzss deleted the fix/icon-button-sizes branch March 18, 2026 15:08
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.

3 participants