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(combobox-multi-select): DLT-2066 chip truncation #503

Merged
merged 4 commits into from
Sep 19, 2024
Merged

feat(combobox-multi-select): DLT-2066 chip truncation #503

merged 4 commits into from
Sep 19, 2024

Conversation

braddialpad
Copy link
Contributor

feat(combobox-multi-select): DLT-2066 chip truncation

Obligatory GIF (super important!)

Obligatory GIF

🛠️ Type Of Change

  • Feature

📖 Jira Ticket

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

📖 Description

Added new prop chipMaxWidth that will truncate text if the chip is greater than that width.

💡 Context

Some users are having issues with multiselect in smaller width interfaces.

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

📷 Screenshots / GIFs

Screenshot 2024-09-19 at 11 32 52 AM

@braddialpad braddialpad added the visual-test-ready Add this tag when the PR is ready for visual test, to trigger GHA visual tests label Sep 19, 2024
@braddialpad braddialpad self-assigned this Sep 19, 2024
juliodialpad
juliodialpad approved these changes Sep 19, 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.

This works pretty well, along with the change I made recently, should be enough for the users to avoid overflowing issues with this component.

Not related to this change but the focus ring looks pretty strange.

Screenshot 2024-09-19 at 1 49 03 p m

packages/dialtone-vue3/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue
@@ -1,3 +1,4 @@
<!-- eslint-disable vue/no-static-inline-styles -->
Copy link
Collaborator

Choose a reason for hiding this comment

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

why is this line needed? The same applies for Vue 2 version

Copy link
Contributor Author

@braddialpad braddialpad Sep 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

because we're setting :style directly on the component which is generally not something we want to do, but in this case it makes sense because the style is passed in via a prop and we have to set it dynamically.

@braddialpad
Copy link
Contributor Author

Not related to this change but the focus ring looks pretty strange.

hmm this IS actually related to this change. it's fine on https://dialtone.dialpad.com/vue

@braddialpad
Copy link
Contributor Author

Problem fixed, I removed the overflow: hidden from the truncation class. Doesn't seem to hurt the truncation at all.

@github-actions GitHub Actions
Copy link

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

@braddialpad braddialpad merged commit 0a94cfc into staging Sep 19, 2024
13 checks passed
@braddialpad braddialpad deleted the feat/multi-select-truncation branch September 19, 2024 22:35
juliodialpad pushed a commit that referenced this pull request Sep 20, 2024
@semantic-release-bot
chore(release): NO-JIRA dialtone/v9.76.0
1a72daf 
# [9.76.0](dialtone/v9.75.0...dialtone/v9.76.0) (2024-09-20)

### Documentation

* **Hovercard, Empty State:** DLT-1934 update docs ([#501](#501)) ([e3ea5c6](e3ea5c6))

### Features

* **Combobox Multi Select:** DLT-2066 chip truncation ([#503](#503)) ([0a94cfc](0a94cfc))
juliodialpad pushed a commit that referenced this pull request Sep 20, 2024
@semantic-release-bot
chore(release): NO-JIRA dialtone-vue2/v2.161.0
f712189 
# [2.161.0](dialtone-vue2/v2.160.0...dialtone-vue2/v2.161.0) (2024-09-20)

### Documentation

* **Hovercard, Empty State:** DLT-1934 update docs ([#501](#501)) ([e3ea5c6](e3ea5c6))

### Features

* **Combobox Multi Select:** DLT-2066 chip truncation ([#503](#503)) ([0a94cfc](0a94cfc))
juliodialpad pushed a commit that referenced this pull request Sep 20, 2024
@semantic-release-bot
chore(release): NO-JIRA dialtone-vue3/v3.154.0
ff8491e 
# [3.154.0](dialtone-vue3/v3.153.0...dialtone-vue3/v3.154.0) (2024-09-20)

### Documentation

* **Hovercard, Empty State:** DLT-1934 update docs ([#501](#501)) ([e3ea5c6](e3ea5c6))

### Features

* **Combobox Multi Select:** DLT-2066 chip truncation ([#503](#503)) ([0a94cfc](0a94cfc))
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
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.
2 participants
@braddialpad @juliodialpad