Skip to content

Commit 026b03d

Browse files
jenndiazjenndiaz
authored
fix(avatar): remove link markup from disabled state, whcm fix (#2265)
* fix(avatar): remove disabled links * docs(avatar): add disabled no link * feat(avatar): add nolink variant to storybook * fix(avatar): disabled whcm * fix(avatar): address markup issue
1 parent da24515 commit 026b03d

File tree

4 files changed

+27
-48
lines changed

4 files changed

+27
-48
lines changed

‎components/avatar/index.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,6 @@ governing permissions and limitations under the License.
7272

7373
@media (forced-colors: active) {
7474
.spectrum-Avatar {
75-
--highcontrast-avatar-color-opacity-disabled: 1;
7675
--highcontrast-avatar-focus-indicator-color: CanvasText;
7776
}
7877
}

‎components/avatar/metadata/avatar.yml‎

Lines changed: 2 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ description: |
55
66
An avatar image is wrapped in a link that uses the `.spectrum-Avatar-link`
77
class by default, however, an avatar may also be used without a link.
8+
When disabled the avatar should only be used without a link.
89
SpectrumSiteSlug: https://spectrum.adobe.com/page/avatar/
910
sections:
1011
- name: Custom Properties API
@@ -32,11 +33,6 @@ examples:
3233
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
3334
</a>
3435
</div>
35-
<div class="spectrum-Avatar spectrum-Avatar--size50 is-disabled"">
36-
<a href="#" class="spectrum-Avatar-link">
37-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
38-
</a>
39-
</div>
4036
</div>
4137
<div class="spectrum-Examples-item">
4238
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">75</h4>
@@ -45,11 +41,6 @@ examples:
4541
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
4642
</a>
4743
</div>
48-
<div class="spectrum-Avatar spectrum-Avatar--size75 is-disabled"">
49-
<a href="#" class="spectrum-Avatar-link">
50-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
51-
</a>
52-
</div>
5344
</div>
5445
<div class="spectrum-Examples-item">
5546
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">100 (default)</h4>
@@ -58,11 +49,6 @@ examples:
5849
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
5950
</a>
6051
</div>
61-
<div class="spectrum-Avatar spectrum-Avatar--size100 is-disabled"">
62-
<a href="#" class="spectrum-Avatar-link">
63-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
64-
</a>
65-
</div>
6652
</div>
6753
<div class="spectrum-Examples-item">
6854
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">200</h4>
@@ -71,11 +57,6 @@ examples:
7157
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
7258
</a>
7359
</div>
74-
<div class="spectrum-Avatar spectrum-Avatar--size200 is-disabled"">
75-
<a href="#" class="spectrum-Avatar-link">
76-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
77-
</a>
78-
</div>
7960
</div>
8061
<div class="spectrum-Examples-item">
8162
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">300</h4>
@@ -84,11 +65,6 @@ examples:
8465
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
8566
</a>
8667
</div>
87-
<div class="spectrum-Avatar spectrum-Avatar--size300 is-disabled"">
88-
<a href="#" class="spectrum-Avatar-link">
89-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
90-
</a>
91-
</div>
9268
</div>
9369
<div class="spectrum-Examples-item">
9470
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">400</h4>
@@ -97,11 +73,6 @@ examples:
9773
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
9874
</a>
9975
</div>
100-
<div class="spectrum-Avatar spectrum-Avatar--size400 is-disabled"">
101-
<a href="#" class="spectrum-Avatar-link">
102-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
103-
</a>
104-
</div>
10576
</div>
10677
<div class="spectrum-Examples-item">
10778
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">500</h4>
@@ -110,11 +81,6 @@ examples:
11081
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
11182
</a>
11283
</div>
113-
<div class="spectrum-Avatar spectrum-Avatar--size500 is-disabled"">
114-
<a href="#" class="spectrum-Avatar-link">
115-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
116-
</a>
117-
</div>
11884
</div>
11985
<div class="spectrum-Examples-item">
12086
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">600</h4>
@@ -123,11 +89,6 @@ examples:
12389
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
12490
</a>
12591
</div>
126-
<div class="spectrum-Avatar spectrum-Avatar--size600 is-disabled"">
127-
<a href="#" class="spectrum-Avatar-link">
128-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
129-
</a>
130-
</div>
13192
</div>
13293
<div class="spectrum-Examples-item">
13394
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">700</h4>
@@ -136,11 +97,6 @@ examples:
13697
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
13798
</a>
13899
</div>
139-
<div class="spectrum-Avatar spectrum-Avatar--size700 is-disabled"">
140-
<a href="#" class="spectrum-Avatar-link">
141-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
142-
</a>
143-
</div>
144100
</div>
145101
</div>
146102
@@ -153,7 +109,7 @@ examples:
153109
<div class="spectrum-Avatar spectrum-Avatar--size700">
154110
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
155111
</div>
156-
<div class="spectrum-Avatar spectrum-Avatar--size700 is-disabled"">
112+
<div class="spectrum-Avatar spectrum-Avatar--size700 is-disabled">
157113
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
158114
</div>
159115
</div>

‎components/avatar/stories/avatar.stories.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,16 @@ export default {
3535
},
3636
control: "text",
3737
},
38+
hasLink: {
39+
name: "Has Link",
40+
type: { name: "boolean" },
41+
table: {
42+
type: { summary: "boolean" },
43+
category: "State",
44+
},
45+
control: "boolean",
46+
if: { arg: "isDisabled", truthy: false },
47+
},
3848
isDisabled: {
3949
name: "Disabled",
4050
type: { name: "boolean" },
@@ -51,6 +61,7 @@ export default {
5161
image: "example-ava.png",
5262
altText: "Avatar",
5363
isDisabled: false,
64+
hasLink: true,
5465
},
5566
parameters: {
5667
status: {

‎components/avatar/stories/template.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { html } from "lit";
22
import { classMap } from "lit/directives/class-map.js";
33
import { ifDefined } from "lit/directives/if-defined.js";
4+
import { when } from "lit/directives/when.js"
45

56
import "../index.css";
67

@@ -10,6 +11,7 @@ export const Template = ({
1011
altText,
1112
isDisabled = false,
1213
size = "700",
14+
hasLink,
1315
id,
1416
customClasses = [],
1517
// ...globals
@@ -24,7 +26,18 @@ export const Template = ({
2426
})}
2527
id=${ifDefined(id)}
2628
>
27-
<img class="${rootClass}-image" src=${image} alt=${ifDefined(altText)} />
29+
${when(hasLink, () =>
30+
html`
31+
<a class="spectrum-Avatar-link" href="#">
32+
<img class="${rootClass}-image" src=${image} alt=${ifDefined(altText)} />
33+
</a>
34+
`
35+
)}
36+
${when(!hasLink, () =>
37+
html`
38+
<img class="${rootClass}-image" src=${image} alt=${ifDefined(altText)} />
39+
`
40+
)}
2841
</div>
2942
`;
3043
};

0 commit comments

Comments
 (0)