Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

Commit 78db2b1

Browse files
CaerusKaruCaerusKaru
committed
fix(fxFlex): fix non-wrapping behavior and default fxFlex value
* Set the non-wrapping behavior for fxFlex to be 100% instead of the width/height value * Set the default value for fxFlex to auto instead of 1e-9px
1 parent 3809608 commit 78db2b1

File tree

8 files changed

+134
-171
lines changed

8 files changed

+134
-171
lines changed

‎src/apps/demo-app/package-lock.json

Lines changed: 77 additions & 77 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/lib/flex/flex-offset/flex-offset.spec.ts

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -71,22 +71,14 @@ describe('flex-offset directive', () => {
7171

7272
let dom = fixture.debugElement.children[0];
7373
expectEl(dom).toHaveStyle({'margin-left': '32px'}, styler);
74-
if (platform.BLINK) {
75-
expectEl(dom).toHaveStyle({'flex': '1 1 1e-09px'}, styler);
76-
} else if (platform.FIREFOX) {
77-
expectEl(dom).toHaveStyle({'flex': '1 1 1e-9px'}, styler);
78-
} else if (platform.EDGE || platform.TRIDENT) {
79-
expectEl(dom).toHaveStyle({'flex': '1 1 0px'}, styler);
80-
} else {
81-
expectEl(dom).toHaveStyle({'flex': '1 1 0.000000001px'}, styler);
82-
}
74+
expectEl(dom).toHaveStyle({'flex': '1 1 auto'}, styler);
8375
});
8476

8577

