Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Divider: Improve default behavior when in vertical orientation #39316

Merged
merged 8 commits into from
Mar 14, 2022

Conversation

mirka
Copy link
Member

@mirka mirka commented Mar 9, 2022

Follow-up to #38842

What?

  • Conditionally renders the divider as an inline element when the orientation is vertical.
  • Improves stories and documentation.

Why?

This ensures that the divider is visible "as expected" in both orientations when inside a flow layout container (not flex). Initially I was only going to improve the docs to demonstrate proper usage in the flex layout case, but I realized that we can also add a conditional display declaration so it just works out of the box.

I'm inclined to classify this as a non-breaking change, because any proper usage of the vertical divider should already be display: inline or inside a flex container (in which case the inline won't matter).

Testing Instructions

npm run storybook:dev and check out the stories for Divider.

  • The vertical orientation works without a flex container.
  • Inside a flex container, it still works as expected as long as it's stretch aligned.

@mirka mirka added [Type] Enhancement A suggestion for improvement. [Type] Developer Documentation Documentation for developers [Package] Components /packages/components Storybook Storybook and its stories for components labels Mar 9, 2022
@mirka mirka requested a review from ajitbohra as a code owner March 9, 2022 13:53
@mirka mirka self-assigned this Mar 9, 2022
@mirka mirka requested a review from ciampo March 9, 2022 13:56
Copy link
Contributor

@ciampo ciampo left a comment

Choose a reason for hiding this comment

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

🎉 🚀

Much better!

packages/components/src/divider/types.ts Outdated Show resolved Hide resolved
@mirka mirka force-pushed the divider/improve-orientation branch from e2148dd to 5140ca5 Compare March 14, 2022 17:39
@mirka mirka merged commit 1545550 into trunk Mar 14, 2022
@mirka mirka deleted the divider/improve-orientation branch March 14, 2022 18:34
@github-actions github-actions bot added this to the Gutenberg 12.9 milestone Mar 14, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components Storybook Storybook and its stories for components [Type] Developer Documentation Documentation for developers [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants