prefer-padding-components

Prefer local padding components when a <uipadding /> element already matches them.

Rule details Suggestion

This rule checks empty <uipadding /> elements with exactly these four attributes: PaddingTop, PaddingBottom, PaddingLeft, and PaddingRight.

It reports two cases:

Shape	Report
All four values are the same	EqualPadding
PaddingTop matches PaddingBottom, and PaddingLeft matches PaddingRight	DirectionalPadding

The rule only reports when the project already has a matching local component.

When it skips

The rule does nothing when the element has spread attributes, duplicate padding attributes, extra attributes, or real children.

Examples

Incorrect

Repeated padding attributes

<uipadding
  PaddingBottom={padding}
  PaddingLeft={padding}
  PaddingRight={padding}
  PaddingTop={padding}
/>;

Correct

Matching local components

<EqualPadding padding={padding} />;

<DirectionalPadding horizontal={horizontal} vertical={vertical} />;

Auto-fix behavior

Auto-fix only runs in .jsx and .tsx files, and only when the current file already imports exactly one matching local component.

For DirectionalPadding, the generated props follow the local component contract used by the rule:

• horizontal comes from PaddingTop and PaddingBottom
• vertical comes from PaddingLeft and PaddingRight

Related rules

prefer-udim2-shorthand Replaces repeated Roblox constructor patterns with shorter forms

prefer-context-stack Pushes repeated JSX structure into a shared component