chore(tooltip): improve examples; use on demo app #11272
Conversation
googlebot
added
the
cla: yes
| @@ -0,0 +1,11 @@ | |||
| button[matTooltip] { | |||
There was a problem hiding this comment.
Make this an .example-... class. The goal to to ensure that people inspecting the elements know what the real styles are vs. the example styles.
| margin-top: 16px; | ||
| } | ||
|
|
||
| ::ng-deep .example-tooltip-red { |
| <mat-form-field> | ||
| <mat-select placeholder="Tooltip position" [formControl]="position"> | ||
| <mat-option *ngFor="let positionOption of positionOptions" [value]="positionOption"> | ||
| {{ positionOption }} |
| @@ -0,0 +1,7 @@ | |||
| button { | |||
There was a problem hiding this comment.
Use a .example-... class
(here and elsewhere)
stylelint-config.json
Outdated
| @@ -78,7 +78,9 @@ | |||
| "selector-pseudo-class-parentheses-space-inside": "never", | |||
| "selector-pseudo-element-case": "lower", | |||
| "selector-pseudo-element-colon-notation": "double", | |||
| "selector-pseudo-element-no-unknown": true, | |||
| "selector-pseudo-class-no-unknown": [true, { | |||
| "ignorePseudoClasses": ["ng-deep", "label-shown"] | |||
There was a problem hiding this comment.
Dunno why but :label-shown in the form-field was failing lint if I added ng-deep as an exception
| matTooltip="Info about the action" | ||
| [matTooltipClass]="tooltipClass"> | ||
| Action | ||
| </button> |
There was a problem hiding this comment.
For the buttons in these examples, it would be good to add an aria-label that explains what is being demonstrated therein.
| My tooltip waits one second to show | ||
| </button> | ||
| <mat-form-field> | ||
| <input matInput placeholder="Show delay (milliseconds)" |
There was a problem hiding this comment.
These inputs need an aria-label that expands on "Show delay"
andrewseguin
force-pushed
the
demo-tooltip-examples
branch
from
f5af8e4 to
7599590
Compare
andrewseguin
force-pushed
the
demo-tooltip-examples
branch
from
7599590 to
b989ec0
Compare
|
All set - added aria-labels to the buttons |
jelbourn
added
pr: lgtm
action: merge
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
No description provided.