8678
it('should work with percentage values', () => {
8779
componentWithTemplate(`<div fxFlexOffset='17' fxFlex='37'></div>`);
8880
expectNativeEl(fixture).toHaveStyle({
89-
'flex': '1 1 37%',
81+
'flex': '1 1 100%',
9082
'box-sizing': 'border-box',
9183
'margin-left': '17%'
9284
}, styler);

‎src/lib/flex/flex-offset/flex-offset.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import {
2626
} from '@angular/flex-layout/core';
2727
import {Subscription} from 'rxjs/Subscription';
2828

29-
import {LayoutDirective} from '../layout/layout';
29+
import {Layout, LayoutDirective} from '../layout/layout';
3030
import {isFlowHorizontal} from '../../utils/layout-validator';
3131

3232
/**
@@ -117,7 +117,7 @@ export class FlexOffsetDirective extends BaseFxDirective implements OnInit, OnCh
117117
// *********************************************
118118

119119
/** The flex-direction of this element's host container. Defaults to 'row'. */
120-
protected _layout = 'row';
120+
protected _layout = {direction: 'row', wrap: false};
121121

122122
/**
123123
* Subscription to the parent flex container's layout changes.
@@ -132,9 +132,9 @@ export class FlexOffsetDirective extends BaseFxDirective implements OnInit, OnCh
132132
protected watchParentFlow() {
133133
if (this._container) {
134134
// Subscribe to layout immediate parent direction changes (if any)
135-
this._layoutWatcher = this._container.layout$.subscribe((direction) => {
135+
this._layoutWatcher = this._container.layout$.subscribe((layout) => {
136136
// `direction` === null if parent container does not have a `fxLayout`
137-
this._onLayoutChange(direction);
137+
this._onLayoutChange(layout);
138138
});
139139
}
140140
}
@@ -143,8 +143,8 @@ export class FlexOffsetDirective extends BaseFxDirective implements OnInit, OnCh
143143
* Caches the parent container's 'flex-direction' and updates the element's style.
144144
* Used as a handler for layout change events from the parent flex container.
145145
*/
146-
protected _onLayoutChange(direction?: string) {
147-
this._layout = direction || this._layout || 'row';
146+
protected _onLayoutChange(layout?: Layout) {
147+
this._layout = layout || this._layout || {direction: 'row', wrap: false};
148148
this._updateWithValue();
149149
}
150150

‎src/lib/flex/flex/flex.spec.ts

Lines changed: 18 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -74,16 +74,7 @@ describe('flex directive', () => {
7474

7575
let dom = fixture.debugElement.children[0];
7676
expectEl(dom).toHaveStyle({'box-sizing': 'border-box'}, styler);
77-
78-
if (platform.BLINK) {
79-
expectEl(dom).toHaveStyle({'flex': '1 1 1e-09px'}, styler);
80-
} else if (platform.FIREFOX) {
81-
expectEl(dom).toHaveStyle({'flex': '1 1 1e-9px'}, styler);
82-
} else if (platform.EDGE || platform.TRIDENT) {
83-
expectEl(dom).toHaveStyle({'flex': '1 1 0px'}, styler);
84-
} else {
85-
expectEl(dom).toHaveStyle({'flex': '1 1 0.000000001px'}, styler);
86-
}
77+
expectEl(dom).toHaveStyle({'flex': '1 1 auto'}, styler);
8778
});
8879

8980
it('should apply `fxGrow` value to flex-grow when used default `fxFlex`', () => {
@@ -93,16 +84,7 @@ describe('flex directive', () => {
9384
let dom = fixture.debugElement.children[0];
9485

9586
expectEl(dom).toHaveStyle({'box-sizing': 'border-box'}, styler);
96-
97-
if (platform.BLINK) {
98-
expectEl(dom).toHaveStyle({'flex': '10 1 1e-09px'}, styler);
99-
} else if (platform.FIREFOX) {
100-
expectEl(dom).toHaveStyle({'flex': '10 1 1e-9px'}, styler);
101-
} else if (platform.EDGE || platform.TRIDENT) {
102-
expectEl(dom).toHaveStyle({'flex': '10 1 0px'}, styler);
103-
} else {
104-
expectEl(dom).toHaveStyle({'flex': '10 1 0.000000001px'}, styler);
105-
}
87+
expectEl(dom).toHaveStyle({'flex': '10 1 auto'}, styler);
10688
});
10789

10890
it('should apply `fxShrink` value to flex-shrink when used default `fxFlex`', () => {
@@ -112,16 +94,7 @@ describe('flex directive', () => {
11294
let dom = fixture.debugElement.children[0];
11395

11496
expectEl(dom).toHaveStyle({'box-sizing': 'border-box'}, styler);
115-
116-
if (platform.BLINK) {
117-
expectEl(dom).toHaveStyle({'flex': '1 10 1e-09px'}, styler);
118-
} else if (platform.FIREFOX) {
119-
expectEl(dom).toHaveStyle({'flex': '1 10 1e-9px'}, styler);
120-
} else if (platform.EDGE || platform.TRIDENT) {
121-
expectEl(dom).toHaveStyle({'flex': '1 10 0px'}, styler);
122-
} else {
123-
expectEl(dom).toHaveStyle({'flex': '1 10 0.000000001px'}, styler);
124-
}
97+
expectEl(dom).toHaveStyle({'flex': '1 10 auto'}, styler);
12598
});
12699

127100
it('should apply both `fxGrow` and `fxShrink` when used with default fxFlex', () => {
@@ -130,16 +103,7 @@ describe('flex directive', () => {
130103

131104
let dom = fixture.debugElement.children[0];
132105
expectEl(dom).toHaveStyle({'box-sizing': 'border-box'}, styler);
133-
134-
if (platform.BLINK) {
135-
expectEl(dom).toHaveStyle({'flex': '4 5 1e-09px'}, styler);
136-
} else if (platform.FIREFOX) {
137-
expectEl(dom).toHaveStyle({'flex': '4 5 1e-9px'}, styler);
138-
} else if (platform.EDGE || platform.TRIDENT) {
139-
expectEl(dom).toHaveStyle({'flex': '4 5 0px'}, styler);
140-
} else {
141-
expectEl(dom).toHaveStyle({'flex': '4 5 0.000000001px'}, styler);
142-
}
106+
expectEl(dom).toHaveStyle({'flex': '4 5 auto'}, styler);
143107
});
144108

145109
it('should add correct styles for flex-basis unitless 0 input', () => {
@@ -190,15 +154,15 @@ describe('flex directive', () => {
190154
fixture.detectChanges();
191155
expectNativeEl(fixture).toHaveStyle({
192156
'max-width': '2%',
193-
'flex': '1 1 2%',
157+
'flex': '1 1 100%',
194158
'box-sizing': 'border-box',
195159
}, styler);
196160
});
197161

198162
it('should work with percentage values', () => {
199163
componentWithTemplate(`<div fxFlex='37%'></div>`);
200164
expectNativeEl(fixture).toHaveStyle({
201-
'flex': '1 1 37%',
165+
'flex': '1 1 100%',
202166
'max-width': '37%',
203167
'box-sizing': 'border-box',
204168
}, styler);
@@ -472,23 +436,23 @@ describe('flex directive', () => {
472436
fixture.detectChanges();
473437
expectEl(queryFor(fixture, '[fxFlex]')[0])
474438
.toHaveStyle({
475-
'flex': '1 1 37%',
439+
'flex': '1 1 100%',
476440
'max-height': '37%',
477441
}, styler);
478442
});
479443

480444
it('should set max-width for `fxFlex="<%val>"`', () => {
481445
componentWithTemplate(`<div fxFlex='37%'></div>`);
482446
expectNativeEl(fixture).toHaveStyle({
483-
'flex': '1 1 37%',
447+
'flex': '1 1 100%',
484448
'max-width': '37%',
485449
}, styler);
486450
});
487451

488452
it('should set max-width for `fxFlex="2%"` usage', () => {
489453
componentWithTemplate(`<div fxFlex='2%'></div>`);
490454
expectNativeEl(fixture).toHaveStyle({
491-
'flex': '1 1 2%',
455+
'flex': '1 1 100%',
492456
'max-width': '2%',
493457
}, styler);
494458
});
@@ -510,15 +474,15 @@ describe('flex directive', () => {
510474
fixture.detectChanges();
511475

512476
expectNativeEl(fixture).toHaveStyle({
513-
'flex': '1 1 50%',
477+
'flex': '1 1 100%',
514478
'max-width': '50%'
515479
}, styler);
516480

517481
matchMedia.activate('sm', true);
518482
fixture.detectChanges();
519483

520484
expectNativeEl(fixture).toHaveStyle({
521-
'flex': '1 1 33%',
485+
'flex': '1 1 100%',
522486
'max-width': '33%'
523487
}, styler);
524488
});
@@ -546,9 +510,9 @@ describe('flex directive', () => {
546510
fixture.detectChanges();
547511

548512
nodes = queryFor(fixture, '[fxFlex]');
549-
expectEl(nodes[0]).toHaveStyle({'flex': '1 1 50%', 'max-height': '50%'}, styler);
550-
expectEl(nodes[1]).toHaveStyle({'flex': '1 1 24.4%', 'max-height': '24.4%'}, styler);
551-
expectEl(nodes[2]).toHaveStyle({'flex': '1 1 25.6%', 'max-height': '25.6%'}, styler);
513+
expectEl(nodes[0]).toHaveStyle({'flex': '1 1 100%', 'max-height': '50%'}, styler);
514+
expectEl(nodes[1]).toHaveStyle({'flex': '1 1 100%', 'max-height': '24.4%'}, styler);
515+
expectEl(nodes[2]).toHaveStyle({'flex': '1 1 100%', 'max-height': '25.6%'}, styler);
552516

553517
matchMedia.activate('sm');
554518
fixture.detectChanges();
@@ -597,9 +561,9 @@ describe('flex directive', () => {
597561
fixture.detectChanges();
598562
nodes = queryFor(fixture, '[fxFlex]');
599563

600-
expectEl(nodes[0]).toHaveStyle({'flex': '1 1 50%', 'max-height': '50%'}, styler);
601-
expectEl(nodes[1]).toHaveStyle({'flex': '1 1 24.4%', 'max-height': '24.4%'}, styler);
602-
expectEl(nodes[2]).toHaveStyle({'flex': '1 1 25.6%', 'max-height': '25.6%'}, styler);
564+
expectEl(nodes[0]).toHaveStyle({'flex': '1 1 100%', 'max-height': '50%'}, styler);
565+
expectEl(nodes[1]).toHaveStyle({'flex': '1 1 100%', 'max-height': '24.4%'}, styler);
566+
expectEl(nodes[2]).toHaveStyle({'flex': '1 1 100%', 'max-height': '25.6%'}, styler);
603567
});
604568

605569
it('should fallback to the default layout from lt-md selectors', () => {
@@ -621,7 +585,7 @@ describe('flex directive', () => {
621585
nodes = queryFor(fixture, '[fxFlex]');
622586

623587
expectEl(nodes[0]).toHaveStyle({
624-
'flex': '1 1 50%',
588+
'flex': '1 1 100%',
625589
'max-height': '50%'
626590
}, styler);
627591

‎src/lib/flex/flex/flex.ts

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {BaseFxDirective, MediaChange, MediaMonitor, StyleUtils} from '@angular/f
2020
import {Subscription} from 'rxjs/Subscription';
2121

2222
import {extendObject} from '../../utils/object-extend';
23-
import {LayoutDirective} from '../layout/layout';
23+
import {Layout, LayoutDirective} from '../layout/layout';
2424
import {validateBasis} from '../../utils/basis-validator';
2525
import {isFlowHorizontal} from '../../utils/layout-validator';
2626

@@ -45,7 +45,7 @@ export type FlexBasisAlias = 'grow' | 'initial' | 'auto' | 'none' | 'nogrow' | '
4545
export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges, OnDestroy {
4646

4747
/** The flex-direction of this element's flex container. Defaults to 'row'. */
48-
protected _layout: string;
48+
protected _layout: Layout;
4949

5050
/**
5151
* Subscription to the parent flex container's layout changes.
@@ -90,9 +90,9 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
9090
if (_container) {
9191
// If this flex item is inside of a flex container marked with
9292
// Subscribe to layout immediate parent direction changes
93-
this._layoutWatcher = _container.layout$.subscribe((direction) => {
93+
this._layoutWatcher = _container.layout$.subscribe((layout) => {
9494
// `direction` === null if parent container does not have a `fxLayout`
95-
this._onLayoutChange(direction);
95+
this._onLayoutChange(layout);
9696
});
9797
}
9898
}
@@ -131,8 +131,8 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
131131
* Caches the parent container's 'flex-direction' and updates the element's style.
132132
* Used as a handler for layout change events from the parent flex container.
133133
*/
134-
protected _onLayoutChange(direction?: string) {
135-
this._layout = direction || this._layout || 'row';
134+
protected _onLayoutChange(layout?: Layout) {
135+
this._layout = layout || this._layout || {direction: 'row', wrap: false};
136136
this._updateStyle();
137137
}
138138

@@ -200,7 +200,7 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
200200
};
201201
switch (basis || '') {
202202
case '':
203-
basis = MIN_FLEX;
203+
basis = 'auto';
204204
break;
205205
case 'initial': // default
206206
case 'nogrow':
@@ -267,8 +267,7 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
267267
}
268268

269269
// Fix for issues 277 and 534
270-
// TODO(CaerusKaru): convert this to just width/height
271-
if (basis !== '0%' && basis !== MIN_FLEX) {
270+
if (basis !== '0%') {
272271
css[min] = isFixed || (isPx && grow) ? basis : null;
273272
css[max] = isFixed || (!usingCalc && shrink) ? basis : null;
274273
}
@@ -288,13 +287,13 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
288287
}
289288
} else {
290289
// Fix for issue 660
291-
css[hasCalc ? 'flex-basis' : 'flex'] = css[max] ?
292-
(hasCalc ? css[max] : `${grow} ${shrink} ${css[max]}`) :
293-
(hasCalc ? css[min] : `${grow} ${shrink} ${css[min]}`);
290+
if (this._layout && this._layout.wrap) {
291+
css[hasCalc ? 'flex-basis' : 'flex'] = css[max] ?
292+
(hasCalc ? css[max] : `${grow} ${shrink} ${css[max]}`) :
293+
(hasCalc ? css[min] : `${grow} ${shrink} ${css[min]}`);
294+
}
294295
}
295296

296297
return extendObject(css, {'box-sizing': 'border-box'});
297298
}
298299
}
299-
300-
const MIN_FLEX = '0.000000001px';

‎src/lib/flex/layout-align/layout-align.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {BaseFxDirective, MediaChange, MediaMonitor, StyleUtils} from '@angular/f
2020
import {Subscription} from 'rxjs/Subscription';
2121

2222
import {extendObject} from '../../utils/object-extend';
23-
import {LayoutDirective} from '../layout/layout';
23+
import {Layout, LayoutDirective} from '../layout/layout';
2424
import {LAYOUT_VALUES, isFlowHorizontal} from '../../utils/layout-validator';
2525

2626
/**
@@ -124,8 +124,8 @@ export class LayoutAlignDirective extends BaseFxDirective implements OnInit, OnC
124124
/**
125125
* Cache the parent container 'flex-direction' and update the 'flex' styles
126126
*/
127-
protected _onLayoutChange(direction) {
128-
this._layout = (direction || '').toLowerCase();
127+
protected _onLayoutChange(layout: Layout) {
128+
this._layout = (layout.direction || '').toLowerCase();
129129
if (!LAYOUT_VALUES.find(x => x === this._layout)) {
130130
this._layout = 'row';
131131
}

‎src/lib/flex/layout-gap/layout-gap.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import {Directionality} from '@angular/cdk/bidi';
2121
import {BaseFxDirective, MediaChange, MediaMonitor, StyleUtils} from '@angular/flex-layout/core';
2222
import {Subscription} from 'rxjs/Subscription';
2323

24-
import {LayoutDirective} from '../layout/layout';
24+
import {Layout, LayoutDirective} from '../layout/layout';
2525
import {LAYOUT_VALUES} from '../../utils/layout-validator';
2626

2727
/**
@@ -143,8 +143,8 @@ export class LayoutGapDirective extends BaseFxDirective
143143
/**
144144
* Cache the parent container 'flex-direction' and update the 'margin' styles
145145
*/
146-
protected _onLayoutChange(direction) {
147-
this._layout = (direction || '').toLowerCase();
146+
protected _onLayoutChange(layout: Layout) {
147+
this._layout = (layout.direction || '').toLowerCase();
148148
if (!LAYOUT_VALUES.find(x => x === this._layout)) {
149149
this._layout = 'row';
150150
}

0 commit comments

Comments
 (0)