diff --git a/.circleci/env.sh b/.circleci/env.sh index 09e83b0b82fd..a2a6db4a103d 100755 --- a/.circleci/env.sh +++ b/.circleci/env.sh @@ -46,7 +46,7 @@ cp "${projectDir}/.circleci/bazel.linux.rc" "$HOME/.bazelrc"; #################################################################################################### #################################################################################################### ## Source `$BASH_ENV` to make the variables available immediately. ## -## ***NOTE: This must remain the the last action in this script*** ## +## ***NOTE: This must remain the last action in this script*** ## #################################################################################################### #################################################################################################### source $BASH_ENV; diff --git a/guides/theming-your-components.md b/guides/theming-your-components.md index 1f271882812c..8d1cebbeca0f 100644 --- a/guides/theming-your-components.md +++ b/guides/theming-your-components.md @@ -163,10 +163,10 @@ have a config specified. @mixin color($theme) { // Get the color config from the theme. $color-config: mat.get-color-config($theme); - + // Get the primary color palette from the color-config. $primary-palette: map.get($color-config, 'primary'); - + .my-carousel-button { // Read the 500 hue from the primary color palette. color: mat.get-color-from-palette($primary-palette, 500); @@ -198,7 +198,7 @@ have a config specified. ### Step 4: Include the theme mixin in your application Now that you've defined the carousel component's theme mixin, you can include this mixin along with -the the other theme mixins in your application. +the other theme mixins in your application. ```scss @use '~@angular/material' as mat; diff --git a/guides/typography.md b/guides/typography.md index fa5c82f4b756..74cd82798d26 100644 --- a/guides/typography.md +++ b/guides/typography.md @@ -63,7 +63,7 @@ table below. You can define a typography level with the `define-typography-config` Sass function. This function accepts, in order, CSS values for `font-size`, `line-height`, `font-weight`, `font-family`, and -`letter-spacing`. You can also specify the parameters by name, as demonstrated in the example below. +`letter-spacing`. You can also specify the parameters by name, as demonstrated in the example below. ```scss @use '~@angular/material' as mat; @@ -75,7 +75,7 @@ $my-custom-level: mat.define-typography-level( $line-height: 1, $letter-spacing: normal, ); -``` +``` ## Typography config @@ -121,7 +121,7 @@ In addition to the `core` mixin, you can specify your typography config when inc mixin, as described in the [theming guide][theming-system]. Because the `core` mixin always emits typography styles, specifying a typography config to a theme mixin results in duplicate typography CSS. You should only provide a typography config when applying your theme if you need to specify -multiple typography styles that are conditionally applied based on your application's behavior. +multiple typography styles that are conditionally applied based on your application's behavior. The following example shows a typical theme definition and a "kids theme" that only applies when the `".kids-theme"` CSS class is present. You can [see the theming guide for more guidance on @@ -151,7 +151,7 @@ $my-theme: mat.define-light-theme(( // Specify "Comic Sans" as the default font family for all levels. $font-family: 'Comic Sans', ); - + $kids-theme: mat.define-light-theme(( color: ( primary: $my-primary, @@ -159,7 +159,7 @@ $my-theme: mat.define-light-theme(( ), typography: $kids-typography, )); - + @include mat.all-component-themes($kids-theme); } ``` @@ -185,7 +185,7 @@ $kids-typography: mat.define-typography-config( In addition to styles shared between components, the `core` mixin includes CSS classes for styling your application. These CSS classes correspond to the typography levels in your typography config. This mixin also emits styles for native header elements scoped within the `.mat-typography` CSS -class. The table below lists the the CSS classes emitted and the native elements styled. +class. The table below lists the CSS classes emitted and the native elements styled. | CSS class | Level name | Native elements | |-------------------------------------|----------------|-----------------| @@ -218,14 +218,14 @@ The following example demonstrates usage of the typography styles emitted by the

Top header

- +

Introductory text

- +

Inner header

- +

Some inner text

