feat(material/legacy-progress-bar): step 4. move mdc folder

Author: wagnermaciel

.github/CODEOWNERS

@@ -119,7 +119,7 @@
 /src/material-experimental/mdc-select/**               @crisbeto
 /src/material-experimental/mdc-paginator/**            @crisbeto
 /src/material-experimental/mdc-progress-spinner/**     @andrewseguin
-/src/material-experimental/mdc-progress-bar/**         @andrewseguin
+/src/material/progress-bar/**         @andrewseguin
 /src/material-experimental/mdc-radio/**                @mmalerba
 /src/material-experimental/mdc-snack-bar/**            @andrewseguin
 /src/material-experimental/mdc-slide-toggle/**         @crisbeto

.ng-dev/commit-message.mts

@@ -52,7 +52,7 @@ export const commitMessage: CommitMessageConfig = {
     'material-experimental/mdc-list',
     'material-experimental/mdc-menu',
     'material-experimental/mdc-paginator',
-    'material-experimental/mdc-progress-bar',
+    'material/progress-bar',
     'material-experimental/mdc-progress-spinner',
     'material-experimental/mdc-radio',
     'material-experimental/mdc-select',

src/dev-app/mdc-progress-bar/BUILD.bazel

@@ -11,8 +11,8 @@ ng_module(
     ],
     deps = [
         "//src/material-experimental/mdc-button",
-        "//src/material-experimental/mdc-progress-bar",
         "//src/material/button-toggle",
+        "//src/material/progress-bar",
         "@npm//@angular/forms",
     ],
 )

src/dev-app/mdc-progress-bar/mdc-progress-bar-demo.ts

@@ -10,7 +10,7 @@ import {Component} from '@angular/core';
 import {ThemePalette} from '@angular/material-experimental/mdc-core';
 import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
-import {MatProgressBarModule} from '@angular/material-experimental/mdc-progress-bar';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {MatButtonModule} from '@angular/material-experimental/mdc-button';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 

src/e2e-app/BUILD.bazel

@@ -48,7 +48,6 @@ ng_module(
         "//src/material-experimental/mdc-dialog",
         "//src/material-experimental/mdc-input",
         "//src/material-experimental/mdc-menu",
-        "//src/material-experimental/mdc-progress-bar",
         "//src/material-experimental/mdc-progress-spinner",
         "//src/material-experimental/mdc-radio",
         "//src/material-experimental/mdc-slide-toggle",
@@ -67,6 +66,7 @@ ng_module(
         "//src/material/legacy-progress-bar",
         "//src/material/list",
         "//src/material/menu",
+        "//src/material/progress-bar",
         "//src/material/progress-spinner",
         "//src/material/radio",
         "//src/material/select",

src/e2e-app/mdc-progress-bar/mdc-progress-bar-e2e-module.ts

@@ -7,7 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatProgressBarModule} from '@angular/material-experimental/mdc-progress-bar';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {MdcProgressBarE2E} from './mdc-progress-bar-e2e';
 
 @NgModule({

src/material-experimental/_index.scss

@@ -45,8 +45,6 @@
   mdc-menu-density, mdc-menu-theme;
 @forward './mdc-paginator/paginator-theme' as mdc-paginator-* show mdc-paginator-color,
   mdc-paginator-typography, mdc-paginator-density, mdc-paginator-theme;
-@forward './mdc-progress-bar/progress-bar-theme' as mdc-progress-bar-* show mdc-progress-bar-color,
-  mdc-progress-bar-typography, mdc-progress-bar-density, mdc-progress-bar-theme;
 @forward './mdc-progress-spinner/progress-spinner-theme' as mdc-progress-spinner-* show
   mdc-progress-spinner-color, mdc-progress-spinner-typography, mdc-progress-spinner-density,
   mdc-progress-spinner-theme;

src/material-experimental/config.bzl

@@ -22,8 +22,6 @@ entryPoints = [
     "mdc-menu/testing",
     "mdc-paginator",
     "mdc-paginator/testing",
-    "mdc-progress-bar",
-    "mdc-progress-bar/testing",
     "mdc-progress-spinner",
     "mdc-progress-spinner/testing",
     "mdc-radio",

src/material-experimental/mdc-core/color/_all-color.import.scss

@@ -76,7 +76,6 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde
 @forward '../../mdc-menu/menu-theme' as mat-mdc-menu-*;
 @forward '../../mdc-tooltip/tooltip-theme' as mat-mdc-tooltip-*;
 @forward '../../mdc-paginator/paginator-theme' as mat-mdc-paginator-*;
-@forward '../../mdc-progress-bar/progress-bar-theme' as mat-mdc-progress-bar-*;
 @forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*;
 @forward '../../mdc-input/input-theme' as mat-mdc-input-*;
 @forward '../../mdc-form-field/form-field-density' as mat-mdc-*;

src/material-experimental/mdc-core/density/_all-density.import.scss

@@ -76,7 +76,6 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde
 @forward '../../mdc-menu/menu-theme' as mat-mdc-menu-*;
 @forward '../../mdc-tooltip/tooltip-theme' as mat-mdc-tooltip-*;
 @forward '../../mdc-paginator/paginator-theme' as mat-mdc-paginator-*;
-@forward '../../mdc-progress-bar/progress-bar-theme' as mat-mdc-progress-bar-*;
 @forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*;
 @forward '../../mdc-input/input-theme' as mat-mdc-input-*;
 @forward '../../mdc-form-field/form-field-density' as mat-mdc-*;

src/material-experimental/mdc-core/theming/BUILD.bazel

@@ -31,7 +31,6 @@ sass_library(
         "//src/material-experimental/mdc-list:mdc_list_scss_lib",
         "//src/material-experimental/mdc-menu:mdc_menu_scss_lib",
         "//src/material-experimental/mdc-paginator:mdc_paginator_scss_lib",
-        "//src/material-experimental/mdc-progress-bar:mdc_progress_bar_scss_lib",
         "//src/material-experimental/mdc-progress-spinner:mdc_progress_spinner_scss_lib",
         "//src/material-experimental/mdc-radio:mdc_radio_scss_lib",
         "//src/material-experimental/mdc-select:mdc_select_scss_lib",
@@ -42,6 +41,7 @@ sass_library(
         "//src/material-experimental/mdc-tabs:mdc_tabs_scss_lib",
         "//src/material-experimental/mdc-tooltip:mdc_tooltip_scss_lib",
         "//src/material/card:card_scss_lib",
+        "//src/material/progress-bar:progress_bar_scss_lib",
     ],
 )
 

src/material-experimental/mdc-core/theming/_all-theme.import.scss

@@ -76,7 +76,6 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde
 @forward '../../mdc-menu/menu-theme' as mat-mdc-menu-*;
 @forward '../../mdc-tooltip/tooltip-theme' as mat-mdc-tooltip-*;
 @forward '../../mdc-paginator/paginator-theme' as mat-mdc-paginator-*;
-@forward '../../mdc-progress-bar/progress-bar-theme' as mat-mdc-progress-bar-*;
 @forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*;
 @forward '../../mdc-input/input-theme' as mat-mdc-input-*;
 @forward '../../mdc-form-field/form-field-density' as mat-mdc-*;
@@ -101,7 +100,6 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde
 @import '../../mdc-table/table-theme';
 @import '../../mdc-tooltip/tooltip-theme';
 @import '../../mdc-paginator/paginator-theme';
-@import '../../mdc-progress-bar/progress-bar-theme';
 @import '../../mdc-progress-spinner/progress-spinner-theme';
 @import '../../mdc-input/input-theme';
 @import '../../mdc-form-field/form-field-theme';

src/material-experimental/mdc-core/theming/_all-theme.scss

@@ -19,7 +19,6 @@
 @use '../../mdc-table/table-theme';
 @use '../../mdc-tooltip/tooltip-theme';
 @use '../../mdc-paginator/paginator-theme';
-@use '../../mdc-progress-bar/progress-bar-theme';
 @use '../../mdc-progress-spinner/progress-spinner-theme';
 @use '../../mdc-input/input-theme';
 @use '../../mdc-form-field/form-field-theme';
@@ -39,7 +38,7 @@
     @include list-theme.theme($theme-or-color-config);
     @include menu-theme.theme($theme-or-color-config);
     @include paginator-theme.theme($theme-or-color-config);
-    @include progress-bar-theme.theme($theme-or-color-config);
+    @include mat.progress-bar-theme($theme-or-color-config);
     @include progress-spinner-theme.theme($theme-or-color-config);
     @include radio-theme.theme($theme-or-color-config);
     @include select-theme.theme($theme-or-color-config);

src/material-experimental/mdc-core/typography/_all-typography.import.scss

@@ -76,7 +76,6 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde
 @forward '../../mdc-menu/menu-theme' as mat-mdc-menu-*;
 @forward '../../mdc-tooltip/tooltip-theme' as mat-mdc-tooltip-*;
 @forward '../../mdc-paginator/paginator-theme' as mat-mdc-paginator-*;
-@forward '../../mdc-progress-bar/progress-bar-theme' as mat-mdc-progress-bar-*;
 @forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*;
 @forward '../../mdc-input/input-theme' as mat-mdc-input-*;
 @forward '../../mdc-form-field/form-field-density' as mat-mdc-*;

src/material-experimental/mdc-progress-bar/README.md

@@ -93,7 +93,9 @@
 @forward './paginator/paginator-theme' as paginator-* show paginator-theme, paginator-color,
   paginator-typography;
 @forward './legacy-progress-bar/progress-bar-theme' as legacy-progress-bar-* show
-  legacy-progress-bar-theme, progress-bar-color, progress-bar-typography;
+  legacy-progress-bar-theme, legacy-progress-bar-color, legacy-progress-bar-typography;
+@forward './progress-bar/progress-bar-theme' as progress-bar-* show
+  progress-bar-theme, progress-bar-color, progress-bar-typography;
 @forward './progress-spinner/progress-spinner-theme' as progress-spinner-* show
   progress-spinner-theme, progress-spinner-color, progress-spinner-typography;
 @forward './radio/radio-theme' as radio-* show radio-theme, radio-color, radio-typography;

src/material/_index.scss

@@ -42,6 +42,8 @@ entryPoints = [
     "paginator/testing",
     "legacy-progress-bar",
     "legacy-progress-bar/testing",
+    "progress-bar",
+    "progress-bar/testing",
     "progress-spinner",
     "progress-spinner/testing",
     "radio",

src/material/config.bzl

@@ -1,6 +1,7 @@
 load("//src/e2e-app:test_suite.bzl", "e2e_test_suite")
 load(
     "//tools:defaults.bzl",
+    "markdown_to_html",
     "ng_e2e_test_library",
     "ng_module",
     "ng_test_library",
@@ -12,7 +13,7 @@ load(
 package(default_visibility = ["//visibility:public"])
 
 ng_module(
-    name = "mdc-progress-bar",
+    name = "progress-bar",
     srcs = glob(
         ["**/*.ts"],
         exclude = [
@@ -21,18 +22,17 @@ ng_module(
     ),
     assets = [":progress_bar_scss"] + glob(["**/*.html"]),
     deps = [
-        "//src/material-experimental/mdc-core",
+        "//src/material/core",
         "//src/material/legacy-progress-bar",
         "@npm//@angular/core",
     ],
 )
 
 sass_library(
-    name = "mdc_progress_bar_scss_lib",
+    name = "progress_bar_scss_lib",
     srcs = glob(["**/_*.scss"]),
     deps = [
         "//:mdc_sass_lib",
-        "//src/material:sass_lib",
         "//src/material/core:core_scss_lib",
     ],
 )
