[New] jsx-no-literals Add elementOverrides option and the ability…

… to ignore this rule on specific elements

CHANGELOG.md

@@ -8,6 +8,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 
 ### Added
 * [`no-string-refs`]: allow this.refs in > 18.3.0 ([#3807][] @henryqdineen)
+* [`jsx-no-literals`] Add `elementOverrides` option and the ability to ignore this rule on specific elements ([#3812][] @Pearce-Ropion)
 
 ### Fixed
 * [`function-component-definition`], [`boolean-prop-naming`], [`jsx-first-prop-new-line`], [`jsx-props-no-multi-spaces`], `propTypes`: use type args ([#3629][] @HenryBrown0)
@@ -20,6 +21,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 
 [#3632]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3632
 
+[#3812]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3812
 [#3629]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3629
 [#3817]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3817
 [#3807]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3807

docs/rules/jsx-no-literals.md

@@ -34,6 +34,61 @@ The supported options are:
 - `allowedStrings` - An array of unique string values that would otherwise warn, but will be ignored.
 - `ignoreProps` (default: `false`) - When `true` the rule ignores literals used in props, wrapped or unwrapped.
 - `noAttributeStrings` (default: `false`) - Enforces no string literals used in attributes when set to `true`.
+- `elementOverrides` - An object where the keys are the element names and the values are objects with the same options as above. This allows you to specify different options for different elements.
+
+### `elementOverrides`
+
+The `elementOverrides` option allows you to specify different options for different elements. This is useful when you want to enforce different rules for different elements. For example, you may want to allow string literals in `Button` elements, but not in the rest of your application.
+
+The element name only accepts component names.
+HTML element tag names are not supported. Component names are case-sensitive and should exactly match the name of the component as it is used in the JSX.
+It can also be the name of a compound component (ie. `Modal.Button`).
+
+Specifying options creates a new context for the rule, so the rule will only apply the new options to the specified element and its children (if `applyToNestedElements` is `true` - see below).
+This means that the root rule options will not apply to the specified element.
+
+In addition to the options above (`noStrings`, `allowedStrings`, `noAttributeStrings` and `ignoreProps`), you can also specify the the following options that are specific to `elementOverrides`:
+
+- `allowElement` (default: `false`) - When `true` the rule will allow the specified element to have string literals as children, wrapped or unwrapped without warning.
+- `applyToNestedElements` (default: `true`) - When `false` the rule will not apply the current options set to nested elements. This is useful when you want to apply the rule to a specific element, but not to its children.
+
+**Note**: As this rule has no way of differentiating between different componets with the same name, it is recommended to use this option with specific components that are unique to your application.
+
+#### `elementOverrides` Examples
+
+The following are **correct** examples that demonstrate how to use the `elementOverrides` option:
+
+```js
+// "react/jsx-no-literals": [<enabled>, {"elementOverrides": { "Button": {"allowElement": true} }}]
+
+var Hello = <div>{'test'}</div>;
+var World = <Button>test</Button>;
+```
+
+```js
+// "react/jsx-no-literals": [<enabled>, {"elementOverrides": { "Text": {"allowElement": true} }}]
+
+var World = <Text>Hello <a href="a">world</a></Text>;
+```
+
+```js
+// "react/jsx-no-literals": [<enabled>, {"elementOverrides": { "Text": {"allowElement": true, "applyToNestedElements": false} }}]
+
+var linkText = 'world';
+var World = <Text>Hello <a href="a">{linkText}</a></Text>;
+```
+
+```js
+// "react/jsx-no-literals": [<enabled>, {"noStrings": true, "elementOverrides": { "Button": {"noStrings": false} }}]
+// OR
+// "react/jsx-no-literals": [<enabled>, {"noStrings": true, "elementOverrides": { "Button": {} }}]
+
+var test = 'test'
+var Hello = <div>{test}</div>;
+var World = <Button>{'test'}</Button>;
+```
+
+## Examples
 
 To use, you can specify as follows: