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
adobe · Nov 8, 2023 · 026b03d · 026b03d
1 parent da24515
commit 026b03d
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 48 deletions.
diff --git a/components/avatar/index.css b/components/avatar/index.css
@@ -72,7 +72,6 @@ governing permissions and limitations under the License.
 
 @media (forced-colors: active) {
  .spectrum-Avatar {
- --highcontrast-avatar-color-opacity-disabled: 1;
  --highcontrast-avatar-focus-indicator-color: CanvasText;
  }
 }

diff --git a/components/avatar/metadata/avatar.yml b/components/avatar/metadata/avatar.yml
@@ -5,6 +5,7 @@ description: |
 
  An avatar image is wrapped in a link that uses the `.spectrum-Avatar-link`
  class by default, however, an avatar may also be used without a link.
+ When disabled the avatar should only be used without a link.
 SpectrumSiteSlug: https://spectrum.adobe.com/page/avatar/
 sections:
  - name: Custom Properties API
@@ -32,11 +33,6 @@ examples:
  <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
  </a>
  </div>
- <div class="spectrum-Avatar spectrum-Avatar--size50 is-disabled"">
- <a href="#" class="spectrum-Avatar-link">
- <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
- </a>
- </div>
  </div>
  <div class="spectrum-Examples-item">
  <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">75</h4>
@@ -45,11 +41,6 @@ examples:
  <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
  </a>
  </div>
- <div class="spectrum-Avatar spectrum-Avatar--size75 is-disabled"">
- <a href="#" class="spectrum-Avatar-link">
- <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
- </a>
- </div>
  </div>
  <div class="spectrum-Examples-item">
  <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">100 (default)</h4>
@@ -58,11 +49,6 @@ examples:
  <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
  </a>
  </div>
- <div class="spectrum-Avatar spectrum-Avatar--size100 is-disabled"">
- <a href="#" class="spectrum-Avatar-link">
- <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
- </a>
- </div>
  </div>
  <div class="spectrum-Examples-item">
  <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">200</h4>
@@ -71,11 +57,6 @@ examples:
  <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
  </a>
  </div>
- <div class="spectrum-Avatar spectrum-Avatar--size200 is-disabled"">
- <a href="#" class="spectrum-Avatar-link">
- <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
- </a>
- </div>
  </div>
  <div class="spectrum-Examples-item">
  <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">300</h4>
@@ -84,11 +65,6 @@ examples:
  <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
  </a>
  </div>
- <div class="spectrum-Avatar spectrum-Avatar--size300 is-disabled"">
- <a href="#" class="spectrum-Avatar-link">
- <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
- </a>
- </div>
  </div>
  <div class="spectrum-Examples-item">
  <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">400</h4>
@@ -97,11 +73,6 @@ examples:
  <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
  </a>
  </div>
- <div class="spectrum-Avatar spectrum-Avatar--size400 is-disabled"">
- <a href="#" class="spectrum-Avatar-link">
- <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
- </a>
- </div>
  </div>
  <div class="spectrum-Examples-item">
  <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">500</h4>
@@ -110,11 +81,6 @@ examples:
  <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
  </a>
  </div>
- <div class="spectrum-Avatar spectrum-Avatar--size500 is-disabled"">
- <a href="#" class="spectrum-Avatar-link">
- <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
- </a>
- </div>
  </div>
  <div class="spectrum-Examples-item">
  <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">600</h4>
@@ -123,11 +89,6 @@ examples:
  <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
  </a>
  </div>
- <div class="spectrum-Avatar spectrum-Avatar--size600 is-disabled"">
- <a href="#" class="spectrum-Avatar-link">
- <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
- </a>
- </div>
  </div>
  <div class="spectrum-Examples-item">
  <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">700</h4>
@@ -136,11 +97,6 @@ examples:
  <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
  </a>
  </div>
- <div class="spectrum-Avatar spectrum-Avatar--size700 is-disabled"">
- <a href="#" class="spectrum-Avatar-link">
- <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
- </a>
- </div>
  </div>
  </div>
 
@@ -153,7 +109,7 @@ examples:
  <div class="spectrum-Avatar spectrum-Avatar--size700">
  <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
  </div>
- <div class="spectrum-Avatar spectrum-Avatar--size700 is-disabled"">
+ <div class="spectrum-Avatar spectrum-Avatar--size700 is-disabled">
  <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
  </div>
  </div>

diff --git a/components/avatar/stories/avatar.stories.js b/components/avatar/stories/avatar.stories.js
@@ -35,6 +35,16 @@ export default {
  },
  control: "text",
  },
+ hasLink: {
+ name: "Has Link",
+ type: { name: "boolean" },
+ table: {
+ type: { summary: "boolean" },
+ category: "State",
+ },
+ control: "boolean",
+ if: { arg: "isDisabled", truthy: false },
+ },
  isDisabled: {
  name: "Disabled",
  type: { name: "boolean" },
@@ -51,6 +61,7 @@ export default {
  image: "example-ava.png",
  altText: "Avatar",
  isDisabled: false,
+ hasLink: true,
  },
  parameters: {
  status: {

diff --git a/components/avatar/stories/template.js b/components/avatar/stories/template.js
@@ -1,6 +1,7 @@
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { when } from "lit/directives/when.js"
 
 import "../index.css";
 
@@ -10,6 +11,7 @@ export const Template = ({
  altText,
  isDisabled = false,
  size = "700",
+ hasLink,
  id,
  customClasses = [],
  // ...globals
@@ -24,7 +26,18 @@ export const Template = ({
  })}
  id=${ifDefined(id)}
  >
- <img class="${rootClass}-image" src=${image} alt=${ifDefined(altText)} />
+ ${when(hasLink, () =>
+ html`
+ <a class="spectrum-Avatar-link" href="#">
+ <img class="${rootClass}-image" src=${image} alt=${ifDefined(altText)} />
+ </a>
+ `
+ )}
+ ${when(!hasLink, () =>
+ html`
+ <img class="${rootClass}-image" src=${image} alt=${ifDefined(altText)} />
+ `
+ )}
  </div>
  `;
 };