Skip to content

Fiddle: add maxWidth to ContainingView#241

Merged
krishan711 merged 1 commit into
mainfrom
conmaxw
Jan 24, 2026
Merged

Fiddle: add maxWidth to ContainingView#241
krishan711 merged 1 commit into
mainfrom
conmaxw

Conversation

@krishan711
Copy link
Copy Markdown
Contributor

Description

Screenshots:

Checklist:

  • I have updated the CHANGELOG with a summary of my changes
  • I have updated the documentation accordingly

Copilot AI review requested due to automatic review settings January 24, 2026 20:22
@krishan711 krishan711 merged commit bdb8f5f into main Jan 24, 2026
8 checks passed
@krishan711 krishan711 deleted the conmaxw branch January 24, 2026 20:24
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adds a maxWidth prop to the ContainingView wrapper component, allowing developers to override the default maximum width (--kiba-screen-width-max) with a custom value.

Changes:

  • Added maxWidth prop to IContainingViewProps interface
  • Updated component logic to use custom maxWidth when provided, falling back to CSS variable
  • Updated CHANGELOG with MINOR version entry

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File Description
src/wrappers/containingView/component.tsx Added optional maxWidth prop to interface and implementation to allow custom maximum width override
CHANGELOG.md Documented the new maxWidth prop as a MINOR change


export interface IContainingViewProps extends IWrapperProps {
isCenteredHorizontally?: boolean;
maxWidth?: string;
Copy link

Copilot AI Jan 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new maxWidth prop needs a Storybook story example demonstrating its usage. According to CONTRIBUTING.md: "Every component must be documented, and every variant must have a story example."

Consider adding a story that shows how to use a custom maxWidth value, for example:

export const CustomMaxWidth: Story = {
  render: (args) => (
    <ContainingView {...args}>
      <Box variant='card'>
        <Text>Content constrained to custom width</Text>
      </Box>
    </ContainingView>
  ),
  args: {
    maxWidth: '500px',
  },
};

This will help users discover and understand how to use the maxWidth prop.

Copilot generated this review using guidance from repository custom instructions.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants