Skip to content

[v12] migrate buttons to the new theme#2340

Open
balzss wants to merge 1 commit intov12from
button-rework-v12
Open

[v12] migrate buttons to the new theme#2340
balzss wants to merge 1 commit intov12from
button-rework-v12

Conversation

@balzss
Copy link
Contributor

@balzss balzss commented Jan 8, 2026

INSTUI-4787

Summary

Migrates Button, CondensedButton, and IconButton to the new v12 centralized theme system.

  • Removed individual theme.ts files from Button, CondensedButton, and IconButton (they re-exported BaseButton's theme) — theming is now handled centrally via withStyle(null, 'BaseButton')
  • Switched from withStyleRework to withStyle and from legacy generateComponentTheme to the new token-based approach (NewComponentTypes/SharedTokens)
  • Added explicit disabled state styling per color variant (previously just opacity: 0.5)
  • Added active state styles for AI button variants
  • Removed active box shadow styles as they were not working and not making any visual difference
  • Added two condensed size variants: condensedSmall and condensedMedium
  • Icon sizing inside buttons now uses renderIconWithProps with proper size mapping per button size
  • AI secondary button border now uses a ::before pseudo-element mask technique instead of relying on background gradient as border
  • Content area switched from display: block to display: flex with alignItems: center for proper vertical alignment
  • Replaced darken/lighten color utils with dedicated theme tokens for hover/active states

Test plan

  • Verify all button variants (primary, secondary, success, danger, primary-inverse) render correctly in both filled and ghost modes
  • Verify AI primary and AI secondary button variants including hover, active, and disabled states
  • Verify condensed size variants (condensedSmall, condensedMedium) render at the correct compact heights
  • Verify disabled state styling across all color variants (should use variant-specific colors instead of blanket opacity)
  • Verify icon sizing matches button size (sm/md/lg/xs icons for small/medium/large/condensed buttons)
  • Verify Button, CondensedButton, and IconButton all render correctly (they delegate to BaseButton)
  • Check RTL layout still works correctly

@github-actions
Copy link

github-actions bot commented Jan 8, 2026

PR Preview Action v1.8.1

QR code for preview link

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

Built to branch gh-pages at 2026-02-17 14:02 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

@balzss balzss self-assigned this Jan 8, 2026
@balzss balzss force-pushed the button-rework-v12 branch 4 times, most recently from 56040c0 to a63629b Compare February 17, 2026 12:18
Reworked Button, CondensedButton, and IconButton theming:
- Removed individual component theme.ts files in favor of centralized BaseButton styles
- Updated icon sizing inside buttons
- Fixed button active state
- Added condensed size and disabled variant styling
- Set AI button to use transparent background
- Migrated button wrapper components to new theme structure
@balzss balzss changed the title [v12 WIP] migrate buttons to the new theme - part 1 [v12] migrate buttons to the new theme Feb 17, 2026
@balzss balzss requested a review from matyasf February 17, 2026 14:06
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.

See my comments.

Also there might be something off with the primary-inverse button's text color in the dark theme:

Image

Similar issue with the inverse ToggleButton:

Image
  • You can delete BaseButton/theme.ts
  • What about CloseButton? Will it be converted later?
  • Please use the new icons in the examples (the README files)
  • Please use the new icons in the regression test

Comment on lines 51 to 55
/**
---
category: components/utilities
---
**/
Copy link
Collaborator

Choose a reason for hiding this comment

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

This comment must be above the @withStyle decorator, otherwise it will render in the wrong place in the side nav

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