refactor(badge, emoji-tabset, empty-state): remove DtIcon #481

juliodialpad · 2024-08-30T18:12:25Z

Remove DtIcon usage on Badge, Emoji Tabset and Empty State components

Obligatory GIF (super important!)

🛠️ Type Of Change

These types will increment the version number on release:

Refactor

📖 Jira Ticket

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

📖 Description

Removed DtIcon usage from Badge, Emoji tabset and Empty state components, changed to slots if any icon could be used or to specific icon if just a few needed for the component.

💡 Context

We're making dialtone-vue fully tree-shakeable

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

🔮 Next Steps

Merge to beta and test

ninamarina · 2024-09-02T19:58:43Z

Some tests are failing. Seems like importing the icons this way it doesn't add the data-qa attribute that it used to.

…-empty_state

ninamarina · 2024-09-03T20:12:03Z

The controls in storybook are still showing a select menu even though now the icon and illustration are slots:

Same with the badge

ninamarina · 2024-09-03T20:14:39Z

The controls in storybook are still showing a select menu even though now the icon and illustration are slots:

Same with the badge

Never mind, I see that's on purpose just for the playground

ninamarina · 2024-09-03T20:32:12Z

We have a new property "iconSize" for the badge component. Do we really want that? What would happen if a different size is passed? I don't see any changes in storybook

ninamarina

Looks good, I only have the question about the iconSize prop.

braddialpad · 2024-09-04T19:00:22Z

We have a new property "iconSize" for the badge component. Do we really want that? What would happen if a different size is passed? I don't see any changes in storybook

Wouldn't they just pass the size of the icon via the component they pass into the slot? Don't think the prop is necessary. Should we instead have a scoped slot for default size?

juliodialpad · 2024-09-04T19:06:23Z

You're right, I was thinking on making "easier" to handle both icon sizes with a default size of '200' but makes no sense to have a prop, will remove it.

braddialpad

The changes look pretty good to me, however we will need to update the docsite examples to reflect the new changes.

braddialpad

Looks good, you can merge this. Regarding the doc I mentioned you can do it in another PR if you wish.

juliodialpad · 2024-09-05T18:21:40Z

Looks good, you can merge this. Regarding the doc I mentioned you can do it in another PR if you wish.

Updated docs, don't want to forgot to do it later haha

braddialpad

Thanks!

github-actions · 2024-09-05T18:26:50Z

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

# [9.73.0-beta.1](dialtone/v9.72.1...dialtone/v9.73.0-beta.1) (2024-09-05) ### Bug Fixes * NO-JIRA merge staging into beta ([#478](#478)) ([09f1165](09f1165)) * **Rich Text Editor:** DLT-2017 emojis positioning ([#486](#486)) ([b857386](b857386)) ### Code Refactoring * **Badge, Emoji Tabset, Empty State:** remove DtIcon ([#481](#481)) ([0fa1280](0fa1280)) ### Features * **Avatar:** DLT-1916 remove dt-icon ([#466](#466)) ([6ef90db](6ef90db)) * **Keyboard Shortcut To Unread Pill:** DLT-1916 remove dt-icon ([#482](#482)) ([277ae13](277ae13))

# [2.159.0-beta.1](dialtone-vue2/v2.158.0...dialtone-vue2/v2.159.0-beta.1) (2024-09-05) ### Bug Fixes * NO-JIRA merge staging into beta ([#478](#478)) ([09f1165](09f1165)) * **Rich Text Editor:** DLT-2017 emojis positioning ([#486](#486)) ([b857386](b857386)) ### Code Refactoring * **Badge, Emoji Tabset, Empty State:** remove DtIcon ([#481](#481)) ([0fa1280](0fa1280)) ### Features * **Keyboard Shortcut To Unread Pill:** DLT-1916 remove dt-icon ([#482](#482)) ([277ae13](277ae13))

# [3.152.0-beta.1](dialtone-vue3/v3.151.0...dialtone-vue3/v3.152.0-beta.1) (2024-09-05) ### Bug Fixes * NO-JIRA merge staging into beta ([#478](#478)) ([09f1165](09f1165)) * **Rich Text Editor:** DLT-2017 emojis positioning ([#486](#486)) ([b857386](b857386)) ### Code Refactoring * **Badge, Emoji Tabset, Empty State:** remove DtIcon ([#481](#481)) ([0fa1280](0fa1280)) ### Features * **Avatar:** DLT-1916 remove dt-icon ([#466](#466)) ([6ef90db](6ef90db)) * **Keyboard Shortcut To Unread Pill:** DLT-1916 remove dt-icon ([#482](#482)) ([277ae13](277ae13))

