Skip to content

Commit

Permalink
Make dart_style section more like a callout
Browse files Browse the repository at this point in the history
  • Loading branch information
greglittlefield-wf authored Jan 3, 2017
1 parent 3e76ef4 commit 2fb8625
Showing 1 changed file with 41 additions and 41 deletions.
82 changes: 41 additions & 41 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -494,47 +494,47 @@ as shown in the examples above.


## Component Formatting

#### dart_style
Currently, [dart_style (dartfmt)](https://github.com/dart-lang/dart_style) decreases the readability of components
built using [OverReact's fluent-style](#fluent-style-component-consumption).
See https://github.com/dart-lang/dart_style/issues/549 for more info.

We're exploring some different ideas to improve automated formatting, but for the time being, we __do not recommend__ using dart_style with OverReact.

However, if you do choose to use dart_style, you can greatly improve its output by using trailing commas in children argument lists:

* dart_style formatting:
```dart
return (Button()
..id = 'flip'
..skin =
ButtonSkin.vanilla)((Dom.span()
..className = 'flip-container')((Dom.span()..className = 'flipper')(
(Dom.span()
..className =
'front-side')((Icon()..glyph = IconGlyph.CHEVRON_DOUBLE_RIGHT)()),
(Dom.span()
..className =
'back-side')((Icon()..glyph = IconGlyph.CHEVRON_DOUBLE_LEFT)()))));
```
* dart_style formatting, when trailing commas are used:
```dart
return (Button()
..id = 'flip'
..skin = ButtonSkin.vanilla)(
(Dom.span()..className = 'flip-container')(
(Dom.span()..className = 'flipper')(
(Dom.span()..className = 'front-side')(
(Icon()..glyph = IconGlyph.CHEVRON_DOUBLE_RIGHT)(),
),
(Dom.span()..className = 'back-side')(
(Icon()..glyph = IconGlyph.CHEVRON_DOUBLE_LEFT)(),
),
),
),
);
```
> __A note on dart_style:__
>
> Currently, [dart_style (dartfmt)](https://github.com/dart-lang/dart_style) decreases the readability of components
> built using [OverReact's fluent-style](#fluent-style-component-consumption).
> See https://github.com/dart-lang/dart_style/issues/549 for more info.
>
> We're exploring some different ideas to improve automated formatting, but for the time being, we __do not recommend__ using dart_style with OverReact.
>
> However, if you do choose to use dart_style, you can greatly improve its output by using trailing commas in children argument lists:
>
> * dart_style formatting:
> ```dart
> return (Button()
> ..id = 'flip'
> ..skin =
> ButtonSkin.vanilla)((Dom.span()
> ..className = 'flip-container')((Dom.span()..className = 'flipper')(
> (Dom.span()
> ..className =
> 'front-side')((Icon()..glyph = IconGlyph.CHEVRON_DOUBLE_RIGHT)()),
> (Dom.span()
> ..className =
> 'back-side')((Icon()..glyph = IconGlyph.CHEVRON_DOUBLE_LEFT)()))));
> ```
> * dart_style formatting, when trailing commas are used:
> ```dart
> return (Button()
> ..id = 'flip'
> ..skin = ButtonSkin.vanilla)(
> (Dom.span()..className = 'flip-container')(
> (Dom.span()..className = 'flipper')(
> (Dom.span()..className = 'front-side')(
> (Icon()..glyph = IconGlyph.CHEVRON_DOUBLE_RIGHT)(),
> ),
> (Dom.span()..className = 'back-side')(
> (Icon()..glyph = IconGlyph.CHEVRON_DOUBLE_LEFT)(),
> ),
> ),
> ),
> );
> ```

### Guidelines

Expand Down

0 comments on commit 2fb8625

Please sign in to comment.