From e17fd36dec8fd039c5509351ff1d27fbcaf77228 Mon Sep 17 00:00:00 2001 From: Julio Ortega Date: Thu, 28 Sep 2023 13:06:44 -0600 Subject: [PATCH] fix(callbox, avatar): events and styling (#1218) * fix: remove stop event modifier * fix(callbox): change to underline on title hover * docs(callbox): update examples to use dt-stack * add emit to callbox * update dialtone * update button kinds * center icons horizontally --- components/avatar/avatar.vue | 2 +- package-lock.json | 315 +++++++++++++++++- package.json | 2 +- recipes/leftbar/callbox/callbox.vue | 22 +- .../callbox/callbox_variants.story.vue | 83 +++-- 5 files changed, 375 insertions(+), 49 deletions(-) diff --git a/components/avatar/avatar.vue b/components/avatar/avatar.vue index 5a31c8699e..755d3f4483 100644 --- a/components/avatar/avatar.vue +++ b/components/avatar/avatar.vue @@ -5,7 +5,7 @@ :class="avatarClasses" data-qa="dt-avatar" :aria-label="buttonAriaLabel" - @click.stop="handleClick" + @click="handleClick" >
=2.6" } }, + "node_modules/@dialpad/dialtone/node_modules/@dialpad/dialtone-icons": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@dialpad/dialtone-icons/-/dialtone-icons-3.2.0.tgz", + "integrity": "sha512-zzvdJXitzmt5bfO/XnHULhqUuvD4cm57UU2xCbDTuEsqOAyYE4Qxa6DPbjHIOfDl92Rdb0N9R8+R35O4YjcbxQ==", + "dev": true, + "peerDependencies": { + "vue": ">=3.2" + } + }, + "node_modules/@dialpad/dialtone/node_modules/@vue/compiler-core": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz", + "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/parser": "^7.21.3", + "@vue/shared": "3.3.4", + "estree-walker": "^2.0.2", + "source-map-js": "^1.0.2" + } + }, + "node_modules/@dialpad/dialtone/node_modules/@vue/compiler-dom": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz", + "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==", + "dev": true, + "peer": true, + "dependencies": { + "@vue/compiler-core": "3.3.4", + "@vue/shared": "3.3.4" + } + }, + "node_modules/@dialpad/dialtone/node_modules/@vue/compiler-sfc": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz", + "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/parser": "^7.20.15", + "@vue/compiler-core": "3.3.4", + "@vue/compiler-dom": "3.3.4", + "@vue/compiler-ssr": "3.3.4", + "@vue/reactivity-transform": "3.3.4", + "@vue/shared": "3.3.4", + "estree-walker": "^2.0.2", + "magic-string": "^0.30.0", + "postcss": "^8.1.10", + "source-map-js": "^1.0.2" + } + }, + "node_modules/@dialpad/dialtone/node_modules/@vue/compiler-ssr": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz", + "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==", + "dev": true, + "peer": true, + "dependencies": { + "@vue/compiler-dom": "3.3.4", + "@vue/shared": "3.3.4" + } + }, + "node_modules/@dialpad/dialtone/node_modules/@vue/reactivity-transform": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz", + "integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/parser": "^7.20.15", + "@vue/compiler-core": "3.3.4", + "@vue/shared": "3.3.4", + "estree-walker": "^2.0.2", + "magic-string": "^0.30.0" + } + }, + "node_modules/@dialpad/dialtone/node_modules/@vue/server-renderer": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz", + "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==", + "dev": true, + "peer": true, + "dependencies": { + "@vue/compiler-ssr": "3.3.4", + "@vue/shared": "3.3.4" + }, + "peerDependencies": { + "vue": "3.3.4" + } + }, + "node_modules/@dialpad/dialtone/node_modules/@vue/shared": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz", + "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==", + "dev": true, + "peer": true + }, + "node_modules/@dialpad/dialtone/node_modules/vue": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz", + "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==", + "dev": true, + "peer": true, + "dependencies": { + "@vue/compiler-dom": "3.3.4", + "@vue/compiler-sfc": "3.3.4", + "@vue/runtime-dom": "3.3.4", + "@vue/server-renderer": "3.3.4", + "@vue/shared": "3.3.4" + } + }, "node_modules/@dialpad/semantic-release-changelog-json": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@dialpad/semantic-release-changelog-json/-/semantic-release-changelog-json-1.0.0.tgz", @@ -11076,6 +11189,43 @@ "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==", "dev": true }, + "node_modules/@vue/runtime-core": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz", + "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==", + "dev": true, + "peer": true, + "dependencies": { + "@vue/reactivity": "3.3.4", + "@vue/shared": "3.3.4" + } + }, + "node_modules/@vue/runtime-core/node_modules/@vue/shared": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz", + "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==", + "dev": true, + "peer": true + }, + "node_modules/@vue/runtime-dom": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz", + "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==", + "dev": true, + "peer": true, + "dependencies": { + "@vue/runtime-core": "3.3.4", + "@vue/shared": "3.3.4", + "csstype": "^3.1.1" + } + }, + "node_modules/@vue/runtime-dom/node_modules/@vue/shared": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz", + "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==", + "dev": true, + "peer": true + }, "node_modules/@vue/shared": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.2.tgz", @@ -41315,12 +41465,122 @@ } }, "@dialpad/dialtone": { - "version": "8.15.0", - "resolved": "https://registry.npmjs.org/@dialpad/dialtone/-/dialtone-8.15.0.tgz", - "integrity": "sha512-EBeyCiEfiRn9HCVxQA5bEoBP+YhiNMTfFBgofU2ocrV+ybAD2XrJZ6LJzr2lPvFpD0FtuynwtP6JLXT6EeqA8w==", + "version": "8.16.1", + "resolved": "https://registry.npmjs.org/@dialpad/dialtone/-/dialtone-8.16.1.tgz", + "integrity": "sha512-PabATV0QCHfyrK1q/N8tM8IDXJ10T5QCU56a4xNQVJO6o60OnzGxLqI5FXsEgu1tDFMPyJl2UTFe/5JfMLEk8w==", "dev": true, "requires": { + "@dialpad/dialtone-icons": "^3.2.0", "docopt": "^0.6.2" + }, + "dependencies": { + "@dialpad/dialtone-icons": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@dialpad/dialtone-icons/-/dialtone-icons-3.2.0.tgz", + "integrity": "sha512-zzvdJXitzmt5bfO/XnHULhqUuvD4cm57UU2xCbDTuEsqOAyYE4Qxa6DPbjHIOfDl92Rdb0N9R8+R35O4YjcbxQ==", + "dev": true, + "requires": {} + }, + "@vue/compiler-core": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz", + "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==", + "dev": true, + "peer": true, + "requires": { + "@babel/parser": "^7.21.3", + "@vue/shared": "3.3.4", + "estree-walker": "^2.0.2", + "source-map-js": "^1.0.2" + } + }, + "@vue/compiler-dom": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz", + "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==", + "dev": true, + "peer": true, + "requires": { + "@vue/compiler-core": "3.3.4", + "@vue/shared": "3.3.4" + } + }, + "@vue/compiler-sfc": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz", + "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==", + "dev": true, + "peer": true, + "requires": { + "@babel/parser": "^7.20.15", + "@vue/compiler-core": "3.3.4", + "@vue/compiler-dom": "3.3.4", + "@vue/compiler-ssr": "3.3.4", + "@vue/reactivity-transform": "3.3.4", + "@vue/shared": "3.3.4", + "estree-walker": "^2.0.2", + "magic-string": "^0.30.0", + "postcss": "^8.1.10", + "source-map-js": "^1.0.2" + } + }, + "@vue/compiler-ssr": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz", + "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==", + "dev": true, + "peer": true, + "requires": { + "@vue/compiler-dom": "3.3.4", + "@vue/shared": "3.3.4" + } + }, + "@vue/reactivity-transform": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz", + "integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==", + "dev": true, + "peer": true, + "requires": { + "@babel/parser": "^7.20.15", + "@vue/compiler-core": "3.3.4", + "@vue/shared": "3.3.4", + "estree-walker": "^2.0.2", + "magic-string": "^0.30.0" + } + }, + "@vue/server-renderer": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz", + "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==", + "dev": true, + "peer": true, + "requires": { + "@vue/compiler-ssr": "3.3.4", + "@vue/shared": "3.3.4" + } + }, + "@vue/shared": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz", + "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==", + "dev": true, + "peer": true + }, + "vue": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz", + "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==", + "dev": true, + "peer": true, + "requires": { + "@vue/compiler-dom": "3.3.4", + "@vue/compiler-sfc": "3.3.4", + "@vue/runtime-dom": "3.3.4", + "@vue/server-renderer": "3.3.4", + "@vue/shared": "3.3.4" + } + } } }, "@dialpad/dialtone-icons": { @@ -47384,6 +47644,47 @@ "magic-string": "^0.30.0" } }, + "@vue/runtime-core": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz", + "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==", + "dev": true, + "peer": true, + "requires": { + "@vue/reactivity": "3.3.4", + "@vue/shared": "3.3.4" + }, + "dependencies": { + "@vue/shared": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz", + "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==", + "dev": true, + "peer": true + } + } + }, + "@vue/runtime-dom": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz", + "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==", + "dev": true, + "peer": true, + "requires": { + "@vue/runtime-core": "3.3.4", + "@vue/shared": "3.3.4", + "csstype": "^3.1.1" + }, + "dependencies": { + "@vue/shared": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz", + "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==", + "dev": true, + "peer": true + } + } + }, "@vue/shared": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.2.tgz", diff --git a/package.json b/package.json index 29c1bf1909..90cc8979db 100644 --- a/package.json +++ b/package.json @@ -51,7 +51,7 @@ "@commitlint/cli": "^17.6.6", "@commitlint/config-conventional": "^17.6.6", "@dialpad/conventional-changelog-angular": "^1.1.1", - "@dialpad/dialtone": "^8.15.0", + "@dialpad/dialtone": "^8.16.1", "@dialpad/semantic-release-changelog-json": "^1.0.0", "@percy/cli": "^1.26.2", "@percy/storybook": "^4.3.6", diff --git a/recipes/leftbar/callbox/callbox.vue b/recipes/leftbar/callbox/callbox.vue index b148645086..d5e30c07c8 100644 --- a/recipes/leftbar/callbox/callbox.vue +++ b/recipes/leftbar/callbox/callbox.vue @@ -26,14 +26,14 @@ :seed="avatarSeed" :clickable="clickable" size="sm" - @click.stop="handleClick" + @click="handleClick" />
{{ title }} @@ -164,6 +164,16 @@ export default { }, }, + emits: [ + /** + * Callbox click event + * + * @event click + * @type {PointerEvent | KeyboardEvent} + */ + 'click', + ], + computed: { shouldShowAvatar () { return this.avatarFullName || this.avatarSrc; @@ -291,12 +301,8 @@ export default { box-shadow: var(--dt-shadow-focus); } - &:hover { - background-color: var(--dt-action-color-background-muted-hover) - } - - &:active { - background-color: var(--dt-action-color-background-muted-active) + &:hover, &:active { + text-decoration: underline; } } } diff --git a/recipes/leftbar/callbox/callbox_variants.story.vue b/recipes/leftbar/callbox/callbox_variants.story.vue index d31855c03e..bb52abd9ef 100644 --- a/recipes/leftbar/callbox/callbox_variants.story.vue +++ b/recipes/leftbar/callbox/callbox_variants.story.vue @@ -27,11 +27,11 @@ aria-label="hang call" circle importance="clear" + kind="danger" > @@ -74,11 +74,11 @@ aria-label="hang call" circle importance="clear" + kind="danger" > @@ -128,11 +128,11 @@ aria-label="hang call" circle importance="clear" + kind="danger" > @@ -167,11 +167,11 @@ aria-label="hang call" circle importance="clear" + kind="danger" > @@ -185,14 +185,17 @@ border-color="ai" >