docs: fix missing alert block styles in the API reference (#59020)

Substitute legacy alert classes with the new ones.

PR Close #59020

Author: hawkgs

adev/shared-docs/styles/docs/_alert.scss

@@ -28,6 +28,14 @@
 
     p {
       margin-inline-start: 1.65rem;
+
+      &:first-child {
+        margin-block-start: 0;
+      }
+
+      &:last-child {
+        margin-block-end: 0;
+      }
     }
 
     .docs-dark-mode & {
@@ -39,10 +47,6 @@
     }
   }
 
-  .docs-viewer .docs-alert p {
-    margin-block: 0;
-  }
-
   .docs-alert-note {
     --alert-gradient: var(--blue-to-teal-vertical-gradient);
     --alert-accent: var(--bright-blue);

adev/src/content/cli/index.md

@@ -42,7 +42,7 @@ ng serve
 In your browser, open http://localhost:4200/ to see the new application run.
 When you use the [ng serve](cli/serve) command to build an application and serve it locally, the server automatically rebuilds the application and reloads the page when you change any of the source files.
 
-<div class="alert is-helpful">
+<div class="docs-alert docs-alert-helpful">
 
 When you run `ng new my-first-project` a new folder, named `my-first-project`, will be created in the current working directory.
 Since you want to be able to create files inside that folder, make sure you have sufficient rights in the current working directory before running the command.

adev/src/content/guide/prerendering.md

@@ -16,7 +16,7 @@ ng add @angular/ssr
 
 </docs-code>
 
-<div class="alert is-helpful">
+<div class="docs-alert docs-alert-helpful">
 
 To create an application with prerendering capabilities from the beginning use the [`ng new --ssr`](tools/cli/setup-local) command.
 

packages/animations/src/animation_metadata.ts

@@ -966,7 +966,7 @@ export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSe
  *  - `true` and `false` also match expression values of `1` and `0` respectively (but do not match
  *    _truthy_ and _falsy_ values)
  *
- * <div class="alert is-helpful">
+ * <div class="docs-alert docs-alert-helpful">
  *
  *  Be careful about entering end leaving elements as their transitions present a common
  *  pitfall for developers.
@@ -1205,15 +1205,15 @@ export function useAnimation(
  *  - Those inserted dynamically (via `ViewContainerRef`)
  *  - Those that have a structural directive (which, under the hood, are a subset of the above ones)
  *
- * <div class="alert is-helpful">
+ * <div class="docs-alert docs-alert-helpful">
  *
  *  Note that elements will be successfully queried via `:enter`/`:leave` even if their
  *  insertion/removal is not done manually via `ViewContainerRef`or caused by their structural
  *  directive (e.g. they enter/exit alongside their parent).
  *
  * </div>
  *
- * <div class="alert is-important">
+ * <div class="docs-alert docs-alert-important">
  *
  *  There is an exception to what previously mentioned, besides elements entering/leaving based on
  *  their own logic, elements with an animation trigger can always be queried via `:leave` when

packages/common/http/src/provider.ts

@@ -82,7 +82,7 @@ function makeHttpFeature<KindT extends HttpFeatureKind>(
  * feature functions to `provideHttpClient`. For example, HTTP interceptors can be added using the
  * `withInterceptors(...)` feature.
  *
- * <div class="alert is-helpful">
+ * <div class="docs-alert docs-alert-helpful">
  *
  * It's strongly recommended to enable
  * [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) for applications that use

packages/core/src/di/injection_token.ts

@@ -21,7 +21,7 @@ import {ɵɵdefineInjectable} from './interface/defs';
  * `InjectionToken` is parameterized on `T` which is the type of object which will be returned by
  * the `Injector`. This provides an additional level of type safety.
  *
- * <div class="alert is-helpful">
+ * <div class="docs-alert docs-alert-helpful">
  *
  * **Important Note**: Ensure that you use the same instance of the `InjectionToken` in both the
  * provider and the injection call. Creating a new instance of `InjectionToken` in different places,

packages/core/src/i18n/tokens.ts

@@ -80,7 +80,7 @@ export const LOCALE_ID: InjectionToken<string> = new InjectionToken(ngDevMode ?
  *
  * See the [i18n guide](guide/i18n/locale-id) for more information.
  *
- * <div class="alert is-helpful">
+ * <div class="docs-alert docs-alert-helpful">
  *
  * **Deprecation notice:**
  *

packages/core/src/render3/after_render/api.ts

@@ -35,7 +35,7 @@ export enum AfterRenderPhase {
    * `AfterRenderPhase.EarlyRead` phase if reading can wait until after the write phase.
    * **Never** write to the DOM in this phase.
    *
-   * <div class="alert is-important">
+   * <div class="docs-alert docs-alert-important">
    *
    * Using this value can degrade performance.
    * Instead, prefer using built-in browser functionality when possible.
@@ -55,7 +55,7 @@ export enum AfterRenderPhase {
    * DOM, that haven't been refactored to use a different phase. **Never** use this phase if
    * it is possible to divide the work among the other phases instead.
    *
-   * <div class="alert is-critical">
+   * <div class="docs-alert docs-alert-critical">
    *
    * Using this value can **significantly** degrade performance.
    * Instead, prefer dividing work into the appropriate phase callbacks.

packages/core/src/render3/after_render/hooks.ts

@@ -55,7 +55,7 @@ export interface AfterRenderOptions {
   /**
    * The phase the callback should be invoked in.
    *
-   * <div class="alert is-critical">
+   * <div class="docs-alert docs-alert-critical">
    *
    * Defaults to `AfterRenderPhase.MixedReadWrite`. You should choose a more specific
    * phase instead. See `AfterRenderPhase` for more information.
@@ -83,7 +83,7 @@ export interface AfterRenderOptions {
  * - `read`
  *    Use this phase to **read** from the DOM. **Never** write to the DOM in this phase.
  *
- * <div class="alert is-critical">
+ * <div class="docs-alert docs-alert-critical">
  *
  * You should prefer using the `read` and `write` phases over the `earlyRead` and `mixedReadWrite`
  * phases when possible, to avoid performance degradation.
@@ -110,7 +110,7 @@ export interface AfterRenderOptions {
  * manual DOM access, ensuring the best experience for the end users of your application
  * or library.
  *
- * <div class="alert is-important">
+ * <div class="docs-alert docs-alert-important">
  *
  * Components are not guaranteed to be [hydrated](guide/hydration) before the callback runs.
  * You must use caution when directly reading or writing the DOM and layout.
@@ -159,7 +159,7 @@ export function afterRender<E = never, W = never, M = never>(
  * Register a callback to be invoked each time the application finishes rendering, during the
  * `mixedReadWrite` phase.
  *
- * <div class="alert is-critical">
+ * <div class="docs-alert docs-alert-critical">
  *
  * You should prefer specifying an explicit phase for the callback instead, or you risk significant
  * performance degradation.
@@ -172,7 +172,7 @@ export function afterRender<E = never, W = never, M = never>(
  * - on browser platforms only
  * - during the `mixedReadWrite` phase
  *
- * <div class="alert is-important">
+ * <div class="docs-alert docs-alert-important">
  *
  * Components are not guaranteed to be [hydrated](guide/hydration) before the callback runs.
  * You must use caution when directly reading or writing the DOM and layout.
@@ -254,7 +254,7 @@ export function afterRender(
  * - `read`
  *    Use this phase to **read** from the DOM. **Never** write to the DOM in this phase.
  *
- * <div class="alert is-critical">
+ * <div class="docs-alert docs-alert-critical">
  *
  * You should prefer using the `read` and `write` phases over the `earlyRead` and `mixedReadWrite`
  * phases when possible, to avoid performance degradation.
@@ -281,7 +281,7 @@ export function afterRender(
  * manual DOM access, ensuring the best experience for the end users of your application
  * or library.
  *
- * <div class="alert is-important">
+ * <div class="docs-alert docs-alert-important">
  *
  * Components are not guaranteed to be [hydrated](guide/hydration) before the callback runs.
  * You must use caution when directly reading or writing the DOM and layout.
@@ -332,7 +332,7 @@ export function afterNextRender<E = never, W = never, M = never>(
  * Register a callback to be invoked the next time the application finishes rendering, during the
  * `mixedReadWrite` phase.
  *
- * <div class="alert is-critical">
+ * <div class="docs-alert docs-alert-critical">
  *
  * You should prefer specifying an explicit phase for the callback instead, or you risk significant
  * performance degradation.
@@ -344,7 +344,7 @@ export function afterNextRender<E = never, W = never, M = never>(
  * - on browser platforms only
  * - during the `mixedReadWrite` phase
  *
- * <div class="alert is-important">
+ * <div class="docs-alert docs-alert-important">
  *
  * Components are not guaranteed to be [hydrated](guide/hydration) before the callback runs.
  * You must use caution when directly reading or writing the DOM and layout.

packages/core/src/render3/reactivity/after_render_effect.ts

@@ -241,7 +241,7 @@ export type ɵFirstAvailableSignal<T extends unknown[]> = T extends [infer H, ..
  * Register an effect that, when triggered, is invoked when the application finishes rendering, during the
  * `mixedReadWrite` phase.
  *
- * <div class="alert is-critical">
+ * <div class="docs-alert docs-alert-critical">
  *
  * You should prefer specifying an explicit phase for the effect instead, or you risk significant
  * performance degradation.
@@ -254,7 +254,7 @@ export type ɵFirstAvailableSignal<T extends unknown[]> = T extends [infer H, ..
  * - on browser platforms only
  * - during the `mixedReadWrite` phase
  *
- * <div class="alert is-important">
+ * <div class="docs-alert docs-alert-important">
  *
  * Components are not guaranteed to be [hydrated](guide/hydration) before the callback runs.
  * You must use caution when directly reading or writing the DOM and layout.
@@ -285,7 +285,7 @@ export function afterRenderEffect(
  * - `read`
  *    Use this phase to **read** from the DOM. **Never** write to the DOM in this phase.
  *
- * <div class="alert is-critical">
+ * <div class="docs-alert docs-alert-critical">
  *
  * You should prefer using the `read` and `write` phases over the `earlyRead` and `mixedReadWrite`
  * phases when possible, to avoid performance degradation.
@@ -313,7 +313,7 @@ export function afterRenderEffect(
  * manual DOM access, ensuring the best experience for the end users of your application
  * or library.
  *
- * <div class="alert is-important">
+ * <div class="docs-alert docs-alert-important">
  *
  * Components are not guaranteed to be [hydrated](guide/hydration) before the callback runs.
  * You must use caution when directly reading or writing the DOM and layout.

packages/platform-server/init/PACKAGE.md

@@ -8,7 +8,7 @@ The initialization happens as a [side effect of importing](https://developer.moz
 import '@angular/platform-server/init';
 ```
 
-<div class="alert is-important">
+<div class="docs-alert docs-alert-important">
 
   The import must come before any imports (direct or transitive) that rely on DOM built-ins being available.
 

packages/service-worker/src/update.ts

@@ -91,7 +91,7 @@ export class SwUpdate {
    * In most cases, you should not use this method and instead should update a client by reloading
    * the page.
    *
-   * <div class="alert is-important">
+   * <div class="docs-alert docs-alert-important">
    *
    * Updating a client without reloading can easily result in a broken application due to a version
    * mismatch between the application shell and other page resources,

packages/upgrade/src/common/src/downgrade_injectable.ts

@@ -46,7 +46,7 @@ import {getTypeName, isFunction, validateInjectionKey} from './util';
  *
  * {@example upgrade/static/ts/full/module.ts region="example-app"}
  *
- * <div class="alert is-important">
+ * <div class="docs-alert docs-alert-important">
  *
  *   When using `downgradeModule()`, downgraded injectables will not be available until the Angular
  *   module that provides them is instantiated. In order to be safe, you need to ensure that the

packages/upgrade/static/src/downgrade_module.ts

@@ -67,7 +67,7 @@ let moduleUid = 0;
  * available until the downgraded module has been bootstrapped, i.e. by instantiating a downgraded
  * component.
  *
- * <div class="alert is-important">
+ * <div class="docs-alert docs-alert-important">
  *
  *   You cannot use `downgradeModule()` and `UpgradeModule` in the same hybrid application.<br />
  *   Use one or the other.
@@ -98,7 +98,7 @@ let moduleUid = 0;
  * For a more detailed discussion of the differences and their implications, see
  * [Upgrading for Performance](https://angular.io/guide/upgrade).
  *
- * <div class="alert is-helpful">
+ * <div class="docs-alert docs-alert-helpful">
  *
  *   You can manually trigger a change detection run in AngularJS using
  *   [scope.$apply(...)](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply) or
@@ -183,7 +183,7 @@ export function downgradeModule<T>(
  * available until the downgraded module has been bootstrapped, i.e. by instantiating a downgraded
  * component.
  *
- * <div class="alert is-important">
+ * <div class="docs-alert docs-alert-important">
  *
  *   You cannot use `downgradeModule()` and `UpgradeModule` in the same hybrid application.<br />
  *   Use one or the other.
@@ -214,7 +214,7 @@ export function downgradeModule<T>(
  * For a more detailed discussion of the differences and their implications, see
  * [Upgrading for Performance](https://angular.io/guide/upgrade).
  *
- * <div class="alert is-helpful">
+ * <div class="docs-alert docs-alert-helpful">
  *
  *   You can manually trigger a change detection run in AngularJS using
  *   [scope.$apply(...)](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply) or
@@ -300,7 +300,7 @@ export function downgradeModule<T>(moduleOrBootstrapFn: NgModuleFactory<T>): str
  * available until the downgraded module has been bootstrapped, i.e. by instantiating a downgraded
  * component.
  *
- * <div class="alert is-important">
+ * <div class="docs-alert docs-alert-important">
  *
  *   You cannot use `downgradeModule()` and `UpgradeModule` in the same hybrid application.<br />
  *   Use one or the other.
@@ -331,7 +331,7 @@ export function downgradeModule<T>(moduleOrBootstrapFn: NgModuleFactory<T>): str
  * For a more detailed discussion of the differences and their implications, see
  * [Upgrading for Performance](https://angular.io/guide/upgrade).
  *
- * <div class="alert is-helpful">
+ * <div class="docs-alert docs-alert-helpful">
  *
  *   You can manually trigger a change detection run in AngularJS using
  *   [scope.$apply(...)](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply) or

packages/upgrade/static/testing/src/create_angular_testing_module.ts

@@ -50,23 +50,23 @@ export class AngularTestingModule {
  *
  * <code-example path="upgrade/static/ts/full/module.spec.ts" region="angular-spec"></code-example>
  *
- * <div class="alert is-important">
+ * <div class="docs-alert docs-alert-important">
  *
  * This helper is for testing services not Components.
  * For Component testing you must still bootstrap a hybrid app. See `UpgradeModule` or
  * `downgradeModule` for more information.
  *
  * </div>
  *
- * <div class="alert is-important">
+ * <div class="docs-alert docs-alert-important">
  *
  * The resulting configuration does not wire up AngularJS digests to Zone hooks. It is the
  * responsibility of the test writer to call `$rootScope.$apply`, as necessary, to trigger
  * AngularJS handlers of async events from Angular.
  *
  * </div>
  *
- * <div class="alert is-important">
+ * <div class="docs-alert docs-alert-important">
  *
  * The helper sets up global variables to hold the shared Angular and AngularJS injectors.
  *

packages/upgrade/static/testing/src/create_angularjs_testing_module.ts

@@ -41,23 +41,23 @@ import {UpgradeAppType} from '../../../src/common/src/util';
  * <code-example path="upgrade/static/ts/full/module.spec.ts"
  * region="angularjs-spec"></code-example>
  *
- * <div class="alert is-important">
+ * <div class="docs-alert docs-alert-important">
  *
  * This helper is for testing services not components.
  * For Component testing you must still bootstrap a hybrid app. See `UpgradeModule` or
  * `downgradeModule` for more information.
  *
  * </div>
  *
- * <div class="alert is-important">
+ * <div class="docs-alert docs-alert-important">
  *
  * The resulting configuration does not wire up AngularJS digests to Zone hooks. It is the
  * responsibility of the test writer to call `$rootScope.$apply`, as necessary, to trigger
  * AngularJS handlers of async events from Angular.
  *
  * </div>
  *
- * <div class="alert is-important">
+ * <div class="docs-alert docs-alert-important">
  *
  * The helper sets up global variables to hold the shared Angular and AngularJS injectors.
  *