No Redundant Aspect Ratio Constraint

ErrorRoblox

small-rules/no-redundant-aspect-ratio-constraint

Disallow redundant uiaspectratioconstraint children inside components that already manage their own aspect ratio internally.

Diagnostic Messages

redundantAspectRatioConstraint

This component already renders a uiaspectratioconstraint internally. Passing one as a child is redundant and will cause layout issues.

Configuration

This rule does not accept options.

{
  "jsPlugins": [
    "@pobammer-ts/small-rules"
  ],
  "rules": {
    "small-rules/no-redundant-aspect-ratio-constraint": "error"
  }
}

Examples

duplicate aspect ratio constraint

const UI_ASPECT_RATIO_CONSTRAINT = <uiaspectratioconstraint AspectRatio={1.5} />;

function LabelSpritesheet({ children }: { children?: React.ReactNode }) {
  return (
    <imagelabel>
            {children}
            <uiaspectratioconstraint AspectRatio={1.5} />
    </imagelabel>
  );
}

const view = (
  <LabelSpritesheet sprite="icon">
    {UI_ASPECT_RATIO_CONSTRAINT}
      </LabelSpritesheet>
    );

non-redundant layout constraint

function LabelSpritesheet({ children }: { children?: React.ReactNode }) {
  return (
    <imagelabel>
      {children}
      <uiaspectratioconstraint AspectRatio={1.5} />
    </imagelabel>
  );
}

const view = (
  <LabelSpritesheet sprite="icon">
    <uigradient Color={gradient} />
    <textlabel Text="hello" />
      </LabelSpritesheet>
    );

Related Rules

No Useless DefaultRelatedDefault-prop noise and redundant aspect-ratio constraints both strip useless Roblox UI declarations.Prefer Padding ComponentsRelatedPadding component preference and redundant aspect-ratio constraints both simplify Roblox UI layout markup.