feat(avatar): add clickable behavior #1176

juliodialpad · 2023-09-13T21:28:10Z

Feat (Avatar): Add clickable behavior

🛠️ Type Of Change

Fix
Feature
Refactoring
Documentation

📖 Description

Added clickable property to dt-avatar to enable the possibility to focus and click on avatars.
Removed the ability to select the text within the avatar.
Added clickable avatar examples to variants.
Added documentation
Added tests

💡 Context

Callbox component needs to emit an event when clicking on the avatar, also in this PR a clickable avatar was needed and a custom implementation was made, so I thought that maybe a clickable avatar is a good feature to have.

📝 Checklist

I have reviewed my changes
I have added tests
I have added all relevant documentation
I have validated components with a screen reader
I have validated components keyboard navigation
I have considered the performance impact of my change
I have checked that my change did not significantly increase bundle size
I am exporting any new components or constants in the index.js in the component directory
I am exporting any new components or constants in the index.js in the root

📷 Screenshots / GIFs

github-actions · 2023-09-13T21:28:25Z

Thanks for contributing to Dialtone Vue! Please read below for some important info regarding Vue 3 compatibility.

Currently we need to maintain two branches in Dialtone Vue, one for Vue 2, one for Vue 3.

This means you must create two PRs for every feature change you make. One into staging and one into staging-vue3.

Many times the change you have made in Vue 2 will be identical to the change you need to make in Vue 3. To make this easier we have made a script that can copy your changes from this branch to a new branch off of staging-vue3 suffixed with -vue3.

run ./copy_pr_vue3.sh from the root dialtone-vue directory.

Once the new branch is created, you will need to look at your code to make sure it still makes sense and test that your changes all work in vue 3. If everything is good you can push it and create a PR into staging-vue3.

It is a required check for every PR to have a corresponding branch called yourbranch-vue3 so that we do not forget to do it. In the special case that you need to make a change to vue2 without making it in vue3, you can set the label vue2-only on this PR.

I got "commit SHA is a merge but no -m option was given."

This happens if there are merge commits in your branch. It's no problem, you can simply skip them with git cherry-pick --skip. We don't want to copy merge commits to the Vue 3 branch.

What if I make more changes to my vue 2 branch after running ./copy_pr_vue3.sh?

You can copy these to the existing -vue3 branch by running the script with a git SHA param like so:

./copy_pr_vue3.sh 2a78db7

where 2a78db7 is the last commit from your branch that was copied to the other branch (all commits after this will be copied)

If it's just one or two commits, you may prefer to just manually use git cherry-pick which will work fine as well.

What if I get a conflict?

It's possible to get a conflict when running copy_pr_vue3.sh as there are differences in Vue 2 and Vue 3 code. If this happens you can manually fix the conflict, commit it and do git cherry-pick --continue.

github-actions · 2023-09-13T21:30:30Z

✔️ Deploy Preview ready!
😎 Browse the preview: https://vue.dialpad.design/deploy-previews/pr-1176/
🔨 If you experience an SSL issue then wait 2 minutes and try again.

iropolo · 2023-09-13T22:11:29Z

a11y test fail on

[TEST] FAIL browser: chromium components/avatar/avatar.stories.js

[TEST] │ 0 │ 'aria-command-name' │ 'serious' │ 'Ensures every ARIA button, link and menuitem has an accessible name' │ 1 │

iropolo · 2023-09-13T22:30:43Z

Cool, looks good, I would revert the update in recipes/list_items/contact_info/contact_info.vue component here #1164.
And apply this update.

This is my suggested change to recipes/list_items/contact_info/contact_info.vue component:
As you will see, Im reverting
<button> tag to <div>
and
<span> to <div>

Also it would probably necessary to remove avatarAriaLabel prop.

    <template #left>
      **<div**
        v-if="showAvatar"
        class="d-ps-relative d-bgc-transparent d-baw0 d-c-pointer"
        data-qa="contact-info-left"
      >
        **<div**
          v-if="avatarList"
          class="dt-contact-info--avatars d-mrn4 d-d-flex d-fd-row"
        >
          <dt-avatar
            v-for="(avatar, index) in avatarList"
            :key="index"
            **:clickable="true"**
            :size="avatarSize"
            :seed="avatar.seed"
            :full-name="avatar.fullName"
            :image-src="avatar.src"
            :icon-name="avatarIcon"
            :overlay-icon="avatar.icon"
            :overlay-text="avatar.text"
            :avatar-class="[{ 'd-mln24': index > 0, 'd-bc-brand': !!avatar.halo }]"
            **@click="avatarClick"**
          />
        **</div>**
        <dt-avatar
          v-else
          **:clickable="true"**
          :size="avatarSize"
          :full-name="avatarFullName"
          :image-src="avatarSrc"
          :icon-name="avatarIcon"
          :seed="avatarSeed"
          :presence="presence"
          **@click="avatarClick"**
        />
      **</div>**
    </template>

This is the final result:

Ping @tonydialpad here to check out this suggested change.

iropolo

Pre-approving it but need to fix the a11y issue.

Looks good improvement for avatar component, feel free to update recipes/list_items/contact_info/contact_info.vue component here, or create a ticket to update it later.

It will be necessary to update also the vue3 version of it, but is still pending 1177

braddialpad · 2023-09-13T22:54:52Z

components/avatar/avatar.vue

+        },
+      ]"
+      :tabindex="clickable ? 0 : -1"
+      :role="clickable ? 'button' : 'presentation'"


Can we change the actual element instead of just setting role? Can we have some sort of indicator on hover to show it is clickable? Maybe overlay it with a dark color with some opacity?

What element should I use instead, a button?
Maybe I can show the focus ring on hover too, I was using cursor: pointer to show it is clickable on hover but maybe the opacity would work better.

@francisrupert @fede-dp please help us on this decision.

Yeah it should be button I think

braddialpad · 2023-09-13T22:56:02Z

components/avatar/avatar.vue

+        keydown: (e) => {
+          if (!['Space', 'Enter'].includes(e.code)) return;
+          e.preventDefault();
+          this.$emit('click', e);
+        },


I think we wouldn't have to worry about all this if the element was an actual button

I'll try with a button

github-actions · 2023-09-15T16:34:48Z

✔️ Deploy Preview ready!
😎 Browse the preview: https://vue.dialpad.design/deploy-previews/pr-1176/
🔨 If you experience an SSL issue then wait 2 minutes and try again.

francisrupert · 2023-09-15T17:36:53Z

@juliodialpad,

Sorry this got buried in my notifications.

Yes, button.

.d-avatar--clickable:hover {
  border: var(--dt-size-border-100) solid var(--dt-color-border-default);
}

.d-avatar--clickable:active {
  border-color: var(--dt-color-border-moderate);
}

I don't mind the .98 scaling for :active. Stick with that for now, and I can always change it after seeing it in play.

github-actions · 2023-09-15T18:20:06Z

✔️ Deploy Preview ready!
😎 Browse the preview: https://vue.dialpad.design/deploy-previews/pr-1176/
🔨 If you experience an SSL issue then wait 2 minutes and try again.

juliodialpad · 2023-09-15T18:56:24Z

a11y test fail on

[TEST] FAIL browser: chromium components/avatar/avatar.stories.js

[TEST] │ 0 │ 'aria-command-name' │ 'serious' │ 'Ensures every ARIA button, link and menuitem has an accessible name' │ 1 │

Fixed, good catch!

juliodialpad · 2023-09-15T18:57:02Z

Cool, looks good, I would revert the update in recipes/list_items/contact_info/contact_info.vue component here #1164. And apply this update.

This is my suggested change to recipes/list_items/contact_info/contact_info.vue component: As you will see, Im reverting <button> tag to <div> and <span> to <div>

Also it would probably necessary to remove avatarAriaLabel prop.

    <template #left>
      **<div**
        v-if="showAvatar"
        class="d-ps-relative d-bgc-transparent d-baw0 d-c-pointer"
        data-qa="contact-info-left"
      >
        **<div**
          v-if="avatarList"
          class="dt-contact-info--avatars d-mrn4 d-d-flex d-fd-row"
        >
          <dt-avatar
            v-for="(avatar, index) in avatarList"
            :key="index"
            **:clickable="true"**
            :size="avatarSize"
            :seed="avatar.seed"
            :full-name="avatar.fullName"
            :image-src="avatar.src"
            :icon-name="avatarIcon"
            :overlay-icon="avatar.icon"
            :overlay-text="avatar.text"
            :avatar-class="[{ 'd-mln24': index > 0, 'd-bc-brand': !!avatar.halo }]"
            **@click="avatarClick"**
          />
        **</div>**
        <dt-avatar
          v-else
          **:clickable="true"**
          :size="avatarSize"
          :full-name="avatarFullName"
          :image-src="avatarSrc"
          :icon-name="avatarIcon"
          :seed="avatarSeed"
          :presence="presence"
          **@click="avatarClick"**
        />
      **</div>**
    </template>

This is the final result:

Ping @tonydialpad here to check out this suggested change.

Created a ticket to solve this later: https://dialpad.atlassian.net/browse/DLT-1230

github-actions · 2023-09-15T18:57:30Z

✔️ Deploy Preview ready!
😎 Browse the preview: https://vue.dialpad.design/deploy-previews/pr-1176/
🔨 If you experience an SSL issue then wait 2 minutes and try again.

juliodialpad · 2023-09-15T19:16:46Z

Updated please re-review.

github-actions · 2023-09-15T19:18:05Z

✔️ Deploy Preview ready!
😎 Browse the preview: https://vue.dialpad.design/deploy-previews/pr-1176/
🔨 If you experience an SSL issue then wait 2 minutes and try again.

braddialpad

Great thanks!

The button moves the slightest amount when enabling clickable due to the scale change. Not really a big deal but could maybe cause a misalignment issue in some cases?

juliodialpad · 2023-09-15T23:39:11Z

Great thanks!

The button moves the slightest amount when enabling clickable due to the scale change. Not really a big deal but could maybe cause a misalignment issue in some cases?

Yeah, it might, I have two options here:

Making the border inset or adding the border to the non-clickable version which might cause a misalignment too.

Any advice here? @francisrupert

iropolo

Great, thanks!!

github-actions · 2023-09-18T21:46:25Z

✔️ Deploy Preview ready!
😎 Browse the preview: https://vue.dialpad.design/deploy-previews/pr-1176/
🔨 If you experience an SSL issue then wait 2 minutes and try again.

juliodialpad · 2023-09-19T01:02:46Z

Added the border by default to the clickable avatar and just change the color on :hover and :active, this will increase the size of avatars which I don't think it's to much of an issue because this way the size will not change.

I was thinking on adding it to all the avatar, but that'd increase the size of all the avatars across the app and that'd create a lot of issues with QA

github-actions · 2023-09-19T01:05:27Z

✔️ Deploy Preview ready!
😎 Browse the preview: https://vue.dialpad.design/deploy-previews/pr-1176/
🔨 If you experience an SSL issue then wait 2 minutes and try again.

# [2.97.0](v2.96.0...v2.97.0) (2023-09-20) ### Bug Fixes * add virtual "prompt" for visual tests on PR ([#1192](#1192)) ([4a41d02](4a41d02)) * **Avatar:** change avatar seed algorithm to sync with android ([#1182](#1182)) ([53a09f3](53a09f3)) * **Contact Info, Feed Item Row, Item Layout:** alignment issues ([#1186](#1186)) ([bdaa355](bdaa355)) * feed pill not exported ([#1180](#1180)) ([792b838](792b838)) * **Item Layout:** selected slot alignment ([#1194](#1194)) ([09c37c4](09c37c4)) * **Recipe Callbar Button With Popover:** change event name and sync open state ([#1183](#1183)) ([b91dc02](b91dc02)) ### Features * **Avatar:** add clickable behavior ([#1176](#1176)) ([2b80018](2b80018)) * **Callbox:** add clickable behavior ([#1196](#1196)) ([bf5ac2b](bf5ac2b))

github-actions · 2023-09-20T20:28:42Z

🎉 This PR is included in version 2.97.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

feat(avatar): add clickable behavior

320fdfe

juliodialpad requested review from francisrupert and fede-dp September 13, 2023 21:28

juliodialpad self-assigned this Sep 13, 2023

juliodialpad requested review from iropolo and braddialpad as code owners September 13, 2023 21:28

iropolo approved these changes Sep 13, 2023

View reviewed changes

github-actions bot added the visual-test-ready Add this tag when the PR is ready for visual test, to trigger GHA visual tests label Sep 13, 2023

braddialpad reviewed Sep 13, 2023

View reviewed changes

refactor(avatar): dynamically change to button

29780a2

Merge branch 'staging' into feat/avatar/add-clickable-behavior

0cbe317

juliodialpad added 4 commits September 15, 2023 12:55

docs(avatar): clickable variant

e5cf538

test(avatar): clickable variant

a63740c

move events to top element

9af0ead

fix a11ty

