Skip to content

feat: add iconAlignment #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tilucasoli merged 3 commits into from
Jan 7, 2026
Merged

feat: add iconAlignment #29

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6e6e9f3
feat: add iconAlignment
tilucasoli Jan 7, 2026
51b9ba0
Update button spec tests for iconAlignment property
tilucasoli Jan 7, 2026
440343a
Update packages/remix/lib/src/components/button/button_style.dart
tilucasoli Jan 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 19 additions & 6 deletions packages/remix/lib/src/components/button/button_spec.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,13 @@ class RemixButtonSpec extends Spec<RemixButtonSpec> with Diagnosticable {
/// asynchronous operations when the button is in loading state.
final StyleSpec<RemixSpinnerSpec> spinner;

/// The alignment of the icon relative to the label.
///
/// When set to [IconAlignment.left], the icon appears before the label.
/// When set to [IconAlignment.right], the icon appears after the label.
/// Defaults to [IconAlignment.left].
Comment thread
tilucasoli marked this conversation as resolved.
final IconAlignment iconAlignment;

/// Creates a RemixButtonSpec with optional styling specifications.
///
/// If any [StyleSpec] is not provided, a default specification
Expand All @@ -93,10 +100,12 @@ class RemixButtonSpec extends Spec<RemixButtonSpec> with Diagnosticable {
StyleSpec<TextSpec>? label,
StyleSpec<IconSpec>? icon,
StyleSpec<RemixSpinnerSpec>? spinner,
}) : container = container ?? const StyleSpec(spec: FlexBoxSpec()),
label = label ?? const StyleSpec(spec: TextSpec()),
icon = icon ?? const StyleSpec(spec: IconSpec()),
spinner = spinner ?? const StyleSpec(spec: RemixSpinnerSpec());
IconAlignment? iconAlignment,
}) : container = container ?? const StyleSpec(spec: FlexBoxSpec()),
label = label ?? const StyleSpec(spec: TextSpec()),
icon = icon ?? const StyleSpec(spec: IconSpec()),
spinner = spinner ?? const StyleSpec(spec: RemixSpinnerSpec()),
iconAlignment = iconAlignment ?? IconAlignment.start;

/// Creates a copy of this RemixButtonSpec with the given fields replaced.
///
Expand All @@ -115,12 +124,14 @@ class RemixButtonSpec extends Spec<RemixButtonSpec> with Diagnosticable {
StyleSpec<TextSpec>? label,
StyleSpec<IconSpec>? icon,
StyleSpec<RemixSpinnerSpec>? spinner,
IconAlignment? iconAlignment,
}) {
return RemixButtonSpec(
container: container ?? this.container,
label: label ?? this.label,
icon: icon ?? this.icon,
spinner: spinner ?? this.spinner,
iconAlignment: iconAlignment ?? this.iconAlignment,
);
}

Expand Down Expand Up @@ -149,6 +160,7 @@ class RemixButtonSpec extends Spec<RemixButtonSpec> with Diagnosticable {
label: MixOps.lerp(label, other.label, t)!,
icon: MixOps.lerp(icon, other.icon, t)!,
spinner: MixOps.lerp(spinner, other.spinner, t)!,
iconAlignment: t < 0.5 ? iconAlignment : other.iconAlignment,
);
}

Expand All @@ -159,9 +171,10 @@ class RemixButtonSpec extends Spec<RemixButtonSpec> with Diagnosticable {
..add(DiagnosticsProperty('container', container))
..add(DiagnosticsProperty('label', label))
..add(DiagnosticsProperty('icon', icon))
..add(DiagnosticsProperty('spinner', spinner));
..add(DiagnosticsProperty('spinner', spinner))
..add(EnumProperty('iconAlignment', iconAlignment));
Comment thread
tilucasoli marked this conversation as resolved.
}

@override
List<Object?> get props => [container, label, icon, spinner];
List<Object?> get props => [container, label, icon, spinner, iconAlignment];
}
18 changes: 17 additions & 1 deletion packages/remix/lib/src/components/button/button_style.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,25 +45,29 @@ class RemixButtonStyle
final Prop<StyleSpec<TextSpec>>? $label;
final Prop<StyleSpec<IconSpec>>? $icon;
final Prop<StyleSpec<RemixSpinnerSpec>>? $spinner;
final IconAlignment? $iconAlignment;