# [9.77.0-beta.1](dialtone/v9.76.0...dialtone/v9.77.0-beta.1) (2024-09-23) ### Bug Fixes * NO-JIRA merge staging into beta ([#478](#478)) ([09f1165](09f1165)) * **Tokens:** DLT-2053 android tokens color value ([#504](#504)) ([368c9db](368c9db)) ### Code Refactoring * **Badge, Emoji Tabset, Empty State:** remove DtIcon ([#481](#481)) ([0fa1280](0fa1280)) ### Features * **Avatar:** DLT-1916 remove dt-icon ([#466](#466)) ([6ef90db](6ef90db)) * **Avatar:** DLT-1916 remove dt-icon from Avatar vue 2 ([#474](#474)) ([e8600c3](e8600c3)) * **Feed Item Pill:** DLT-1916 remove dt-icon from Feed Item Pill ([#489](#489)) ([bde73c8](bde73c8)) * **Keyboard Shortcut To Unread Pill:** DLT-1916 remove dt-icon ([#482](#482)) ([277ae13](277ae13)) * **Message Input:** DLT-1916 remove dt-icon from message input ([#490](#490)) ([3215116](3215116))

# [2.162.0-beta.1](dialtone-vue2/v2.161.0...dialtone-vue2/v2.162.0-beta.1) (2024-09-23) ### Bug Fixes * NO-JIRA merge staging into beta ([#478](#478)) ([09f1165](09f1165)) ### Code Refactoring * **Badge, Emoji Tabset, Empty State:** remove DtIcon ([#481](#481)) ([0fa1280](0fa1280)) ### Features * **Avatar:** DLT-1916 remove dt-icon from Avatar vue 2 ([#474](#474)) ([e8600c3](e8600c3)) * **Feed Item Pill:** DLT-1916 remove dt-icon from Feed Item Pill ([#489](#489)) ([bde73c8](bde73c8)) * **Keyboard Shortcut To Unread Pill:** DLT-1916 remove dt-icon ([#482](#482)) ([277ae13](277ae13)) * **Message Input:** DLT-1916 remove dt-icon from message input ([#490](#490)) ([3215116](3215116))

# [3.155.0-beta.1](dialtone-vue3/v3.154.0...dialtone-vue3/v3.155.0-beta.1) (2024-09-23) ### Bug Fixes * NO-JIRA merge staging into beta ([#478](#478)) ([09f1165](09f1165)) ### Code Refactoring * **Badge, Emoji Tabset, Empty State:** remove DtIcon ([#481](#481)) ([0fa1280](0fa1280)) ### Features * **Avatar:** DLT-1916 remove dt-icon ([#466](#466)) ([6ef90db](6ef90db)) * **Avatar:** DLT-1916 remove dt-icon from Avatar vue 2 ([#474](#474)) ([e8600c3](e8600c3)) * **Feed Item Pill:** DLT-1916 remove dt-icon from Feed Item Pill ([#489](#489)) ([bde73c8](bde73c8)) * **Keyboard Shortcut To Unread Pill:** DLT-1916 remove dt-icon ([#482](#482)) ([277ae13](277ae13)) * **Message Input:** DLT-1916 remove dt-icon from message input ([#490](#490)) ([3215116](3215116))

# [9.77.0](dialtone/v9.76.3...dialtone/v9.77.0) (2024-10-01) ### Code Refactoring * **Badge, Emoji Tabset, Empty State:** remove DtIcon ([#481](#481)) ([0fa1280](0fa1280)) ### Features * **Avatar:** DLT-1916 remove dt-icon ([#466](#466)) ([6ef90db](6ef90db)) * **Avatar:** DLT-1916 remove dt-icon from Avatar vue 2 ([#474](#474)) ([e8600c3](e8600c3)) * **Feed Item Pill:** DLT-1916 remove dt-icon from Feed Item Pill ([#489](#489)) ([bde73c8](bde73c8)) * **Keyboard Shortcut To Unread Pill:** DLT-1916 remove dt-icon ([#482](#482)) ([277ae13](277ae13)) * **Message Input:** DLT-1916 remove dt-icon from message input ([#490](#490)) ([3215116](3215116))

# [2.162.0](dialtone-vue2/v2.161.2...dialtone-vue2/v2.162.0) (2024-10-01) ### Code Refactoring * **Badge, Emoji Tabset, Empty State:** remove DtIcon ([#481](#481)) ([0fa1280](0fa1280)) ### Features * **Avatar:** DLT-1916 remove dt-icon from Avatar vue 2 ([#474](#474)) ([e8600c3](e8600c3)) * **Feed Item Pill:** DLT-1916 remove dt-icon from Feed Item Pill ([#489](#489)) ([bde73c8](bde73c8)) * **Keyboard Shortcut To Unread Pill:** DLT-1916 remove dt-icon ([#482](#482)) ([277ae13](277ae13)) * **Message Input:** DLT-1916 remove dt-icon from message input ([#490](#490)) ([3215116](3215116))

# [3.155.0](dialtone-vue3/v3.154.2...dialtone-vue3/v3.155.0) (2024-10-01) ### Code Refactoring * **Badge, Emoji Tabset, Empty State:** remove DtIcon ([#481](#481)) ([0fa1280](0fa1280)) ### Features * **Avatar:** DLT-1916 remove dt-icon ([#466](#466)) ([6ef90db](6ef90db)) * **Avatar:** DLT-1916 remove dt-icon from Avatar vue 2 ([#474](#474)) ([e8600c3](e8600c3)) * **Feed Item Pill:** DLT-1916 remove dt-icon from Feed Item Pill ([#489](#489)) ([bde73c8](bde73c8)) * **Keyboard Shortcut To Unread Pill:** DLT-1916 remove dt-icon ([#482](#482)) ([277ae13](277ae13)) * **Message Input:** DLT-1916 remove dt-icon from message input ([#490](#490)) ([3215116](3215116))

juliodialpad added 5 commits August 29, 2024 14:27

remove dt-icon from badge

76cbd04

remove dt-icon from emoji_tabset

3791511

add empty_state to components_list

89ff803

remove dt-icon from empty_state

3a8115c

fix empty_state tests

09c24fe

juliodialpad added the no-visual-test Add this tag when the PR does not need visual testing label Aug 30, 2024

juliodialpad self-assigned this Aug 30, 2024

juliodialpad requested review from iropolo, francisrupert, braddialpad and ninamarina as code owners August 30, 2024 18:12

juliodialpad added 2 commits September 3, 2024 10:43

Merge branch 'remove/dt-icon' into remove/dt-icon--badge-emoji_tabset…

c7aeb03

…-empty_state

fix tests

d69a0f4

ninamarina approved these changes Sep 3, 2024

View reviewed changes

braddialpad requested changes Sep 4, 2024

View reviewed changes

remove iconSize

7d82ce8

braddialpad approved these changes Sep 5, 2024

View reviewed changes

juliodialpad added 2 commits September 5, 2024 11:58

update badge docs

b3e3688

update empty state docs

f3c5c5a

juliodialpad requested a review from braddialpad September 5, 2024 18:21

braddialpad approved these changes Sep 5, 2024

View reviewed changes

juliodialpad merged commit 0fa1280 into remove/dt-icon Sep 5, 2024
11 checks passed

juliodialpad deleted the remove/dt-icon--badge-emoji_tabset-empty_state branch September 5, 2024 18:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(badge, emoji-tabset, empty-state): remove DtIcon #481

refactor(badge, emoji-tabset, empty-state): remove DtIcon #481

juliodialpad commented Aug 30, 2024

ninamarina commented Sep 2, 2024

ninamarina commented Sep 3, 2024

ninamarina commented Sep 3, 2024

ninamarina commented Sep 3, 2024

ninamarina left a comment

braddialpad commented Sep 4, 2024 •

edited

Loading

juliodialpad commented Sep 4, 2024

braddialpad left a comment

braddialpad left a comment

juliodialpad commented Sep 5, 2024

braddialpad left a comment

github-actions bot commented Sep 5, 2024

refactor(badge, emoji-tabset, empty-state): remove DtIcon #481

refactor(badge, emoji-tabset, empty-state): remove DtIcon #481

Conversation

juliodialpad commented Aug 30, 2024

Remove DtIcon usage on Badge, Emoji Tabset and Empty State components

Obligatory GIF (super important!)

🛠️ Type Of Change

📖 Jira Ticket

📖 Description

💡 Context

📝 Checklist

🔮 Next Steps

ninamarina commented Sep 2, 2024

ninamarina commented Sep 3, 2024

ninamarina commented Sep 3, 2024

ninamarina commented Sep 3, 2024

ninamarina left a comment

Choose a reason for hiding this comment

braddialpad commented Sep 4, 2024 • edited Loading

juliodialpad commented Sep 4, 2024

braddialpad left a comment

Choose a reason for hiding this comment

braddialpad left a comment

Choose a reason for hiding this comment

juliodialpad commented Sep 5, 2024

braddialpad left a comment

Choose a reason for hiding this comment

github-actions bot commented Sep 5, 2024

braddialpad commented Sep 4, 2024 •

edited

Loading