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

feat(contact-info): NO-JIRA add avatarColor prop to contact info recipe #448

Merged
merged 4 commits into from
Aug 16, 2024
Merged

feat(contact-info): NO-JIRA add avatarColor prop to contact info recipe #448

merged 4 commits into from
Aug 16, 2024

Conversation

TehuelDialpad
Copy link
Contributor

adds an avatarColor prop to contact info recipe

Obligatory GIF (super important!)

Obligatory GIF

🛠️ Type Of Change

These types will increment the version number on release:

  • Fix
  • Feature
  • Performance Improvement
  • Refactor

These types will not increment the version number, but will still deploy to documentation site on release:

  • Documentation
  • Build system
  • CI
  • Style (code style changes, not css changes)
  • Test
  • Other (chore)

📖 Jira Ticket

📖 Description

On this PR I add a avatarColor prop to contactInfo recipe component to be passed to avatar internal component.

💡 Context

This new prop is needed as part of an initiative to display some contacts with a grey background in the avatar. With this PR the documentation (Storybook) for the recipe is also updated.

📝 Checklist

For all PRs:

  • I have ensured no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
  • I have reviewed my changes.
  • I have added all relevant documentation.
  • I have considered the performance impact of my change.

For all Vue changes:

  • I have added / updated unit tests.
  • I have made my changes in Vue 2 and Vue 3. Note: you may sync your changes from Vue 2 to Vue 3 (or vice versa) using the ./scripts/dialtone-vue-sync.sh script. Read docs here: Dialtone Vue Sync Script
  • I have validated components with a screen reader.
  • I have validated components keyboard navigation.

For all CSS changes:

  • I have used design tokens whenever possible.
  • I have considered how this change will behave on different screen sizes.
  • I have visually validated my change in light and dark mode.
  • I have used gap or flexbox properties for layout instead of margin whenever possible.

If new component:

  • I am exporting any new components or constants:
    • from the index.js in the component directory.
    • from the index.js in the root (either packages/dialtone-vue2 or packages/dialtone-vue3).
  • I have added the styles for the new component to the packages/dialtone-css package.
  • I have created a page for the new component on the documentation site in apps/dialtone-documentation.
  • I have added the new component to common/components_list.cjs
  • I have created a component story in storybook
  • I have created story / stories for any relevant component variants in storybook
  • I have created a docs page for the component in storybook.
  • I have checked that changing all props/slots via the UI in storybook works as expected.

🔮 Next Steps

📷 Screenshots / GIFs

🔗 Sources

@github-actions GitHub Actions
Copy link

Please add either the visual-test-ready or no-visual-test label to this PR depending on whether you want to run visual tests or not.
It is recommended to run visual tests if your PR changes any UI. ‼️

@TehuelDialpad TehuelDialpad added the visual-test-ready Add this tag when the PR is ready for visual test, to trigger GHA visual tests label Aug 14, 2024
@TehuelDialpad TehuelDialpad changed the title feat(contact-info recipe): [NO-JIRA] add avatarColor prop to contact info recipe feat(contact-info): NO-JIRA add avatarColor prop to contact info recipe Aug 14, 2024
juliodialpad
juliodialpad approved these changes Aug 14, 2024
View reviewed changes
Copy link
Collaborator

@juliodialpad juliodialpad left a comment

Choose a reason for hiding this comment

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

Looks good, just apply the requested changes before merging please.

packages/dialtone-vue2/recipes/item_layout/contact_info/contact_info.test.js Outdated
await wrapper.setProps({
avatarColor: '000',
});
await wrapper.vm.$nextTick();
Copy link
Collaborator

Choose a reason for hiding this comment

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

This shouldn't be needed, please test if it works after removing it.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The set of avatarColor value is needed. The next part can be deleted and the test still works as expected. Thanks for the comment.

packages/dialtone-vue3/recipes/item_layout/contact_info/contact_info.test.js Outdated
await wrapper.setProps({
avatarColor: '000',
});
await wrapper.vm.$nextTick();
Copy link
Collaborator

Choose a reason for hiding this comment

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

Same here, please remove and test

@github-actions GitHub Actions
Copy link

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-448/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-448/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-448/

@TehuelDialpad TehuelDialpad merged commit 77ea808 into staging Aug 16, 2024
11 checks passed
@TehuelDialpad TehuelDialpad deleted the feat/add-color-to-contact-info branch August 16, 2024 14:00
juliodialpad pushed a commit that referenced this pull request Aug 16, 2024
@semantic-release-bot
chore(release): NO-JIRA dialtone/v9.67.0
1c6eb08 
# [9.67.0](dialtone/v9.66.0...dialtone/v9.67.0) (2024-08-16)

### Bug Fixes

* **Docs:** DLT-1994 use dialtone scrollbar in docsite ([#456](#456)) ([7db2c8c](7db2c8c))

### Documentation

* **Common Commands:** NO-JIRA add documentation about using local package ([#449](#449)) ([e9b8be1](e9b8be1))
* DLT-1796 move storybook to doc site - Link to Pagination ([#441](#441)) ([bc2d57d](bc2d57d))

### Features

* **Contact Info:** NO-JIRA add `avatarColor` prop to contact info recipe ([#448](#448)) ([77ea808](77ea808))
* **Input:** DLT-1945 add clear slot prop to rightIcon ([#455](#455)) ([0f90dd4](0f90dd4))

### Reverts

* NO-JIRA use require for json imports ([#454](#454)) ([606cfb3](606cfb3))
juliodialpad pushed a commit that referenced this pull request Aug 16, 2024
@semantic-release-bot
chore(release): NO-JIRA dialtone-vue2/v2.154.0
e7b2d24 
# [2.154.0](dialtone-vue2/v2.153.0...dialtone-vue2/v2.154.0) (2024-08-16)

### Bug Fixes

* **Docs:** DLT-1994 use dialtone scrollbar in docsite ([#456](#456)) ([7db2c8c](7db2c8c))

### Documentation

* DLT-1796 move storybook to doc site - Link to Pagination ([#441](#441)) ([bc2d57d](bc2d57d))

### Features

* **Contact Info:** NO-JIRA add `avatarColor` prop to contact info recipe ([#448](#448)) ([77ea808](77ea808))
* **Input:** DLT-1945 add clear slot prop to rightIcon ([#455](#455)) ([0f90dd4](0f90dd4))

### Reverts

* NO-JIRA use require for json imports ([#454](#454)) ([606cfb3](606cfb3))
juliodialpad pushed a commit that referenced this pull request Aug 16, 2024
@semantic-release-bot
chore(release): NO-JIRA dialtone-vue3/v3.147.0
b9b18df 
# [3.147.0](dialtone-vue3/v3.146.0...dialtone-vue3/v3.147.0) (2024-08-16)

### Bug Fixes

* **Docs:** DLT-1994 use dialtone scrollbar in docsite ([#456](#456)) ([7db2c8c](7db2c8c))

### Documentation

* DLT-1796 move storybook to doc site - Link to Pagination ([#441](#441)) ([bc2d57d](bc2d57d))

### Features

* **Contact Info:** NO-JIRA add `avatarColor` prop to contact info recipe ([#448](#448)) ([77ea808](77ea808))
* **Input:** DLT-1945 add clear slot prop to rightIcon ([#455](#455)) ([0f90dd4](0f90dd4))

### Reverts

* NO-JIRA use require for json imports ([#454](#454)) ([606cfb3](606cfb3))
@TehuelDialpad TehuelDialpad mentioned this pull request Aug 23, 2024
Merged
31 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@braddialpad braddialpad braddialpad approved these changes

@juliodialpad juliodialpad juliodialpad approved these changes

@iropolo iropolo Awaiting requested review from iropolo iropolo is a code owner

@francisrupert francisrupert Awaiting requested review from francisrupert francisrupert is a code owner

@ninamarina ninamarina Awaiting requested review from ninamarina ninamarina is a code owner

Assignees
No one assigned
Labels
visual-test-ready Add this tag when the PR is ready for visual test, to trigger GHA visual tests
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@TehuelDialpad @braddialpad @juliodialpad