Skip to content

feat(Paper): add borderRadius prop#4910

Closed
pltimme wants to merge 3 commits intomasterfrom
feat/paper-border-radius-prop
Closed

feat(Paper): add borderRadius prop#4910
pltimme wants to merge 3 commits intomasterfrom
feat/paper-border-radius-prop

Conversation

@pltimme
Copy link
Copy Markdown

@pltimme pltimme commented Mar 20, 2026

Summary

Adds a borderRadius prop to the Paper component so consumers can use Picasso's design-system border-radius scale without resorting to inline style overrides.

  • Accepts 'none' | 'sm' | 'md' | 'full' — maps to Tailwind classes rounded-none, rounded-sm (4px), rounded-md (8px), rounded-full
  • Defaults to undefined (no border radius applied — fully backward compatible)
  • Exports PaperBorderRadius type

Motivation

Without this prop, consumers who need rounded Paper surfaces (e.g. stat/metric cards) fall back to style={{ borderRadius: Npx }} with arbitrary pixel values outside the design system's scale. This was observed in downstream tooling where a style={{ borderRadius: 6 }} workaround was documented as a convention — a signal that the prop belongs in the component itself.

Usage

// Rounded stat card
<Paper borderRadius="sm">
  <Container padded={SPACING_6}>
    <Typography variant="heading" size="xlarge">{value}</Typography>
  </Container>
</Paper>

Test plan

  • Existing snapshot test passes unchanged (no default border radius added)
  • New parameterised tests verify each borderRadius value applies the correct Tailwind class
  • New test verifies no radius class is present when prop is omitted

@pltimme pltimme requested a review from a team as a code owner March 20, 2026 15:55
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Mar 20, 2026

🦋 Changeset detected

Latest commit: 879f1be

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 41 packages
Name Type
@toptal/picasso-paper Minor
@toptal/picasso Minor
@topkit/analytics-charts Patch
@toptal/picasso-drawer Patch
@toptal/picasso-dropdown Patch
@toptal/picasso-menu Patch
@toptal/picasso-modal Patch
@toptal/picasso-button Patch
@toptal/picasso-page Patch
@toptal/picasso-account-select Patch
@toptal/picasso-autocomplete Patch
@toptal/picasso-select Patch
@toptal/picasso-rich-text-editor Patch
@toptal/picasso-prompt-modal Patch
@toptal/picasso-forms Patch
@toptal/picasso-query-builder Patch
@toptal/picasso-accordion Patch
@toptal/picasso-alert Patch
@toptal/picasso-application-update-notification Patch
@toptal/picasso-calendar Patch
@toptal/picasso-carousel Patch
@toptal/picasso-file-input Patch
@toptal/picasso-helpbox Patch
@toptal/picasso-notification Patch
@toptal/picasso-outlined-input Patch
@toptal/picasso-pagination Patch
@toptal/picasso-password-input Patch
@toptal/picasso-section Patch
@toptal/picasso-show-more Patch
@toptal/picasso-skeleton-loader Patch
@toptal/picasso-table Patch
@toptal/picasso-tree-view Patch
@toptal/picasso-tagselector Patch
@toptal/picasso-date-select Patch
@toptal/picasso-form Patch
@toptal/picasso-date-picker Patch
@toptal/picasso-dropzone Patch
@toptal/picasso-avatar-upload Patch
@toptal/picasso-input Patch
@toptal/picasso-number-input Patch
@toptal/picasso-timepicker Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions
Copy link
Copy Markdown
Contributor

Fails
🚫

Commit 794ebf0 does not meet requirements of Commit Message Quality:

  • format of commit title is not correct (read more):

    • Title should start with capital letter
    • Title should not end with a full-stop (i.e .)

    Example of a valid commit title:

    • Regular commit message
    • [FOO-1234] Commit with prefix
    • [FOO][BAR] Coupled prefixes
🚫

Commit a17d0d4 does not meet requirements of Commit Message Quality:

  • format of commit title is not correct (read more):

    • Title should start with capital letter
    • Title should not end with a full-stop (i.e .)

    Example of a valid commit title:

    • Regular commit message
    • [FOO-1234] Commit with prefix
    • [FOO][BAR] Coupled prefixes
🚫

Commit 879f1be does not meet requirements of Commit Message Quality:

  • format of commit title is not correct (read more):

    • Title should start with capital letter
    • Title should not end with a full-stop (i.e .)

    Example of a valid commit title:

    • Regular commit message
    • [FOO-1234] Commit with prefix
    • [FOO][BAR] Coupled prefixes
🚫

The pull request title is missing a Jira issue code. Correct format '[ASD-123] Add a cool feature'. If you're working without a Jira issue then add a 'no-jira' label to your pull request.

🚫 Please assign someone to this PR before merging.

Generated by 🚫 dangerJS against 879f1be

@pltimme
Copy link
Copy Markdown
Author

pltimme commented Mar 20, 2026

Dropping this — the right fix is to use the existing Tailwind class directly via className on Paper. No new prop needed.

@pltimme pltimme closed this Mar 20, 2026
@github-actions
Copy link
Copy Markdown
Contributor

🗑️ Storybook preview cleaned up

The preview deployment has been automatically removed since this PR was closed.

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.

1 participant