Vue 3x - Update for titleId and maskId prop #455

jasonlundien · 2023-04-25T18:25:09Z

This PR addresses this bug report: title property breaks snapshots#181

Currently we cannot add and set a title property without a random generated string being attached to the aria-labelledby and the title id.

This PR will allow us to set a title and titleId so that there would NOT be a random generated string if set, and snapshot tests will now pass.

@robmadole --- can you review code for accuracy?

jasonlundien · 2023-04-25T18:59:13Z

src/components/FontAwesomeIcon.js

+    },
+    titleId: {
+      type: String,
+      default: null,


added titleId

jasonlundien · 2023-04-25T18:59:32Z

src/components/FontAwesomeIcon.js

+    },
+    maskId: {
+      type: String,
+      default: null,


added maskId

jasonlundien · 2023-04-25T19:06:35Z

Prettier has taken over these files as well @robmadole. I left comments where I changed the code (6 total).

index.es.js and index.js were updated automatically with npm run dist
I did have to manually update index.d.ts, which is 1 of the 6 comments.

robmadole · 2023-05-19T20:28:55Z

@jasonlundien the changes look good. But the stuff prettier did is a little annoying. Were you surprised by them? I almost wonder if something is misconfigured in VSCode.

jasonlundien · 2023-07-10T19:19:22Z

@robmadole ---

@jasonlundien the changes look good. But the stuff prettier did is a little annoying. Were you surprised by them? I almost wonder if something is misconfigured in VSCode.

I went back and adjusted my prettier settings to reflect those of Font Awesome. The prettier changes are now fewer than they were but you will still see some the changes --- for consistency. The exception is the index.es.js file which prettier did quite a number on... this file was auto updated when I ran the npm run dist.

I am fine with these prettier changes and being consistent going forward if you are ?!

jasonlundien · 2023-07-10T20:58:34Z

src/components/__tests__/FontAwesomeIcon.test.js

-    const wrapper = mountFromProps({ icon: faCoffee, size: size })
+  ;['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x'].forEach(
+    (size) => {
+      const wrapper = mountFromProps({ icon: faCoffee, size: size })


jasonlundien · 2023-07-10T21:01:36Z

src/components/FontAwesomeIcon.js

+        }
+      },
+      { immediate: true }
+    )


jasonlundien · 2023-07-10T21:01:44Z

src/components/FontAwesomeIcon.js


-    const vnode = computed(() => renderedIcon.value ? convert(renderedIcon.value.abstract[0], {}, attrs) : null)
+    const vnode = computed(() => (renderedIcon.value ? convert(renderedIcon.value.abstract[0], {}, attrs) : null))


jasonlundien · 2023-07-10T21:02:19Z

src/components/FontAwesomeIcon.js

+        title: props.title,
+        titleId: props.titleId,
+        maskId: props.maskId
+      })


prettier + added titleId: props.titleId, and maskId: props.maskId

jasonlundien · 2023-07-10T21:02:30Z

src/components/FontAwesomeIcon.js

-        ? faParse.transform(props.transform)
-        : props.transform
-    ))
+    const transform = computed(() => objectWithKey('transform', typeof props.transform === 'string' ? faParse.transform(props.transform) : props.transform))


jasonlundien · 2023-07-10T21:02:34Z

src/components/FontAwesomeIcon.js

  },

-  setup (props, { attrs }) {
+  setup(props, { attrs }) {


jasonlundien · 2023-07-10T21:02:39Z

src/components/FontAwesomeIcon.js

@@ -133,35 +141,38 @@ export default defineComponent({
    spinReverse: {
      type: Boolean,
      default: false
-    },
+    }


jasonlundien · 2023-07-10T21:02:47Z

src/components/FontAwesomeIcon.js

@@ -4,7 +4,7 @@ import convert from '../converter'
 import log from '../logger'
 import { objectWithKey, classList } from '../utils'

-function normalizeIconArgs (icon) {
+function normalizeIconArgs(icon) {


jasonlundien requested a review from robmadole April 25, 2023 18:40

jasonlundien commented Apr 25, 2023

View reviewed changes

src/components/FontAwesomeIcon.js Outdated

},

titleId: {

type: String,

default: null,

Copy link

Member Author

jasonlundien Apr 25, 2023

Choose a reason for hiding this comment

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

added titleId

jasonlundien commented Apr 25, 2023

View reviewed changes

src/components/FontAwesomeIcon.js Outdated

},

maskId: {

type: String,

default: null,

Copy link

Member Author

jasonlundien Apr 25, 2023

Choose a reason for hiding this comment

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

added maskId

jasonlundien force-pushed the vue-3x-update-title-id-and-mask-id-prop branch from a22cfc4 to 3072263 Compare April 27, 2023 02:36

jasonlundien force-pushed the vue-3x-update-title-id-and-mask-id-prop branch 2 times, most recently from d458f1f to 251746c Compare July 10, 2023 19:27

jasonlundien closed this Jul 10, 2023

jasonlundien force-pushed the vue-3x-update-title-id-and-mask-id-prop branch from 7626f9a to 444dbfa Compare July 10, 2023 19:44

jasonlundien reopened this Jul 10, 2023

jasonlundien force-pushed the vue-3x-update-title-id-and-mask-id-prop branch 2 times, most recently from 91d7b79 to 56462a1 Compare July 10, 2023 20:25

jasonlundien commented Jul 10, 2023

View reviewed changes

src/components/FontAwesomeIcon.js

}

},

{ immediate: true }

)

Copy link

Member Author

jasonlundien Jul 10, 2023

Choose a reason for hiding this comment

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

prettier

jasonlundien commented Jul 10, 2023

View reviewed changes

src/components/FontAwesomeIcon.js

},

setup (props, { attrs }) {

setup(props, { attrs }) {

Copy link

Member Author

jasonlundien Jul 10, 2023

Choose a reason for hiding this comment

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

prettier

jasonlundien commented Jul 10, 2023

View reviewed changes

jasonlundien force-pushed the vue-3x-update-title-id-and-mask-id-prop branch from bab2321 to b5e467a Compare July 10, 2023 21:03

jasonlundien force-pushed the vue-3x-update-title-id-and-mask-id-prop branch 3 times, most recently from 3b3741b to 3c6538d Compare November 1, 2023 20:12

jasonlundien and others added 4 commits November 1, 2023 15:13

prettier fixups

e8652bf

add tests for family (#458)

d745dd0

add title id and mask id with test

ecbe6a6

fixup prettier changes

5c529c8

fixup spelling on test title

5d1d3ce

jasonlundien force-pushed the vue-3x-update-title-id-and-mask-id-prop branch from 3c6538d to 30929b9 Compare November 1, 2023 20:13

add prettier config and some fixups

15852d3

jasonlundien force-pushed the vue-3x-update-title-id-and-mask-id-prop branch from c95cac7 to 15852d3 Compare November 1, 2023 20:32

jasonlundien merged commit 90cad31 into 3.x Nov 1, 2023
48 checks passed

jasonlundien deleted the vue-3x-update-title-id-and-mask-id-prop branch November 1, 2023 20:48

jasonlundien mentioned this pull request Nov 6, 2023

<font-awesome-icon> title property breaks snapshots #181

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue 3x - Update for titleId and maskId prop #455

Vue 3x - Update for titleId and maskId prop #455

jasonlundien commented Apr 25, 2023 •

edited

jasonlundien Apr 25, 2023

jasonlundien Apr 25, 2023

jasonlundien commented Apr 25, 2023 •

edited

robmadole commented May 19, 2023

jasonlundien commented Jul 10, 2023 •

edited

jasonlundien Jul 10, 2023

jasonlundien Jul 10, 2023

jasonlundien Jul 10, 2023

jasonlundien Jul 10, 2023

jasonlundien Jul 10, 2023

jasonlundien Jul 10, 2023

jasonlundien Jul 10, 2023

jasonlundien Jul 10, 2023


		const vnode = computed(() => renderedIcon.value ? convert(renderedIcon.value.abstract[0], {}, attrs) : null)
		const vnode = computed(() => (renderedIcon.value ? convert(renderedIcon.value.abstract[0], {}, attrs) : null))

Vue 3x - Update for titleId and maskId prop #455

Vue 3x - Update for titleId and maskId prop #455

Conversation

jasonlundien commented Apr 25, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jasonlundien commented Apr 25, 2023 • edited

robmadole commented May 19, 2023

jasonlundien commented Jul 10, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jasonlundien commented Apr 25, 2023 •

edited

jasonlundien commented Apr 25, 2023 •

edited

jasonlundien commented Jul 10, 2023 •

edited