Skip to content
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

Merged
merged 2 commits into from
Nov 4, 2024
Merged

feat: Add top-tier icons #1483

merged 2 commits into from
Nov 4, 2024

Conversation

baumandm
Copy link
Contributor

@baumandm baumandm commented Aug 2, 2024

Adds the top tier crown icon in additional places to help with visibility for users:

Screenshot 2024-08-02 at 6 16 06 PM Screenshot 2024-08-02 at 6 14 11 PM

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:

  1. Search results list (right-aligned icon)
  2. Data Table Mini View in the sidebar
  3. Data Table View, added the crown to the existing Top Tier tag/button

Other places where the crown already existed have been updated to use a shared component, which provides consistent styling.

@baumandm baumandm changed the title fix: Add top-tier icons feat: Add top-tier icons Aug 2, 2024
Copy link
Collaborator

@czgu czgu left a 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
Copy link
Collaborator

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" />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ml4 should be outside

Copy link
Collaborator

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';
Copy link
Collaborator

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';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

small nit: import order

@czgu czgu merged commit d106e2e into pinterest:master Nov 4, 2024
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants