eslint-plugin-nextfriday 1.17.0 → 1.19.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # eslint-plugin-nextfriday
 
+## 1.19.0
+
+### Minor Changes
+
+- [#83](https://github.com/next-friday/eslint-plugin-nextfriday/pull/83) [`b7143d2`](https://github.com/next-friday/eslint-plugin-nextfriday/commit/b7143d2f779ca1ca34f6562d09c1a6168b74c338) Thanks [@joetakara](https://github.com/joetakara)! - Add jsx-no-ternary-null rule to enforce logical AND over ternary with null/undefined in JSX
+
+## 1.18.0
+
+### Minor Changes
+
+- [#81](https://github.com/next-friday/eslint-plugin-nextfriday/pull/81) [`081326a`](https://github.com/next-friday/eslint-plugin-nextfriday/commit/081326adf199aee711e97b1627def3bf867ad89c) Thanks [@joetakara](https://github.com/joetakara)! - Add hyphenated string group to jsx-sort-props for props like aria-label and data-slot. Fix jsx-newline-between-elements to include self-closing elements
+
 ## 1.17.0
 
 ### Minor Changes

package/README.md

@@ -126,6 +126,7 @@ export default [
       "nextfriday/jsx-no-inline-object-prop": "error",
       "nextfriday/jsx-no-newline-single-line-elements": "error",
       "nextfriday/jsx-no-non-component-function": "error",
+      "nextfriday/jsx-no-ternary-null": "error",
       "nextfriday/jsx-no-variable-in-callback": "error",
       "nextfriday/jsx-require-suspense": "error",
       "nextfriday/jsx-simple-props": "error",
@@ -217,6 +218,7 @@ export default [
 | [jsx-no-inline-object-prop](docs/rules/JSX_NO_INLINE_OBJECT_PROP.md)                     | Disallow inline object literals in JSX props                          | ❌      |
 | [jsx-no-newline-single-line-elements](docs/rules/JSX_NO_NEWLINE_SINGLE_LINE_ELEMENTS.md) | Disallow empty lines between single-line sibling JSX elements         | ✅      |
 | [jsx-no-non-component-function](docs/rules/JSX_NO_NON_COMPONENT_FUNCTION.md)             | Disallow non-component functions at top level in .tsx/.jsx files      | ❌      |
+| [jsx-no-ternary-null](docs/rules/JSX_NO_TERNARY_NULL.md)                                 | Enforce logical AND over ternary with null/undefined in JSX           | ✅      |
 | [jsx-no-variable-in-callback](docs/rules/JSX_NO_VARIABLE_IN_CALLBACK.md)                 | Disallow variable declarations inside callback functions in JSX       | ❌      |
 | [jsx-require-suspense](docs/rules/JSX_REQUIRE_SUSPENSE.md)                               | Require lazy-loaded components to be wrapped in Suspense              | ❌      |
 | [jsx-simple-props](docs/rules/JSX_SIMPLE_PROPS.md)                                       | Enforce simple prop values (strings, variables, callbacks, ReactNode) | ❌      |
@@ -240,10 +242,10 @@ export default [
 | -------------------- | -------- | ---------- | --------- | ------------- | ----------- |
 | `base`               | warn     | 36         | 0         | 0             | 36          |
 | `base/recommended`   | error    | 36         | 0         | 0             | 36          |
-| `react`              | warn     | 36         | 14        | 0             | 50          |
-| `react/recommended`  | error    | 36         | 14        | 0             | 50          |
-| `nextjs`             | warn     | 36         | 14        | 1             | 51          |
-| `nextjs/recommended` | error    | 36         | 14        | 1             | 51          |
+| `react`              | warn     | 36         | 15        | 0             | 51          |
+| `react/recommended`  | error    | 36         | 15        | 0             | 51          |
+| `nextjs`             | warn     | 36         | 15        | 1             | 52          |
+| `nextjs/recommended` | error    | 36         | 15        | 1             | 52          |
 
 ### Base Configuration Rules (36 rules)
 
@@ -286,7 +288,7 @@ Included in `base`, `base/recommended`, and all other presets:
 - `nextfriday/sort-type-alphabetically`
 - `nextfriday/sort-type-required-first`
 
-### JSX Rules (14 rules)
+### JSX Rules (15 rules)
 
 Additionally included in `react`, `react/recommended`, `nextjs`, `nextjs/recommended`:
 
@@ -296,6 +298,7 @@ Additionally included in `react`, `react/recommended`, `nextjs`, `nextjs/recomme
 - `nextfriday/jsx-no-inline-object-prop`
 - `nextfriday/jsx-no-newline-single-line-elements`
 - `nextfriday/jsx-no-non-component-function`
+- `nextfriday/jsx-no-ternary-null`
 - `nextfriday/jsx-no-variable-in-callback`
 - `nextfriday/jsx-pascal-case`
 - `nextfriday/jsx-require-suspense`
@@ -329,7 +332,7 @@ Additionally included in `nextjs`, `nextjs/recommended` only:
 
 ## Agent Skill
 
-This plugin ships with an [Agent Skill](https://github.com/anthropics/skills) that teaches AI coding assistants (Claude Code, Cursor, etc.) all 51 rules so they generate compliant code from the start.
+This plugin ships with an [Agent Skill](https://github.com/anthropics/skills) that teaches AI coding assistants (Claude Code, Cursor, etc.) all 52 rules so they generate compliant code from the start.
 
 ```bash
 npx skills add next-friday/eslint-plugin-nextfriday --skill eslint-plugin-nextfriday

package/docs/rules/JSX_NO_TERNARY_NULL.md

@@ -0,0 +1,42 @@
+# jsx-no-ternary-null
+
+Enforce logical AND over ternary with null/undefined in JSX expressions.
+
+> This rule is auto-fixable using `--fix`.
+
+## Rule Details
+
+This rule flags ternary expressions inside JSX where one branch is `null` or `undefined`. These patterns are better expressed using the logical AND (`&&`) operator, which is more concise and idiomatic in React.
+
+### Why?
+
+- **Readability**: `{condition && <Component />}` is cleaner than `{condition ? <Component /> : null}`
+- **Consistency**: Encourages a single pattern for conditional rendering
+- **Conciseness**: Removes unnecessary null/undefined branches
+
+## Examples
+
+### Incorrect
+
+```tsx
+<div>{condition ? <span>Hello</span> : null}</div>
+<div>{condition ? <Component /> : undefined}</div>
+<div>{condition ? null : <span>Fallback</span>}</div>
+```
+
+### Correct
+
+```tsx
+<div>{condition && <span>Hello</span>}</div>
+<div>{condition && <Component />}</div>
+<div>{!condition && <span>Fallback</span>}</div>
+<div>{condition ? <A /> : <B />}</div>
+```
+
+## When Not To Use It
+
+If your team prefers explicit ternary expressions for conditional rendering, even when one branch is null or undefined.
+
+## Related Rules
+
+- [no-nested-ternary](JSX_NO_TERNARY_NULL.md)

package/docs/rules/JSX_SORT_PROPS.md

@@ -6,13 +6,14 @@ Enforce JSX props are sorted by value type.
 
 This rule enforces a consistent ordering of JSX props based on the type of their value. Props must appear in the following order:
 
-1. **String** - String literals and template literals
-2. **Number/Boolean/Null** - Numeric literals, boolean literals, null, and undefined
-3. **Expression** - Variable references, member expressions, call expressions, and other dynamic values
-4. **Object/Array** - Inline objects and arrays
-5. **Function** - Arrow functions and function expressions
-6. **JSX Element** - JSX elements and fragments
-7. **Shorthand boolean** - Props with no value (e.g., `disabled`, `required`)
+1. **String** - String literals and template literals (e.g., `className="cover"`)
+2. **Hyphenated string** - Props with hyphenated names and string values (e.g., `aria-label="label"`, `data-slot="nav"`)
+3. **Number/Boolean/Null** - Numeric literals, boolean literals, null, and undefined
+4. **Expression** - Variable references, member expressions, call expressions, and other dynamic values
+5. **Object/Array** - Inline objects and arrays
+6. **Function** - Arrow functions and function expressions
+7. **JSX Element** - JSX elements and fragments
+8. **Shorthand boolean** - Props with no value (e.g., `disabled`, `required`)
 
 Spread attributes (`{...props}`) reset the ordering context.
 
@@ -29,7 +30,6 @@ Spread attributes (`{...props}`) reset the ordering context.
 ```tsx
 <Component disabled title="hello" />
 <Component onClick={() => {}} count={42} />
-<Component icon={<Icon />} style={{ color: "red" }} />
 <Component className="cover" src={src} fill sizes={sizes} />
 ```
 
@@ -38,6 +38,7 @@ Spread attributes (`{...props}`) reset the ordering context.
 ```tsx
 <Component
   title="hello"
+  aria-label="close"
   count={100}
   src={src}
   style={{ color: "red" }}