[v12] migrate buttons to the new theme by balzss · Pull Request #2340 · instructure/instructure-ui

balzss · 2026-01-08T14:58:10Z

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 · 2026-01-08T15:03:02Z

PR Preview Action v1.8.1
🚀 View preview at https://instructure.design/pr-preview/pr-2340/
Built to branch `gh-pages` at 2026-02-24 10:23 UTC. Preview will be ready when the GitHub Pages deployment is complete.

packages/ui-buttons/src/BaseButton/styles.ts

matyasf

See my comments.

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

Similar issue with the inverse ToggleButton:

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

packages/ui-buttons/src/BaseButton/index.tsx

matyasf

The last CloseButton example still uses a old icon
The samples I linked above still look bad ... what about using a View with e.g. warning background, these color variants are intended for such use case, right?
Please put changes in the upgrade guide (the new sizes and the theme token changes)

matyasf · 2026-02-20T16:12:22Z

packages/ui-buttons/src/CloseButton/styles.ts

+    'x-small': sharedTokens.legacy.spacing.xSmall,
+    small: sharedTokens.legacy.spacing.small,
+    medium: sharedTokens.legacy.spacing.medium


I could not find these in the token changelog. Is it OK, that we use here legacy tokens? Perhaps leave here a comment about why

it was just a guess, maybe i'll sync with design about this

matyasf · 2026-02-20T16:15:11Z

packages/ui-buttons/src/CloseButton/index.tsx

      ...props
    } = this.props

+    const themeOverride = this.props.themeOverride


Why is this needed here? why is it not needed for others like IconButton?

it is done in the iconbutton too. actually the reason i added this is because it is added there too

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

ToMESSKa · 2026-02-20T14:24:27Z

packages/ui-buttons/src/CondensedButton/index.tsx

 **/
 // needed for listing the available theme variables on docs page
-@withStyle(null, generateComponentTheme)
+@withStyle(null, 'BaseButton')


CondensedButton seems to be higher than in v11 in the focused and hovered states

v12

v11:

can you share the code for both of these example? thanks

@balzss

<View display="block" background="primary" padding="small"> <CondensedButton>Click Me</CondensedButton> </View>

ToMESSKa · 2026-02-20T14:46:39Z

packages/ui-buttons/src/Button/index.tsx

-import { withStyleRework as withStyle } from '@instructure/emotion'
-
-import generateComponentTheme from './theme'
+import { withStyle } from '@instructure/emotion'


Large button with ai-secondary color, the button text gets cut off

really good catch! it is because designers accidentally set the line height in rem, not scale (1.125rem instead of 1.125)

cc @hajnaldo

ToMESSKa · 2026-02-20T15:25:24Z

packages/ui-buttons/src/BaseButton/styles.ts

 */

-import type { BaseButtonTheme } from '@instructure/shared-types'
+import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'


these tokens from the token studio are not used:
borderRadiusFull
borderRadiusSm
ghostOncolorActiveBackgroundColor
ghostOncolorHoverBackgroundColor
opacityBase
dangerActiveBoxShadow
dangerGhostActiveBoxShadow
primaryActiveBoxShadow
primaryGhostActiveBoxShadow
primaryInverseActiveBoxShadow
primaryInverseGhostActiveBoxShadow
secondaryActiveBoxShadow
secondaryGhostActiveBoxShadow
successActiveBoxShadow
successGhostActiveBoxShadow

cc @hajnaldo

note, these were removed:

dangerActiveBoxShadow dangerGhostActiveBoxShadow primaryActiveBoxShadow primaryGhostActiveBoxShadow primaryInverseActiveBoxShadow primaryInverseGhostActiveBoxShadow secondaryActiveBoxShadow secondaryGhostActiveBoxShadow successActiveBoxShadow successGhostActiveBoxShadow

-opacityBase should be used

these 2 will be checked by design:

ghostOncolorActiveBackgroundColor ghostOncolorHoverBackgroundColor

