inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

ACS-8109: button component fixes (#9938)

Browse Source
This commit is contained in:
Denys Vuika
2024-07-22 09:40:24 -04:00
committed by GitHub
parent f5930a0f67
commit e45a2c60c0
5 changed files with 60 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
lib/core/src/lib/avatar/avatar.component.md
View File

@@ -58,11 +58,11 @@ import { AvatarComponent } from '@alfresco/adf-core';
The following CSS classes are available for theming:
| Name | Description |
|------------------------|-----------------------|
| `adf-avatar` | The host element. |
| `adf-avatar__image` | The image element. |
| `adf-avatar__initials` | The initials element. |
| Name | Description |
|-------------------------|-----------------------|
| `adf-avatar` | The host element. |
| `.adf-avatar__image` | The image element. |
| `.adf-avatar__initials` | The initials element. |
### CSS Variables

35
lib/core/src/lib/button/button.component.html
View File

@@ -2,8 +2,9 @@
<ng-container *ngSwitchDefault>
<button
mat-button
[id]="uid"
[title]="tooltip"
class="adf-button__content"
[attr.id]="uid"
[attr.title]="tooltip"
[color]="color"
[disabled]="disabled"
[disableRipple]="disableRipple"
@@ -18,8 +19,9 @@
<ng-container *ngSwitchCase="'raised'">
<button
mat-raised-button
[id]="uid"
[title]="tooltip"
class="adf-button__content"
[attr.id]="uid"
[attr.title]="tooltip"
[color]="color"
[disabled]="disabled"
[disableRipple]="disableRipple"
@@ -34,8 +36,9 @@
<ng-container *ngSwitchCase="'stroked'">
<button
mat-stroked-button
[id]="uid"
[title]="tooltip"
class="adf-button__content"
[attr.id]="uid"
[attr.title]="tooltip"
[color]="color"
[disabled]="disabled"
[disableRipple]="disableRipple"
@@ -50,8 +53,9 @@
<ng-container *ngSwitchCase="'flat'">
<button
mat-flat-button
[id]="uid"
[title]="tooltip"
class="adf-button__content"
[attr.id]="uid"
[attr.title]="tooltip"
[color]="color"
[disabled]="disabled"
[disableRipple]="disableRipple"
@@ -66,8 +70,9 @@
<ng-container *ngSwitchCase="'icon'">
<button
mat-icon-button
[id]="uid"
[title]="tooltip"
class="adf-button__content"
[attr.id]="uid"
[attr.title]="tooltip"
[color]="color"
[disabled]="disabled"
[disableRipple]="disableRipple"
@@ -75,14 +80,15 @@
[attr.aria-hidden]="ariaHidden"
[attr.data-automation-id]="testId"
>
<mat-icon *ngIf="icon">{{ icon }}</mat-icon>
<ng-container *ngIf="!icon" [ngTemplateOutlet]="buttonContent"></ng-container>
<mat-icon *ngIf="icon" class="adf-button__icon">{{ icon }}</mat-icon>
<ng-container [ngTemplateOutlet]="buttonContent"></ng-container>
</button>
</ng-container>
<ng-container *ngSwitchCase="'fab'">
<button
mat-fab
class="adf-button__content"
[id]="uid"
[title]="tooltip"
[color]="color"
@@ -92,7 +98,7 @@
[attr.aria-hidden]="ariaHidden"
[attr.data-automation-id]="testId"
>
<mat-icon *ngIf="icon">{{ icon }}</mat-icon>
<mat-icon *ngIf="icon" class="adf-button__icon">{{ icon }}</mat-icon>
<ng-container *ngIf="!icon" [ngTemplateOutlet]="buttonContent"></ng-container>
</button>
</ng-container>
@@ -100,6 +106,7 @@
<ng-container *ngSwitchCase="'mini-fab'">
<button
mat-mini-fab
class="adf-button__content"
[id]="uid"
[title]="tooltip"
[color]="color"
@@ -109,7 +116,7 @@
[attr.aria-hidden]="ariaHidden"
[attr.data-automation-id]="testId"
>
<mat-icon *ngIf="icon">{{ icon }}</mat-icon>
<mat-icon *ngIf="icon" class="adf-button__icon">{{ icon }}</mat-icon>
<ng-container *ngIf="!icon" [ngTemplateOutlet]="buttonContent"></ng-container>
</button>
</ng-container>

19
lib/core/src/lib/button/button.component.md
View File

@@ -80,3 +80,22 @@ The button component has been designed to be accessible. The following attribute
| Name | Description |
|---------|-------------------------------------|
| `click` | Emitted when the button is clicked. |
## Theming
The following CSS classes are available for theming:
| Name | Description |
|------------------------|-----------------------------|
| `adf-button` | The host element. |
| `.adf-button__content` | The button content element. |
| `.adf-button__icon` | The icon element. |
### CSS Variables
The following CSS variables are available for theming:
| Name | Default | Description |
|--------------------------|---------|---------------|
| `--adf-button-icon-size` | `24px` | The icon size |

10
lib/core/src/lib/button/button.component.scss
View File

@@ -1,3 +1,13 @@
adf-button {
// custom styles
.adf-button__content {
// custom styles
}
.adf-button__icon {
font-size: var(--adf-button-icon-size, 24px);
width: var(--adf-button-icon-size, 24px);
height: var(--adf-button-icon-size, 24px);
}
}

6
lib/core/src/lib/button/button.component.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Component, Input, ViewEncapsulation } from '@angular/core';
import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { ThemePalette } from '@angular/material/core';
@@ -43,4 +43,8 @@ export class ButtonComponent {
@Input() ariaLabel?: string;
@Input() ariaHidden?: boolean;
@Input() testId?: string;
@HostBinding('style.--adf-button-icon-size')
@Input()
iconSize = getComputedStyle(document.documentElement).getPropertyValue('--adf-button-icon-size');
}