Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(avatar): disabled state and whcm #2265

Merged
merged 5 commits into from
Nov 8, 2023
Merged

fix(avatar): disabled state and whcm #2265

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5d41134
fix(avatar): remove disabled links
jenndiaz Nov 3, 2023
104422c
docs(avatar): add disabled no link
jenndiaz Nov 6, 2023
73751b3
feat(avatar): add nolink variant to storybook
jenndiaz Nov 6, 2023
ca9bdc3
fix(avatar): disabled whcm
jenndiaz Nov 6, 2023
4d7679e
fix(avatar): address markup issue
jenndiaz Nov 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion components/avatar/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down
48 changes: 2 additions & 46 deletions components/avatar/metadata/avatar.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>

Expand All @@ -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>
Expand Down
11 changes: 11 additions & 0 deletions components/avatar/stories/avatar.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" },
Expand All @@ -51,6 +61,7 @@ export default {
image: "example-ava.png",
altText: "Avatar",
isDisabled: false,
hasLink: true,
},
parameters: {
status: {
Expand Down
15 changes: 14 additions & 1 deletion components/avatar/stories/template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -10,6 +11,7 @@ export const Template = ({
altText,
isDisabled = false,
size = "700",
hasLink,
id,
customClasses = [],
// ...globals
Expand All @@ -24,7 +26,18 @@ export const Template = ({
})}
id=${ifDefined(id)}
>
<img class="${rootClass}-image" src=${image} alt=${ifDefined(altText)} />
${when(hasLink, () =>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😍

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>
`;
};