From f13713e5ab045fc05e1cf0a88f0ca5421569ca24 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 11 May 2018 19:39:43 +0200 Subject: [PATCH] docs: consistent links to Material spec (#11288) Currently we've got links either pointing to google.com/design or material.io. These changes make everything consistent by pointing everything to material.io. Also fixes a couple of links that were pointing to a 404. --- guides/elevation.md | 2 +- guides/theming-your-components.md | 14 +++++++++----- guides/theming.md | 2 +- src/lib/checkbox/checkbox.ts | 2 +- src/lib/core/gestures/gesture-config.ts | 2 +- src/lib/core/style/_elevation.scss | 2 +- src/lib/core/theming/_palette.scss | 2 +- src/lib/grid-list/grid-list.md | 20 ++++++++++---------- src/lib/schematics/shell/custom-theme.ts | 2 +- src/lib/tabs/tab-group.ts | 2 +- 10 files changed, 27 insertions(+), 23 deletions(-) diff --git a/guides/elevation.md b/guides/elevation.md index 646e6f7c7ab..8f981e3a9db 100644 --- a/guides/elevation.md +++ b/guides/elevation.md @@ -1,7 +1,7 @@ Angular Material's elevation classes and mixins allow you to add separation between elements along the z-axis. All material design elements have resting elevations. In addition, some elements may change their elevation in response to user interaction. The -[Material Design spec](https://material.io/guidelines/material-design/elevation-shadows.html) +[Material Design spec](https://material.io/design/environment/elevation.html) explains how to best use elevation. Angular Material provides two ways to control the elevation of elements: predefined CSS classes diff --git a/guides/theming-your-components.md b/guides/theming-your-components.md index 4708aebe80b..9862e46f159 100644 --- a/guides/theming-your-components.md +++ b/guides/theming-your-components.md @@ -47,14 +47,18 @@ For more details about the theming functions, see the comments in the #### Best practices using `@mixin` When using `@mixin`, the theme file should only contain the definitions that are affected by the passed-in theme. -All styles that are not affected by the theme should be placed in a `candy-carousel.scss` file. This file should contain everything that is not affected by the theme like sizes, transitions... +All styles that are not affected by the theme should be placed in a `candy-carousel.scss` file. +This file should contain everything that is not affected by the theme like sizes, transitions... -Styles that are affected by the theme should be placed in a separated theming file as `_candy-carousel-theme.scss` and the file should have a `_` before the name. This file should contain the `@mixin` function responsible for applying the theme to the component. +Styles that are affected by the theme should be placed in a separated theming file as +`_candy-carousel-theme.scss` and the file should have a `_` before the name. This file should +contain the `@mixin` function responsible for applying the theme to the component. ### Using colors from a palette -You can consume the theming functions and Material palette variables from `@angular/material/theming`. -You can use the `mat-color` function to extract a specific color from a palette. For example: +You can consume the theming functions and Material palette variables from +`@angular/material/theming`. You can use the `mat-color` function to extract a specific color +from a palette. For example: ```scss // Import theming functions @@ -67,7 +71,7 @@ You can use the `mat-color` function to extract a specific color from a palette. // hues (default, lighter, darker), or any of the aforementioned prefixed with "-contrast". // For example a hue of "darker-contrast" gives a light color to contrast with a "darker" hue. // Note that quotes are needed when using a numeric hue with the "-contrast" modifier. -// Available color palettes: https://www.google.com/design/spec/style/color.html +// Available color palettes: https://material.io/design/color/ .candy-carousel { background-color: mat-color($candy-app-primary); border-color: mat-color($candy-app-accent, A400); diff --git a/guides/theming.md b/guides/theming.md index d4f3c25c48c..411a1311823 100644 --- a/guides/theming.md +++ b/guides/theming.md @@ -75,7 +75,7 @@ A typical theme file will look something like this: // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker -// hue. Available color palettes: https://www.google.com/design/spec/style/color.html +// hue. Available color palettes: https://material.io/design/color/ $candy-app-primary: mat-palette($mat-indigo); $candy-app-accent: mat-palette($mat-pink, A200, A100, A400); diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts index 3ec00066f60..0bcb54b0267 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/src/lib/checkbox/checkbox.ts @@ -93,7 +93,7 @@ export const _MatCheckboxMixinBase = * disabled. Note that all additional accessibility attributes are taken care of by the component, * so there is no need to provide them yourself. However, if you want to omit a label and still * have the checkbox be accessible, you may supply an [aria-label] input. - * See: https://www.google.com/design/spec/components/selection-controls.html + * See: https://material.io/design/components/selection-controls.html */ @Component({ moduleId: module.id, diff --git a/src/lib/core/gestures/gesture-config.ts b/src/lib/core/gestures/gesture-config.ts index 1253d4a3624..80ca783d623 100644 --- a/src/lib/core/gestures/gesture-config.ts +++ b/src/lib/core/gestures/gesture-config.ts @@ -51,7 +51,7 @@ export class GestureConfig extends HammerGestureConfig { * Builds Hammer instance manually to add custom recognizers that match the Material Design spec. * * Our gesture names come from the Material Design gestures spec: - * https://www.google.com/design/spec/patterns/gestures.html#gestures-touch-mechanics + * https://material.io/design/#gestures-touch-mechanics * * More information on default recognizers can be found in Hammer docs: * http://hammerjs.github.io/recognizer-pan/ diff --git a/src/lib/core/style/_elevation.scss b/src/lib/core/style/_elevation.scss index 59ffdd50d64..f017b4ba0c4 100644 --- a/src/lib/core/style/_elevation.scss +++ b/src/lib/core/style/_elevation.scss @@ -3,7 +3,7 @@ // A collection of mixins and CSS classes that can be used to apply elevation to a material // element. -// See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html +// See: https://material.io/design/environment/elevation.html // Examples: // // diff --git a/src/lib/core/theming/_palette.scss b/src/lib/core/theming/_palette.scss index 46609023bf9..fd2a3bc53a6 100644 --- a/src/lib/core/theming/_palette.scss +++ b/src/lib/core/theming/_palette.scss @@ -1,5 +1,5 @@ // Color palettes from the Material Design spec. -// See https://www.google.com/design/spec/style/color.html +// See https://material.io/design/color/ // // Contrast colors are hard-coded because it is too difficult (probably impossible) to // calculate them. These contrast colors are pulled from the public Material Design spec swatches. diff --git a/src/lib/grid-list/grid-list.md b/src/lib/grid-list/grid-list.md index 0142c9d0a77..da183845202 100644 --- a/src/lib/grid-list/grid-list.md +++ b/src/lib/grid-list/grid-list.md @@ -1,5 +1,5 @@ -`mat-grid-list` is a two-dimensional list view that arranges cells into grid-based layout. -See Material Design spec [here](https://www.google.com/design/spec/components/grid-lists.html). +`mat-grid-list` is a two-dimensional list view that arranges cells into grid-based layout. +See Material Design spec [here](https://material.io/design/components/image-lists.html). @@ -13,21 +13,21 @@ items. The height of the rows in a grid list can be set via the `rowHeight` attribute. Row height for the list can be calculated in three ways: - -1. **Fixed height**: The height can be in `px`, `em`, or `rem`. If no units are specified, `px` + +1. **Fixed height**: The height can be in `px`, `em`, or `rem`. If no units are specified, `px` units are assumed (e.g. `100px`, `5em`, `250`). - + 2. **Ratio**: This ratio is column-width:row-height, and must be passed in with a colon, not a decimal (e.g. `4:3`). - -3. **Fit**: Setting `rowHeight` to `fit` This mode automatically divides the available height by -the number of rows. Please note the height of the grid-list or its container must be set. -If `rowHeight` is not specified, it defaults to a `1:1` ratio of width:height. +3. **Fit**: Setting `rowHeight` to `fit` This mode automatically divides the available height by +the number of rows. Please note the height of the grid-list or its container must be set. + +If `rowHeight` is not specified, it defaults to a `1:1` ratio of width:height. ### Setting the gutter size -The gutter size can be set to any `px`, `em`, or `rem` value with the `gutterSize` property. If no +The gutter size can be set to any `px`, `em`, or `rem` value with the `gutterSize` property. If no units are specified, `px` units are assumed. By default the gutter size is `1px`. ### Adding tiles that span multiple rows or columns diff --git a/src/lib/schematics/shell/custom-theme.ts b/src/lib/schematics/shell/custom-theme.ts index 8b06e452f34..ac3c16333f6 100644 --- a/src/lib/schematics/shell/custom-theme.ts +++ b/src/lib/schematics/shell/custom-theme.ts @@ -16,7 +16,7 @@ return ` // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker -// hue. Available color palettes: https://www.google.com/design/spec/style/color.html +// hue. Available color palettes: https://material.io/design/color/ $${name}-primary: mat-palette($mat-indigo); $${name}-accent: mat-palette($mat-pink, A200, A100, A400); diff --git a/src/lib/tabs/tab-group.ts b/src/lib/tabs/tab-group.ts index fa4dbadb4f1..5e9c4749fb7 100644 --- a/src/lib/tabs/tab-group.ts +++ b/src/lib/tabs/tab-group.ts @@ -59,7 +59,7 @@ export const _MatTabGroupMixinBase = mixinColor(mixinDisableRipple(MatTabGroupBa /** * Material design tab-group component. Supports basic tab pairs (label + content) and includes * animated ink-bar, keyboard navigation, and screen reader. - * See: https://www.google.com/design/spec/components/tabs.html + * See: https://material.io/design/components/tabs.html */ @Component({ moduleId: module.id,