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

Commit a0a4580

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 fbd5507 commit a0a4580

File tree

7 files changed

+60
-100
lines changed

7 files changed

+60
-100
lines changed

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

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
import {Component, PLATFORM_ID} from '@angular/core';
99
import {CommonModule, isPlatformServer} from '@angular/common';
1010
import {ComponentFixture, inject, TestBed} from '@angular/core/testing';
11-
import {Platform, PlatformModule} from '@angular/cdk/platform';
1211
import {DIR_DOCUMENT} from '@angular/cdk/bidi';
1312
import {SERVER_TOKEN, StyleUtils} from '@angular/flex-layout/core';
1413

@@ -25,15 +24,13 @@ describe('flex-offset directive', () => {
2524
let fixture: ComponentFixture<any>;
2625
let fakeDocument: {body: {dir?: string}, documentElement: {dir?: string}};
2726
let styler: StyleUtils;
28-
let platform: Platform;
2927
let platformId: Object;
3028
let componentWithTemplate = (template: string) => {
3129
fixture = makeCreateTestComponent(() => TestFlexComponent)(template);
3230

33-
inject([StyleUtils, Platform, PLATFORM_ID],
34-
(_styler: StyleUtils, _platform: Platform, _platformId: Object) => {
31+
inject([StyleUtils, PLATFORM_ID],
32+
(_styler: StyleUtils, _platformId: Object) => {
3533
styler = _styler;
36-
platform = _platform;
3734
platformId = _platformId;
3835
})();
3936
};
@@ -44,7 +41,7 @@ describe('flex-offset directive', () => {
4441

4542
// Configure testbed to prepare services
4643
TestBed.configureTestingModule({
47-
imports: [CommonModule, FlexLayoutModule, PlatformModule],
44+
imports: [CommonModule, FlexLayoutModule],
4845
declarations: [TestFlexComponent],
4946
providers: [
5047
{provide: DIR_DOCUMENT, useValue: fakeDocument},
@@ -61,22 +58,14 @@ describe('flex-offset directive', () => {
6158

6259
let dom = fixture.debugElement.children[0];
6360
expectEl(dom).toHaveStyle({'margin-left': '32px'}, styler);
64-
if (platform.BLINK) {
65-
expectEl(dom).toHaveStyle({'flex': '1 1 1e-09px'}, styler);
66-
} else if (platform.FIREFOX) {
67-
expectEl(dom).toHaveStyle({'flex': '1 1 1e-9px'}, styler);
68-
} else if (platform.EDGE || platform.TRIDENT) {
69-
expectEl(dom).toHaveStyle({'flex': '1 1 0px'}, styler);
70-
} else {
71-
expectEl(dom).toHaveStyle({'flex': '1 1 0.000000001px'}, styler);
72-
}
61+
expectEl(dom).toHaveStyle({'flex': '1 1 0%'}, styler);
7362
});
7463

7564

7665
it('should work with percentage values', () => {
7766
componentWithTemplate(`<div fxFlexOffset='17' fxFlex='37'></div>`);
7867
expectNativeEl(fixture).toHaveStyle({
79-
'flex': '1 1 37%',
68+
'flex': '1 1 100%',
8069
'box-sizing': 'border-box',
8170
'margin-left': '17%'
8271
}, 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
@@ -72,16 +72,7 @@ describe('flex directive', () => {
7272

7373
let dom = fixture.debugElement.children[0];
7474
expectEl(dom).toHaveStyle({'box-sizing': 'border-box'}, styler);
75-
76-
if (platform.BLINK) {
77-
expectEl(dom).toHaveStyle({'flex': '1 1 1e-09px'}, styler);
78-
} else if (platform.FIREFOX) {
79-
expectEl(dom).toHaveStyle({'flex': '1 1 1e-9px'}, styler);
80-
} else if (platform.EDGE || platform.TRIDENT) {
81-
expectEl(dom).toHaveStyle({'flex': '1 1 0px'}, styler);
82-
} else {
83-
expectEl(dom).toHaveStyle({'flex': '1 1 0.000000001px'}, styler);
84-
}
75+
expectEl(dom).toHaveStyle({'flex': '1 1 0%'}, styler);
8576
});
8677

8778
it('should apply `fxGrow` value to flex-grow when used default `fxFlex`', () => {
@@ -91,16 +82,7 @@ describe('flex directive', () => {
9182
let dom = fixture.debugElement.children[0];
9283

9384
expectEl(dom).toHaveStyle({'box-sizing': 'border-box'}, styler);
94-
95-
if (platform.BLINK) {
96-
expectEl(dom).toHaveStyle({'flex': '10 1 1e-09px'}, styler);
97-
} else if (platform.FIREFOX) {
98-
expectEl(dom).toHaveStyle({'flex': '10 1 1e-9px'}, styler);
99-
} else if (platform.EDGE || platform.TRIDENT) {
100-
expectEl(dom).toHaveStyle({'flex': '10 1 0px'}, styler);
101-
} else {
102-
expectEl(dom).toHaveStyle({'flex': '10 1 0.000000001px'}, styler);
103-
}
85+
expectEl(dom).toHaveStyle({'flex': '10 1 0%'}, styler);
10486
});
10587

10688
it('should apply `fxShrink` value to flex-shrink when used default `fxFlex`', () => {
@@ -110,16 +92,7 @@ describe('flex directive', () => {
11092
let dom = fixture.debugElement.children[0];
11193

11294
expectEl(dom).toHaveStyle({'box-sizing': 'border-box'}, styler);
113-
114-
if (platform.BLINK) {
115-
expectEl(dom).toHaveStyle({'flex': '1 10 1e-09px'}, styler);
116-
} else if (platform.FIREFOX) {
117-
expectEl(dom).toHaveStyle({'flex': '1 10 1e-9px'}, styler);
118-
} else if (platform.EDGE || platform.TRIDENT) {
119-
expectEl(dom).toHaveStyle({'flex': '1 10 0px'}, styler);
120-
} else {
121-
expectEl(dom).toHaveStyle({'flex': '1 10 0.000000001px'}, styler);
122-
}
95+
expectEl(dom).toHaveStyle({'flex': '1 10 0%'}, styler);
12396
});
12497

12598
it('should apply both `fxGrow` and `fxShrink` when used with default fxFlex', () => {
@@ -128,16 +101,7 @@ describe('flex directive', () => {
128101

129102
let dom = fixture.debugElement.children[0];
130103
expectEl(dom).toHaveStyle({'box-sizing': 'border-box'}, styler);
131-
132-
if (platform.BLINK) {
133-
expectEl(dom).toHaveStyle({'flex': '4 5 1e-09px'}, styler);
134-
} else if (platform.FIREFOX) {
135-
expectEl(dom).toHaveStyle({'flex': '4 5 1e-9px'}, styler);
136-
} else if (platform.EDGE || platform.TRIDENT) {
137-
expectEl(dom).toHaveStyle({'flex': '4 5 0px'}, styler);
138-
} else {
139-
expectEl(dom).toHaveStyle({'flex': '4 5 0.000000001px'}, styler);
140-
}
104+
expectEl(dom).toHaveStyle({'flex': '4 5 0%'}, styler);
141105
});
142106

143107
it('should add correct styles for flex-basis unitless 0 input', () => {
@@ -188,15 +152,15 @@ describe('flex directive', () => {
188152
fixture.detectChanges();
189153
expectNativeEl(fixture).toHaveStyle({
190154
'max-width': '2%',
191-
'flex': '1 1 2%',
155+
'flex': '1 1 100%',
192156
'box-sizing': 'border-box',
193157
}, styler);
194158
});
195159

196160
it('should work with percentage values', () => {
197161
componentWithTemplate(`<div fxFlex='37%'></div>`);
198162
expectNativeEl(fixture).toHaveStyle({
199-
'flex': '1 1 37%',
163+
'flex': '1 1 100%',
200164
'max-width': '37%',
201165
'box-sizing': 'border-box',
202166
}, styler);
@@ -470,23 +434,23 @@ describe('flex directive', () => {
470434
fixture.detectChanges();
471435
expectEl(queryFor(fixture, '[fxFlex]')[0])
472436
.toHaveStyle({
473-
'flex': '1 1 37%',
437+
'flex': '1 1 100%',
474438
'max-height': '37%',
475439
}, styler);
476440
});
477441

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

486450
it('should set max-width for `fxFlex="2%"` usage', () => {
487451
componentWithTemplate(`<div fxFlex='2%'></div>`);
488452
expectNativeEl(fixture).toHaveStyle({
489-
'flex': '1 1 2%',
453+
'flex': '1 1 100%',
490454
'max-width': '2%',
491455
}, styler);
492456
});
@@ -508,15 +472,15 @@ describe('flex directive', () => {
508472
fixture.detectChanges();
509473

510474
expectNativeEl(fixture).toHaveStyle({
511-
'flex': '1 1 50%',
475+
'flex': '1 1 100%',
512476
'max-width': '50%'
513477
}, styler);
514478

515479
matchMedia.activate('sm', true);
516480
fixture.detectChanges();
517481

518482
expectNativeEl(fixture).toHaveStyle({
519-
'flex': '1 1 33%',
483+
'flex': '1 1 100%',
520484
'max-width': '33%'
521485
}, styler);
522486
});
@@ -544,9 +508,9 @@ describe('flex directive', () => {
544508
fixture.detectChanges();
545509

546510
nodes = queryFor(fixture, '[fxFlex]');
547-
expectEl(nodes[0]).toHaveStyle({'flex': '1 1 50%', 'max-height': '50%'}, styler);
548-
expectEl(nodes[1]).toHaveStyle({'flex': '1 1 24.4%', 'max-height': '24.4%'}, styler);
549-
expectEl(nodes[2]).toHaveStyle({'flex': '1 1 25.6%', 'max-height': '25.6%'}, styler);
511+
expectEl(nodes[0]).toHaveStyle({'flex': '1 1 100%', 'max-height': '50%'}, styler);
512+
expectEl(nodes[1]).toHaveStyle({'flex': '1 1 100%', 'max-height': '24.4%'}, styler);
513+
expectEl(nodes[2]).toHaveStyle({'flex': '1 1 100%', 'max-height': '25.6%'}, styler);
550514

551515
matchMedia.activate('sm');
552516
fixture.detectChanges();
@@ -595,9 +559,9 @@ describe('flex directive', () => {
595559
fixture.detectChanges();
596560
nodes = queryFor(fixture, '[fxFlex]');
597561

598-
expectEl(nodes[0]).toHaveStyle({'flex': '1 1 50%', 'max-height': '50%'}, styler);
599-
expectEl(nodes[1]).toHaveStyle({'flex': '1 1 24.4%', 'max-height': '24.4%'}, styler);
600-
expectEl(nodes[2]).toHaveStyle({'flex': '1 1 25.6%', 'max-height': '25.6%'}, styler);
562+
expectEl(nodes[0]).toHaveStyle({'flex': '1 1 100%', 'max-height': '50%'}, styler);
563+
expectEl(nodes[1]).toHaveStyle({'flex': '1 1 100%', 'max-height': '24.4%'}, styler);
564+
expectEl(nodes[2]).toHaveStyle({'flex': '1 1 100%', 'max-height': '25.6%'}, styler);
601565
});
602566

603567
it('should fallback to the default layout from lt-md selectors', () => {
@@ -619,7 +583,7 @@ describe('flex directive', () => {
619583
nodes = queryFor(fixture, '[fxFlex]');
620584

621585
expectEl(nodes[0]).toHaveStyle({
622-
'flex': '1 1 50%',
586+
'flex': '1 1 100%',
623587
'max-height': '50%'
624588
}, styler);
625589

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

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import {
2727
import {Subscription} from 'rxjs/Subscription';
2828

2929
import {extendObject} from '../../utils/object-extend';
30-
import {LayoutDirective} from '../layout/layout';
30+
import {Layout, LayoutDirective} from '../layout/layout';
3131
import {validateBasis} from '../../utils/basis-validator';
3232
import {isFlowHorizontal} from '../../utils/layout-validator';
3333

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

5454
/** The flex-direction of this element's flex container. Defaults to 'row'. */
55-
protected _layout: string;
55+
protected _layout: Layout;
5656

5757
/**
5858
* Subscription to the parent flex container's layout changes.
@@ -98,9 +98,9 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
9898
if (_container) {
9999
// If this flex item is inside of a flex container marked with
100100
// Subscribe to layout immediate parent direction changes
101-
this._layoutWatcher = _container.layout$.subscribe((direction) => {
101+
this._layoutWatcher = _container.layout$.subscribe((layout) => {
102102
// `direction` === null if parent container does not have a `fxLayout`
103-
this._onLayoutChange(direction);
103+
this._onLayoutChange(layout);
104104
});
105105
}
106106
}
@@ -139,8 +139,8 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
139139
* Caches the parent container's 'flex-direction' and updates the element's style.
140140
* Used as a handler for layout change events from the parent flex container.
141141
*/
142-
protected _onLayoutChange(direction?: string) {
143-
this._layout = direction || this._layout || 'row';
142+
protected _onLayoutChange(layout?: Layout) {
143+
this._layout = layout || this._layout || {direction: 'row', wrap: false};
144144
this._updateStyle();
145145
}
146146

@@ -208,7 +208,7 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
208208
};
209209
switch (basis || '') {
210210
case '':
211-
basis = MIN_FLEX;
211+
basis = direction === 'row' ? '0%' : 'auto';
212212
break;
213213
case 'initial': // default
214214
case 'nogrow':
@@ -275,8 +275,7 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
275275
}
276276

277277
// Fix for issues 277 and 534
278-
// TODO(CaerusKaru): convert this to just width/height
279-
if (basis !== '0%' && basis !== MIN_FLEX) {
278+
if (basis !== '0%') {
280279
css[min] = isFixed || (isPx && grow) ? basis : null;
281280
css[max] = isFixed || (!usingCalc && shrink) ? basis : null;
282281
}
@@ -296,13 +295,13 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
296295
}
297296
} else {
298297
// Fix for issue 660
299-
css[hasCalc ? 'flex-basis' : 'flex'] = css[max] ?
300-
(hasCalc ? css[max] : `${grow} ${shrink} ${css[max]}`) :
301-
(hasCalc ? css[min] : `${grow} ${shrink} ${css[min]}`);
298+
if (this._layout && this._layout.wrap) {
299+
css[hasCalc ? 'flex-basis' : 'flex'] = css[max] ?
300+
(hasCalc ? css[max] : `${grow} ${shrink} ${css[max]}`) :
301+
(hasCalc ? css[min] : `${grow} ${shrink} ${css[min]}`);
302+
}
302303
}
303304

304305
return extendObject(css, {'box-sizing': 'border-box'});
305306
}
306307
}
307-
308-
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)