Skip to content

fix: improve stack to use css only#117

Merged
aulneau merged 4 commits intomainfrom
fix/stack
Jun 20, 2021
Merged

fix: improve stack to use css only#117
aulneau merged 4 commits intomainfrom
fix/stack

Conversation

@aulneau
Copy link
Copy Markdown
Contributor

@aulneau aulneau commented Jun 18, 2021

This updates the Stack component to rely on CSS only, no longer passing props for spacing.

@aulneau aulneau requested a review from kyranjamie June 18, 2021 17:07
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Jun 18, 2021

🦋 Changeset detected

Latest commit: a910b89

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

This PR includes changesets to release 1 package
Name Type
@stacks/ui Minor

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

@vercel
Copy link
Copy Markdown

vercel Bot commented Jun 18, 2021

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/blockstack/blockstack-ui/HwTkdMN7VrdM5EaEVUE6v1QKBZCd
✅ Preview: Failed

[Deployment for a910b89 failed]

Copy link
Copy Markdown
Contributor

@kyranjamie kyranjamie left a comment

Choose a reason for hiding this comment

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

Thanks @aulneau—big improvement 💯

Comment thread packages/ui/src/stack.tsx Outdated
) as React.ReactElement[];
}

export const selector = '& > *:not(:last-child)';
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Yeah, I tried it and it works if we wanted to do spacing for basically :not(:first-child), but that flips how things have been. Previously margins had been set to the right and bottom (for horizontal/vertical stack), and that selector would make it left, top. I noticed some interesting bugs where if certain things switched out, for a split second, spacing would be added to them. doing :not(:last-child) replicates the original behavior and works well in the wallet.

I'll test out *:not(style):not(:last-child) for SSR

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