profile
viewpoint
Adrià Fontcuberta afontcu @holaluz Caldes de Montbui, Catalunya https://afontcu.dev Software development: JS, CSS, UX, lean software development, agile, and everything in between. Maintainer of @vue/test-utils and @testing-library/vue.

afontcu/awesome-learning 198

A curated list of awesome learning material

afontcu/cool-ux-tools 9

Cool UX Tools is a curated list of (obviously) cool resources and tools for developers, UX researchers, designers and project managers.

afontcu/finger-frenzy 9

How fast can you type the alphabet?

afontcu/aos2018 2

Website for the Agile Open Spain 2018

afontcu/afontcu-npm 0

npx afontcu :)

afontcu/all-contributors 0

✨ Recognize all contributors, not just the ones who push code ✨

afontcu/awesome 0

😎 Awesome lists about all kinds of interesting topics

afontcu/awesome-vue 0

🎉 A curated list of awesome things related to Vue.js

push eventafontcu/awesome-learning

Adrià Fontcuberta

commit sha 923d5f4c7c7935bec8bfad9a41cfabc65ee23873

Update README.md

view details

push time in 11 days

issue commenttesting-library/vue-testing-library

TypeError: Cannot read property '_isDestroyed' of undefined

Yeah, maybe we could improve something there… the reason to have a try/finally block is explained on this PR: https://github.com/testing-library/vue-testing-library/pull/142

if we can come up with a valid use case (in form of a current failing test) it would be great!

kauanschaeffer

comment created time in 14 days

issue commenttesting-library/vue-testing-library

TypeError: Cannot read property '_isDestroyed' of undefined

Hi! 👋 as you mentioned in the issue on testing-vue, it looks like this is an upstream issue originated there?

kauanschaeffer

comment created time in 14 days

issue commenttesting-library/vue-testing-library

Syntax in vue-router example appears deprecated?

Hi, and thank you for your first report! It seems that you're using Vue Testing Library for Vue 3 (which lives in next), but checking docs for Vue 2 (which lives in main).

Here's the router example file for Vue 3: https://github.com/testing-library/vue-testing-library/blob/next/src/tests/vue-router.js

hope it helps!

FlorentBuissonOReilly

comment created time in 14 days

push eventafontcu/awesome-learning

Adrià Fontcuberta

commit sha 69e182b5572abddfaf3a61becad7cdafc01fc7f9

Update README.md

view details

push time in 14 days

Pull request review commentvuejs/vue-test-utils-next

