Add sistent-divider-component #6048
Conversation
Signed-off-by: Mdkaif-123 <[email protected]>
github-actions
bot
added
area/projects
|
🚀 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]>
mdkaifansari04
force-pushed
the
feat/sistent-divider-component
branch
from
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 |
|
Can you add something similar to this ? |
|
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.
Can you please align the lorem ipsum lines with the other text?
| } | ||
|
|
||
| h5 { | ||
| padding: 2rem 0; |
There was a problem hiding this comment.
Can you please tell me why are you changing styles of this section?
| </List> | ||
| </SistentThemeProvider> | ||
| </div> | ||
| <CodeBlock name="variant-example" code={codes[0]} /> |
There was a problem hiding this comment.
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), | ||
| }, | ||
| })); |
| <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> |
| <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.
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.
[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 |
Description
Added Sistent Divider component with detailed documentation and clean examples
This PR fixes #5917
Notes for Reviewers
Docs Screenshots
Signed commits