[QuncCccccc]

This PR is to port #12093 which was created in m3e_migration feature branch.

The original PR description

This PR is to add Material 3 Expressive IconButton support behind an explicit component-level opt-in.

This PR adds:

• 3 new ButtonStyle properties used by the IconButton M3E migration:
  • sizeVariant
  • iconButtonWidth
  • shapeVariant
• IconButtonThemeData.variant so IconButtons can opt into StyleVariant.material3Expressive.
• IconButtonTemplateM3E to generate IconButton defaults from the M3E token data.
• Adds the generated M3E IconButton defaults in:
  • packages/material_ui/lib/src/generated/icon_button_defaults_m3e.g.dart
• Material 3 Expressive defines an extra-small IconButton with a 32dp visual container while retaining a 48dp interaction target. ThemeData.materialTapTargetSize defaults to shrinkWrap on desktop, so inheriting it would reduce the interaction target to 32dp. M3E therefore defaults to MaterialTapTargetSize.padded. Applications can still override ButtonStyle.tapTargetSize explicitly.

TODO:

• I'll add a separate PR/demo showing the Material 3 Expressive IconButton variants.
• Will also update IconButton shape morphing to use physics-based motion animation.

Pre-Review Checklist

• I read the [Contributor Guide] and followed the process outlined there for submitting PRs.
• I read the [AI contribution guidelines] and understand my responsibilities, or I am not using AI tools.
• I read the [Tree Hygiene] page, which explains my responsibilities.
• I read and followed the [relevant style guides] and ran [the auto-formatter].
• I signed the [CLA].
• The title of the PR starts with the name of the package surrounded by square brackets, e.g. [shared_preferences]
• I [linked to at least one issue that this PR fixes] in the description above.
• I followed [the version and CHANGELOG instructions], using [semantic versioning] and the [repository CHANGELOG style], or I have commented below to indicate which documented exception this PR falls under[^1].
• I updated/added any relevant documentation (doc comments with ///).
• I added new tests to check the change I am making, or I have commented below to indicate which [test exemption] this PR falls under[^1].
• All existing and new tests are passing.

[gemini-code-assist]

Code Review

This pull request introduces Material 3 Expressive support for the IconButton component. It adds new size, width, and shape variants, updates the ButtonStyle class to include these new properties, and implements the necessary defaults in a generated file. A code review comment correctly identified that the generated code uses the deprecated MaterialStatePropertyAll instead of the preferred WidgetStatePropertyAll, which should be updated to ensure modern API usage.

[elliette]

Should this be Theme.of(context).materialTapTargetSize (to match the M3 implementation)? Here and elsewhere.

[QuncCccccc]

This is intentionally MaterialTapTargetSize.padded rather than Theme.of(context).materialTapTargetSize. M3E defines an extra-small IconButton with a 32dp visual container while retaining a 48dp interaction target. Inheriting materialTapTargetSize: shrinkWrap (the default value on desktop platforms) would reduce that interaction target to 32dp.

This also follows Material’s layout guidance, which specifies that touch targets should remain at least 48×48dp even the visual element is smaller.

[elliette]

Should these new properties get added to the button_style_test?

Also should these be WidgetStateProperties? Ooc, what does WidgetStateProperty mean and how do we decide which properties are WidgetStateProperties?

[QuncCccccc]

A WidgetStateProperty represents a value that can resolve differently depending on states such as pressed, hovered, focused, disabled, or selected.

For example, components' overlayColor will change a little bit based on different states, so we will have something like

  WidgetStateProperty<Color?>? get overlayColor =>    WidgetStateProperty.resolveWith((Set<WidgetState> states) {
      if (states.contains(WidgetState.selected)) {
        if (states.contains(WidgetState.pressed)) {
          return _colors.onInverseSurface.withOpacity(0.1);
        }
        if (states.contains(WidgetState.hovered)) {
          return _colors.onInverseSurface.withOpacity(0.08);
        }
        if (states.contains(WidgetState.focused)) {
          return _colors.onInverseSurface.withOpacity(0.08);
        }
      }
      ...
    });

The new properties do not change by widget state. They select a button configuration. For example, ButtonSizeVariant.small selects a coordinated set of values for properties such as ButtonStyle.iconSize, ButtonStyle.padding, ButtonStyle.minimumSize, and ButtonStyle.shape. Those resulting properties are WidgetStatePropertys where state-dependent resolution is needed. Let me know if this doesn't make sense:)!

[QuncCccccc]

Should these new properties get added to the button_style_test?

Added tests!

[elliette]

LGTM with some comments/questions