-
Notifications
You must be signed in to change notification settings - Fork 241
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
feat: Add top-tier icons #1483
feat: Add top-tier icons #1483
Conversation
5aac462
to
e4d8094
Compare
querybook/webapp/components/DataTableNavigator/DataTableNavigator.tsx
Outdated
Show resolved
Hide resolved
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.
awesome update!!
}> = ({ showTooltip = false, tooltipPos = 'down' }) => { | ||
if (showTooltip) { | ||
return ( | ||
<span |
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 we always return a span, but let props passed to be dynamic?
aria-label="Top Tier" | ||
data-balloon-pos={tooltipPos} | ||
> | ||
<Icon className="ml4" name="Crown" /> |
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.
ml4 should be outside
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.
also i think its better to just pass a className, since hard coding ml4 would be depending on the outer context?
@@ -0,0 +1,23 @@ | |||
import React from 'react'; |
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 put this component in ui/TopTierCrown instead?
@@ -23,6 +23,8 @@ import { Title } from 'ui/Title/Title'; | |||
import { ToggleSwitch } from 'ui/ToggleSwitch/ToggleSwitch'; | |||
|
|||
import './DataTableNavigatorSearch.scss'; | |||
import { Icon } from 'ui/Icon/Icon'; |
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.
small nit: import order
Adds the top tier crown icon in additional places to help with visibility for users:
The component applies consistent styling everywhere, and optionally includes a tool tip (not used where obvious, like in the filter list next to a label)
The crown has been added in the following spots:
Top Tier
tag/buttonOther places where the crown already existed have been updated to use a shared component, which provides consistent styling.