Skip to content

feat(Inline): add justifyContent prop support #1665

Description

@Marcosld

Summary

The Inline component currently does not expose a justifyContent prop for endpoint-alignment values, which limits horizontal alignment control when the component's items do not fill the full container width.

Motivation

The space prop already accepts 'between' | 'around' | 'evenly', covering the distributional justify-content values. What is not currently possible is pushing a group of items to the right or centre of the container — for example, placing a single action button flush-right in a card header:

// Not achievable today — no way to right-align the group
<Inline space={16} justifyContent="flex-end">
  <Button variant="secondary">Cancel</Button>
  <Button variant="primary">Save</Button>
</Inline>

This forces consumers to wrap Inline in an extra element with custom CSS, adding unnecessary complexity.

Proposed API

Add a justifyContent prop restricted to the values not already covered by space:

<Inline space={16} justifyContent="flex-end">
  <Tag type="active">Active</Tag>
  <Tag type="inactive">Inactive</Tag>
</Inline>

Suggested accepted values:

Value Description
"flex-start" (default) Items aligned to the start — current behaviour
"flex-end" Items aligned to the end (right in LTR)
"center" Items centred horizontally

space-between, space-around, and space-evenly are already handled by the space prop and do not need to be duplicated here.

Acceptance criteria

  • Inline accepts an optional justifyContent prop ("flex-start" | "flex-end" | "center").
  • The default value preserves current behaviour ("flex-start").
  • The prop is reflected in the rendered container's justify-content CSS property.
  • TypeScript types are updated.
  • Storybook story demonstrates at least two values ("flex-start" and "flex-end").
  • Existing snapshot/unit tests remain green.

Additional context

This request was raised while building a metrics dashboard that uses Inline to place action buttons flush-right in a card header. Without justifyContent: "flex-end", the layout requires an extra wrapper element.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions