Update eslint-plugin-primer-react
#67
Conversation
🦋 Changeset detectedLatest commit: 2572099 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| @@ -15,10 +15,12 @@ const isUsingAsProp = elem => { | |||
|
|
|||
| const isValidAsUsage = value => validHeadings.includes(value.toLowerCase()) | |||
| const isInvalid = elem => { | |||
| if (elem.attributes.length === 1 && elem.attributes[0].type === 'JSXSpreadAttribute') return; | |||
There was a problem hiding this comment.
I noticed a bug when <Heading> was used with spread props ({...args}), or when passing a variable withas (<Heading as={as}>).
If the spread is the only attribute present on the component, the checks will skip it. Similarly, if the component is using a variable for the as prop, checks will also skip it.
src/configs/recommended.js
Outdated
| Button: 'button', | ||
| IconButton: 'button' | ||
| } | ||
| components: require('./components') |
There was a problem hiding this comment.
I created an individual file for component mapping (components.js). This allows us to consolidate all the mappings we want in one place. It also introduces a custom structure that is currently a proof of concept which should allow us to easily map composable components. The alternative would be adding the object back into recommended.js instead of separating the two.
Would love additional 👀 on this!
| const path = require('path') | ||
|
|
||
| module.exports = ({id}) => { | ||
| const url = new URL(homepage) |
There was a problem hiding this comment.
Added this handy tool from eslint-plugin-github that resolves the url path for documentation. This will allow us to use the docs option easily.
| @@ -15,10 +15,12 @@ const isUsingAsProp = elem => { | |||
|
|
|||
| const isValidAsUsage = value => validHeadings.includes(value.toLowerCase()) | |||
| const isInvalid = elem => { | |||
| if (elem.attributes.length === 1 && elem.attributes[0].type === 'JSXSpreadAttribute') return; | |||
|
I created a draft PR in dotcom that shows this branch working as expected! |
This PR provides the following updates:
eslint-plugin-jsx-a11yandeslint-plugin-githubgithubmappingjsx-a11ycomponent mappinga11y-explicit-headingwhen using spread props, or variable forasdocsoption toa11y-explicit-heading