feat(confact-info): add `showAvatar` and `avatarIcon` props #981

tonydialpad · 2023-05-15T22:06:10Z

🛠️ Type Of Change

Fix
Feature
Refactoring
Documentation

📖 Description

In recent contact update, if the contact has no first name, last name or image_url, the avatar will display nothing. To fix this, this pull request adds avatarIcon to support icon display in avatar when there is nothing to display in avatar. Moreover, we want to hide avatar in some use cases, so showAvatar property is added to control that.

💡 Context

📝 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

🔮 Next Steps

Make a new release for dialtone-vue.

📷 Screenshots / GIFs

🔗 Sources

JIRA: https://dialpad.atlassian.net/browse/DP-70835
Vue3 PR: #983

github-actions · 2023-05-15T22:06:22Z

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-05-15T22:08:45Z

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

…35-add-icon-support-for-avatar-in-contact-info

github-actions · 2023-05-16T00:29:20Z

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

recipes/list_items/contact_info/contact_info.stories.js

juliodialpad · 2023-05-16T18:00:30Z

recipes/list_items/contact_info/contact_info.stories.js

    avatarSrc: avatarImage,
    avatarSeed: 'seed',
    avatarInitials: 'JL',
+    avatarIcon: 'user',


This is not needed as avatarIcon prop is user by default

Hi @juliodialpad , after I remove this line, I found the avatarIcon field become empty string in the panel:

That's intended, that means that if no avatarIcon prop is set 'user' will be used as default.

Actually, please update that field to use the list of icons. You can see an example of that over icon.stories.js

Done, please review:

juliodialpad · 2023-05-16T18:02:02Z

recipes/list_items/contact_info/contact_info.vue

This file is having a lot of dt-avatar components with almost the same properties over and over, do you think it could be simplified?

The only thing that's changing on some of them is just the slot content

Okay, done, please review again. Thanks!

github-actions · 2023-05-16T18:56:30Z

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

juliodialpad

Nice! It looks a lot cleaner now, thanks!

Just a couple minor changes

juliodialpad · 2023-05-17T17:12:45Z

recipes/list_items/contact_info/contact_info.stories.js

    avatarSrc: avatarImage,
    avatarSeed: 'seed',
    avatarInitials: 'JL',
+    avatarIcon: 'user',


That's intended, that means that if no avatarIcon prop is set 'user' will be used as default.

Actually, please update that field to use the list of icons. You can see an example of that over icon.stories.js

juliodialpad · 2023-05-17T17:13:13Z

recipes/list_items/contact_info/contact_info.stories.js

@@ -182,6 +183,7 @@ export const Variants = {
    avatarInitials: 'NW',
    avatarColor: 'orange-500',
    avatarSize: 'lg',
+    avatarIcon: 'user',


This isn't necessary too

juliodialpad · 2023-05-17T17:14:34Z

recipes/list_items/contact_info/contact_info.vue

+              <div v-else>
+                <dt-icon :name="avatarIcon" />
+              </div>


Don't need to wrap the icon on a div that'd prevent the avatar to correctly define the slot content type

juliodialpad · 2023-05-17T17:14:52Z

recipes/list_items/contact_info/contact_info.vue

+          <div v-else>
+            <dt-icon :name="avatarIcon" />
+          </div>


Same here, remove the wrapper div

…ontact-info

github-actions · 2023-05-17T21:39:00Z

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

…ontact-info

github-actions · 2023-05-18T19:00:11Z

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

github-actions · 2023-05-18T19:17:02Z

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

juliodialpad

Nice work, thanks!

# [2.84.0](v2.83.5...v2.84.0) (2023-05-18) ### Bug Fixes * set node engine minimum to 12.20 ([#988](#988)) ([9c0b45d](9c0b45d)) ### Features * **Avatar:** update to flat colors ([#982](#982)) ([74e98da](74e98da)) * **Confact Info:** add `showAvatar` and `avatarIcon` props ([#981](#981)) ([80cbf02](80cbf02))

github-actions · 2023-05-18T20:33:37Z

🎉 This PR is included in version 2.84.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

* feat(confact-info): add `showAvatar` and `avatarIcon` props * update `avatarIcon` property doc string * simplify avatar display logic and remove `showAvatar` args in stories * Address code review comments * Replace text filed with item selection filed for avatar icon

# [2.84.0-beta.1](v2.83.3...v2.84.0-beta.1) (2023-06-05) ### Bug Fixes * change to fnv algo ([f6e01a1](f6e01a1)) * component documentation link class ([#985](#985)) ([95c178c](95c178c)) * set node engine minimum to 12.20 ([#988](#988)) ([a53db3c](a53db3c)) * update dialtone-icons ([9a8c31a](9a8c31a)) ### Features * **Avatar:** update to flat colors ([#982](#982)) ([469fe05](469fe05)) * **Confact Info:** add `showAvatar` and `avatarIcon` props ([#981](#981)) ([4a7a674](4a7a674)) * migration to dialtone 8 ([#979](#979)) ([defcb77](defcb77)), closes [#993](#993) * update dialtone-icons ([1fb19be](1fb19be))

# [2.84.0-beta.1](v2.83.3...v2.84.0-beta.1) (2023-06-14) ### Bug Fixes * add placeholder text for richtexteditor ([#1004](#1004)) ([19e1ef9](19e1ef9)) * change to fnv algo ([f6e01a1](f6e01a1)) * component documentation link class ([#985](#985)) ([95c178c](95c178c)) * DIALTONE-1089 pagination muted clear button error ([4bd3170](4bd3170)) * **Keyboard Shortcut:** inverted border color ([b68387c](b68387c)) * **Leftbar General Row:** add href for focusability ([#994](#994)) ([73bc4e0](73bc4e0)) * missing migrations ([7483e16](7483e16)) * **Modal:** secondary action button kind ([#1011](#1011)) ([f899cb8](f899cb8)) * revert [DIALTONE-1089] fix: pagination muted clear button error ([f43066c](f43066c)) * set node engine minimum to 12.20 ([#988](#988)) ([a53db3c](a53db3c)) * update dialtone-icons ([9a8c31a](9a8c31a)) ### Features * **Avatar:** update to flat colors ([#982](#982)) ([469fe05](469fe05)) * **Confact Info:** add `showAvatar` and `avatarIcon` props ([#981](#981)) ([4a7a674](4a7a674)) * migration to dialtone 8 ([#979](#979)) ([defcb77](defcb77)), closes [#993](#993) * **Modal:** show event and initial-focus-element ([#1009](#1009)) ([935d6da](935d6da)) * **Rich Text Editor:** link extension ([#991](#991)) ([d88e704](d88e704)) * **Rich Text Editor:** tests for rich text editor link extension and utils ([#1001](#1001)) ([b947270](b947270)) * state changes for feed item row ([#1002](#1002)) ([9aeefc6](9aeefc6)) * update dialtone-icons ([1fb19be](1fb19be))

# [2.84.0-beta.1](v2.83.3...v2.84.0-beta.1) (2023-06-14) ### Bug Fixes * add placeholder text for richtexteditor ([#1004](#1004)) ([19e1ef9](19e1ef9)) * bump package version to avoid error ([34738ea](34738ea)) * change to fnv algo ([f6e01a1](f6e01a1)) * component documentation link class ([#985](#985)) ([95c178c](95c178c)) * DIALTONE-1089 pagination muted clear button error ([4bd3170](4bd3170)) * **Keyboard Shortcut:** inverted border color ([b68387c](b68387c)) * **Leftbar General Row:** add href for focusability ([#994](#994)) ([73bc4e0](73bc4e0)) * missing migrations ([7483e16](7483e16)) * **Modal:** secondary action button kind ([#1011](#1011)) ([f899cb8](f899cb8)) * revert [DIALTONE-1089] fix: pagination muted clear button error ([f43066c](f43066c)) * set node engine minimum to 12.20 ([#988](#988)) ([a53db3c](a53db3c)) * update dialtone-icons ([9a8c31a](9a8c31a)) ### Features * **Avatar:** update to flat colors ([#982](#982)) ([469fe05](469fe05)) * **Confact Info:** add `showAvatar` and `avatarIcon` props ([#981](#981)) ([4a7a674](4a7a674)) * migration to dialtone 8 ([#979](#979)) ([defcb77](defcb77)), closes [#993](#993) * **Modal:** show event and initial-focus-element ([#1009](#1009)) ([935d6da](935d6da)) * **Rich Text Editor:** link extension ([#991](#991)) ([d88e704](d88e704)) * **Rich Text Editor:** tests for rich text editor link extension and utils ([#1001](#1001)) ([b947270](b947270)) * state changes for feed item row ([#1002](#1002)) ([9aeefc6](9aeefc6)) * update dialtone-icons ([1fb19be](1fb19be))

# [2.88.0-beta.1](v2.87.0...v2.88.0-beta.1) (2023-06-22) ### Bug Fixes * add placeholder text for richtexteditor ([#1004](#1004)) ([19e1ef9](19e1ef9)) * change to fnv algo ([f6e01a1](f6e01a1)) * component documentation link class ([#985](#985)) ([95c178c](95c178c)) * **Contact Row, Group Row, General Row:** null on description ([#1013](#1013)) ([8092faf](8092faf)) * DIALTONE-1089 pagination muted clear button error ([4bd3170](4bd3170)) * **Keyboard Shortcut:** inverted border color ([b68387c](b68387c)) * **Leftbar General Row:** add href for focusability ([#994](#994)) ([73bc4e0](73bc4e0)) * missing migrations ([7483e16](7483e16)) * **Modal:** secondary action button kind ([#1011](#1011)) ([f899cb8](f899cb8)) * remove peer dep ([b5be026](b5be026)) * revert [DIALTONE-1089] fix: pagination muted clear button error ([f43066c](f43066c)) * revert feat(modal): show event and initial-focus-element ([#1009](#1009)) ([18cf9ab](18cf9ab)) * set node engine minimum to 12.20 ([#988](#988)) ([a53db3c](a53db3c)) * update dialtone-icons ([9a8c31a](9a8c31a)) ### Documentation * fix broken story ([8097ff2](8097ff2)) ### Features * **Avatar:** update to flat colors ([#982](#982)) ([469fe05](469fe05)) * **Confact Info:** add `showAvatar` and `avatarIcon` props ([#981](#981)) ([4a7a674](4a7a674)) * **Datepicker:** datepicker component ([#1007](#1007)) ([335af23](335af23)) * migration to dialtone 8 ([#979](#979)) ([defcb77](defcb77)), closes [#993](#993) * **Modal:** show event and initial-focus-element ([#1009](#1009)) ([935d6da](935d6da)) * **Rich Text Editor:** link extension ([#991](#991)) ([d88e704](d88e704)) * **Rich Text Editor:** tests for rich text editor link extension and utils ([#1001](#1001)) ([b947270](b947270)) * state changes for feed item row ([#1002](#1002)) ([9aeefc6](9aeefc6)) * update dialtone-icons ([1fb19be](1fb19be))

# [2.84.0-alpha.1](v2.83.3...v2.84.0-alpha.1) (2023-06-23) ### Bug Fixes * add placeholder text for richtexteditor ([#1004](#1004)) ([19e1ef9](19e1ef9)) * change to fnv algo ([f6e01a1](f6e01a1)) * component documentation link class ([#985](#985)) ([95c178c](95c178c)) * **Contact Row, Group Row, General Row:** null on description ([#1013](#1013)) ([8092faf](8092faf)) * DIALTONE-1089 pagination muted clear button error ([4bd3170](4bd3170)) * **Keyboard Shortcut:** inverted border color ([b68387c](b68387c)) * **Leftbar General Row:** add href for focusability ([#994](#994)) ([73bc4e0](73bc4e0)) * missing migrations ([7483e16](7483e16)) * **Modal:** secondary action button kind ([#1011](#1011)) ([f899cb8](f899cb8)) * remove peer dep ([b5be026](b5be026)) * revert [DIALTONE-1089] fix: pagination muted clear button error ([f43066c](f43066c)) * revert feat(modal): show event and initial-focus-element ([#1009](#1009)) ([18cf9ab](18cf9ab)) * **Rich Text Editor:** add a check and workaround for phone regex ([aa5dd34](aa5dd34)) * set node engine minimum to 12.20 ([#988](#988)) ([a53db3c](a53db3c)) * update dialtone-icons ([9a8c31a](9a8c31a)) ### Documentation * fix broken story ([8097ff2](8097ff2)) ### Features * **Avatar:** update to flat colors ([#982](#982)) ([469fe05](469fe05)) * **Confact Info:** add `showAvatar` and `avatarIcon` props ([#981](#981)) ([4a7a674](4a7a674)) * **Datepicker:** datepicker component ([#1007](#1007)) ([335af23](335af23)) * migration to dialtone 8 ([#979](#979)) ([defcb77](defcb77)), closes [#993](#993) * **Modal:** show event and initial-focus-element ([#1009](#1009)) ([935d6da](935d6da)) * **Rich Text Editor:** link extension ([#991](#991)) ([d88e704](d88e704)) * **Rich Text Editor:** tests for rich text editor link extension and utils ([#1001](#1001)) ([b947270](b947270)) * state changes for feed item row ([#1002](#1002)) ([9aeefc6](9aeefc6)) * update dialtone-icons ([1fb19be](1fb19be))

# [2.89.0-beta.1](v2.88.0...v2.89.0-beta.1) (2023-06-23) ### Bug Fixes * add placeholder text for richtexteditor ([#1004](#1004)) ([19e1ef9](19e1ef9)) * change to fnv algo ([f6e01a1](f6e01a1)) * component documentation link class ([#985](#985)) ([95c178c](95c178c)) * **Contact Row, Group Row, General Row:** null on description ([#1013](#1013)) ([8092faf](8092faf)) * DIALTONE-1089 pagination muted clear button error ([4bd3170](4bd3170)) * **Keyboard Shortcut:** inverted border color ([b68387c](b68387c)) * **Leftbar General Row:** add href for focusability ([#994](#994)) ([73bc4e0](73bc4e0)) * missing migrations ([7483e16](7483e16)) * **Modal:** secondary action button kind ([#1011](#1011)) ([f899cb8](f899cb8)) * remove peer dep ([b5be026](b5be026)) * revert [DIALTONE-1089] fix: pagination muted clear button error ([f43066c](f43066c)) * revert feat(modal): show event and initial-focus-element ([#1009](#1009)) ([18cf9ab](18cf9ab)) * set node engine minimum to 12.20 ([#988](#988)) ([a53db3c](a53db3c)) * update dialtone-icons ([9a8c31a](9a8c31a)) ### Documentation * fix broken story ([8097ff2](8097ff2)) ### Features * **Avatar:** update to flat colors ([#982](#982)) ([469fe05](469fe05)) * **Confact Info:** add `showAvatar` and `avatarIcon` props ([#981](#981)) ([4a7a674](4a7a674)) * **Datepicker:** datepicker component ([#1007](#1007)) ([335af23](335af23)) * migration to dialtone 8 ([#979](#979)) ([defcb77](defcb77)), closes [#993](#993) * **Modal:** show event and initial-focus-element ([#1009](#1009)) ([935d6da](935d6da)) * **Rich Text Editor:** link extension ([#991](#991)) ([d88e704](d88e704)) * **Rich Text Editor:** tests for rich text editor link extension and utils ([#1001](#1001)) ([b947270](b947270)) * state changes for feed item row ([#1002](#1002)) ([9aeefc6](9aeefc6)) * update dialtone-icons ([1fb19be](1fb19be))

# [2.90.0-beta.1](v2.89.0...v2.90.0-beta.1) (2023-06-28) ### Bug Fixes * add placeholder text for richtexteditor ([#1004](#1004)) ([19e1ef9](19e1ef9)) * change to fnv algo ([f6e01a1](f6e01a1)) * component documentation link class ([#985](#985)) ([95c178c](95c178c)) * **Contact Row, Group Row, General Row:** null on description ([#1013](#1013)) ([8092faf](8092faf)) * DIALTONE-1089 pagination muted clear button error ([4bd3170](4bd3170)) * **Keyboard Shortcut:** inverted border color ([b68387c](b68387c)) * **Leftbar General Row:** add href for focusability ([#994](#994)) ([73bc4e0](73bc4e0)) * missing migrations ([7483e16](7483e16)) * **Modal:** secondary action button kind ([#1011](#1011)) ([f899cb8](f899cb8)) * package-lock ([de1f160](de1f160)) * remove peer dep ([b5be026](b5be026)) * revert [DIALTONE-1089] fix: pagination muted clear button error ([f43066c](f43066c)) * revert feat(modal): show event and initial-focus-element ([#1009](#1009)) ([18cf9ab](18cf9ab)) * set node engine minimum to 12.20 ([#988](#988)) ([a53db3c](a53db3c)) * update dialtone-icons ([9a8c31a](9a8c31a)) ### Documentation * fix broken story ([8097ff2](8097ff2)) ### Features * **Avatar:** update to flat colors ([#982](#982)) ([469fe05](469fe05)) * **Confact Info:** add `showAvatar` and `avatarIcon` props ([#981](#981)) ([4a7a674](4a7a674)) * **Datepicker:** datepicker component ([#1007](#1007)) ([335af23](335af23)) * Merge branch 'staging' into dialtone8 ([001d2f7](001d2f7)) * migration to dialtone 8 ([#979](#979)) ([defcb77](defcb77)), closes [#993](#993) * **Modal:** show event and initial-focus-element ([#1009](#1009)) ([935d6da](935d6da)) * **Rich Text Editor:** link extension ([#991](#991)) ([d88e704](d88e704)) * **Rich Text Editor:** tests for rich text editor link extension and utils ([#1001](#1001)) ([b947270](b947270)) * state changes for feed item row ([#1002](#1002)) ([9aeefc6](9aeefc6)) * update dialtone-icons ([1fb19be](1fb19be))

# [2.90.0-dialtone8.1](v2.89.0...v2.90.0-dialtone8.1) (2023-06-29) ### Bug Fixes * add placeholder text for richtexteditor ([#1004](#1004)) ([19e1ef9](19e1ef9)) * change to fnv algo ([f6e01a1](f6e01a1)) * component documentation link class ([#985](#985)) ([95c178c](95c178c)) * **Contact Row, Group Row, General Row:** null on description ([#1013](#1013)) ([8092faf](8092faf)) * DIALTONE-1089 pagination muted clear button error ([4bd3170](4bd3170)) * **Keyboard Shortcut:** inverted border color ([b68387c](b68387c)) * **Leftbar General Row:** add href for focusability ([#994](#994)) ([73bc4e0](73bc4e0)) * missing migrations ([7483e16](7483e16)) * **Modal:** secondary action button kind ([#1011](#1011)) ([f899cb8](f899cb8)) * remove peer dep ([b5be026](b5be026)) * revert [DIALTONE-1089] fix: pagination muted clear button error ([f43066c](f43066c)) * set node engine minimum to 12.20 ([#988](#988)) ([a53db3c](a53db3c)) * update dialtone-icons ([9a8c31a](9a8c31a)) ### Code Refactoring * **Datepicker:** name refactoring ([#1049](#1049)) ([f6d34aa](f6d34aa)) * **Datepicker:** name refactoring ([#1049](#1049)) ([75f7146](75f7146)) ### Documentation * fix broken story ([8097ff2](8097ff2)) ### Features * **Avatar:** update to flat colors ([#982](#982)) ([469fe05](469fe05)) * **Confact Info:** add `showAvatar` and `avatarIcon` props ([#981](#981)) ([4a7a674](4a7a674)) * **Datepicker:** datepicker component ([#1007](#1007)) ([335af23](335af23)) * Merge branch 'staging' into dialtone8 ([001d2f7](001d2f7)) * migration to dialtone 8 ([#979](#979)) ([defcb77](defcb77)), closes [#993](#993) * **Modal:** show event and initial-focus-element ([#1009](#1009)) ([935d6da](935d6da)) * **Rich Text Editor:** link extension ([#991](#991)) ([d88e704](d88e704)) * **Rich Text Editor:** tests for rich text editor link extension and utils ([#1001](#1001)) ([b947270](b947270)) * state changes for feed item row ([#1002](#1002)) ([9aeefc6](9aeefc6)) * update dialtone-icons ([1fb19be](1fb19be))

# [2.93.0-dialtone8.1](v2.92.4...v2.93.0-dialtone8.1) (2023-07-27) ### Bug Fixes * `contact_info` style override issue ([#1078](#1078)) ([2090704](2090704)) * add customized css to badge label and contact info ([#1076](#1076)) ([6e8b374](6e8b374)) * add placeholder text for richtexteditor ([#1004](#1004)) ([19e1ef9](19e1ef9)) * **Avatar:** thin border behind image ([#1098](#1098)) ([c942386](c942386)) * change to fnv algo ([f6e01a1](f6e01a1)) * **Combobox Multi Select:** fix ref not existing error ([#1083](#1083)) ([de054f4](de054f4)) * component documentation link class ([#985](#985)) ([95c178c](95c178c)) * **Contact Info Avatar:** show avatar halo as required ([#1059](#1059)) ([b429531](b429531)) * **Contact Info, Leftbar Row:** stylings ([#1085](#1085)) ([34c27e8](34c27e8)) * **Contact Info:** avatar's border color ([#1097](#1097)) ([1639989](1639989)) * **Contact Row, Group Row, General Row:** null on description ([#1013](#1013)) ([8092faf](8092faf)) * DIALTONE-1089 pagination muted clear button error ([4bd3170](4bd3170)) * **General Row:** adjust label width on prop change ([#1095](#1095)) ([01ed220](01ed220)) * **General Row:** call resize handler on mounted ([#1093](#1093)) ([53768c1](53768c1)) * **General Row:** overridden display property ([#1069](#1069)) ([7b5f27b](7b5f27b)) * **General Row:** resize observer ([#1074](#1074)) ([7e27e9c](7e27e9c)) * **Item Layout:** remove align-self from item layout ([80ab209](80ab209)) * **Keyboard Shortcut:** inverted border color ([b68387c](b68387c)) * **Leftbar General Row:** add href for focusability ([#994](#994)) ([73bc4e0](73bc4e0)) * merge branch 'staging' into dialtone8 ([aa95eb4](aa95eb4)) * merge branch 'staging' into dialtone8 ([2dec412](2dec412)) * missing migrations ([7483e16](7483e16)) * **Modal:** secondary action button kind ([#1011](#1011)) ([f899cb8](f899cb8)) * package-lock ([48f3120](48f3120)) * remove peer dep ([b5be026](b5be026)) * revert [DIALTONE-1089] fix: pagination muted clear button error ([f43066c](f43066c)) * set node engine minimum to 12.20 ([#988](#988)) ([a53db3c](a53db3c)) * **Tooltip:** change anchor tag to span ([#1088](#1088)) ([0735fc8](0735fc8)) * update dialtone-icons ([9a8c31a](9a8c31a)) ### Code Refactoring * **Datepicker:** name refactoring ([#1049](#1049)) ([f6d34aa](f6d34aa)) ### Documentation * **Collapsible:** fix opened event not displayed on panel ([#1064](#1064)) ([51a8f52](51a8f52)) * fix broken story ([8097ff2](8097ff2)) ### Features * **Avatar:** update to flat colors ([#982](#982)) ([469fe05](469fe05)) * **Confact Info:** add `showAvatar` and `avatarIcon` props ([#981](#981)) ([4a7a674](4a7a674)) * **Datepicker:** date format utils ([#1060](#1060)) ([42b8572](42b8572)) * **Datepicker:** datepicker component ([#1007](#1007)) ([335af23](335af23)) * **General Row:** overridden display property ([#1069](#1069)) ([d6fd5ac](d6fd5ac)) * **General Row:** overridden display property ([#1069](#1069)) ([080afc0](080afc0)) * merge branch 'staging' into dialtone8 ([cf8d810](cf8d810)) * Merge branch 'staging' into dialtone8 ([001d2f7](001d2f7)) * migration to dialtone 8 ([#979](#979)) ([defcb77](defcb77)), closes [#993](#993) * **Modal:** show event and initial-focus-element ([#1009](#1009)) ([935d6da](935d6da)) * **Rich Text Editor:** link extension ([#991](#991)) ([d88e704](d88e704)) * **Rich Text Editor:** tests for rich text editor link extension and utils ([#1001](#1001)) ([b947270](b947270)) * state changes for feed item row ([#1002](#1002)) ([9aeefc6](9aeefc6)) * update dialtone-icons ([1fb19be](1fb19be)) * update item-layout to use tokens ([c9151aa](c9151aa)) ### Reverts * Revert "feat(general-row): overridden display property (#1069)" ([3e619ba](3e619ba)), closes [#1069](#1069) * revert fix(general-row): overridden display property (#1069) ([5355902](5355902)), closes [#1069](#1069)

# [2.93.0](v2.92.4...v2.93.0) (2023-08-04) ### Bug Fixes * `contact_info` style override issue ([#1078](#1078)) ([2090704](2090704)) * add customized css to badge label and contact info ([#1076](#1076)) ([6e8b374](6e8b374)) * add placeholder text for richtexteditor ([#1004](#1004)) ([19e1ef9](19e1ef9)) * **Avatar:** remove util classes, set tokens ([#1106](#1106)) ([3a24d2c](3a24d2c)) * **Avatar:** thin border behind image ([#1098](#1098)) ([c942386](c942386)) * change to fnv algo ([f6e01a1](f6e01a1)) * **Combobox Multi Select:** fix ref not existing error ([#1083](#1083)) ([de054f4](de054f4)) * component documentation link class ([#985](#985)) ([95c178c](95c178c)) * **Contact Info Avatar:** show avatar halo as required ([#1059](#1059)) ([b429531](b429531)) * **Contact Info, Leftbar Row:** stylings ([#1085](#1085)) ([34c27e8](34c27e8)) * **Contact Info:** avatar's border color ([#1097](#1097)) ([1639989](1639989)) * **Contact Row, Group Row, General Row:** null on description ([#1013](#1013)) ([8092faf](8092faf)) * DIALTONE-1089 pagination muted clear button error ([4bd3170](4bd3170)) * **General Row:** adjust label width on prop change ([#1095](#1095)) ([01ed220](01ed220)) * **General Row:** call resize handler on mounted ([#1093](#1093)) ([53768c1](53768c1)) * **General Row:** overridden display property ([#1069](#1069)) ([7b5f27b](7b5f27b)) * **General Row:** resize observer ([#1074](#1074)) ([7e27e9c](7e27e9c)) * **Item Layout:** remove align-self from item layout ([80ab209](80ab209)) * **Keyboard Shortcut:** inverted border color ([b68387c](b68387c)) * **Leftbar General Row:** add href for focusability ([#994](#994)) ([73bc4e0](73bc4e0)) * **Leftbar Row:** presence border color on selected row ([#1110](#1110)) ([05c9b15](05c9b15)) * merge branch 'staging' into dialtone8 ([aa95eb4](aa95eb4)) * merge branch 'staging' into dialtone8 ([2dec412](2dec412)) * missing migrations ([7483e16](7483e16)) * **Modal:** secondary action button kind ([#1011](#1011)) ([f899cb8](f899cb8)) * package-lock ([48f3120](48f3120)) * remove peer dep ([b5be026](b5be026)) * revert [DIALTONE-1089] fix: pagination muted clear button error ([f43066c](f43066c)) * set node engine minimum to 12.20 ([#988](#988)) ([a53db3c](a53db3c)) * **Tooltip:** change anchor tag to span ([#1088](#1088)) ([0735fc8](0735fc8)) * update dialtone-icons ([9a8c31a](9a8c31a)) ### Code Refactoring * **Datepicker:** name refactoring ([#1049](#1049)) ([f6d34aa](f6d34aa)) ### Documentation * **Collapsible:** fix opened event not displayed on panel ([#1064](#1064)) ([51a8f52](51a8f52)) * fix broken story ([8097ff2](8097ff2)) ### Features * add typescript ([#1108](#1108)) ([4f5e2ec](4f5e2ec)) * **Avatar:** add icon-class prop ([#1111](#1111)) ([43b0561](43b0561)) * **Avatar:** extract initials from full name ([6c80963](6c80963)) * **Avatar:** extract initials from full name ([#1102](#1102)) ([3082209](3082209)), closes [#1097](#1097) [#1098](#1098) * **Avatar:** update to flat colors ([#982](#982)) ([469fe05](469fe05)) * **Confact Info:** add `showAvatar` and `avatarIcon` props ([#981](#981)) ([4a7a674](4a7a674)) * **Datepicker:** date format utils ([#1060](#1060)) ([42b8572](42b8572)) * **Datepicker:** datepicker component ([#1007](#1007)) ([335af23](335af23)) * **General Row:** overridden display property ([#1069](#1069)) ([d6fd5ac](d6fd5ac)) * **General Row:** overridden display property ([#1069](#1069)) ([080afc0](080afc0)) * merge branch 'staging' into dialtone8 ([cf8d810](cf8d810)) * Merge branch 'staging' into dialtone8 ([001d2f7](001d2f7)) * migration to dialtone 8 ([#979](#979)) ([defcb77](defcb77)), closes [#993](#993) * **Modal:** show event and initial-focus-element ([#1009](#1009)) ([935d6da](935d6da)) * **Rich Text Editor:** link extension ([#991](#991)) ([d88e704](d88e704)) * **Rich Text Editor:** tests for rich text editor link extension and utils ([#1001](#1001)) ([b947270](b947270)) * state changes for feed item row ([#1002](#1002)) ([9aeefc6](9aeefc6)) * update dialtone-icons ([1fb19be](1fb19be)) * update item-layout to use tokens ([c9151aa](c9151aa)) ### Reverts * Revert "feat(general-row): overridden display property (#1069)" ([3e619ba](3e619ba)), closes [#1069](#1069) * revert fix(general-row): overridden display property (#1069) ([5355902](5355902)), closes [#1069](#1069)

feat(confact-info): add showAvatar and avatarIcon props

dec24fb

tonydialpad requested review from juliodialpad, iropolo and braddialpad as code owners May 15, 2023 22:06

tonydialpad mentioned this pull request May 16, 2023

feat(confact-info): add showAvatar and avatarIcon props (Vue3) #983

Merged

13 tasks

tonydialpad added 2 commits May 15, 2023 17:24

update avatarIcon property doc string

a5c652c

Merge branch 'staging' of github.com:dialpad/dialtone-vue into DP-708…

f079f62

…35-add-icon-support-for-avatar-in-contact-info

juliodialpad suggested changes May 16, 2023

View reviewed changes

simplify avatar display logic and remove showAvatar args in stories

83c3c3a

tonydialpad requested a review from juliodialpad May 16, 2023 18:55

juliodialpad suggested changes May 17, 2023

View reviewed changes

Address code review comments

2c706e4

tonydialpad requested a review from juliodialpad May 17, 2023 21:36

Merge branch 'staging' into DP-70835-add-icon-support-for-avatar-in-c…

3b19ed1

…ontact-info

Merge branch 'staging' into DP-70835-add-icon-support-for-avatar-in-c…

2d0e370

…ontact-info

Replace text filed with item selection filed for avatar icon

adcbb9b

juliodialpad approved these changes May 18, 2023

View reviewed changes

tonydialpad merged commit 80cbf02 into staging May 18, 2023

tonydialpad deleted the DP-70835-add-icon-support-for-avatar-in-contact-info branch May 18, 2023 19:25

github-actions bot added the released label May 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(confact-info): add `showAvatar` and `avatarIcon` props #981

feat(confact-info): add `showAvatar` and `avatarIcon` props #981

tonydialpad commented May 15, 2023 •

edited

Loading

github-actions bot commented May 15, 2023

github-actions bot commented May 15, 2023

github-actions bot commented May 16, 2023

juliodialpad May 16, 2023

tonydialpad May 16, 2023

juliodialpad May 17, 2023

tonydialpad May 18, 2023

juliodialpad May 16, 2023

tonydialpad May 16, 2023

github-actions bot commented May 16, 2023

juliodialpad left a comment

juliodialpad May 17, 2023

juliodialpad May 17, 2023

juliodialpad May 17, 2023

juliodialpad May 17, 2023

github-actions bot commented May 17, 2023

github-actions bot commented May 18, 2023

github-actions bot commented May 18, 2023

juliodialpad left a comment

github-actions bot commented May 18, 2023

feat(confact-info): add showAvatar and avatarIcon props #981

feat(confact-info): add showAvatar and avatarIcon props #981

Conversation

tonydialpad commented May 15, 2023 • edited Loading

🛠️ Type Of Change

📖 Description

💡 Context

📝 Checklist

🔮 Next Steps

📷 Screenshots / GIFs

🔗 Sources

github-actions bot commented May 15, 2023

github-actions bot commented May 15, 2023

github-actions bot commented May 16, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented May 16, 2023

juliodialpad left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented May 17, 2023

github-actions bot commented May 18, 2023

github-actions bot commented May 18, 2023

juliodialpad left a comment

Choose a reason for hiding this comment

github-actions bot commented May 18, 2023

feat(confact-info): add `showAvatar` and `avatarIcon` props #981

feat(confact-info): add `showAvatar` and `avatarIcon` props #981

tonydialpad commented May 15, 2023 •

edited

Loading