Prefer Padding Components

SuggestionAuto-fixable

small-rules/prefer-padding-components

Prefer local EqualPadding and DirectionalPadding components over matching <uipadding /> declarations.

Diagnostic Messages

preferDirectionalPadding

Use the local `DirectionalPadding` component when horizontal and vertical padding already match.

preferEqualPadding

Use the local `EqualPadding` component when all four padding values already match.

Configuration

This rule does not accept options.

{
  "jsPlugins": [
    "@pobammer-ts/small-rules"
  ],
  "rules": {
    "small-rules/prefer-padding-components": "error"
  }
}

Examples

Equal padding component replacement

import { EqualPadding } from "../ui/equal-padding";

export function Example(padding: UDim) {
    return <uipadding PaddingBottom={padding} PaddingLeft={padding} PaddingRight={padding} PaddingTop={padding} />;
}

After auto-fix

import { EqualPadding } from "../ui/equal-padding";

export function Example(padding: UDim) {
    return <EqualPadding padding={padding} />;
}

Padding without component context

import { EqualPadding } from "../ui/equal-padding";

export function Example(padding: UDim) {
    return <uipadding PaddingBottom={padding} PaddingLeft={padding} PaddingRight={padding} PaddingTop={padding} />;
}

Related Rules

Prefer Local Portal ComponentRelatedPrefer named local UI wrappers over repeating low-level createPortal/uipadding patterns.Prefer Context StackRelatedContext stacks and padding wrappers both collapse repeated JSX boilerplate into local components.No Redundant Aspect Ratio ConstraintRelatedPadding component preference and redundant aspect-ratio constraints both simplify Roblox UI layout markup.