Compose: Add DaxButton components to design system#8172
Compose: Add DaxButton components to design system#8172mikescamell wants to merge 20 commits intodevelopfrom
Conversation
Adds the internal DaxButton composable with two overloads: a custom content slot and a text overload with optional leadingIconPainter. Includes DaxButtonIcon, DaxButtonColors, DaxButtonSize, and previews.
Adds the internal DaxOutlinedButton composable that delegates to DaxButton with a border. Includes leadingIconPainter passthrough and previews.
Includes DaxPrimaryButtonDefaults object with centralized color tokens.
Includes DaxSecondaryButtonDefaults object with centralized color tokens.
Includes DaxGhostButtonDefaults object with centralized color tokens.
Includes DaxDestructivePrimaryButtonDefaults object with centralized color tokens.
Includes DaxDestructiveGhostButtonDefaults object with centralized color tokens.
Includes DaxGhostAltButtonDefaults object with centralized color tokens.
Includes DaxDestructiveGhostSecondaryButtonDefaults object with centralized color tokens.
Removes old placeholder Compose buttons (GhostButton, PrimaryButton, SecondaryButton). Updates DialogsFragment and DaxPromoBottomSheetDialog to use real DaxButton components.
Rewrites ComponentButtonsFragment as a standalone Fragment (matching ComponentTextInputFragment pattern) with Compose buttons interleaved alongside View buttons for side-by-side comparison.
Flags direct usage of M3 Button, OutlinedButton, TextButton, IconButton and other raw Material3 button composables outside the design-system module. Enforces use of Dax* button variants for design consistency. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
@GerardPaligot would like to get your thoughts regarding Ripples. Right now we don't match the view version, but it seems difficult in Compose to create an exact match. I'm wondering if it's something we change for the Compose version, using the same colours as "pressed" but letting Material handle all the alpha using it's defaults |
GerardPaligot
left a comment
There was a problem hiding this comment.
@mikescamell The difference is expected and acceptable. View buttons are TextView-based with M2 ripple drawables layered on top, while Compose buttons use a Surface with M3's built-in interaction layer. The ripple rendering pipeline is fundamentally different.
M3 Compose actually implements the Material ripple spec more precisely than the M2 View workaround ever did. Since we're migrating toward Compose, I'd treat the Compose version as the canonical one going forward rather than trying to match the M2 View behavior.
Current approach LGTM, just few suggestions/questions but well done for this component, the implementation reflect our previous discussions/decisions about this component!
| @Composable | ||
| fun DaxDestructiveGhostAltButton( | ||
| text: String, | ||
| onClick: () -> Unit, |
There was a problem hiding this comment.
Suggestion: There is a common exception in compose parameter ordering with callback or api slot to be able to move {} outside the call:
// definition
fun DaxDestructiveGhostAltButton(
text: String,
...
onClick: () -> Unit
) { ... }
// usage
DaxDestructiveGhostAltButton(text = "My button") {
// on click
}
Personally, I prefer to use the naming approach but with this kind of definition, you can have the choice of the usage.
There was a problem hiding this comment.
@GerardPaligot Do you have any examples of that in the wild? I've always thought of the last lambda to be for including a composable, not for clicking or the like.
| interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, | ||
| ) { | ||
| CompositionLocalProvider( | ||
| LocalMinimumInteractiveComponentSize provides Dp.Unspecified, |
There was a problem hiding this comment.
Note: RIP accessibility with icon component.. :')
- cache DaxButtonDimensions across recompositions via remember(size) - drop accidentally committed tools:fillColor from ic_settings_24 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Removes the 6dp vertical padding wrapped around the M3 Button and the associated insetVertical / ButtonInsetVertical plumbing. The visible surface already renders at the 36dp / 48dp design heights; the inset was legacy Material parity that inflated the layout footprint to 48/60dp. Without it, Dax buttons now occupy exactly the design-spec height in their parent layouts. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Task/Issue URL: https://app.asana.com/1/137249556945/project/1202857801505092/task/1211090746680572?focus=true
Description
NOTE: Large button icon has been updated to match new guidelines, so is different size from the View version. See this task.
Adds a complete set of Compose
Dax*button components to the Android Design System, replacing the old placeholder buttons. Each variant maps 1:1 to an existing View-system counterpart for visual/behavioral parity during Compose migration.New button components:
DaxPrimaryButton,DaxSecondaryButton,DaxGhostButton,DaxDestructivePrimaryButton,DaxDestructiveGhostButton,DaxDestructiveGhostAltButton,DaxDestructiveGhostSecondaryButton,DaxIconButtonInternal base components:
DaxButtonandDaxOutlinedButton(not public API)Theme additions:
DuckDuckGoStatusColors.criticalPrimary,icons.disabledcolor token (light + dark)Lint rule:
NoRawM3ButtonUsageDetectorflags direct usage of raw M3 button composables (Button,OutlinedButton,TextButton,IconButton, etc.) outside the design-system module.Cleanup: Removed old placeholder
GhostButton,PrimaryButton,SecondaryButton. UpdatedDaxPromoBottomSheetDialogto use new components.Steps to test this PR
Compose buttons in demo screen
DaxIconButton
DaxIconButtonrenders in the demo screen with native icon colors (no tint applied)Lint rule
./gradlew :lint-rules:test—NoRawM3ButtonUsageDetectorTestpassesButton()fromandroidx.compose.material3in a non-design-system module triggers a lint warningDaxPromoBottomSheetDialog
DaxPromoBottomSheetDialogpreviews render correctly with the new button importsUI changes
Note
Medium Risk
Introduces new Compose button APIs and theme tokens and adds a lint rule that errors on raw Material3 button usage outside
design-system, which could surface new build/lint failures in downstream modules. UI behavior is mostly additive but touches shared theming/color definitions used across Compose components.Overview
Adds a full set of Compose design-system buttons (
DaxPrimaryButton,DaxSecondaryButton,DaxGhostButton, destructive variants, andDaxIconButton) backed by new internal base primitives (DaxButton,DaxOutlinedButton) with standardized sizing, pressed/disabled content coloring, and ripple configuration.Updates demo/screens and existing Compose UI to use the new buttons: the internal
component_buttonsscreen now renders Compose variants alongside View equivalents, andDialogsFragment/DaxPromoBottomSheetDialogswap placeholderSmall*/Large*buttons forDax*buttons.Extends Compose theme tokens by adding
DuckDuckGoColors.status.criticalPrimaryandicons.disabled, and introduces a new lint checkNoRawM3ButtonUsageDetector(registered + tested) to block directandroidx.compose.material3button composables outside the design-system module; removes the old placeholder Compose button implementations.Reviewed by Cursor Bugbot for commit e02d717. Bugbot is set up for automated code reviews on this repo. Configure here.