cc264bd

update border colors

eaff5b4

juliodialpad requested review from braddialpad and iropolo September 15, 2023 19:16

juliodialpad removed the visual-test-ready Add this tag when the PR is ready for visual test, to trigger GHA visual tests label Sep 15, 2023

braddialpad approved these changes Sep 15, 2023

View reviewed changes

github-actions bot added the visual-test-ready Add this tag when the PR is ready for visual test, to trigger GHA visual tests label Sep 15, 2023

iropolo approved these changes Sep 16, 2023

View reviewed changes

add default border to avatar

cf4a33f

juliodialpad added 2 commits September 18, 2023 19:03

transparent border

54a9fe2

Merge branch 'staging' into feat/avatar/add-clickable-behavior

a202a9c

juliodialpad mentioned this pull request Sep 19, 2023

feat(avatar): add clickable behavior - vue3 #1188

Merged

juliodialpad merged commit 2b80018 into staging Sep 19, 2023
11 checks passed

juliodialpad deleted the feat/avatar/add-clickable-behavior branch September 19, 2023 01:25

github-actions bot added the released label Sep 20, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(avatar): add clickable behavior #1176

feat(avatar): add clickable behavior #1176

juliodialpad commented Sep 13, 2023 •

edited

Loading

github-actions bot commented Sep 13, 2023

github-actions bot commented Sep 13, 2023

iropolo commented Sep 13, 2023

iropolo commented Sep 13, 2023 •

edited

Loading

iropolo left a comment •

edited

Loading

braddialpad Sep 13, 2023

juliodialpad Sep 14, 2023

braddialpad Sep 14, 2023

juliodialpad Sep 15, 2023

braddialpad Sep 13, 2023

juliodialpad Sep 14, 2023

github-actions bot commented Sep 15, 2023

francisrupert commented Sep 15, 2023

github-actions bot commented Sep 15, 2023

juliodialpad commented Sep 15, 2023

juliodialpad commented Sep 15, 2023 •

edited

Loading

github-actions bot commented Sep 15, 2023

juliodialpad commented Sep 15, 2023

github-actions bot commented Sep 15, 2023

braddialpad left a comment

juliodialpad commented Sep 15, 2023

iropolo left a comment

github-actions bot commented Sep 18, 2023

juliodialpad commented Sep 19, 2023

github-actions bot commented Sep 19, 2023

github-actions bot commented Sep 20, 2023

feat(avatar): add clickable behavior #1176

feat(avatar): add clickable behavior #1176

Conversation

juliodialpad commented Sep 13, 2023 • edited Loading

Feat (Avatar): Add clickable behavior

🛠️ Type Of Change

📖 Description

💡 Context

📝 Checklist

📷 Screenshots / GIFs

github-actions bot commented Sep 13, 2023

github-actions bot commented Sep 13, 2023

iropolo commented Sep 13, 2023

iropolo commented Sep 13, 2023 • edited Loading

iropolo left a comment • edited Loading

Choose a reason for hiding this comment

braddialpad Sep 13, 2023

Choose a reason for hiding this comment

juliodialpad Sep 14, 2023

Choose a reason for hiding this comment

braddialpad Sep 14, 2023

Choose a reason for hiding this comment

juliodialpad Sep 15, 2023

Choose a reason for hiding this comment

braddialpad Sep 13, 2023

Choose a reason for hiding this comment

juliodialpad Sep 14, 2023

Choose a reason for hiding this comment

github-actions bot commented Sep 15, 2023

francisrupert commented Sep 15, 2023

github-actions bot commented Sep 15, 2023

juliodialpad commented Sep 15, 2023

juliodialpad commented Sep 15, 2023 • edited Loading

github-actions bot commented Sep 15, 2023

juliodialpad commented Sep 15, 2023

github-actions bot commented Sep 15, 2023

braddialpad left a comment

Choose a reason for hiding this comment

juliodialpad commented Sep 15, 2023

iropolo left a comment

Choose a reason for hiding this comment

github-actions bot commented Sep 18, 2023

juliodialpad commented Sep 19, 2023

github-actions bot commented Sep 19, 2023

github-actions bot commented Sep 20, 2023

juliodialpad commented Sep 13, 2023 •

edited

Loading

iropolo commented Sep 13, 2023 •

edited

Loading

iropolo left a comment •

edited

Loading

juliodialpad commented Sep 15, 2023 •

edited

Loading