-
Notifications
You must be signed in to change notification settings - Fork 125
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: (Platform) add tooltip to the components (#3785)
* platform tool tip adding platform tool tip adding * update the tooltip in paltform update the tooltip in paltform * adding title to the examples to add tooltip adding title to the examples to add tooltip * fixing accessability broken changes fixing accessability broken changes
- Loading branch information
1 parent
b43484b
commit 1ee2824
Showing
23 changed files
with
294 additions
and
125 deletions.
There are no files selected for viewing
46 changes: 28 additions & 18 deletions
46
...o-label/platform-info-label-example/platform-info-label-aria-label-example.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,29 @@ | ||
| <fdp-info-label [type]="'numeric'" [color]="'2'" [ariaLabel]="'Aria Label sample'">Aria Label</fdp-info-label> | ||
| <br> | ||
| <br> | ||
| <fdp-info-label | ||
| type="numeric" | ||
| color="2" | ||
| ariaLabel="Aria Label sample" | ||
| label="Aria Label" | ||
| title="Aria Label sample" | ||
| ></fdp-info-label> | ||
| <br /> | ||
| <br /> | ||
| <table id="student"> | ||
| <tr> | ||
| <th id="name">Name</th> | ||
| <th>Grade</th> | ||
| <th id="status">Status</th> | ||
| </tr> | ||
| <tr> | ||
| <td>Alfreds Futterkiste</td> | ||
| <td>B</td> | ||
| <td> | ||
| <fdp-info-label [type]="'numeric'" [color]="'2'" [ariaLabelledBy]="'name status'"> | ||
| Success | ||
| </fdp-info-label> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| <tr> | ||
| <th id="name">Name</th> | ||
| <th>Grade</th> | ||
| <th id="status">Status</th> | ||
| </tr> | ||
| <tr> | ||
| <td>Alfreds Futterkiste</td> | ||
| <td>B</td> | ||
| <td> | ||
| <fdp-info-label | ||
| type="numeric" | ||
| color="2" | ||
| ariaLabelledBy="name status" | ||
| title="Success" | ||
| label="Success" | ||
| ></fdp-info-label> | ||
| </td> | ||
| </tr> | ||
| </table> |
2 changes: 1 addition & 1 deletion
2
...latform-info-label/platform-info-label-example/platform-info-label-example.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| <fdp-info-label>Default Label</fdp-info-label> | ||
| <fdp-info-label title="Default Label" label="Default Label"></fdp-info-label> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 4 additions & 4 deletions
8
...info-label/platform-info-label-example/platform-info-label-numeric-example.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| <fdp-info-label [type]="'numeric'" [color]="'2'" style="margin-right: 20px;">6</fdp-info-label> | ||
| <fdp-info-label [type]="'numeric'" [color]="'2'" style="margin-right: 20px;">42k</fdp-info-label> | ||
| <fdp-info-label [type]="'numeric'" [color]="'2'" style="margin-right: 20px;">14.7</fdp-info-label> | ||
| <fdp-info-label [type]="'icon'" [color]="'5'" [glyph]="'hide'" style="margin-right: 20px;"></fdp-info-label> | ||
| <fdp-info-label type="numeric" color="2" label="6" style="margin-right: 20px" title="6"></fdp-info-label> | ||
| <fdp-info-label type="numeric" color="2" label="42k" style="margin-right: 20px" title="42k"></fdp-info-label> | ||
| <fdp-info-label type="numeric" color="2" label="14.7" style="margin-right: 20px" title="14.7"></fdp-info-label> | ||
| <fdp-info-label type="icon" color="5" glyph="hide" title="hide" style="margin-right: 20px"></fdp-info-label> |
12 changes: 9 additions & 3 deletions
12
...abel/platform-info-label-example/platform-info-label-text-and-icon-example.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,9 @@ | ||
| <div style="margin-top: 10px;" *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]"> | ||
| <fdp-info-label [type]="'icon'" [color]="item" [glyph]="'hide'">info label</fdp-info-label> | ||
| </div> | ||
| <div style="margin-top: 10px" *ngFor="let item of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"> | ||
| <fdp-info-label | ||
| type="icon" | ||
| [color]="item" | ||
| glyph="hide" | ||
| title="Info Label text and Icon" | ||
| label="Info label" | ||
| ></fdp-info-label> | ||
| </div> |
4 changes: 2 additions & 2 deletions
4
...rm-info-label/platform-info-label-example/platform-info-label-text-example.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| <div style="margin-top: 10px;" *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]"> | ||
| <fdp-info-label [color]="item">Info Label</fdp-info-label> | ||
| <div style="margin-top: 10px" *ngFor="let item of ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']"> | ||
| <fdp-info-label [color]="item" title="Info Label text only" label="Info Label"></fdp-info-label> | ||
| </div> |
25 changes: 20 additions & 5 deletions
25
...nt-docs/platform-object-marker/object-marker-example/object-marker-example.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,20 @@ | ||
| <fdp-object-marker glyph="add-favorite" ariaHidden="true" ariaLabel="favorite only icon"></fdp-object-marker> | ||
| <fdp-object-marker glyph="flag" ariaHidden="true" ariaLabel="Flag only icon"></fdp-object-marker> | ||
| <fdp-object-marker glyph="request" ariaHidden="true" ariaLabel="Request only icon"></fdp-object-marker> | ||
| <fdp-object-marker glyph="user-edit" ariaHidden="true" ariaLabel="Editable only icon"></fdp-object-marker> | ||
| <fdp-object-marker glyph="private" ariaHidden="true" ariaLabel="Private Icon only icon"></fdp-object-marker> | ||
| <fdp-object-marker | ||
| glyph="add-favorite" | ||
| ariaHidden="true" | ||
| ariaLabel="favorite only icon" | ||
| title="Favourite" | ||
| ></fdp-object-marker> | ||
| <fdp-object-marker glyph="flag" ariaHidden="true" ariaLabel="Flag only icon" title="Flag"></fdp-object-marker> | ||
| <fdp-object-marker glyph="request" ariaHidden="true" ariaLabel="Request only icon" title="Request"></fdp-object-marker> | ||
| <fdp-object-marker | ||
| glyph="user-edit" | ||
| ariaHidden="true" | ||
| ariaLabel="Editable only icon" | ||
| title="Editable" | ||
| ></fdp-object-marker> | ||
| <fdp-object-marker | ||
| glyph="private" | ||
| ariaHidden="true" | ||
| ariaLabel="Private Icon only icon" | ||
| title="Private" | ||
| ></fdp-object-marker> |
56 changes: 40 additions & 16 deletions
56
...rm-object-status-example/platform-object-status-clickable-and-icon-example.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,44 @@ | ||
| <fdp-object-status status="negative" glyph="status-negative" clickable="true" (click)="showObjectStatus()" | ||
| >Negative</fdp-object-status | ||
| > | ||
| <fdp-object-status status="critical" glyph="status-critical" clickable="true" (click)="showObjectStatus()" | ||
| >Critical</fdp-object-status | ||
| > | ||
| <fdp-object-status status="positive" glyph="status-positive" clickable="true" (click)="showObjectStatus()" | ||
| >Positive</fdp-object-status | ||
| > | ||
| <fdp-object-status status="informative" glyph="hint" clickable="true" (click)="showObjectStatus()" | ||
| >Informative</fdp-object-status | ||
| > | ||
| <fdp-object-status glyph="to-be-reviewed" clickable="true" (click)="showObjectStatus()">Default</fdp-object-status> | ||
| <fdp-object-status | ||
| status="negative" | ||
| glyph="status-negative" | ||
| clickable="true" | ||
| (click)="showObjectStatus()" | ||
| label="Negative" | ||
| ></fdp-object-status> | ||
| <fdp-object-status | ||
| status="critical" | ||
| glyph="status-critical" | ||
| clickable="true" | ||
| (click)="showObjectStatus()" | ||
| label="Critical" | ||
| ></fdp-object-status> | ||
| <fdp-object-status | ||
| status="positive" | ||
| glyph="status-positive" | ||
| clickable="true" | ||
| (click)="showObjectStatus()" | ||
| label="Positive" | ||
| ></fdp-object-status> | ||
| <fdp-object-status | ||
| status="informative" | ||
| glyph="hint" | ||
| clickable="true" | ||
| (click)="showObjectStatus()" | ||
| label="Informative" | ||
| ></fdp-object-status> | ||
| <fdp-object-status | ||
| glyph="to-be-reviewed" | ||
| clickable="true" | ||
| (click)="showObjectStatus()" | ||
| label="Default" | ||
| ></fdp-object-status> | ||
| <br /> | ||
| <br /> | ||
| <ng-container *ngFor="let item of [1, 2, 3, 4, 5, 6, 7, 8]"> | ||
| <fdp-object-status indicationColor="{{ item }}" clickable="true" (click)="showAlert(item)" | ||
| >Indication Color {{ item }}</fdp-object-status | ||
| > | ||
| <fdp-object-status | ||
| indicationColor="{{ item }}" | ||
| clickable="true" | ||
| (click)="showAlert(item)" | ||
| label="Indication Color {{ item }}" | ||
| ></fdp-object-status> | ||
| </ng-container> |
2 changes: 1 addition & 1 deletion
2
...bject-status/platform-object-status-example/platform-object-status-example.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| <fdp-object-status glyph="hide">Object Status</fdp-object-status> | ||
| <fdp-object-status glyph="hide" title="Default status" label="Object Status"></fdp-object-status> |
2 changes: 1 addition & 1 deletion
2
...platform-object-status-example/platform-object-status-generic-text-example.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| <ng-container *ngFor="let item of [1, 2, 3, 4, 5, 6, 7, 8]"> | ||
| <fdp-object-status indicationColor="{{ item }}">Indication Color {{ item }}</fdp-object-status> | ||
| <fdp-object-status indicationColor="{{ item }}" label="Indication Color{{ item }}"></fdp-object-status> | ||
| </ng-container> |
10 changes: 5 additions & 5 deletions
10
...us/platform-object-status-example/platform-object-status-icon-text-example.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| <fdp-object-status status="negative" glyph="status-negative">Negative</fdp-object-status> | ||
| <fdp-object-status status="critical" glyph="status-critical">Critical</fdp-object-status> | ||
| <fdp-object-status status="positive" glyph="status-positive">Positive</fdp-object-status> | ||
| <fdp-object-status status="informative" glyph="hint">Informative</fdp-object-status> | ||
| <fdp-object-status glyph="to-be-reviewed">Default</fdp-object-status> | ||
| <fdp-object-status status="negative" glyph="status-negative" label="Negative" title="Negative"></fdp-object-status> | ||
| <fdp-object-status status="critical" glyph="status-critical" label="Critical" title="Critical"></fdp-object-status> | ||
| <fdp-object-status status="positive" glyph="status-positive" label="Positive" title="Positive"></fdp-object-status> | ||
| <fdp-object-status status="informative" glyph="hint" label="Informative" title="Informative"></fdp-object-status> | ||
| <fdp-object-status glyph="to-be-reviewed" label="Default" title="Default"></fdp-object-status> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
9 changes: 6 additions & 3 deletions
9
...object-status-example/platform-object-status-inverted-generic-text-example.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,8 @@ | ||
| <ng-container *ngFor="let item of [1, 2, 3, 4, 5, 6, 7, 8]"> | ||
| <fdp-object-status indicationColor="{{ item }}" [clickable]="true" [inverted]="true" | ||
| >Indication Color {{ item }}</fdp-object-status | ||
| > | ||
| <fdp-object-status | ||
| indicationColor="{{ item }}" | ||
| [clickable]="true" | ||
| [inverted]="true" | ||
| label="Indication Color {{ item }}" | ||
| ></fdp-object-status> | ||
| </ng-container> |
Oops, something went wrong.