Skip to content

Commit

Permalink
feat(icon): anuncia depreciação
Browse files Browse the repository at this point in the history
A Lib Po Icon está depreciada e será removida na v20 do PO UI.

Fixes DTHFUI-9008

BREAKING CHANGE: Depreciação da Lib Po Icon
A Lib Po Icon está depreciada e será removida na v20 do PO UI.

Antes:

É possível usar qualquer um dos ícones da [Lib PO Icon](/guides/icons).

Depois:

Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme documentação.
  • Loading branch information
renanarosario committed Jul 11, 2024
1 parent 03befd7 commit 639639c
Show file tree
Hide file tree
Showing 19 changed files with 128 additions and 24 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,18 @@ export interface PoPageDynamicTableCustomAction {
*
* Define um ícone que será exibido ao lado esquerdo do rótulo.
*
* É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* ```
* <po-component
* [p-property]="[{ label: 'PO ICON', icon: 'po-icon-news' }]">
* </po-component>
* ```
* Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
* ```
* <po-component
* [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
* </po-component>
* ```
*
* Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma:
* ```
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,13 +57,19 @@ export interface PoPageDynamicTableCustomTableAction {
*
* Define um ícone que será exibido ao lado esquerdo do rótulo.
*
* É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* ```
* <po-component
* [p-property]="[{ label: 'PO ICON', icon: 'po-icon-news' }]">
* </po-component>
* ```
*
* Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
* ```
* <po-component
* [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
* </po-component>
* ```
* Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma:
* ```
* <po-component
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -88,10 +88,17 @@ export class PoBadgeBaseComponent {
* ```
* <po-badge [p-icon]="true"></po-badge>
* ```
* É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* ```
* <po-badge p-icon="po-icon-user"></po-badge>
* ```
*
* Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
* ```
* <po-component
* [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
* </po-component>
* ```
* Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
* ```
* <po-badge p-icon="fa fa-podcast"></po-badge>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,18 @@ export interface PoButtonGroupItem {
/**
* Ícone exibido ao lado esquerdo do label do botão.
*
* É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* ```
* buttons: Array<PoButtonGroupItem> = [
* { label: 'Button 1', action: this.action.bind(this), icon: 'po-icon-user' },
* ];
* ```
* Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
* ```
* <po-component
* [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
* </po-component>
* ```
* Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
* ```
* buttons: Array<PoButtonGroupItem> = [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -86,10 +86,16 @@ export class PoButtonBaseComponent {
* @description
* Ícone exibido ao lado esquerdo do label do botão.
*
* É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* ```
* <po-button p-icon="po-icon-user" p-label="PO button"></po-button>
* ```
* Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
* ```
* <po-component
* [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
* </po-component>
* ```
* Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
* ```
* <po-button p-icon="fa fa-podcast" p-label="PO button"></po-button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,14 @@ export interface PoDynamicFormField extends PoDynamicField {
* - Combo;
* - Password;
*
* > Veja a disponibilidade de ícones em [biblioteca de ícones](guides/icons).
* > **Deprecated v20.x.x.** Veja a disponibilidade de ícones em [biblioteca de ícones](guides/icons).
*
* Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
* ```
* <po-component
* [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
* </po-component>
* ```
*/
icon?: string | TemplateRef<void>;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,14 @@ export interface PoDynamicViewField extends PoDynamicField {
/**
* Define um ícone que será exibido ao lado do valor para o campo do tipo *tag*.
*
* > Veja os valores válidos na [biblioteca de ícones](guides/icons).
* > **Deprecated v20.x.x.** Veja os valores válidos na [biblioteca de ícones](guides/icons).
*
* Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
* ```
* <po-component
* [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
* </po-component>
* ```
*/
icon?: string;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -163,10 +163,16 @@ export abstract class PoComboBaseComponent implements ControlValueAccessor, OnIn
*
* Define o ícone que será exibido no início do campo.
*
* É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* ```
* <po-combo p-icon="po-icon-user" p-label="PO combo"></po-combo>
* ```
* Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
* ```
* <po-component
* [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
* </po-component>
* ```
* Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
* ```
* <po-combo p-icon="fa fa-podcast" p-label="PO combo"></po-combo>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -72,10 +72,16 @@ export abstract class PoInputBaseComponent implements ControlValueAccessor, Vali
*
* Define o ícone que será exibido no início do campo.
*
* É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* ```
* <po-input p-icon="po-icon-user" p-label="PO input"></po-input>
* ```
* Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
* ```
* <po-component
* [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
* </po-component>
* ```
* Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
* ```
* <po-input p-icon="fa fa-podcast" p-label="PO input"></po-input>
Expand Down
8 changes: 7 additions & 1 deletion projects/ui/src/lib/components/po-icon/po-icon.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,16 @@ export class PoIconComponent {
/**
* Define o ícone a ser exibido.
*
* É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* ```
* <po-button p-icon="po-icon-user" p-label="PO button"></po-button>
* ```
* Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
* ```
* <po-component
* [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
* </po-component>
* ```
* Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
* ```
* <po-button p-icon="fa fa-podcast" p-label="PO button"></po-button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,18 @@ export interface PoItemListAction {
*
* Define um ícone que será exibido ao lado esquerdo do rótulo.
*
* É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* ```
* <po-component
* [p-property]="[{ label: 'PO ICON', icon: 'po-icon-news' }]">
* </po-component>
* ```
*
* Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
* ```
* <po-component
* [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
* </po-component>
* ```
* Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma:
* ```
* <po-component
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,18 @@ export interface PoMenuItem {
action?: Function;

/**
* É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* ```
* <po-menu
* [p-menus]="[{ link: '/', label: 'PO ICON', icon: 'po-icon-news' }]">
* </po-menu>
* ```
*
* Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
* ```
* <po-component
* [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
* </po-component>
* ```
* Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma:
* ```
* <po-menu
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -130,10 +130,16 @@ export class PoModalBaseComponent {
* @description
* Ícone exibido ao lado esquerdo do label do titúlo da modal.
*
* É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* ```
* <po-modal p-icon="po-icon-user" p-title="PO Modal"></po-modal>
* ```
* Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
* ```
* <po-component
* [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
* </po-component>
* ```
* Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
* ```
* <po-modal p-icon="fa fa-podcast" p-title="PO Modal"></po-modal>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,18 @@ export interface PoNavbarIconAction {
/**
* Ícone exibido.
*
* É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* ```
* <po-navbar
* [p-icon-actions]="[{ link: '/', icon: 'po-icon-news' }]">
* </po-navbar>
* ```
*
* Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
* ```
* <po-component
* [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
* </po-component>
* ```
* Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma:
* ```
* <po-navbar
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,18 @@ export interface PoPopupAction {
*
* Define um ícone que será exibido ao lado esquerdo do rótulo.
*
* É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* ```
* <po-component
* [p-property]="[{ label: 'PO ICON', icon: 'po-icon-news' }]">
* </po-component>
* ```
*
* Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
* ```
* <po-component
* [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
* </po-component>
* ```
* Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma:
* ```
* <po-component
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,14 @@ export interface PoTableColumnIcon {
disabled?: Function;

/**
* É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* ```
* [ { icon: 'po-icon-plus' } ]
* ```
*
* Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
* ```
* [{ icon: 'ph ph-user' }]
* ```
* Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma:
* ```
* [ { icon: 'fas fa-plus' } ]
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,10 +75,14 @@ export interface PoTableColumnLabel {
* - <span class="po-icon po-icon-close"></span> - `danger`
* - <span class="po-icon po-icon-info"></span> - `info`
*
* Também É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* **Deprecated v20.x.x.** Também É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* ```
* <po-tag p-icon="po-icon-user" p-value="PO Tag"></po-tag>
* ```
* Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
* ```
* <po-tag p-icon="ph ph-user" p-value="PO Tag"></po-button>
* ```
* como também utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
* ```
* <po-tag p-icon="fa fa-podcast" p-value="PO Tag"></po-button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -242,10 +242,14 @@ export class PoTagBaseComponent {
* - <span class="po-icon po-icon-close"></span> - `danger`
* - <span class="po-icon po-icon-info"></span> - `info`
*
* Também É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* **Deprecated v20.x.x.** Também É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* ```
* <po-tag p-icon="po-icon-user" p-value="PO Tag"></po-tag>
* ```
* Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
* ```
* <po-tag p-icon="ph ph-user" p-value="PO Tag"></po-button>
* ```
* como também utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
* ```
* <po-tag p-icon="fa fa-podcast" p-value="PO Tag"></po-button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,14 @@ export class PoToolbarBaseComponent {
*
* Define um [ícone](/guides/icons) para a propriedade `p-actions`.
*
* É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
* ```
* <po-toolbar p-actions-icon="po-icon-user" [p-actions]="actions"></po-toolbar>
* ```
* Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
* ```
* <po-tag p-icon="ph ph-user" p-value="PO Tag"></po-button>
* ```
* Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
* ```
* <po-toolbar p-actions-icon="far fa-comment-alt" [p-actions]="actions"></po-toolbar>
Expand Down

0 comments on commit 639639c

Please sign in to comment.