borderRadiusSm should be used for the new consended sizes (condensedSmall, etc)

borderRadiusFull is for circle icon btn

ToMESSKa · 2026-02-24T08:34:37Z

packages/ui-buttons/src/BaseButton/props.ts

+  size?: 'small' | 'medium' | 'large' | 'condensedSmall' | 'condensedMedium'



In Basebutton a size and color combination of like this below results some invisible button when it is not hovered. (Not sure if it a valid use case tho)

<BaseButton size="condensedSmall" color="primary">CS</BaseButton>

i guess this is not a valid state so i don't know how big of a deal this is. cc @hajnaldo

@hajnaldo confirmed this combination should never exist

packages/ui-buttons/src/CloseButton/index.tsx

ToMESSKa · 2026-02-24T09:10:08Z

packages/ui-buttons/src/CloseButton/styles.ts

      label: 'closeButton',
-      zIndex: componentTheme.zIndex,
+      zIndex: 1,


Why isn't this tokenized anymore?

cc @hajnaldo

@hajnaldo confirmed it's ok if it's hardcoded. we can change later if the need arises

ToMESSKa · 2026-02-24T09:22:00Z

packages/ui-buttons/src/IconButton/README.md

    <IconButton withBackground={false} withBorder={false} color="primary-inverse" screenReaderLabel="Delete tag" margin="large">
-      <IconXSolid />
+      <XInstUIIcon />
    </IconButton>


This example in the dark theme should be fixed, the white icon isn't really visible on that bright background

i've missed this. this example should be removed since this is not a valid design anymore

ToMESSKa · 2026-02-24T10:02:52Z

packages/shared-types/src/ComponentThemeVariables.ts

  Button: BaseButtonTheme
-  CloseButton: CloseButtonTheme


import type { CloseButtonTheme } from '@instructure/shared-types' was removed from styles.ts of CloseButton, why was this change needed?

there is not closebuttontheme anymore, it does not have its own variables

balzss self-assigned this Jan 8, 2026

balzss commented Jan 13, 2026

View reviewed changes

packages/ui-buttons/src/BaseButton/styles.ts Outdated Show resolved Hide resolved

balzss assigned HerrTopi Jan 15, 2026

balzss force-pushed the button-rework-v12 branch 4 times, most recently from 56040c0 to a63629b Compare February 17, 2026 12:18

balzss unassigned HerrTopi Feb 17, 2026

balzss force-pushed the button-rework-v12 branch 2 times, most recently from 4f6a2ed to 3360f15 Compare February 17, 2026 13:58

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 requested a review from matyasf February 17, 2026 14:06

matyasf requested changes Feb 17, 2026

View reviewed changes

packages/ui-buttons/src/BaseButton/index.tsx Outdated Show resolved Hide resolved

balzss requested review from ToMESSKa and matyasf February 20, 2026 13:32

matyasf requested changes Feb 20, 2026

View reviewed changes

balzss added 3 commits February 24, 2026 10:06

feat(ui-buttons): use the new icons

daf1802

feat(ui-buttons): migrate closebutton

3ac5f16

balzss force-pushed the button-rework-v12 branch from c14d18d to 3ac5f16 Compare February 24, 2026 09:06

feat(ui-buttons): update icons to new system and add v12 changelog

b65b004

balzss requested a review from matyasf February 24, 2026 10:19

ToMESSKa requested changes Feb 24, 2026

View reviewed changes

		size?: 'small' \| 'medium' \| 'large' \| 'condensedSmall' \| 'condensedMedium'

Conversation

balzss commented Jan 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

INSTUI-4787

Summary

Test plan

Uh oh!

github-actions bot commented Jan 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

Uh oh!

Uh oh!

matyasf left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

matyasf left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

balzss commented Jan 8, 2026 •

edited

Loading

github-actions bot commented Jan 8, 2026 •

edited

Loading

Built to branch `gh-pages` at 2026-02-24 10:23 UTC.
Preview will be ready when the GitHub Pages deployment is complete.