Skip to content

Commit 832f6e7

Browse files
author
Ryan A. Johnson
committed
refactor(Links): deprecate old CSS class
* update documentation for Links * update visreg snapshots DEPRECATED: `a[href].disabled` in favor of `a[href][disabled]`
1 parent 1a4b00c commit 832f6e7

File tree

4 files changed

+21
-77
lines changed

4 files changed

+21
-77
lines changed

‎docs/components/typography/index.html‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -143,22 +143,26 @@ <h2 id="links">Links</h2>
143143
<p>
144144
Links should be used to refer a user to a resource or location.
145145
</p>
146-
<div class="hxAlert">
147-
<div class="hxAlert__icon">
148-
<hx-icon type="info-circle"></hx-icon>
149-
</div>
150-
<div class="hxAlert__text">
151-
<span class="hxAlert__status">Note</span>
152-
Buttons are better suited to initiate in-page actions.
153-
</div>
154-
</div>
146+
<hx-alert static type="info" status="note">
147+
Buttons are better suited to initiate in-page actions.
148+
</hx-alert>
149+
<hx-alert static type="warning" status="warning">
150+
Adding the <code>disabled</code> attribute to a link <b>will not</b>
151+
prevent user interaction. Consider using a <code>&lt;button&gt;</code>
152+
instead.
153+
</hx-alert>
155154

156155
<div class="demo" data-visreg="typography-link">
157156
<ul>
158157
<li><a href="#">Normal Link</a></li>
159158
<li><a href="#" class="pseudo-active">Pressed Link</a></li>
159+
<li><a href="#" disabled>"Disabled" Link</a></li>
160160
</ul>
161161
</div>
162+
{% code 'html' %}
163+
<a href="#">Normal Link</a>
164+
<a href="#" disabled>"Disabled" Link</a>
165+
{% endcode %}
162166
</section>
163167

164168
<section><!-- Inline Code -->

‎src/helix-ui/styles/base/links.less‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,13 @@ a[href] {
1010
text-decoration: none;
1111
}
1212

13-
// TODO: Is this needed?
14-
&.disabled {
13+
&[disabled] {
1514
color: @gray-800;
1615
pointer-events: none;
1716
}
1817
}
18+
19+
// DEPRECATED: remove in v1.0.0
20+
a[href].disabled {
21+
&:extend(a[href][disabled]);
22+
}

‎test/regression/generateRegressionTests.js.md‎

Lines changed: 2 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,6 @@ The actual snapshot is saved in `generateRegressionTests.js.snap`.
44

55
Generated by [AVA](https://ava.li).
66

7-
## chrome auto-generated regression case: components/buttons
8-
9-
> Snapshot 1
10-
11-
`<section data-visreg="button-states">␊
12-
<h2 id="button-states">Button States</h2>␊
13-
<table class="hxTable">␊
14-
<tbody>␊
15-
<tr>␊
16-
<td>Default</td>␊
17-
<td><button class="hxBtn">Normal</button></td>␊
18-
<td><button class="hxBtn pseudo-hover">Hover</button></td>␊
19-
<td><button class="hxBtn pseudo-active">Pressed</button></td>␊
20-
<td><button class="hxBtn" disabled="">Disabled</button></td>␊
21-
</tr>␊
22-
<tr>␊
23-
<td>Primary</td>␊
24-
<td><button class="hxBtn hxPrimary">Normal</button></td>␊
25-
<td><button class="hxBtn hxPrimary pseudo-hover">Hover</button></td>␊
26-
<td><button class="hxBtn hxPrimary pseudo-active">Pressed</button></td>␊
27-
<td><button class="hxBtn hxPrimary" disabled="">Disabled</button></td>␊
28-
</tr>␊
29-
<tr>␊
30-
<td>Link</td>␊
31-
<td><button class="hxBtn hxLink">Normal</button></td>␊
32-
<td><button class="hxBtn hxLink pseudo-hover">Hover</button></td>␊
33-
<td><button class="hxBtn hxLink pseudo-active">Pressed</button></td>␊
34-
<td><button class="hxBtn hxLink" disabled="">Disabled</button></td>␊
35-
</tr>␊
36-
</tbody>␊
37-
</table>␊
38-
</section>`
39-
407
## chrome auto-generated regression case: components/checkboxes
418

429
> Snapshot 1
@@ -280,6 +247,7 @@ Generated by [AVA](https://ava.li).
280247
<ul>␊
281248
<li><a href="#">Normal Link</a></li>␊
282249
<li><a href="#" class="pseudo-active">Pressed Link</a></li>␊
250+
<li><a href="#" disabled="">"Disabled" Link</a></li>␊
283251
</ul>␊
284252
</div>`
285253

@@ -498,39 +466,6 @@ Generated by [AVA](https://ava.li).
498466
<span class="hljs-bullet">2. </span>two thing <span class="hljs-code">`i can write code`</span>, and <span class="hljs-code">`more`</span> wipee!␊
499467
</code></pre> </figure>`
500468

501-
## firefox auto-generated regression case: components/buttons
502-
503-
> Snapshot 1
504-
505-
`<section data-visreg="button-states">␊
506-
<h2 id="button-states">Button States</h2>␊
507-
<table class="hxTable">␊
508-
<tbody>␊
509-
<tr>␊
510-
<td>Default</td>␊
511-
<td><button class="hxBtn">Normal</button></td>␊
512-
<td><button class="hxBtn pseudo-hover">Hover</button></td>␊
513-
<td><button class="hxBtn pseudo-active">Pressed</button></td>␊
514-
<td><button class="hxBtn" disabled="">Disabled</button></td>␊
515-
</tr>␊
516-
<tr>␊
517-
<td>Primary</td>␊
518-
<td><button class="hxBtn hxPrimary">Normal</button></td>␊
519-
<td><button class="hxBtn hxPrimary pseudo-hover">Hover</button></td>␊
520-
<td><button class="hxBtn hxPrimary pseudo-active">Pressed</button></td>␊
521-
<td><button class="hxBtn hxPrimary" disabled="">Disabled</button></td>␊
522-
</tr>␊
523-
<tr>␊
524-
<td>Link</td>␊
525-
<td><button class="hxBtn hxLink">Normal</button></td>␊
526-
<td><button class="hxBtn hxLink pseudo-hover">Hover</button></td>␊
527-
<td><button class="hxBtn hxLink pseudo-active">Pressed</button></td>␊
528-
<td><button class="hxBtn hxLink" disabled="">Disabled</button></td>␊
529-
</tr>␊
530-
</tbody>␊
531-
</table>␊
532-
</section>`
533-
534469
## firefox auto-generated regression case: components/checkboxes
535470

536471
> Snapshot 1
@@ -774,6 +709,7 @@ Generated by [AVA](https://ava.li).
774709
<ul>␊
775710
<li><a href="#">Normal Link</a></li>␊
776711
<li><a href="#" class="pseudo-active">Pressed Link</a></li>␊
712+
<li><a href="#" disabled="">"Disabled" Link</a></li>␊
777713
</ul>␊
778714
</div>`
779715

‎test/regression/generateRegressionTests.js.snap‎

-195 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)