Skip to content

Mix 1.5.3 "Nielsen"

Latest
Latest
Compare
Choose a tag to compare
@tilucasoli tilucasoli released this 06 Dec 13:48
· 2 commits to main since this release
mix-1.5.3
8cc7d4a
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.

Highlights

FlexBox Gets a Dedicated Spec and Utility

In this release, FlexBox now has its own dedicated utility: $flexbox. Previously, you styled FlexBox using either $flex or $box. With $flexbox, you get a utility that combines attributes from both, offering a more intuitive and efficient way to handle a common use case in most applications.

This enhancement simplifies your code by reducing the need to use both box and any flex widget, making it easier to define layouts with different children.

FlexBox(
  direction: Axis.vertical,
  style: Style(
    $flexbox.chain
      ..flex.mainAxisAlignment.center()
      ..flex.crossAxisAlignment.center()
      ..flex.gap(12)
      ..padding.all(12)
      ..color.red()
      ..border.all.color.redAccent(),
  ),
  children: const [
    Text('Hello'),
    Text('World'),
  ],
),

Important Note: Starting with the next major version, FlexBox will exclusively use $flexbox. This change ensures that FlexBox styling is fully aligned with the existing API conventions in Mix, offering a more consistent developer experience.

Introducing the Remix Playground

Remix now includes a fully interactive playground, allowing you to explore and preview all available components in one place.

Widgetbook

Try out the playground today to get hands-on with Remix components and unlock new possibilities for your UI design!

Introducing Design Token Support in mix_generator

The mix_generator and mix_annotation now include full support for design token generation. With this update, you can effortlessly define your design tokens and let the generator handle creating everything needed to integrate them into your MixThemeData.

Simply annotate a class with @MixableToken, specifying the token type, and the generator will do the rest. This feature supports all design token categories: Radius, Color, Space, and TextStyle.

@MixableToken(Color)
class CustomColors {
  final Color primary;
  final Color surface;

  const CustomColors({
    required this.primary,
    required this.surface,
  });

  Map<ColorToken, Color> toMap() => _$CustomColorsToMap(this);
}

Directly in Styles:

The generated code supports you reference tokens directly in your styles for a cleaner, more declarative approach:

$box.color.$primary()

Access from Context:

You can also access tokens dynamically through the context

context.$color.primary()

This update ensure consistency across your app while reducing boilerplate. The added utilities make tokens easier to use, improving developer productivity.

Packages Updates

mix - v1.5.3

  • REFACTOR: Solve dcm lint issues (#519).
  • FIX: Order of modifiers implementation on Box, Image and Text (#529).
  • FIX: reset modifiers and directives when using fluentAPI (#482).
  • FEAT: Add spring curve (#503).
  • FEAT: Create StrokeAlignUtility (#496).
  • FEAT: Utilities for text height behavior (#495).
  • FEAT: Rewrite FlexBox as a Mix's primitive component (#517).
  • FEAT: Add SpecConfiguration (#483).
  • DOCS: Add section for TokenResolver (#537).

remix - v0.0.3

  • REFACTOR: Create a new Architecture for remix's components (#446).
  • REFACTOR(remix): improve widgetbook navigation (#524).
  • REFACTOR: Add in code documentation and rename params for each component (#514).
  • REFACTOR: Remix progress (#429).
  • REFACTOR: small fixes on remix (#512).
  • REFACTOR: Rewrite Fortaleza theme using the new code gen for tokens (#528).
  • REFACTOR: Remix was rewritten using Fluent API (#476).
  • REFACTOR: Rewrite all components in the new Archtecture (#467).
  • FIX: Textfield helper Text (#531).
  • FIX: Toast animation trigger (#530).
  • FEAT: Create Textfield (#511).
  • FEAT: Chip component (#504).
  • FEAT: implement toast component (#503).
  • FEAT: Card has child instead of children parameter (#499).
  • FEAT: Create dark base theme for Remix (#498).
  • FEAT: remix-styling-configuration (#483).
  • FEAT: Segmented control (#479).
  • FEAT: Accordion component (#433).
  • FEAT: Slider component (#509).
  • FEAT: Add more directives to Colors (#477).
  • FEAT: Menu Item Component (#508).
  • FEAT: Add group feature to Radio (#435).
  • FEAT: Create Select component (#448).
  • FEAT: Add parameter onEnd for AnimatedStyle (#458).
  • FEAT: button supports component builder (#444).
  • FEAT: Create a theme for Remix (#470).
  • FEAT: Refactor Remix components (#428).
  • FEAT: Remix improvements and further improvements (#410).
  • FEAT: Rewrite FlexBox as a Mix's primitive component (#517).

mix_annotations - v0.3.1

  • FEAT: Create code gen for design tokens (#521).

mix_generator - v0.3.2

  • REFACTOR: Rewrite Fortaleza theme using the new code gen for tokens (#528).
  • FIX: Shadow list animation (#445).
  • FEAT: Create code gen for design tokens (#521).
  • FEAT: Rewrite FlexBox as a Mix's primitive component (#517).
  • FEAT: Fluent API (#475).
  • FEAT: Remix improvements and further improvements (#410).
  • DOCS: improve mix theme data features explanations (#404).

mix_lint - v0.1.2

  • FEAT: Rewrite FlexBox as a Mix's primitive component (#517).

What's Changed

New Contributors

Full Changelog: mix-1.5.2...mix-1.5.3

Contributors

yousinix, tilucasoli, and 2 other contributors
Assets 2
Loading