const RemixButtonStyle.create({
Prop<StyleSpec<FlexBoxSpec>>? container,
Prop<StyleSpec<TextSpec>>? label,
Prop<StyleSpec<IconSpec>>? icon,
Prop<StyleSpec<RemixSpinnerSpec>>? spinner,
IconAlignment? iconAlignment,
super.variants,
super.animation,
super.modifier,
}) : $container = container,
$label = label,
$icon = icon,
$spinner = spinner;
$spinner = spinner,
$iconAlignment = iconAlignment;

RemixButtonStyle({
FlexBoxStyler? container,
TextStyler? label,
IconStyler? icon,
RemixSpinnerStyle? spinner,
IconAlignment? iconAlignment,
AnimationConfig? animation,
List<VariantStyle<RemixButtonSpec>>? variants,
WidgetModifierConfig? modifier,
Expand All @@ -72,6 +76,7 @@ class RemixButtonStyle
label: Prop.maybeMix(label),
icon: Prop.maybeMix(icon),
spinner: Prop.maybeMix(spinner),
iconAlignment: iconAlignment,
variants: variants,
animation: animation,
modifier: modifier,
Expand All @@ -90,6 +95,14 @@ class RemixButtonStyle
return merge(RemixButtonStyle(spinner: value));
}

/// Sets the icon alignment relative to the label.
///
/// Use [IconAlignment.left] to position the icon before the label,
/// or [IconAlignment.right] to position it after.
Comment thread
tilucasoli marked this conversation as resolved.
Outdated
RemixButtonStyle iconAlignment(IconAlignment value) {
return merge(RemixButtonStyle.create(iconAlignment: value));
}

/// Sets padding
RemixButtonStyle padding(EdgeInsetsGeometryMix value) {
return merge(RemixButtonStyle(container: FlexBoxStyler(padding: value)));
Expand Down Expand Up @@ -208,6 +221,7 @@ class RemixButtonStyle
label: MixOps.resolve(context, $label),
icon: MixOps.resolve(context, $icon),
spinner: MixOps.resolve(context, $spinner),
iconAlignment: $iconAlignment ?? IconAlignment.start,
),
animation: $animation,
widgetModifiers: $modifier?.resolve(context),
Expand All @@ -223,6 +237,7 @@ class RemixButtonStyle
label: MixOps.merge($label, other.$label),
icon: MixOps.merge($icon, other.$icon),
spinner: MixOps.merge($spinner, other.$spinner),
iconAlignment: other.$iconAlignment ?? $iconAlignment,
variants: MixOps.mergeVariants($variants, other.$variants),
animation: MixOps.mergeAnimation($animation, other.$animation),
modifier: MixOps.mergeModifier($modifier, other.$modifier),
Expand All @@ -235,6 +250,7 @@ class RemixButtonStyle
$label,
$icon,
$spinner,
$iconAlignment,
$variants,
$animation,
$modifier,
Expand Down
20 changes: 11 additions & 9 deletions packages/remix/lib/src/components/button/button_widget.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,16 +186,18 @@ class RemixButton extends StatelessWidget {
);

// Build spinner (used when loading)
final spinner = Center(
child: loadingBuilder == null
? RemixSpinner(styleSpec: spec.spinner)
: StyleSpecBuilder(
styleSpec: spec.spinner,
builder: loadingBuilder!,
),
);
final spinner = loadingBuilder == null
? RemixSpinner(styleSpec: spec.spinner)
: StyleSpecBuilder(
styleSpec: spec.spinner,
builder: loadingBuilder!,
);

final rowChildren = [if (iconWidget != null) iconWidget, textWidget]
final children = switch (spec.iconAlignment) {
.start => [if (iconWidget != null) iconWidget, textWidget],
.end => [textWidget, if (iconWidget != null) iconWidget],
};
final rowChildren = children
.map(
(e) => Visibility(
visible: !loading,
Expand Down
Loading