-
Notifications
You must be signed in to change notification settings - Fork 320
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 divider to combo box categories #528
add divider to combo box categories #528
Conversation
src/components/Combobox/Combobox.jsx
Outdated
@@ -27,6 +27,7 @@ const Combobox = forwardRef( | |||
disabled, | |||
options, | |||
categories, | |||
categoriesDivider, |
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.
please change the prop name to "withCategoriesDivider"
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.
V
@@ -156,9 +156,14 @@ When having a lot of options, you may use headings to categorize them. | |||
workspace: { id: "Workspaces", label: "Workspaces" } | |||
}), []); | |||
return ( | |||
<div className="combobox-stories-styles_row"> |
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.
please wrap examples by using storyDescription component and add titles: "Categories with divider" and without "Categories without divider".
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.
V
@@ -58,6 +58,11 @@ describe("Combobox renders correctly", () => { | |||
expect(tree).toMatchSnapshot(); | |||
}); | |||
|
|||
it("with divider", () => { | |||
const tree = renderer.create(<Combobox categoriesDivider />).toJSON(); |
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 will render a combobox without any data inside and therefore without categories.
so - if there will be a bug in the categories dividers it will not fail the test
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.
V
src/components/Combobox/Combobox.jsx
Outdated
return ( | ||
<div role="group" aria-labelledby={`combox-category-${categoryId}`} key={categoryId}> | ||
<ComboboxCategory category={categories[categoryId]} /> | ||
<ComboboxCategory category={categories[categoryId]} divider={categoriesDivider && categoryIndex !== 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.
the divider should be a separate unit from the category itself. let's draw it here instead of pass it to the ComboboxCategory
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.
V
Basic
npm run plop
) to create a new component.PropTypes
.Style
NewComponent.modules.scss
file inside of theNewComponent
folder.Storybook
/src/NewComponent/__stories__/NewComponent.stories.js
file.Tests