AAE-39830 Removing Material components color property (#11865)

* AAE-39830 Removing Material components color property

* AAE-39830 Style with class instead of color

* AAE-39830 Updating header component doc

* AAE-39830 Updating toolbar component doc

* AAE-39830 Removed unused theme variable and updated doc
This commit is contained in:
Ehsan Rezaei
2026-05-07 14:25:14 +02:00
committed by GitHub
parent 410490158f
commit b7783d2259
39 changed files with 57 additions and 146 deletions
@@ -351,7 +351,6 @@ while the data for the table is loading:
<!--Add your custom loading template here-->
<mat-progress-spinner
class="adf-document-list-loading-margin"
[color]="'primary'"
[mode]="'indeterminate'">
</mat-progress-spinner>
</ng-template>
+2 -3
View File
@@ -16,7 +16,6 @@ Reusable header for Alfresco applications.
title="title"
logo="logo.svg"
[redirectUrl]="'/home'"
color="primary"
(clicked)=toggleMenu($event)>
</adf-layout-header>
```
@@ -38,7 +37,7 @@ body of the element:
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| color | [`ThemePalette`](https://github.com/angular/components/blob/master/src/material/core/common-behaviors/color.ts) | | Background color for the header. It can be any hex color code or one of the Material theme colors: 'primary', 'accent' or 'warn'. |
| backgroundColor | [`string`] | Background color for the header. It can be any hex color code or CSS variable. |
| expandedSidenav | `boolean` | true | expandedSidenav: Toggles the expanded state of the component. |
| logo | `string` | | Path to an image file for the application logo. |
| position | `string` | "start" | The side of the page that the drawer is attached to (can be 'start' or 'end') |
@@ -58,5 +57,5 @@ body of the element:
## Details
This component displays a customizable header that can be reused. Use the input properties to
configure the left side (title, button) and the primary color of the header. The right part of the
configure the left side (title, button) and the background color of the header. The right part of the
header can contain other components which are transcluded in the header component.
-17
View File
@@ -19,7 +19,6 @@ Simple container for headers, titles, actions and breadcrumbs.
- [Properties](#properties)
- [Details](#details)
- [Dropdown menu](#dropdown-menu)
- [Custom color](#custom-color)
- [See also](#see-also)
## Basic Usage
@@ -74,7 +73,6 @@ pushed to the right by a spacer:
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| color | [`ThemePalette`](https://github.com/angular/components/blob/master/src/material/core/common-behaviors/color.ts) | | Toolbar color. Can be changed to empty value (default), `primary`, `accent` or `warn`. |
| title | `string` | "" | Toolbar title. |
## Details
@@ -116,21 +114,6 @@ when you click the menu button:
![](../../docassets/images/adf-toolbar-04.png)
### Custom color
Besides the default color you can use 'primary', 'accent', or 'warn' values:
You might also want to change colors to follow your application's color
[theme](../../user-guide/theming.md):
For example:
![](../../docassets/images/adf-toolbar-05.png)
![](../../docassets/images/adf-toolbar-06.png)
![](../../docassets/images/adf-toolbar-07.png)
## See also
- [Toolbar Divider component](toolbar-divider.component.md)