Skip to content

Add a separator component #231

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

Merged
merged 2 commits into from
Mar 25, 2025

Conversation

lsouoliveira
Copy link
Contributor

This PR adds a separator component based on the shadcn/ui separator.

  • The component supports two orientations: horizontal | vertical.
  • The root element can be customized using the as parameter
  • The element role can be set as separator using the decorative parameter

Doc:
image

@lsouoliveira lsouoliveira force-pushed the add-separator-component branch from 7b2bce1 to 7039999 Compare March 21, 2025 11:07
@lsouoliveira lsouoliveira force-pushed the add-separator-component branch from 7039999 to 803d586 Compare March 21, 2025 11:09
end

def view_template(&)
public_send(@as, **attrs, &)
Copy link
Contributor

Choose a reason for hiding this comment

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

The as parameter could be a symbol, and then we could use tag phlex method here, eg.

Suggested change
public_send(@as, **attrs, &)
tag @as, **attrs, &

Copy link
Contributor Author

@lsouoliveira lsouoliveira Mar 24, 2025

Choose a reason for hiding this comment

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

I added it as tag(@as, **attrs, &) because, without the parentheses, the syntax highlighting was incorrect:

image

Comment on lines 29 to 31
data: {
orientation: @orientation
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Is this data-attribute relevant (eg. for accessibility)? If not, we can remove it.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It's only for styling, allowing different styles to be applied based on the value of data-orientation.

@lsouoliveira lsouoliveira force-pushed the add-separator-component branch from 8ed68e1 to eeb5945 Compare March 24, 2025 20:56
@lsouoliveira lsouoliveira requested a review from stephannv March 24, 2025 20:57
@lsouoliveira lsouoliveira force-pushed the add-separator-component branch from eeb5945 to 902a364 Compare March 24, 2025 21:05
@lsouoliveira lsouoliveira force-pushed the add-separator-component branch from 902a364 to b5fc427 Compare March 24, 2025 21:06
@stephannv stephannv merged commit 2f46e07 into ruby-ui:main Mar 25, 2025
2 checks passed
@stephannv
Copy link
Contributor

Thanks 🥳

@stephannv
Copy link
Contributor

@lsouoliveira do you mind opening a PR adding this component to the docs?

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