-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add more flex layout support (#19)
This PR changes the following: - adds an fxFlexFill alternative - adds an fxFlexAlign alternative - adds flex-row properties to containers where it is missing and where layout-align is used - adds a documentation page on how to migrate from Flex Layout - **renames `data-fx-flex` to `data-flex`** because it was the only attribute selector with the `fx` prefix, which was confusing - removes `data-fx-flex-grow` in favor of `data-flex="grow"` It introduces breaking changes, but as we already introduced other breaking changes for the next release this should be okay (as we're releasing it as the next major version).
- Loading branch information
Showing
23 changed files
with
426 additions
and
64 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| --- | ||
| sidebar_label: Migration from Angular Flex-Layout | ||
| sidebar_position: 6 | ||
| --- | ||
|
|
||
| # Migration from Angular Flex-Layout | ||
|
|
||
| If you consider migrating to css-fx-layout from Angular Flex-Layout be sure to know this library's limitations. | ||
| Not every feature of Flex-Layout is available but almost all popular features should be and some missing features can be | ||
| easily replaced. | ||
|
|
||
| As the migration is easier when you choose to use css-fx-layout with attribute selectors, this guide only focuses on this migration. | ||
|
|
||
| ## Limitations | ||
|
|
||
| Let's start with what is missing in css-fx-layout in comparison with Angular Flex-Layout: | ||
|
|
||
| * no JavaScript API | ||
| * no general support for Angular expression bindings | ||
| * no alternative for `fxFlex` with numerical units other than percent | ||
| * the alternatives for `fxFlexAlign` only support `start`, `center`, `end`, `baseline` and `stretch` | ||
| * no grid functionality | ||
| * no alternative for `fxFlexOrder` | ||
| * no alternative for `fxFlexOffset` | ||
| * no custom breakpoints | ||
| * the alternative to `fxShow` only supports the responsive API and does not work the same way it does in Flex-Layout | ||
|
|
||
| :::warning Migrate away from `fxShow` / `data-show` | ||
|
|
||
| When moving to css-fx-layout it is recommended to migrate all elements using `fxShow` with more than one media size or in combination with `fxHide` to multiple `data-hide` attributes. | ||
| css-fx-layout is not a JavaScript powered library and cannot make the selectors work the same smart way they do in Angular Flex-Layout. Ignoring this advice and | ||
| keeping multiple `data-show` attributes on your elements or trying to combine them with `data-hide` will very likely not result in what you want! | ||
|
|
||
| ::: | ||
|
|
||
| There *may* be more differences in the details but these are the most obvious and big ones. | ||
|
|
||
| ## Migration | ||
|
|
||
| :::info | ||
|
|
||
| css-fx-layout generates some selectors only for the defined numerical values, for example the gap or flex selectors. | ||
| Make sure to customise the parameters of the mixins in a way that generates all selectors you need in your project. | ||
|
|
||
| ::: | ||
|
|
||
| Now that we got this out of the way let's migrate. Most of it should be possible to do with some smart | ||
| finds and replaces in your code using regular expressions. | ||
|
|
||
| | Flex-Layout selector | Regex search | Regex replace | | ||
| |----------------------------|----------------------------|-------------------------| | ||
| | `fxLayout` | `fxLayout=` | `data-layout=` | | ||
| | `fxLayout` responsive | `fxLayout\.([\w-]+)=` | `data-layout-$1=` | | ||
| | `fxLayoutAlign` | `fxLayoutAlign=` | `data-layout-align=` | | ||
| | `fxLayoutAlign` responsive | `fxLayoutAlign\.([\w-]+)=` | `data-layout-align-$1=` | | ||
| | `fxFlex` | `fxFlex=` | `data-flex=` | | ||
| | `fxFlex` responsive | `fxFlex\.([\w-]+)=` | `data-flex-$1=` | | ||
| | `fxLayoutGap` | `fxLayoutGap=` | `data-layout-gap=` | | ||
| | `fxLayoutGap` responsive | `fxLayoutGap\.([\w-]+)=` | `data-layout-gap-$1=` | | ||
| | `fxHide` responsive | `fxHide\.([\w-]+)` | `data-hide-$1` | | ||
| | `fxShow` responsive | `fxShow\.([\w-]+)` | `data-show-$1` | | ||
| | `fxFlexFill` | `fxFlexFill` | `data-flex-fill` | | ||
| | `fxFlexFill` responsive | `fxFlexFill\.([\w-]+)` | `data-flex-fill-$1` | | ||
|
|
||
| Additionally: | ||
| * you need to replace all occurrences of `row-reverse` and `column-reverse` with `row reverse` or `column reverse` | ||
| * you should change your code to follow the advice regarding `data-show` from the warning box above | ||
|
|
||
| This should get the migration of all available features done. In many projects, even larger ones, this can already be 80-100% of the work required | ||
| to move away from Angular Flex-Layout. | ||
|
|
||
| Did we miss something? Feel free to contribute to the documentation or the library on [GitHub](https://github.com/philmtd/css-fx-layout). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| @import "mixins"; | ||
|
|
||
| /// Generates flex align data attribute selectors | ||
| @mixin flex-align-attributes { | ||
| *[data-flex-align="start"] { | ||
| @include flex-align-start-properties; | ||
| } | ||
| *[data-flex-align="center"] { | ||
| @include flex-align-center-properties; | ||
| } | ||
| *[data-flex-align="end"] { | ||
| @include flex-align-end-properties; | ||
| } | ||
| *[data-flex-align="baseline"] { | ||
| @include flex-align-baseline-properties; | ||
| } | ||
| *[data-flex-align="stretch"] { | ||
| @include flex-align-stretch-properties; | ||
| } | ||
| } | ||
|
|
||
| @mixin flex-align-attributes-for-media-sizes { | ||
| @each $name, $_ in $flex-layout-media-queries { | ||
| @include flex-layout-media($name) { | ||
| *[data-flex-align-#{$name}="start"] { | ||
| @include flex-align-start-properties; | ||
| } | ||
| *[data-flex-align-#{$name}="center"] { | ||
| @include flex-align-center-properties; | ||
| } | ||
| *[data-flex-align-#{$name}="end"] { | ||
| @include flex-align-end-properties; | ||
| } | ||
| *[data-flex-align-#{$name}="baseline"] { | ||
| @include flex-align-baseline-properties; | ||
| } | ||
| *[data-flex-align-#{$name}="stretch"] { | ||
| @include flex-align-stretch-properties; | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| @import "mixins"; | ||
|
|
||
| /// Generates flex align class selectors | ||
| @mixin flex-align-classes { | ||
| *.fx-flex-align--start { | ||
| @include flex-align-start-properties; | ||
| } | ||
| *.fx-flex-align--center { | ||
| @include flex-align-center-properties; | ||
| } | ||
| *.fx-flex-align--end { | ||
| @include flex-align-end-properties; | ||
| } | ||
| *.fx-flex-align--baseline { | ||
| @include flex-align-baseline-properties; | ||
| } | ||
| *.fx-flex-align--stretch { | ||
| @include flex-align-stretch-properties; | ||
| } | ||
| } | ||
|
|
||
| @mixin flex-align-classes-for-media-sizes { | ||
| @each $name, $_ in $flex-layout-media-queries { | ||
| @include flex-layout-media($name) { | ||
| *.fx-flex-align--start--#{$name} { | ||
| @include flex-align-start-properties; | ||
| } | ||
| *.fx-flex-align--center--#{$name} { | ||
| @include flex-align-center-properties; | ||
| } | ||
| *.fx-flex-align--end--#{$name} { | ||
| @include flex-align-end-properties; | ||
| } | ||
| *.fx-flex-align--baseline--#{$name} { | ||
| @include flex-align-baseline-properties; | ||
| } | ||
| *.fx-flex-align--stretch--#{$name} { | ||
| @include flex-align-stretch-properties; | ||
| } | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.