Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit ad1b78b

Browse files
ThomasBurlesonThomasBurleson
committed
fix(layout): deprecate offset attribute in lieu of flex-offset
potential conflicts with `offset` attribute overrides may affect SVG and other elements. Revise usage to `flex-offset` to eliminate conflicts. NOTE: the attribute classname `[offset-xxx]` is still supported however the generated subsequent classnames will be `.flex-offset-xxx`. BREAKING CHANGE: Material Layout attribute `offset` should now be `flex-offset`. Change your code from this: ```html <md-content flex offset-gt-sm="33" > ... </div> ``` To this: ```html <md-content flex flex-offset-gt-sm="33" > ... </div> ```
1 parent 48f88e0 commit ad1b78b

File tree

5 files changed

+47
-47
lines changed

5 files changed

+47
-47
lines changed

‎docs/app/partials/layout-grid.tmpl.html

+10-10
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
<p>
44
To customize the size and position of elements in a layout, use the
5-
<code>flex</code>, <code>flex-order</code>, and <code>offset</code> attributes.
5+
<code>flex</code>, <code>flex-order</code>, and <code>flex-offset</code> attributes.
66
</p>
77

88
<docs-demo demo-title="Flex Attribute" class="small-demo colorNested">
@@ -189,7 +189,7 @@
189189
<docs-demo demo-title="Flex Offset Attribute" class="small-demo colorNested">
190190
<demo-file name="index.html">
191191
<div layout="row">
192-
<div flex offset="33">
192+
<div flex flex-offset="33">
193193
[flex offset="33"]
194194
</div>
195195
<div flex>
@@ -199,37 +199,37 @@
199199
</demo-file>
200200
</docs-demo>
201201
<p>
202-
Add the <code>offset</code> attribute to a layout child to set its
202+
Add the <code>flex-offset</code> attribute to a layout child to set its
203203
offset percentage within the layout. Values must be multiples
204204
of <code>5</code>, or <code>33</code>, <code>34</code>, <code>66</code>, <code>67</code>.
205205
</p>
206206
<table class="md-api-table">
207207
<tr>
208-
<td>offset</td>
208+
<td>flex-offset</td>
209209
<td>Sets element offset.</td>
210210
</tr>
211211
<tr>
212-
<td>offset-sm</td>
212+
<td>flex-offset-sm</td>
213213
<td>Sets element offset on devices less than 600px wide.</td>
214214
</tr>
215215
<tr>
216-
<td>offset-gt-sm</td>
216+
<td>flex-offset-gt-sm</td>
217217
<td>Sets element offset on devices greater than 600px wide.</td>
218218
</tr>
219219
<tr>
220-
<td>offset-md</td>
220+
<td>flex-offset-md</td>
221221
<td>Sets element offset on devices between 600px and 960px wide.</td>
222222
</tr>
223223
<tr>
224-
<td>offset-gt-md</td>
224+
<td>flex-offset-gt-md</td>
225225
<td>Sets element offset on devices greater than 960px wide.
226226
</tr>
227227
<tr>
228-
<td>offset-lg</td>
228+
<td>flex-offset-lg</td>
229229
<td>Sets element offset on devices between 960px and 1200px wide.</td>
230230
</tr>
231231
<tr>
232-
<td>offset-gt-lg</td>
232+
<td>flex-offset-gt-lg</td>
233233
<td>Sets element offset on devices greater than 1200px wide.</td>
234234
</tr>
235235
</table>

‎src/core/services/layout/layout.attributes.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
@if $s != '' { $suffix : '-#{$s}="#{$i * 5}"'; }
5757
@else { $suffix : '="#{$i * 5}"'; }
5858

59-
$offsets : $offsets + '[offset#{$suffix}], ';
59+
$offsets : $offsets + '[flex-offset#{$suffix}], ';
6060
}
6161

6262
#{$offsets} {
@@ -72,7 +72,7 @@
7272
@if $s != '' { $suffix : '-#{$s}="#{$i}"'; }
7373
@else { $suffix : '="#{$i}"'; }
7474

75-
$offsets : '[offset#{$suffix}], ';
75+
$offsets : '[flex-offset#{$suffix}], ';
7676
}
7777

7878
#{$offsets} {
@@ -88,7 +88,7 @@
8888
@if $s != '' { $suffix : '-#{$s}="#{$i}"'; }
8989
@else { $suffix : '="#{$i}"'; }
9090

