Merge pull request #171 from conceptadev/doc/update-migration

Update migration.md

website/pages/docs/overview/migration.md

@@ -23,3 +23,47 @@ To enhance readability, short aliases and shorthand property/method names are re
 #### Decorators
 
 Decorators' order was previously determined by their addition sequence. Now, we enforce specific ordering but also allow customizable orders. This might cause behavior changes in rare cases. For details, refer to the [decorators guide](https://fluttermix.com/docs/guides/decorators).
+
+### StyledWidgets updates
+
+#### The new PressableBox
+
+To provide a more consistent way to use the gesture APIs, we developed a new widget that merges the functionalities of Box and `Pressable`. Thus, the new `PressableBox` can receive a style like a Box and also accept interactions and its variants, similar to a `Pressable`. For more information, see the [PressableBox guide](https://www.fluttermix.com/docs/widgets/pressable-box).
+Keep in mind that the ideia is to reserve the old `Pressable` to more advanced cases.
+
+### Behavior changes
+
+#### Decorators
+
+Decorators cannot be inherited by any children. The reason is that abstract class `Attribute` has gained a new property, `isInheritable`, witch can be set to false if you want your custom attributes to be non-inheritable, such as Decorators.
+
+#### Operators `and` (`&`) and `or` (`|`) 
+
+The operators have been redesigned to allow for concatenation and grouping, enabling the creation of conditions like, `(primary | secondary) & onHover`. For details, refer to the [variants guide](https://www.fluttermix.com/docs/guides/variants#combining-operators)
+
+#### StyledWidgets and Decorators
+
+A bunch of `StyledWidgets` are now allow to receive decorators' attributes, including `StyledIcon`, `StyledFlex` and `StyledIcon`. Additionally, when a decorator is not applied to a Style, a `RenderWidgetDecorators` will not be present in the widget tree. This simplification makes the widget easier to debug.
+
+#### Theming
+
+The `MixTheme` feature has been improved and now offer better API. It can applied to main attributes using the method `.of`, as shown in the following code:
+```dart 
+const primaryColor = ColorToken('primary');
+final theme = MixThemeData(
+    colors: {
+        primaryColor: Colors.blue,
+    },
+);
+
+// ... body method ...
+MixTheme(
+    data: theme, 
+    Box(
+        key: key,
+        style: Style(
+            box.color.of(primaryColor),
+        ),
+    )
+)
+```

website/pages/docs/widgets/flex.mdx

@@ -164,16 +164,4 @@ Set the space (gap) between each child in the flex container.
 ```dart
 // Set a gap of 8 logical pixels between children.
 flex.gap(8);
-```
-
-### **Aliases**
-
-Shortcuts for creating `FlexSpecAttribute`s with `Row` or `Column` configurations.
-
-```dart
-// Shortcut for setting up a Row attribute.
-var myRow = flex.row();
-
-// Shortcut for setting up a Column attribute.
-var myColumn = flex.column();
-```
+```

website/pages/docs/widgets/icon.mdx

@@ -30,7 +30,7 @@ Box(
 );
 ```
 
-In the above example, the `StyledIcon` widget will inherit the icon size and color style from the `Box` widget.
+In the above example, the `StyledIcon` widget will inherit the icon size and color style from the `Box` widget. However, remember that decorators attributes cannot be inherited.
 
 ## AnimatedStyledIcon
 

website/pages/docs/widgets/image.mdx

@@ -1,3 +1,13 @@
-## Image
+---
+title: Image
+---
 
-Coming soon.
+import { Callout } from "nextra-theme-docs";
+
+# StyleImage
+
+<Callout type="info">
+  The StyledImage is in progress, if you would like to keep up to date with the progress. 
+</Callout>
+
+please follow the <a href="https://github.com/conceptadev/mix/issues/166"> StyledImage issue</a>.

website/pages/docs/widgets/pressable-box.mdx

@@ -36,9 +36,9 @@ In the example above, the `PressableBox` will apply a blue background color to t
 
 `PressableBox` integrates with various context variant utilities that apply styles based on different widget states and gestures. Here are a few of the interaction states and their corresponding styling hooks:
 
-- `onPress`: Styles applied when the widget is being pressed.
-- `onLongPress`: Styles applied when the widget is being long-pressed.
+- `onPressed`: Styles applied when the widget is being pressed.
+- `onLongPressed`: Styles applied when the widget is being long-pressed.
 - `onDisabled`: Styles applied when the widget is disabled and therefore non-interactive.
 - `onEnabled`: Styles applied when the widget is enabled and interactive.
-- `onFocus`: Styles applied when the widget gains focus.
+- `onFocused`: Styles applied when the widget gains focus.
 - `onHover`: Styles applied when a pointer has hovered over a widget.

website/pages/docs/widgets/text.mdx

@@ -16,7 +16,7 @@ StyledText(
 
 ## Inheritance
 
-The **StyledText** widget has the **inherit** flag true by default. That means that the style attributes will be inherited from the parent widget.
+The **StyledText** widget has the **inherit** flag true by default. That means that the style attributes will be inherited from the parent widget. However, remember that decorators attributes cannot be inherited.
 
 ```dart
 Box(
@@ -78,6 +78,61 @@ Limit the number of lines for the text block:
 text.maxLines(2);
 ```
 
+
+#### **textWidthBasis**
+
+Determine how text width is measured:
+
+```dart
+// Measure text width based on the longest line
+text.textWidthBasis.longestLine();
+
+// Measure text width based on the parent container
+text.textWidthBasis.parent();
+```
+
+#### **textHeightBehavior**
+
+Define how text height adjustments are made:
+
+```dart
+// Set a specified text height behavior
+text.textHeightBehavior(...); // TextHeightBehavior instance
+```
+
+#### **textDirection**
+
+Set the reading directionality of the text:
+
+```dart
+// Left-to-right text direction
+text.textDirection.ltr();
+
+// Right-to-left text direction
+text.textDirection.rtl();
+```
+
+#### **softWrap**
+
+Choose whether the text should soft-wrap:
+
+```dart
+// Enable soft wrapping
+text.softWrap(true);
+
+// Disable soft wrapping
+text.softWrap(false);
+```
+
+#### **textScaleFactor**
+
+Adjust the text scale factor for sizing:
+
+```dart
+// Increase text size by a factor of 1.5
+text.textScaleFactor(1.5);
+```
+
 #### **`style`**
 
 Allows to style `TextStyle` attributes efficiently, creating a cohesive and maintainable text styling semantics.
@@ -211,60 +266,6 @@ Set the locale for the text, affecting how it's displayed:
 text.style.locale(Locale('en')); // English locale
 ```
 
-#### **textWidthBasis**
-
-Determine how text width is measured:
-
-```dart
-// Measure text width based on the longest line
-text.textWidthBasis.longestLine();
-
-// Measure text width based on the parent container
-text.textWidthBasis.parent();
-```
-
-#### **textHeightBehavior**
-
-Define how text height adjustments are made:
-
-```dart
-// Set a specified text height behavior
-text.textHeightBehavior(...); // TextHeightBehavior instance
-```
-
-#### **textDirection**
-
-Set the reading directionality of the text:
-
-```dart
-// Left-to-right text direction
-text.textDirection.ltr();
-
-// Right-to-left text direction
-text.textDirection.rtl();
-```
-
-#### **softWrap**
-
-Choose whether the text should soft-wrap:
-
-```dart
-// Enable soft wrapping
-text.softWrap(true);
-
-// Disable soft wrapping
-text.softWrap(false);
-```
-
-#### **textScaleFactor**
-
-Adjust the text scale factor for sizing:
-
-```dart
-// Increase text size by a factor of 1.5
-text.textScaleFactor(1.5);
-```
-
 ### **Directives**
 
 Transform text data through various case operations: