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: The following CSS classes are available for theming:
| Name | Description | | Name | Description |
|------------------------|-----------------------| |-------------------------|-----------------------|
| `adf-avatar` | The host element. | | `adf-avatar` | The host element. |
| `adf-avatar__image` | The image element. | | `.adf-avatar__image` | The image element. |
| `adf-avatar__initials` | The initials element. | | `.adf-avatar__initials` | The initials element. |
### CSS Variables ### CSS Variables

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

@@ -2,8 +2,9 @@
<ng-container *ngSwitchDefault> <ng-container *ngSwitchDefault>
<button <button
mat-button mat-button
[id]="uid" class="adf-button__content"
[title]="tooltip" [attr.id]="uid"
[attr.title]="tooltip"
[color]="color" [color]="color"
[disabled]="disabled" [disabled]="disabled"
[disableRipple]="disableRipple" [disableRipple]="disableRipple"
@@ -18,8 +19,9 @@
<ng-container *ngSwitchCase="'raised'"> <ng-container *ngSwitchCase="'raised'">
<button <button
mat-raised-button mat-raised-button
[id]="uid" class="adf-button__content"
[title]="tooltip" [attr.id]="uid"
[attr.title]="tooltip"
[color]="color" [color]="color"
[disabled]="disabled" [disabled]="disabled"
[disableRipple]="disableRipple" [disableRipple]="disableRipple"
@@ -34,8 +36,9 @@
<ng-container *ngSwitchCase="'stroked'"> <ng-container *ngSwitchCase="'stroked'">
<button <button
mat-stroked-button mat-stroked-button
[id]="uid" class="adf-button__content"
[title]="tooltip" [attr.id]="uid"
[attr.title]="tooltip"
[color]="color" [color]="color"
[disabled]="disabled" [disabled]="disabled"
[disableRipple]="disableRipple" [disableRipple]="disableRipple"
@@ -50,8 +53,9 @@
<ng-container *ngSwitchCase="'flat'"> <ng-container *ngSwitchCase="'flat'">
<button <button
mat-flat-button mat-flat-button
[id]="uid" class="adf-button__content"
[title]="tooltip" [attr.id]="uid"
[attr.title]="tooltip"
[color]="color" [color]="color"
[disabled]="disabled" [disabled]="disabled"
[disableRipple]="disableRipple" [disableRipple]="disableRipple"
@@ -66,8 +70,9 @@
<ng-container *ngSwitchCase="'icon'"> <ng-container *ngSwitchCase="'icon'">
<button <button
mat-icon-button mat-icon-button
[id]="uid" class="adf-button__content"
[title]="tooltip" [attr.id]="uid"
[attr.title]="tooltip"
[color]="color" [color]="color"
[disabled]="disabled" [disabled]="disabled"
[disableRipple]="disableRipple" [disableRipple]="disableRipple"
@@ -75,14 +80,15 @@
[attr.aria-hidden]="ariaHidden" [attr.aria-hidden]="ariaHidden"
[attr.data-automation-id]="testId" [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> <ng-container [ngTemplateOutlet]="buttonContent"></ng-container>
</button> </button>
</ng-container> </ng-container>
<ng-container *ngSwitchCase="'fab'"> <ng-container *ngSwitchCase="'fab'">
<button <button
mat-fab mat-fab
class="adf-button__content"
[id]="uid" [id]="uid"
[title]="tooltip" [title]="tooltip"
[color]="color" [color]="color"
@@ -92,7 +98,7 @@
[attr.aria-hidden]="ariaHidden" [attr.aria-hidden]="ariaHidden"
[attr.data-automation-id]="testId" [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> <ng-container *ngIf="!icon" [ngTemplateOutlet]="buttonContent"></ng-container>
</button> </button>
</ng-container> </ng-container>
@@ -100,6 +106,7 @@
<ng-container *ngSwitchCase="'mini-fab'"> <ng-container *ngSwitchCase="'mini-fab'">
<button <button
mat-mini-fab mat-mini-fab
class="adf-button__content"
[id]="uid" [id]="uid"
[title]="tooltip" [title]="tooltip"
[color]="color" [color]="color"
@@ -109,7 +116,7 @@
[attr.aria-hidden]="ariaHidden" [attr.aria-hidden]="ariaHidden"
[attr.data-automation-id]="testId" [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> <ng-container *ngIf="!icon" [ngTemplateOutlet]="buttonContent"></ng-container>
</button> </button>
</ng-container> </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 | | Name | Description |
|---------|-------------------------------------| |---------|-------------------------------------|
| `click` | Emitted when the button is clicked. | | `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 { adf-button {
// custom styles // 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. * 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 { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { ThemePalette } from '@angular/material/core'; import { ThemePalette } from '@angular/material/core';
@@ -43,4 +43,8 @@ export class ButtonComponent {
@Input() ariaLabel?: string; @Input() ariaLabel?: string;
@Input() ariaHidden?: boolean; @Input() ariaHidden?: boolean;
@Input() testId?: string; @Input() testId?: string;
@HostBinding('style.--adf-button-icon-size')
@Input()
iconSize = getComputedStyle(document.documentElement).getPropertyValue('--adf-button-icon-size');
} }