91-
$offsets : '[offset#{$suffix}]';
91+
$offsets : '[flex-offset#{$suffix}]';
9292
}
9393

9494
#{$offsets} {

‎src/core/services/layout/layout.js

+17-17
Original file line numberDiff line numberDiff line change
@@ -106,20 +106,20 @@
106106
.directive('flexOrderLg', attributeWithObserve('flex-order-lg'))
107107
.directive('flexOrderGtLg', attributeWithObserve('flex-order-gt-lg'))
108108

109-
.directive('offset', attributeWithObserve('layout-offset'))
110-
.directive('offsetSm', attributeWithObserve('layout-offset-sm'))
111-
.directive('offsetGtSm', attributeWithObserve('layout-offset-gt-sm'))
112-
.directive('offsetMd', attributeWithObserve('layout-offset-md'))
113-
.directive('offsetGtMd', attributeWithObserve('layout-offset-gt-md'))
114-
.directive('offsetLg', attributeWithObserve('layout-offset-lg'))
115-
.directive('offsetGtLg', attributeWithObserve('layout-offset-gt-lg'))
116-
.directive('layoutOffset', attributeWithObserve('layout-offset'))
117-
.directive('layoutOffsetSm', attributeWithObserve('layout-offset-sm'))
118-
.directive('layoutOffsetGtSm', attributeWithObserve('layout-offset-gt-sm'))
119-
.directive('layoutOffsetMd', attributeWithObserve('layout-offset-md'))
120-
.directive('layoutOffsetGtMd', attributeWithObserve('layout-offset-gt-md'))
121-
.directive('layoutOffsetLg', attributeWithObserve('layout-offset-lg'))
122-
.directive('layoutOffsetGtLg', attributeWithObserve('layout-offset-gt-lg'))
109+
.directive('offset', attributeWithObserve('flex-offset'))
110+
.directive('offsetSm', attributeWithObserve('flex-offset-sm'))
111+
.directive('offsetGtSm', attributeWithObserve('flex-offset-gt-sm'))
112+
.directive('offsetMd', attributeWithObserve('flex-offset-md'))
113+
.directive('offsetGtMd', attributeWithObserve('flex-offset-gt-md'))
114+
.directive('offsetLg', attributeWithObserve('flex-offset-lg'))
115+
.directive('offsetGtLg', attributeWithObserve('flex-offset-gt-lg'))
116+
.directive('flexOffset', attributeWithObserve('flex-offset'))
117+
.directive('flexOffsetSm', attributeWithObserve('flex-offset-sm'))
118+
.directive('flexOffsetGtSm', attributeWithObserve('flex-offset-gt-sm'))
119+
.directive('flexOffsetMd', attributeWithObserve('flex-offset-md'))
120+
.directive('flexOffsetGtMd', attributeWithObserve('flex-offset-gt-md'))
121+
.directive('flexOffsetLg', attributeWithObserve('flex-offset-lg'))
122+
.directive('flexOffsetGtLg', attributeWithObserve('flex-offset-gt-lg'))
123123

124124
.directive('layoutAlign', attributeWithObserve('layout-align'))
125125
.directive('layoutAlignSm', attributeWithObserve('layout-align-sm'))
@@ -165,8 +165,8 @@
165165
.directive('layoutAlignLtLg', warnAttrNotSupported('layout-align-lt-lg'))
166166
.directive('flexOrderLtMd', warnAttrNotSupported('flex-order-lt-md'))
167167
.directive('flexOrderLtLg', warnAttrNotSupported('flex-order-lt-lg'))
168-
.directive('offsetLtMd', warnAttrNotSupported('layout-offset-lt-md'))
169-
.directive('offsetLtLg', warnAttrNotSupported('layout-offset-lt-lg'))
168+
.directive('offsetLtMd', warnAttrNotSupported('flex-offset-lt-md'))
169+
.directive('offsetLtLg', warnAttrNotSupported('flex-offset-lt-lg'))
170170

171171
.directive('hideLtMd', warnAttrNotSupported('hide-lt-md'))
172172
.directive('hideLtLg', warnAttrNotSupported('hide-lt-lg'))
@@ -371,7 +371,7 @@
371371
}
372372
break;
373373

374-
case 'layout-offset' :
374+
case 'flex-offset' :
375375
case 'flex-order' :
376376
if (!value || isNaN(+value)) {
377377
value = '0';

‎src/core/services/layout/layout.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
@if $s != '' { $suffix : '#{$s}-#{$i * 5}'; }
5757
@else { $suffix : '#{$i * 5}'; }
5858

59-
$offsets : '.offset-#{$suffix}';
59+
$offsets : '.offset-#{$suffix}, .flex-offset-#{$suffix}';
6060
}
6161

6262
#{$offsets} {
@@ -72,7 +72,7 @@
7272
@if $s != '' { $suffix : '#{$s}-#{$i}'; }
7373
@else { $suffix : '#{$i}'; }
7474

75-
$offsets : '.offset-#{$suffix} ';
75+
$offsets : '.offset-#{$suffix}, .flex-offset-#{$suffix} ';
7676
}
7777

7878
#{$offsets} {
@@ -88,7 +88,7 @@
8888
@if $s != '' { $suffix : '#{$s}-#{$i}'; }
8989
@else { $suffix : '#{$i}'; }
9090

91-
$offsets : '.offset-#{$suffix} ';
91+
$offsets : '.offset-#{$suffix}, .flex-offset-#{$suffix} ';
9292
}
9393

9494
#{$offsets} {

‎src/core/services/layout/layout.spec.js

+14-14
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ describe('layout directives', function() {
141141
testAllSuffixesWithValues("flex-order", flexOrderValues);
142142
});
143143

144-
describe('using [layout-offset] attributes', function() {
144+
describe('using [flex-offset] attributes', function() {
145145
var offsetValues = [
146146
5, 10, 15, 20, 25,
147147
30, 35, 40, 45, 50,
@@ -150,27 +150,27 @@ describe('layout directives', function() {
150150
33, 34, 66, 67
151151
];
152152

153-
it('should support attribute without value "<div layout-offset>"', function() {
154-
var element = $compile('<div layout-offset>Layout</div>')(pageScope);
155-
expect(element.hasClass("layout-offset-0")).toBeTruthy();
156-
expect(element.hasClass("layout-offset")).toBeFalsy();
153+
it('should support attribute without value "<div flex-offset>"', function() {
154+
var element = $compile('<div flex-offset>Layout</div>')(pageScope);
155+
expect(element.hasClass("flex-offset-0")).toBeTruthy();
156+
expect(element.hasClass("flex-offset")).toBeFalsy();
157157
});
158158

159-
it('should ignore invalid values non-numericals like layout-offset="humpty"', function() {
160-
var element = $compile('<div layout-offset="humpty">Layout</div>')(pageScope);
161-
expect(element.hasClass("layout-offset-0")).toBeTruthy();
162-
expect(element.hasClass('layout-offset-humpty')).toBeFalsy();
159+
it('should ignore invalid values non-numericals like flex-offset="humpty"', function() {
160+
var element = $compile('<div flex-offset="humpty">Layout</div>')(pageScope);
161+
expect(element.hasClass("flex-offset-0")).toBeTruthy();
162+
expect(element.hasClass('flex-offset-humpty')).toBeFalsy();
163163
});
164164

165-
it('should support interpolated values layout-offset-gt-sm="{{padding}}"', function() {
165+
it('should support interpolated values flex-offset-gt-sm="{{padding}}"', function() {
166166
var scope = pageScope,
167-
element = $compile('<div layout-offset-gt-sm="{{padding}}">Layout</div>')(scope);
167+
element = $compile('<div flex-offset-gt-sm="{{padding}}">Layout</div>')(scope);
168168

169169
scope.$apply('padding = 15');
170-
expect(element.hasClass('layout-offset-gt-sm-15')).toBeTruthy();
170+
expect(element.hasClass('flex-offset-gt-sm-15')).toBeTruthy();
171171
});
172172

173-
testAllSuffixesWithValues("layout-offset", offsetValues);
173+
testAllSuffixesWithValues("flex-offset", offsetValues);
174174
});
175175

176176
describe('using [layout-align] attributes', function() {
@@ -267,7 +267,7 @@ describe('layout directives', function() {
267267
}
268268

269269
/**
270-
* Test other Layout directives (e.g. flex, flex-order, layout-offset)
270+
* Test other Layout directives (e.g. flex, flex-order, flex-offset)
271271
*/
272272
function testWithValue(className, value, raw) {
273273
var title = 'should allow valid values `' + className + '=' + value + '`';

0 commit comments

Comments
 (0)