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(emoji-picker): DLT-1781 allow hiding of search and setting searchQuery via prop #345

Merged
merged 9 commits into from
May 31, 2024
Merged

feat(emoji-picker): DLT-1781 allow hiding of search and setting searchQuery via prop #345

merged 9 commits into from
May 31, 2024

Conversation

braddialpad
Copy link
Contributor

@braddialpad braddialpad commented May 31, 2024 •
edited
Loading

feat(emoji-picker): DLT-1781 allow hiding of search and setting searchQuery via prop

Obligatory GIF (super important!)

Obligatory GIF

🛠️ Type Of Change

  • Feature

📖 Jira Ticket

https://dialpad.atlassian.net/browse/DLT-1781

📖 Description

  • New prop searchQuery: allows setting of the search query via prop
  • New prop showSearch: shows or hides the search input

💡 Context

Needed for message input emoji picker implementation since it needs to integrate with gif / sticker pickers search

📝 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 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

🔮 Next Steps

attempt to put in message input.

@braddialpad braddialpad added the no-visual-test Add this tag when the PR does not need visual testing label May 31, 2024
@braddialpad braddialpad self-assigned this May 31, 2024
juliodialpad
juliodialpad requested changes May 31, 2024
View reviewed changes
Copy link
Collaborator

@juliodialpad juliodialpad left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Screenshot 2024-05-31 at 2 10 10 p m

There is a showPopover property on storybook that doesn't belong to any category, should it be there?

Maybe not to do with this PR but there are noticeable performance issues with the emoji picker on first load or when changing the skinTone, searchQuery or showSearch props, cannot interact with storybook for a few seconds after changing a prop.

The changes and performance issues apply for both Vue 2 and Vue 3 versions.

packages/dialtone-vue2/components/emoji_picker/emoji_picker.vue Outdated Show resolved Hide resolved
packages/dialtone-vue2/components/emoji_picker/emoji_picker.vue Outdated Show resolved Hide resolved
@braddialpad @juliodialpad
Update packages/dialtone-vue2/components/emoji_picker/emoji_picker.vue
ecd0814 
Co-authored-by: Julio Ortega <julio.ortega@dialpad.com>
@braddialpad
Copy link
Contributor Author

Screenshot 2024-05-31 at 2 10 10 p m

There is a showPopover property on storybook that doesn't belong to any category, should it be there?

Maybe not to do with this PR but there are noticeable performance issues with the emoji picker on first load or when changing the skinTone, searchQuery or showSearch props, cannot interact with storybook for a few seconds after changing a prop.

The changes and performance issues apply for both Vue 2 and Vue 3 versions.

Think showPopover is another one of those Percy specific props, nothing to do with this pr, but I will hide it.

Performance issues have been like that for a long time, however this seems to only happen in storybook, not when you put it in an actual app.

@braddialpad
Copy link
Contributor Author

Requested changes made.

juliodialpad
juliodialpad approved these changes May 31, 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.

Cool! works better now, just apply the missing change

packages/dialtone-vue3/components/emoji_picker/emoji_picker.vue Outdated Show resolved Hide resolved
@braddialpad @juliodialpad
Update packages/dialtone-vue3/components/emoji_picker/emoji_picker.vue
a55c233 
Co-authored-by: Julio Ortega <julio.ortega@dialpad.com>
@github-actions GitHub Actions
Copy link

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

@braddialpad braddialpad merged commit d5e5373 into staging May 31, 2024
10 checks passed
@braddialpad braddialpad deleted the feat/emoji-picker-search branch May 31, 2024 22:46
juliodialpad pushed a commit that referenced this pull request May 31, 2024
@semantic-release-bot
chore(release): NO-JIRA dialtone/v9.42.0
d12e074 
# [9.42.0](dialtone/v9.41.0...dialtone/v9.42.0) (2024-05-31)

### Bug Fixes

* NO-JIRA remove double classes from dialtone output ([#340](#340)) ([0fcea93](0fcea93))
* **Tooltip:** NO-JIRA do not display when empty, general cleanup ([#344](#344)) ([a83d619](a83d619))

### Features

* **Button:** DLT-1779 add link-inverted prop ([#343](#343)) ([6819394](6819394))
* **Emoji Picker:** DLT-1781 allow hiding of search and setting searchQuery via prop ([#345](#345)) ([d5e5373](d5e5373))
juliodialpad pushed a commit that referenced this pull request May 31, 2024
@semantic-release-bot
chore(release): NO-JIRA dialtone-css/v8.34.0
d370ee0 
# [8.34.0](dialtone-css/v8.33.0...dialtone-css/v8.34.0) (2024-05-31)

### Bug Fixes

* NO-JIRA remove double classes from dialtone output ([#340](#340)) ([0fcea93](0fcea93))

### Features

* **Emoji Picker:** DLT-1781 allow hiding of search and setting searchQuery via prop ([#345](#345)) ([d5e5373](d5e5373))
juliodialpad pushed a commit that referenced this pull request May 31, 2024
@semantic-release-bot
chore(release): NO-JIRA dialtone-vue2/v2.136.0
2a50832 
# [2.136.0](dialtone-vue2/v2.135.0...dialtone-vue2/v2.136.0) (2024-05-31)

### Bug Fixes

* **Tooltip:** NO-JIRA do not display when empty, general cleanup ([#344](#344)) ([a83d619](a83d619))

### Features

* **Button:** DLT-1779 add link-inverted prop ([#343](#343)) ([6819394](6819394))
* **Emoji Picker:** DLT-1781 allow hiding of search and setting searchQuery via prop ([#345](#345)) ([d5e5373](d5e5373))
juliodialpad pushed a commit that referenced this pull request May 31, 2024
@semantic-release-bot
chore(release): NO-JIRA dialtone-vue3/v3.129.0
e29f485 
# [3.129.0](dialtone-vue3/v3.128.0...dialtone-vue3/v3.129.0) (2024-05-31)

### Bug Fixes

* **Tooltip:** NO-JIRA do not display when empty, general cleanup ([#344](#344)) ([a83d619](a83d619))

### Features

* **Button:** DLT-1779 add link-inverted prop ([#343](#343)) ([6819394](6819394))
* **Emoji Picker:** DLT-1781 allow hiding of search and setting searchQuery via prop ([#345](#345)) ([d5e5373](d5e5373))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@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

@braddialpad braddialpad

Labels
no-visual-test Add this tag when the PR does not need visual testing
Projects
None yet
Milestone
No milestone
2 participants
@braddialpad @juliodialpad