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

Commit

Permalink
fix(layout): deprecate offset attribute in lieu of flex-offset
Browse files Browse the repository at this point in the history 
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>
    ```
  • Loading branch information
@ThomasBurleson
ThomasBurleson committed Oct 12, 2015
1 parent 48f88e0 commit ad1b78b
Show file tree
Hide file tree
Showing 5 changed files with 47 additions and 47 deletions.
20 changes: 10 additions & 10 deletions docs/app/partials/layout-grid.tmpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

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

<docs-demo demo-title="Flex Attribute" class="small-demo colorNested">
Expand Down Expand Up @@ -189,7 +189,7 @@
<docs-demo demo-title="Flex Offset Attribute" class="small-demo colorNested">
<demo-file name="index.html">
<div layout="row">
<div flex offset="33">
<div flex flex-offset="33">
[flex offset="33"]
</div>
<div flex>
Expand All @@ -199,37 +199,37 @@
</demo-file>
</docs-demo>
<p>
Add the <code>offset</code> attribute to a layout child to set its
Add the <code>flex-offset</code> attribute to a layout child to set its
offset percentage within the layout. Values must be multiples
of <code>5</code>, or <code>33</code>, <code>34</code>, <code>66</code>, <code>67</code>.
</p>
<table class="md-api-table">
<tr>
<td>offset</td>
<td>flex-offset</td>
<td>Sets element offset.</td>
</tr>
<tr>
<td>offset-sm</td>
<td>flex-offset-sm</td>
<td>Sets element offset on devices less than 600px wide.</td>
</tr>
<tr>
<td>offset-gt-sm</td>
<td>flex-offset-gt-sm</td>
<td>Sets element offset on devices greater than 600px wide.</td>
</tr>
<tr>
<td>offset-md</td>
<td>flex-offset-md</td>
<td>Sets element offset on devices between 600px and 960px wide.</td>
</tr>
<tr>
<td>offset-gt-md</td>
<td>flex-offset-gt-md</td>
<td>Sets element offset on devices greater than 960px wide.
</tr>
<tr>
<td>offset-lg</td>
<td>flex-offset-lg</td>
<td>Sets element offset on devices between 960px and 1200px wide.</td>
</tr>
<tr>
<td>offset-gt-lg</td>
<td>flex-offset-gt-lg</td>
<td>Sets element offset on devices greater than 1200px wide.</td>
</tr>
</table>
Expand Down
6 changes: 3 additions & 3 deletions src/core/services/layout/layout.attributes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
@if $s != '' { $suffix : '-#{$s}="#{$i * 5}"'; }
@else { $suffix : '="#{$i * 5}"'; }

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

#{$offsets} {
Expand All @@ -72,7 +72,7 @@
@if $s != '' { $suffix : '-#{$s}="#{$i}"'; }
@else { $suffix : '="#{$i}"'; }

$offsets : '[offset#{$suffix}], ';
$offsets : '[flex-offset#{$suffix}], ';
}

#{$offsets} {
Expand All @@ -88,7 +88,7 @@
@if $s != '' { $suffix : '-#{$s}="#{$i}"'; }
@else { $suffix : '="#{$i}"'; }

$offsets : '[offset#{$suffix}]';
$offsets : '[flex-offset#{$suffix}]';
}

#{$offsets} {
Expand Down
34 changes: 17 additions & 17 deletions src/core/services/layout/layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,20 +106,20 @@
.directive('flexOrderLg', attributeWithObserve('flex-order-lg'))
.directive('flexOrderGtLg', attributeWithObserve('flex-order-gt-lg'))

.directive('offset', attributeWithObserve('layout-offset'))
.directive('offsetSm', attributeWithObserve('layout-offset-sm'))
.directive('offsetGtSm', attributeWithObserve('layout-offset-gt-sm'))
.directive('offsetMd', attributeWithObserve('layout-offset-md'))
.directive('offsetGtMd', attributeWithObserve('layout-offset-gt-md'))
.directive('offsetLg', attributeWithObserve('layout-offset-lg'))
.directive('offsetGtLg', attributeWithObserve('layout-offset-gt-lg'))
.directive('layoutOffset', attributeWithObserve('layout-offset'))
.directive('layoutOffsetSm', attributeWithObserve('layout-offset-sm'))
.directive('layoutOffsetGtSm', attributeWithObserve('layout-offset-gt-sm'))
.directive('layoutOffsetMd', attributeWithObserve('layout-offset-md'))
.directive('layoutOffsetGtMd', attributeWithObserve('layout-offset-gt-md'))
.directive('layoutOffsetLg', attributeWithObserve('layout-offset-lg'))
.directive('layoutOffsetGtLg', attributeWithObserve('layout-offset-gt-lg'))
.directive('offset', attributeWithObserve('flex-offset'))
.directive('offsetSm', attributeWithObserve('flex-offset-sm'))
.directive('offsetGtSm', attributeWithObserve('flex-offset-gt-sm'))
.directive('offsetMd', attributeWithObserve('flex-offset-md'))
.directive('offsetGtMd', attributeWithObserve('flex-offset-gt-md'))
.directive('offsetLg', attributeWithObserve('flex-offset-lg'))
.directive('offsetGtLg', attributeWithObserve('flex-offset-gt-lg'))
.directive('flexOffset', attributeWithObserve('flex-offset'))
.directive('flexOffsetSm', attributeWithObserve('flex-offset-sm'))
.directive('flexOffsetGtSm', attributeWithObserve('flex-offset-gt-sm'))
.directive('flexOffsetMd', attributeWithObserve('flex-offset-md'))
.directive('flexOffsetGtMd', attributeWithObserve('flex-offset-gt-md'))
.directive('flexOffsetLg', attributeWithObserve('flex-offset-lg'))
.directive('flexOffsetGtLg', attributeWithObserve('flex-offset-gt-lg'))

.directive('layoutAlign', attributeWithObserve('layout-align'))
.directive('layoutAlignSm', attributeWithObserve('layout-align-sm'))
Expand Down Expand Up @@ -165,8 +165,8 @@
.directive('layoutAlignLtLg', warnAttrNotSupported('layout-align-lt-lg'))
.directive('flexOrderLtMd', warnAttrNotSupported('flex-order-lt-md'))
.directive('flexOrderLtLg', warnAttrNotSupported('flex-order-lt-lg'))
.directive('offsetLtMd', warnAttrNotSupported('layout-offset-lt-md'))
.directive('offsetLtLg', warnAttrNotSupported('layout-offset-lt-lg'))
.directive('offsetLtMd', warnAttrNotSupported('flex-offset-lt-md'))
.directive('offsetLtLg', warnAttrNotSupported('flex-offset-lt-lg'))

.directive('hideLtMd', warnAttrNotSupported('hide-lt-md'))
.directive('hideLtLg', warnAttrNotSupported('hide-lt-lg'))
Expand Down Expand Up @@ -371,7 +371,7 @@
}
break;

case 'layout-offset' :
case 'flex-offset' :
case 'flex-order' :
if (!value || isNaN(+value)) {
value = '0';
Expand Down
6 changes: 3 additions & 3 deletions src/core/services/layout/layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
@if $s != '' { $suffix : '#{$s}-#{$i * 5}'; }
@else { $suffix : '#{$i * 5}'; }

$offsets : '.offset-#{$suffix}';
$offsets : '.offset-#{$suffix}, .flex-offset-#{$suffix}';
}

#{$offsets} {
Expand All @@ -72,7 +72,7 @@
@if $s != '' { $suffix : '#{$s}-#{$i}'; }
@else { $suffix : '#{$i}'; }

$offsets : '.offset-#{$suffix} ';
$offsets : '.offset-#{$suffix}, .flex-offset-#{$suffix} ';
}

#{$offsets} {
Expand All @@ -88,7 +88,7 @@
@if $s != '' { $suffix : '#{$s}-#{$i}'; }
@else { $suffix : '#{$i}'; }

$offsets : '.offset-#{$suffix} ';
$offsets : '.offset-#{$suffix}, .flex-offset-#{$suffix} ';
}

#{$offsets} {
Expand Down
28 changes: 14 additions & 14 deletions src/core/services/layout/layout.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ describe('layout directives', function() {
testAllSuffixesWithValues("flex-order", flexOrderValues);
});

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

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

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

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

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

testAllSuffixesWithValues("layout-offset", offsetValues);
testAllSuffixesWithValues("flex-offset", offsetValues);
});

describe('using [layout-align] attributes', function() {
Expand Down Expand Up @@ -267,7 +267,7 @@ describe('layout directives', function() {
}

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

0 comments on commit ad1b78b

Please sign in to comment.