-
Notifications
You must be signed in to change notification settings - Fork 18
New issue
Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? # to your account
Introduce List component family #516
Conversation
Todo:
|
Switched to using
|
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.
Just a few notes; looks good though, this will be useful.
*/ | ||
|
||
.cf-list-item__disabled { | ||
opacity: 0.666; |
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 opacity is used in several places, would it be worth making it a variable?
export const ListItemContext = createContext<ListItemContextProps>({ | ||
selected: false, | ||
size: ComponentSize.Small, | ||
listItemBackgroundColor: undefined, |
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.
Is undefined
necessary here? Seems redundant to define a default prop as "undefined".
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 context needs some initial value set. I could do null
instead. I could be wrong but I think it will complain if I don't set a value
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.
Ya, defining null would be better than defining undefined.
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.
Good to go with just the undefined
to null
changes.
export type ListItemRef = HTMLDivElement | ||
|
||
export const ListContext = createContext<ListContextProps>({ | ||
listBackgroundColor: undefined, |
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.
we can switch these to null
too.
Why?
Within the currently available components there is no generic "list" component family. The closest components are the
DropownMenu
andDropdownItem
s but they are very opinionated and not designed for contexts outside of dropdowns.In the InfluxDB UI there are a handful of components that resemble a list but each are slightly different. Between those cases, dropdowns, and right click menus there is an opportunity to consolidate and standardize. Why not have one family of components that can serve all these contexts and more?
Changes
List
family of componentsNotes
ListItem
intended for use with<a>
or<Link>
there is a prop for that. Due to how the children ofListItem
and itself relate having an extra DOM element in between throws off the styling.List
components are much more composablebackgroundColor
andgradient
as the means of colorization instead ofComponentColor
enumList
can begin to replace parts of other components such asRightClick
,SelectDropdown
, andMultiSelectDropdown
Screenshots
Checklist
Check all that apply