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

Commit e8e785e

Browse files
SplaktarSplaktar
committed
refactor(layout): remove deprecated *-lt-* ("less than") attributes
BREAKING CHANGE: Removed the deprecated, undocumented `*-lt-*` layout attributes and classes. This includes the following attributes and their matching classes, which have been giving deprecation warnings since 2015: - layout-lt-md - layout-lt-lg - flex-lt-md - flex-lt-lg - layout-align-lt-md - layout-align-lt-lg - flex-order-lt-md - flex-order-lt-lg - flex-offset-lt-md - flex-offset-lt-lg - hide-lt-md - hide-lt-lg - show-lt-md - show-lt-lg
1 parent bf0ec8c commit e8e785e

File tree

3 files changed

+23
-72
lines changed

3 files changed

+23
-72
lines changed

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

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ $layout-breakpoint-lg: 1920px !default;
168168
> [#{$flexName}="33"] , > [#{$flexName}="33"] { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; }
169169
> [#{$flexName}="66"] , > [#{$flexName}="66"] { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; }
170170
}
171-
171+
172172
[layout="column"] {
173173
> [#{$flexName}="33"] , > [#{$flexName}="33"] { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; }
174174
> [#{$flexName}="66"] , > [#{$flexName}="66"] { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; }
@@ -212,7 +212,7 @@ $layout-breakpoint-lg: 1920px !default;
212212
@if $suffix != null {
213213
$name: 'layout-align-#{$suffix}';
214214
}
215-
215+
216216
[#{$name}],
217217
[#{$name}="start stretch"] // defaults
218218
{
@@ -334,14 +334,13 @@ $layout-breakpoint-lg: 1920px !default;
334334
}
335335
@mixin layout-padding-margin() {
336336

337-
[layout-padding] > [flex-sm], [layout-padding] > [flex-lt-md] {
337+
[layout-padding] > [flex-sm] {
338338
padding: $layout-gutter-width / 4;
339339
}
340340
[layout-padding],
341341
[layout-padding] > [flex],
342342
[layout-padding] > [flex-gt-sm],
343-
[layout-padding] > [flex-md],
344-
[layout-padding] > [flex-lt-lg]
343+
[layout-padding] > [flex-md]
345344
{
346345
padding: $layout-gutter-width / 2;
347346
}
@@ -351,17 +350,15 @@ $layout-breakpoint-lg: 1920px !default;
351350
padding: $layout-gutter-width / 1;
352351
}
353352

354-
[layout-margin] > [flex-sm],
355-
[layout-margin] > [flex-lt-md]
353+
[layout-margin] > [flex-sm]
356354
{
357355
margin: $layout-gutter-width / 4;
358356
}
359357

360358
[layout-margin],
361359
[layout-margin] > [flex],
362360
[layout-margin] > [flex-gt-sm],
363-
[layout-margin] > [flex-md],
364-
[layout-margin] > [flex-lt-lg]
361+
[layout-margin] > [flex-md]
365362
{
366363
margin: $layout-gutter-width / 2;
367364
}
@@ -507,7 +504,7 @@ $layout-breakpoint-lg: 1920px !default;
507504
@media print {
508505
// PRINT
509506
@include layouts_for_breakpoint(print);
510-
507+
511508
[hide-print]:not([show-print]):not([show]) {
512509
display: none;
513510
}

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

Lines changed: 15 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@
2121

2222
/**
2323
* List of mediaQuery breakpoints and associated suffixes
24-
*
2524
* [
2625
* { suffix: "sm", mediaQuery: "screen and (max-width: 599px)" },
2726
* { suffix: "md", mediaQuery: "screen and (min-width: 600px) and (max-width: 959px)" }
@@ -55,12 +54,12 @@
5554
* browsers... mainly IE.
5655
*
5756
* This module registers directives that allow the same layout attributes to be
58-
* interpreted and converted to class selectors. The directive will add equivalent classes to each element that
59-
* contains a Layout directive.
57+
* interpreted and converted to class selectors. The directive will add equivalent classes to
58+
* each element that contains a Layout directive.
6059
*
6160
* ```html
6261
* <div layout="column" class="layout layout-column"> My Content </div>
63-
*```
62+
* ```
6463
*
6564
* ```css
6665
* .layout {
@@ -101,8 +100,7 @@
101100

102101
// Register other, special directive functions for the Layout features:
103102
module
104-
105-
.provider('$$mdLayout' , function() {
103+
.provider('$$mdLayout', function() {
106104
// Publish internal service for Layouts
107105
return {
108106
$get : angular.noop,
@@ -126,25 +124,6 @@
126124
.directive('layoutNoWrap' , attributeWithoutValue('layout-no-wrap'))
127125
.directive('layoutFill' , attributeWithoutValue('layout-fill'))
128126

129-
// !! Deprecated attributes: use the `-lt` (aka less-than) notations
130-
131-
.directive('layoutLtMd' , warnAttrNotSupported('layout-lt-md', true))
132-
.directive('layoutLtLg' , warnAttrNotSupported('layout-lt-lg', true))
133-
.directive('flexLtMd' , warnAttrNotSupported('flex-lt-md', true))
134-
.directive('flexLtLg' , warnAttrNotSupported('flex-lt-lg', true))
135-
136-
.directive('layoutAlignLtMd', warnAttrNotSupported('layout-align-lt-md'))
137-
.directive('layoutAlignLtLg', warnAttrNotSupported('layout-align-lt-lg'))
138-
.directive('flexOrderLtMd' , warnAttrNotSupported('flex-order-lt-md'))
139-
.directive('flexOrderLtLg' , warnAttrNotSupported('flex-order-lt-lg'))
140-
.directive('offsetLtMd' , warnAttrNotSupported('flex-offset-lt-md'))
141-
.directive('offsetLtLg' , warnAttrNotSupported('flex-offset-lt-lg'))
142-
143-
.directive('hideLtMd' , warnAttrNotSupported('hide-lt-md'))
144-
.directive('hideLtLg' , warnAttrNotSupported('hide-lt-lg'))
145-
.directive('showLtMd' , warnAttrNotSupported('show-lt-md'))
146-
.directive('showLtLg' , warnAttrNotSupported('show-lt-lg'))
147-
148127
// Determine if
149128
.config(detectDisabledLayouts);
150129

@@ -160,7 +139,6 @@
160139
return offset ? letter.toUpperCase() : letter;
161140
});
162141
}
163-
164142
}
165143

166144

@@ -169,8 +147,6 @@
169147
* If yes, then immediately disable all layout API features
170148
*
171149
* Note: this attribute should be specified on either the HTML or BODY tags
172-
*/
173-
/**
174150
* @ngInject
175151
*/
176152
function detectDisabledLayouts() {
@@ -196,7 +172,6 @@
196172
*
197173
* Another option is to use the LayoutProvider to configure and disable the attribute
198174
* conversions; this would obviate the use of the `md-layout-css` directive
199-
*
200175
*/
201176
function disableLayoutDirective() {
202177
// Return a 1x-only, first-match attribute directive
@@ -239,10 +214,9 @@
239214

240215
// *********************************************************************************
241216
//
242-
// These functions create registration functions for AngularJS Material Layout attribute directives
243-
// This provides easy translation to switch AngularJS Material attribute selectors to
244-
// CLASS selectors and directives; which has huge performance implications
245-
// for IE Browsers
217+
// These functions create registration functions for AngularJS Material Layout attribute
218+
// directives. This provides easy translation to switch AngularJS Material attribute selectors to
219+
// CLASS selectors and directives; which has huge performance implications for IE Browsers.
246220
//
247221
// *********************************************************************************
248222

@@ -282,8 +256,7 @@
282256
}];
283257

284258
/**
285-
* Add as transformed class selector(s), then
286-
* remove the deprecated attribute selector
259+
* Observe deprecated layout attributes and update the element's layout classes to match.
287260
*/
288261
function translateWithValueToCssClass(scope, element, attrs) {
289262
var updateFn = updateClassWithValue(element, className, attrs);
@@ -297,7 +270,7 @@
297270
/**
298271
* Creates a registration function for AngularJS Material Layout attribute directive.
299272
* This is a `simple` transpose of attribute usage to class usage; where we ignore
300-
* any attribute value
273+
* any attribute value.
301274
*/
302275
function attributeWithoutValue(className) {
303276
return ['$mdUtil', '$interpolate', "$log", function(_$mdUtil_, _$interpolate_, _$log_) {
@@ -329,16 +302,13 @@
329302
}];
330303

331304
/**
332-
* Add as transformed class selector, then
333-
* remove the deprecated attribute selector
305+
* Add transformed class selector.
334306
*/
335307
function translateToCssClass(scope, element) {
336308
element.addClass(className);
337309
}
338310
}
339311

340-
341-
342312
/**
343313
* After link-phase, do NOT remove deprecated layout attribute selector.
344314
* Instead watch the attribute so interpolated data-bindings to layout
@@ -351,7 +321,6 @@
351321
* NOTE: The value must match one of the specified styles in the CSS.
352322
* For example `flex-gt-md="{{size}}` where `scope.size == 47` will NOT work since
353323
* only breakpoints for 0, 5, 10, 15... 100, 33, 34, 66, 67 are defined.
354-
*
355324
*/
356325
function updateClassWithValue(element, className) {
357326
var lastClass;
@@ -366,18 +335,6 @@
366335
};
367336
}
368337

369-
/**
370-
* Provide console warning that this layout attribute has been deprecated
371-
*
372-
*/
373-
function warnAttrNotSupported(className) {
374-
var parts = className.split("-");
375-
return ["$log", function($log) {
376-
$log.warn(className + "has been deprecated. Please use a `" + parts[0] + "-gt-<xxx>` variant.");
377-
return angular.noop;
378-
}];
379-
}
380-
381338
/**
382339
* Centralize warnings for known flexbox issues (especially IE-related issues)
383340
*/
@@ -387,7 +344,7 @@
387344

388345
switch (className.replace(SUFFIXES,"")) {
389346
case "flex":
390-
if ((nodeName == "md-button") || (nodeName == "fieldset")){
347+
if ((nodeName === "md-button") || (nodeName === "fieldset")){
391348
// @see https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers
392349
// Use <div flex> wrapper inside (preferred) or outside
393350

@@ -398,13 +355,11 @@
398355
$log.warn($mdUtil.supplant(message, [usage, url]));
399356
}
400357
}
401-
402358
}
403359

404360

405361
/**
406-
* For the Layout attribute value, validate or replace with default
407-
* fallback value
362+
* For the Layout attribute value, validate or replace with default fallback value.
408363
*/
409364
function validateAttributeValue(className, value, updateFn) {
410365
var origValue = value;
@@ -446,7 +401,7 @@
446401
break;
447402
}
448403

449-
if (value != origValue) {
404+
if (value !== origValue) {
450405
(updateFn || angular.noop)(value);
451406
}
452407
}
@@ -478,7 +433,8 @@
478433

479434
function getNormalizedAttrValue(className, attrs, defaultVal) {
480435
var normalizedAttr = attrs.$normalize(className);
481-
return attrs[normalizedAttr] ? attrs[normalizedAttr].trim().replace(WHITESPACE, "-") : defaultVal || null;
436+
return attrs[normalizedAttr] ? attrs[normalizedAttr].trim().replace(WHITESPACE, "-") :
437+
defaultVal || null;
482438
}
483439

484440
function findIn(item, list, replaceWith) {
@@ -521,6 +477,4 @@
521477

522478
return axis;
523479
}
524-
525-
526480
})();

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -285,7 +285,7 @@ describe("Layout API ", function() {
285285

286286
angular.forEach(allowedAttrsNoValues, function(name) {
287287
testNoValueAllowed(name);
288-
})
288+
});
289289
});
290290

291291
describe('using [hide] attributes', function() {

0 commit comments

Comments
 (0)