chore(findComponent): refactor find & findComponent (fixes #716, #899)

 import {   Plugin,   AppConfig,   VNode,-  VNodeProps+  VNodeProps,+  FunctionalComponent } from 'vue' -interface RefSelector {+export interface RefSelector {   ref: string }--interface NameSelector {-  name: string-}--interface RefSelector {-  ref: string-}--interface NameSelector {+export interface NameSelector {   name: string+  length?: never

damn, nasty but smart. thanks for the explanation, I would've missed it

xanf

comment created time in 14 days

PullRequestReviewEvent

pull request commentvuejs/vue-test-utils-next

chore(deps-dev): bump lint-staged from 11.2.6 to 12.0.3

from release changelog:

llint-staged is now a pure ESM module, and thus requires Node.js version ^12.20.0 || ^14.13.1 || >=16.0.0.

However, netlify is using node 12.18:

8:04:28 PM: Started restoring cached node version 8:04:31 PM: Finished restoring cached node version 8:04:31 PM: v12.18.0 is already installed. 8:04:32 PM: Now using node v12.18.0 (npm v6.14.4)

Not sure how critical this is, but maybe it is related to the issues trying to update vitepress?

dependabot[bot]

comment created time in 17 days

PullRequestReviewEvent

push eventafontcu/awesome-learning

Adrià Fontcuberta

commit sha 7e6eb1211b0254bbc6b65a15547f855383bbf03f

Update README.md

view details

push time in 18 days

issue commentvuejs/vue-test-utils-next

FR: Add replacement options for html output.

Hi! 👋 I think your current solution is good (and smart!) enough, and given that there's a userland valid solution, I don't think adding/documenting/maintaining a new feature is worth it.

sschneider-ihre-pvs

comment created time in 18 days

pull request commentholaluz/margarita

[PoC] Accessible disabled ma-text-field

It's not that easy to add the styles because we need readonly to be a prop. The element that has the css for disabled is the container of the input, therefore we need to be able to set a custom css class there

yep, makes total sense!

Since we saw we have to maintain both props disabled and readonly, we deleted disabled 😈. but yeah it's a breaking change. I don't know what should we do.

Since the maintenance surface is really small, I vote for keeping them both, because they are just a couple of CSS classes. We'll avoid the hassle of a breaking change + keep the disabled prop that might come in handy.


It is true, though, that we might want to check what are the current usages of disabled, and assess whether if readonly is a better solution. Thank you for bringing this up!

Samitier

comment created time in 19 days

pull request commentholaluz/margarita

[PoC] Accessible disabled ma-text-field

Given that:

  1. disabled and readonly are different things, and one cannot be confused with the other (as you pointed out, good catch).
  2. This PR is a breaking change.

Would it be simpler to add styles for a readonly input element? I mean, you can already define a readonly input element:

<!-- this already works! it is pure HTML. if it doesn't, then it's a bug -->
<ma-text-field readonly />

but we might be missing some styles. What about adding them letting disabled keep working? There are some legit use cases for it, and instead of a breaking change this would mean releasing a minor version.

Samitier

comment created time in 19 days

PullRequestReviewEvent

Pull request review commentholaluz/margarita

BREAKING CHANGE: New icon system

 <template>   <ma-text v-if="type === 'check'" tone="pink">-    <ma-icon-      icon="Checkmark"-      width="16"-      height="14"-      view-box-height="14"-      title="Check icon"-    />+    <ma-icon icon="Checkmark" size="small" title="Checkmark Icon" />

For this line in particular, I think removing title is good enough, because the title will be inferred from the component.

For the general picture, I'm not entirely sure having a "Icon of a calendar" description is any helpful. I see two scenarios:

  1. One where the icon has a real meaning, and it is the only element (say, a button with an icon to download a contract). In this case we don't want a description for the icon, but rather some additional context (text, ARIA attribute, or the title) that explains what's the element about.
  2. Another where the icon is purely stylistic. In this case, I'd argue the icon should be invisible to screen readers, because they only add noise. This is the same scenario with stylistic images, where the suggestion is to drop a alt="" attribute.

We might want to iterate this in a future release?

icurdu

comment created time in 19 days

Pull request review commentholaluz/margarita

BREAKING CHANGE: New icon system

 export default {     },      iconName() {-      return this.title ? this.title : `${this.icon}-icon`+      return this.title ? this.title : `${this.icon}Icon`+    },++    sizingProperties() {+      const sizingProperties = {+        small: {+          width: '16',+          height: '16',+          viewBox: '0 0 24 24',+        },+        medium: {+          width: '24',+          height: '24',+          viewBox: '0 0 24 24',+        },+        large: {+          width: '32',+          height: '32',+          viewBox: '0 0 24 24',+        },+      }++      return sizingProperties[this.size]     },

since we might want to extract this outside of the component (see https://github.com/holaluz/margarita/pull/462#discussion_r749987766) I think having it as a simple data structure will make it easier in the future

icurdu

comment created time in 19 days

PullRequestReviewEvent
PullRequestReviewEvent

push eventholaluz/margarita

IbanCurdu

commit sha 69c064a66dd92f196bdf8d70379e687972044929

Add vetur tags

view details

push time in 19 days

push eventholaluz/margarita

Cillas Subira

commit sha cb62bfb9183463cb507f12f2d25bc3fa7258c973

fix(MaStepper): Adjust vertical divider (#448)

view details

Ramon

commit sha ff47b2a7d83445cbd74d267265784cf22f047f7f

ci: Add new step on CI to scan for secrets (#449) * add new step on CI to scan for secrets * run gitleaks after checkout, so we ignore npm modules and stuff * add link regarding options to the gitub action

view details

Eduard

commit sha 44cdb39dfbaab4ac91c31cb265cb6b8b5b97e445

chore: Port project to node 16 (#450) * Remove deprecated vscode setting * add check-node script * update CI workflows * Update package-lock

view details

Sergi Gracia

commit sha cd103a975a4549dfb6bed6bb0106fde86c5aaa95

feat(MaStepper): Add space prop (#451) * Add prop space * Fix test

view details

Eduard

commit sha 77e1dfc95bcac362c1d854c730c47cb7050f27bb

fix: Fix issue when installing library on external projects (#453) * fix: Export check-node.js file * Add prop space * Fix test * Bump chokidar version to work with node +14 Co-authored-by: Sergi Gracia <sergio.gracia@holaluz.com>

view details

Sergi Gracia

commit sha e73e106c83860332321f9df55afcd713996869a3

Fix (#452)

view details

Sergi Gracia

commit sha a2ded2bef948a18a741a6a3d094f5d560b331ac0

Revert "Fix (#452)" (#455) This reverts commit e73e106c83860332321f9df55afcd713996869a3.

view details

Sergi Gracia

commit sha 90f9ea1866a4b02fd13b69720ad526b206139422

fix(MaOption): fix indicator shrinking

view details

Blai Samitier

commit sha 214e95445e293ae90b3ad5c1fa4fc3085e08818f

fix: fix ma option error icon (#458)

view details

Blai Samitier

commit sha a6e06bc114f1061782f53488d40a5950542cf297

fix: fix maOption error icon (#459)

view details

Eduard

commit sha 68142c8a00376e7896ab4045d1d95bcefd3c9f38

fix: Avoid triggering node check when installing pkg (#457) * install pinst lib * Avoid triggering script on end users * Remove check-node export file * Use prepare instead of pinst lib

view details

IbanCurdu

commit sha 084f69c283959f4cc70352fb55085467174e09e2

feat: add visual feedback when clicking MaButton and MaLink (#460) * Added different active state for each variant * Fixed rounded variant styles Modified some styles when applying rounded props in order to match the same behavior of the button category * Added active state in Ma-Link variants * Erased a little thingy

view details

IbanCurdu

commit sha a0d54983275d420b4eaa1f4f0e6ca1664807a239

Update current icon SVG and names Modified names of the icons to match the design system new naming structure Modified icons components with the new designs Changed the default values for the stories

view details

IbanCurdu

commit sha 5b6de5bcfc337e39bea8341a790f54ba6fc77e4c

Added some new icons (1/2) Added new feedback, communication, person and document icons.

view details

IbanCurdu

commit sha 87d4e57b272d4f2284fb032bab0140050380e5bd

Added some new icons (2/2) Added the second batch of the icons to the folder.

view details

IbanCurdu

commit sha 7ba87ac01f0f6838a729f83056d2b40615b7a68e

Added color validator using tone tokens Also modified the story to use the available tones as a selector instead of plain text

view details

IbanCurdu

commit sha b4c2f17825aa7d8b16e46acd23923541fe0328f4

Modified sizing properties Added new @values according to availableicons.js Modified storybook controls for sizing

view details

IbanCurdu

commit sha 5eb7b152f8fb84e6abadf30c87c5cc75964b5552

Added direction variants for arrow & chevron icons

view details

IbanCurdu

commit sha a19904c30ac828953fcc2a107a50d5fe57e7f5fd

Refactor MaList component using new props Check variant

view details

IbanCurdu

commit sha 8be210faf4d40ce1136dbc13e2815017e06b6c49

Refactor Ma-Modal close button using new props

view details

push time in 19 days

PullRequestReviewEvent

push eventvuejs/vue-test-utils-next

dependabot[bot]

commit sha 58a0d97111a5fe7fb1651ae3b91defd2f97fcb4a

chore(deps-dev): bump vue and @vue/compat (#1081) Bumps [vue](https://github.com/vuejs/vue) and [@vue/compat](https://github.com/vuejs/vue-next). These dependencies needed to be updated together. Updates `vue` from 3.2.21 to 3.2.22 - [Release notes](https://github.com/vuejs/vue/releases) - [Commits](https://github.com/vuejs/vue/commits) Updates `@vue/compat` from 3.2.21 to 3.2.22 - [Release notes](https://github.com/vuejs/vue-next/releases) - [Changelog](https://github.com/vuejs/vue-next/blob/master/CHANGELOG.md) - [Commits](https://github.com/vuejs/vue-next/compare/v3.2.21...v3.2.22) --- updated-dependencies: - dependency-name: vue dependency-type: direct:development update-type: version-update:semver-patch - dependency-name: "@vue/compat" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

view details

push time in 19 days

delete branch vuejs/vue-test-utils-next

delete branch : dependabot/npm_and_yarn/vue-and-vue/compat-3.2.22

delete time in 19 days

PR merged vuejs/vue-test-utils-next

chore(deps-dev): bump vue and @vue/compat dependencies

Bumps vue and @vue/compat. These dependencies needed to be updated together. Updates vue from 3.2.21 to 3.2.22 <details> <summary>Commits</summary> <ul> <li>See full diff in <a href="https://github.com/vuejs/vue/commits">compare view</a></li> </ul> </details> <br />

Updates @vue/compat from 3.2.21 to 3.2.22 <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/vuejs/vue-next/releases"><code>@​vue/compat</code>'s releases</a>.</em></p> <blockquote> <h2>v3.2.22</h2> <p>Please refer to <a href="https://github.com/vuejs/vue-next/blob/master/CHANGELOG.md">CHANGELOG.md</a> for details.</p> </blockquote> </details> <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/vuejs/vue-next/blob/master/CHANGELOG.md"><code>@​vue/compat</code>'s changelog</a>.</em></p> <blockquote> <h2><a href="https://github.com/vuejs/vue-next/compare/v3.2.21...v3.2.22">3.2.22</a> (2021-11-15)</h2> <h3>Bug Fixes</h3> <ul> <li><strong>compiler-sfc:</strong> add type for props include Function in prod mode (<a href="https://github-redirect.dependabot.com/vuejs/vue-next/issues/4938">#4938</a>) (<a href="https://github.com/vuejs/vue-next/commit/9c42a1e2a3385f3b33faed5cdcc430bf8c1fc4b2">9c42a1e</a>)</li> <li><strong>compiler-sfc:</strong> add type for props's properties in prod mode (<a href="https://github-redirect.dependabot.com/vuejs/vue-next/issues/4790">#4790</a>) (<a href="https://github.com/vuejs/vue-next/commit/090df0837eb0aedd8a02fd0107b7668ca5c136a1">090df08</a>), closes <a href="https://github-redirect.dependabot.com/vuejs/vue-next/issues/4783">#4783</a></li> <li><strong>compiler-sfc:</strong> externalRE support automatic http/https prefix url pattern (<a href="https://github-redirect.dependabot.com/vuejs/vue-next/issues/4922">#4922</a>) (<a href="https://github.com/vuejs/vue-next/commit/574070f43f804fd855f4ee319936ec770a56cef0">574070f</a>), closes <a href="https://github-redirect.dependabot.com/vuejs/vue-next/issues/4920">#4920</a></li> <li><strong>compiler-sfc:</strong> fix expose codegen edge case (<a href="https://github-redirect.dependabot.com/vuejs/vue-next/issues/4919">#4919</a>) (<a href="https://github.com/vuejs/vue-next/commit/31fd590fd47e2dc89b84687ffe26a5c6f05fea34">31fd590</a>), closes <a href="https://github-redirect.dependabot.com/vuejs/vue-next/issues/4917">#4917</a></li> <li><strong>devtool:</strong> improve devtools late injection browser env detection (<a href="https://github-redirect.dependabot.com/vuejs/vue-next/issues/4890">#4890</a>) (<a href="https://github.com/vuejs/vue-next/commit/fa2237f1d824eac511c4246135318594c48dc121">fa2237f</a>)</li> <li><strong>runtime-core:</strong> improve dedupe listeners when attr fallthrough (<a href="https://github-redirect.dependabot.com/vuejs/vue-next/issues/4912">#4912</a>) (<a href="https://github.com/vuejs/vue-next/commit/b4eb7e3866d7dc722d93a48f4faae1696d4e7023">b4eb7e3</a>), closes <a href="https://github-redirect.dependabot.com/vuejs/vue-next/issues/4859">#4859</a></li> <li><strong>types/sfc:</strong> fix withDefaults type inference when using union types (<a href="https://github-redirect.dependabot.com/vuejs/vue-next/issues/4925">#4925</a>) (<a href="https://github.com/vuejs/vue-next/commit/04e58351965caf489ac68e4961ef70448d954912">04e5835</a>)</li> </ul> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/vuejs/vue-next/commit/635d88aa9ece62d2e26ec5d050294824d6b147d7"><code>635d88a</code></a> release: v3.2.22</li> <li><a href="https://github.com/vuejs/vue-next/commit/31fd590fd47e2dc89b84687ffe26a5c6f05fea34"><code>31fd590</code></a> fix(compiler-sfc): fix expose codegen edge case (<a href="https://github-redirect.dependabot.com/vuejs/vue-next/issues/4919">#4919</a>)</li> <li><a href="https://github.com/vuejs/vue-next/commit/b4eb7e3866d7dc722d93a48f4faae1696d4e7023"><code>b4eb7e3</code></a> fix(runtime-core): improve dedupe listeners when attr fallthrough (<a href="https://github-redirect.dependabot.com/vuejs/vue-next/issues/4912">#4912</a>)</li> <li><a href="https://github.com/vuejs/vue-next/commit/04e58351965caf489ac68e4961ef70448d954912"><code>04e5835</code></a> fix(types/sfc): fix withDefaults type inference when using union types (<a href="https://github-redirect.dependabot.com/vuejs/vue-next/issues/4925">#4925</a>)</li> <li><a href="https://github.com/vuejs/vue-next/commit/fa2237f1d824eac511c4246135318594c48dc121"><code>fa2237f</code></a> fix(devtool): improve devtools late injection browser env detection (<a href="https://github-redirect.dependabot.com/vuejs/vue-next/issues/4890">#4890</a>)</li> <li><a href="https://github.com/vuejs/vue-next/commit/e1ee3c4fe8f6d2413593f1daa037df5172c1fa53"><code>e1ee3c4</code></a> refactor(compiler-core): refactor isComponentTag method (<a href="https://github-redirect.dependabot.com/vuejs/vue-next/issues/4934">#4934</a>)</li> <li><a href="https://github.com/vuejs/vue-next/commit/574070f43f804fd855f4ee319936ec770a56cef0"><code>574070f</code></a> fix(compiler-sfc): externalRE support automatic http/https prefix url pattern...</li> <li><a href="https://github.com/vuejs/vue-next/commit/fd7c3407c79e86bf98c8497fed2e0f68d26a733c"><code>fd7c340</code></a> refactor(compiler-sfc): replace filter method with for loop (<a href="https://github-redirect.dependabot.com/vuejs/vue-next/issues/4905">#4905</a>)</li> <li><a href="https://github.com/vuejs/vue-next/commit/9c42a1e2a3385f3b33faed5cdcc430bf8c1fc4b2"><code>9c42a1e</code></a> fix(compiler-sfc): add type for props include Function in prod mode (<a href="https://github-redirect.dependabot.com/vuejs/vue-next/issues/4938">#4938</a>)</li> <li><a href="https://github.com/vuejs/vue-next/commit/f454dd62ab689b348902b01f849ca5347e91ffae"><code>f454dd6</code></a> chore: comments grammar (<a href="https://github-redirect.dependabot.com/vuejs/vue-next/issues/4913">#4913</a>) [ci skip]</li> <li>Additional commits viewable in <a href="https://github.com/vuejs/vue-next/compare/v3.2.21...v3.2.22">compare view</a></li> </ul> </details> <br />

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

</details>

+41 -87

0 comment

2 changed files

dependabot[bot]

pr closed time in 19 days

Pull request review commentholaluz/margarita

BREAKING CHANGE: New icon system

 export default {     },      iconName() {-      return this.title ? this.title : `${this.icon}-icon`+      return this.title ? this.title : `${this.icon}Icon`+    },++    sizingProperties() {+      if (this.size === 'small') {+        return {+          width: '16',+          height: '16',+          viewBox: '0 0 24 24',+        }+      } else if (this.size === 'medium') {+        return {+          width: '24',+          height: '24',+          viewBox: '0 0 24 24',+        }+      }+      return {+        width: '32',+        height: '32',+        viewBox: '0 0 24 24',+      }

fair points!

icurdu

comment created time in 20 days

PullRequestReviewEvent

Pull request review commentholaluz/margarita

BREAKING CHANGE: New icon system

 export default {     },      iconName() {-      return this.title ? this.title : `${this.icon}-icon`+      return this.title ? this.title : `${this.icon}Icon`+    },++    sizingProperties() {+      if (this.size === 'small') {+        return {+          width: '16',+          height: '16',+          viewBox: '0 0 24 24',+        }+      } else if (this.size === 'medium') {+        return {+          width: '24',+          height: '24',+          viewBox: '0 0 24 24',+        }+      }+      return {+        width: '32',+        height: '32',+        viewBox: '0 0 24 24',+      }

premature abstraction? 😬 they are only used here and they don't change responsively, so I don't really see the benefit of porting them to an external file (not yet, at least!)

icurdu

comment created time in 20 days

PullRequestReviewEvent

Pull request review commentholaluz/margarita

BREAKING CHANGE: New icon system

         class="ma-pagination__button ma-pagination__button--backwards"         @click="onButtonClick(currentPage - 1)"       >-        <ma-icon icon="Arrow" width="16" height="16" />+        <ma-icon icon="ChevronLeft" size="medium" title="Back" />

I don't think we need a title here, as the element is nested inside a Button which already has an ARIA label so it will be properly announced:

        <ma-icon icon="ChevronLeft" size="medium" />

if we still want to use a title (If I'm missing something), then I'd use the same label:

        <ma-icon icon="ChevronLeft" size="medium" :title="leftButtonAria" />

again, I believe this is not needed.

(same thing with the button on the right)

icurdu

comment created time in 20 days

PullRequestReviewEvent
more