@@ -42,7 +42,6 @@ sass_binary(
     src = "progress-bar.scss",
     deps = [
         "//:mdc_sass_lib",
-        "//src/material:sass_lib",
         "//src/material/core:core_scss_lib",
     ],
 )
@@ -54,7 +53,7 @@ ng_test_library(
         exclude = ["**/*.e2e.spec.ts"],
     ),
     deps = [
-        ":mdc-progress-bar",
+        ":progress-bar",
         "//src/cdk/testing/private",
         "@npm//@angular/platform-browser",
     ],
@@ -82,3 +81,13 @@ e2e_test_suite(
         "//src/cdk/testing/private/e2e",
     ],
 )
+
+markdown_to_html(
+    name = "overview",
+    srcs = [":progress-bar.md"],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob(["**/*.ts"]),
+)

src/material-experimental/mdc-progress-bar/BUILD.bazel renamed to src/material/progress-bar/BUILD.bazel

@@ -0,0 +1,65 @@
+This version of `<mat-progress-bar>` is built on top of
+[MDC Web](https://github.com/material-components/material-components-web).
+
+## How to use
+Assuming your application is already up and running using Angular Material, you can add this
+component by following these steps:
+
+1. Install Angular Material & MDC WEB:
+
+   ```bash
+   npm i material-components-web @angular/material
+   ```
+
+2. In your `angular.json`, make sure `node_modules/` is listed as a Sass include path. This is
+   needed for the Sass compiler to be able to find the MDC Web Sass files.
+
+   ```json
+   ...
+   "styles": [
+     "src/styles.scss"
+   ],
+   "stylePreprocessorOptions": {
+     "includePaths": [
+       "node_modules/"
+     ]
+   },
+   ...
+   ```
+
+3. Import the `MatProgressBarModule` and add it to the module that declares your component:
+
+   ```ts
+   import {MatProgressBarModule} from '@angular/material/progress-bar';
+
+   @NgModule({
+     declarations: [MyComponent],
+     imports: [MatProgressBarModule],
+   })
+   export class MyModule {}
+   ```
+
+4. Add use `<mat-progress-bar>` in your component's template, just like you would the normal
+   `<mat-progress-bar>`:
+
+   ```html
+   <mat-progress-bar [value]="42"></mat-progress-bar>
+   ```
+
+5. Add the theme and typography mixins to your Sass:
+
+   ```scss
+   @use '@angular/material' as mat;
+
+   $my-primary: mat.define-palette(mat.$indigo-palette);
+   $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+   $my-theme: mat.define-light-theme((
+     color: (
+       primary: $my-primary,
+       accent: $my-accent
+     )
+   ));
+
+   @include mat.progress-bar-theme($my-theme);
+   @include mat.progress-bar-typography($my-theme);
+   ```