diff --git a/src/cdk-experimental/menu/menu-bar.spec.ts b/src/cdk-experimental/menu/menu-bar.spec.ts index e4a7539c9fd4..7a0485b5db22 100644 --- a/src/cdk-experimental/menu/menu-bar.spec.ts +++ b/src/cdk-experimental/menu/menu-bar.spec.ts @@ -743,7 +743,7 @@ describe('MenuBar', () => { grabElementsForTesting(); } - /** set focus the the MenuBar and run change detection. */ + /** set focus the MenuBar and run change detection. */ function focusMenuBar() { dispatchKeyboardEvent(document, 'keydown', TAB); nativeMenuBar.focus(); diff --git a/src/cdk-experimental/menu/menu-item-radio.ts b/src/cdk-experimental/menu/menu-item-radio.ts index 950aec3fee54..a5b6512402e8 100644 --- a/src/cdk-experimental/menu/menu-item-radio.ts +++ b/src/cdk-experimental/menu/menu-item-radio.ts @@ -15,7 +15,7 @@ import {CDK_MENU, Menu} from './menu-interface'; import {MENU_AIM, MenuAim} from './menu-aim'; /** - * A directive providing behavior for the the "menuitemradio" ARIA role, which behaves similarly to + * A directive providing behavior for the "menuitemradio" ARIA role, which behaves similarly to * a conventional radio-button. Any sibling `CdkMenuItemRadio` instances within the same `CdkMenu` * or `CdkMenuGroup` comprise a radio group with unique selection enforced. */ diff --git a/src/components-examples/material/button-toggle/button-toggle-harness/button-toggle-harness-example.spec.ts b/src/components-examples/material/button-toggle/button-toggle-harness/button-toggle-harness-example.spec.ts index 2e45843aa7c1..3f3ef8873c3e 100644 --- a/src/components-examples/material/button-toggle/button-toggle-harness/button-toggle-harness-example.spec.ts +++ b/src/components-examples/material/button-toggle/button-toggle-harness/button-toggle-harness-example.spec.ts @@ -32,7 +32,7 @@ describe('ButtonToggleHarnessExample', () => { expect(groups.length).toBe(1); }); - it('should load the the toggles inside the group', async () => { + it('should load the toggles inside the group', async () => { const group = await loader.getHarness(MatButtonToggleGroupHarness); const toggles = await group.getToggles(); expect(toggles.length).toBe(2); diff --git a/src/google-maps/map-directions-renderer/README.md b/src/google-maps/map-directions-renderer/README.md index ab56555eba11..3294411978a4 100644 --- a/src/google-maps/map-directions-renderer/README.md +++ b/src/google-maps/map-directions-renderer/README.md @@ -2,7 +2,7 @@ The `MapDirectionsRenderer` component wraps the [`google.maps.DirectionsRenderer` class](https://developers.google.com/maps/documentation/javascript/reference/directions#DirectionsRenderer) from the Google Maps JavaScript API. This can easily be used with the `MapDirectionsService` that wraps [`google.maps.DirectionsService`](https://developers.google.com/maps/documentation/javascript/reference/directions#DirectionsService) which is designed to be used with Angular by returning an `Observable` response and works inside the Angular Zone. -The `MapDirectionsService`, like the `google.maps.DirectionsService`, has a single method, `route`. Normally, the `google.maps.DirectionsService` takes two arguments, a `google.maps.DirectionsRequest` and a callback that takes the `google.maps.DirectionsResult` and `google.maps.DirectionsStatus` as arguments. The `MapDirectionsService` route method takes takes the `google.maps.DirectionsRequest` as the single argument, and returns an `Observable` of a `MapDirectionsResponse`, which is an interface defined as follows: +The `MapDirectionsService`, like the `google.maps.DirectionsService`, has a single method, `route`. Normally, the `google.maps.DirectionsService` takes two arguments, a `google.maps.DirectionsRequest` and a callback that takes the `google.maps.DirectionsResult` and `google.maps.DirectionsStatus` as arguments. The `MapDirectionsService` route method takes the `google.maps.DirectionsRequest` as the single argument, and returns an `Observable` of a `MapDirectionsResponse`, which is an interface defined as follows: ```typescript export interface MapDirectionsResponse { diff --git a/src/google-maps/map-geocoder/README.md b/src/google-maps/map-geocoder/README.md index 63a54580c909..f6b8257fc9e4 100644 --- a/src/google-maps/map-geocoder/README.md +++ b/src/google-maps/map-geocoder/README.md @@ -3,7 +3,7 @@ The `MapGeocoder`, like the `google.maps.Geocoder`, has a single method, `geocode`. Normally, the `google.maps.Geocoder` takes two arguments, a `google.maps.GeocoderRequest` and a callback that takes the `google.maps.GeocoderResult` and `google.maps.GeocoderStatus` as arguments. -The `MapGeocoder.geocode` method takes takes the `google.maps.GeocoderRequest` as the single +The `MapGeocoder.geocode` method takes the `google.maps.GeocoderRequest` as the single argument, and returns an `Observable` of a `MapGeocoderResponse`, which is an interface defined as follows: diff --git a/src/material/button-toggle/testing/button-toggle-group-shared.spec.ts b/src/material/button-toggle/testing/button-toggle-group-shared.spec.ts index 7f382b308f7c..014e8bf80b25 100644 --- a/src/material/button-toggle/testing/button-toggle-group-shared.spec.ts +++ b/src/material/button-toggle/testing/button-toggle-group-shared.spec.ts @@ -28,7 +28,7 @@ export function runHarnessTests( expect(groups.length).toBe(1); }); - it('should load the the toggles inside the group', async () => { + it('should load the toggles inside the group', async () => { const group = await loader.getHarness(buttonToggleGroupHarness); const toggles = await group.getToggles(); expect(toggles.length).toBe(2);