-
Notifications
You must be signed in to change notification settings - Fork 1.2k
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
Add sistent-divider-component #6048
base: master
Are you sure you want to change the base?
Add sistent-divider-component #6048
Conversation
Signed-off-by: Mdkaif-123 <[email protected]>
🚀 Preview for commit b43e1fe at: https://672545b8e00adfb0dac1599f--layer5.netlify.app |
@mdkaifansari04 |
I'll be happy to discuss this on meeting |
Signed-off-by: Mdkaif-123 <[email protected]>
Signed-off-by: Mdkaif-123 <[email protected]>
Signed-off-by: Mdkaif-123 <[email protected]>
cfcb2bc
to
c1efa8c
Compare
🚀 Preview for commit c1efa8c at: https://672a90c2dd3a3756f3b53764--layer5.netlify.app |
Hello, @mdkaifansari04, can you remove the excess indentation from the array of code in the code example so that it looks more uniform? |
Sure I'll consider fixing that @Vidit-Kushwaha |
Signed-off-by: Mdkaif-123 <[email protected]>
@Vidit-Kushwaha Can you please check it, if its perfect now |
🚀 Preview for commit 82201de at: https://672bc9cf447ceb3ac104eed3--layer5.netlify.app |
You PR looks fine , but it will look more good if you add a section in which you will explain about the Props that will be used while working with this component. |
@NishantSinghhhhh It would be very helpful if you could explain this a bit |
Thanks @NishantSinghhhhh, it was very helpful though |
…/sistent-divider-component Signed-off-by: Md Kaif Ansari <[email protected]>
Signed-off-by: Mdkaif-123 <[email protected]>
🚀 Preview for commit 1b49a8f at: https://673245855c8bad752448ff53--layer5.netlify.app |
Signed-off-by: Mdkaif-123 <[email protected]>
Signed-off-by: Mdkaif-123 <[email protected]>
🚀 Preview for commit 089e64c at: https://67325511f7863492bcf6869c--layer5.netlify.app |
<Divider variant="inset" component="li" /> | ||
<ListItem> | ||
<ListItemText primary="Middle variant below" /> | ||
</ListItem> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
} | ||
|
||
h5 { | ||
padding: 2rem 0; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you please tell me why are you changing styles of this section?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks good to me.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Overall looks great. Made a few suggestions for your consideration. Thank you.
</List> | ||
</SistentThemeProvider> | ||
</div> | ||
<CodeBlock name="variant-example" code={codes[0]} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Curious if it would make this more readable if instead of using array position for codes we use some map w/ a meaningful id so that if someone has to change it they will get some context of what each element in the array is.
"& > :not(style) ~ :not(style)": { | ||
marginTop: theme.spacing(2), | ||
}, | ||
})); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
anyway we can simplify this?
<a id="Different Ways to Use Divider"> | ||
<h2>Ways to use Divider Component</h2> | ||
</a> | ||
<p>Here are ways to use the Divider component effectively:</p> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[nit] Here are a few ways ...
<br /> | ||
<p> | ||
If you're using the Divider to wrap other elements, such as text or | ||
chips, we recommend changing its rendered element to a plain |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
curious if a new contributor reading this doc will know what chips are? Idk if a link or referencing it as a component will make this more clear?
<h3>Accessibility</h3> | ||
</a> | ||
<p> | ||
Due to its implicit role of separator, the Divider, which is a |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[nit] "Because the Divider serves as an implicit separator, it is announced by screen readers as a..."
Thanks @ianrwhitney for your feedback, I'll make sure update it accordingly |
Hi @mdkaifansari04 Facing issues merging your PR in Sistent? We'll cover:
Get more information: here 👥 Get involved:
Don’t miss out. 🚀 |
Description
Added Sistent Divider component with detailed documentation and clean examples
This PR fixes #5917
Notes for Reviewers
Docs Screenshots
Signed commits